@import "./common/style.css";
// @import "common/header1";
@import "./common/header.css";
@import "./common/pro-header.css";  //导航下滑固定样式
@import "./common/footer.css";
body {
  color: #2B2E33;
}
.t-l {
  text-align: left;
}
.t-c {
  text-align: center!important;
}
.color-white {
  color: #fff;
}
.cursor-p {
  cursor: pointer;
}
.f-s-14 {
  font-size: 1.4rem;
}
.f-w-600 {
  font-weight: 600;
}
.p-t20 {
  padding-top: 2rem;
}
.p-t30 {
  padding-top: 3rem;
}
.p-l20 {
  padding-left: 2rem;
}
.p-r20 {
  padding-right: 2rem;
}
.banner-box {
  width: 100%;
  position: relative;
  //max-height: 600px;
  //overflow: hidden;
  > img {
    width: 100%;
  }
  .container {
    position: absolute;
    top: 19.8rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .banner-title {
    font-size: 4.8rem;
    line-height: 4.8rem;
    text-align: left;
  }
  .banner-sub-title {
    margin-top: 3rem;
    font-size: 2.4rem;
    line-height: 2.4rem;
  }
  .banner-desc {
    margin-top: 1.8rem;
    font-size: 1.6rem;
    line-height: 1.6rem;
  }
}
.banner--button {
  margin-top: 3rem;
  display: inline-block;
  padding: 1.5rem 5.2rem 1.5rem 2.8rem;
  background: #404DFF;
  border-radius: 25px;
  font-size: 1.6rem;
  position: relative;
}
.try-button:hover {
  box-shadow: 0px 0px 10px 0px rgba(64, 77, 255, 0.36);
  transition: all .5s ease-in-out;
}
//min-height: 600px;
.try-button--icon {
  width: 1.6rem;
  position: absolute;
  right: 2.5rem;
  top: 1.6rem;
  -webkit-animation: bounce 1.75s infinite;
  animation: bounce 1.75s infinite;
  transition: border .15s ease-in-out,transform .3s ease-in;
}
.modal-1 {
  padding-top: 8rem;
  .modal-1-box {
    width: 100%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .modal-1-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 10px;
    text-align: center;
    margin: auto;
    .desc {
      font-size: 2.4rem;
      font-weight: 600;
      color: #FFFFFF;
    }
    > img {
      width: 21.97%;
      margin: 35% auto 10%;
    }
  }
  .modal-1-content-2 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    font-size: 1.6rem;
    line-height: 24px;
    color:#fff;
    padding: 45% 11% 0;
    text-align: left;
    .p-l-r6 {
      padding-left: 6px !important;
      padding-right: 6px !important;
      margin-bottom: 2rem;
    }
  }
  .modal-1-content-2.p-t-25 {
    padding-top: 25%;
  }
  .modal-1-content-2.p-t-39 {
    padding-top: 39%;
  }
  .p-t-30 {
    padding-top: 3rem;
  }
  .more, .more:hover{
    color: #fff;
    border-color: #fff;
    position: absolute;
    bottom: 15px;
    right: 20px;
  }
  .more .try-button--icon {
    top: .5rem;
  }
}
.modal-title {
  font-size: 3.2rem;
  font-weight: 600;
  color: #000000;
  padding-bottom: 5rem;
}
.modal-sub-title {
  font-size: 2rem;
  font-weight: 600;
  color: #000000;
  padding-bottom: 2rem;
  p {
    padding-bottom: 1.5rem;
  }
}
.modal-2 {
  padding-top: 10rem;
  .desc {
    position: absolute;
    font-size: 1.4rem;
    top: 6%;
    bottom: 7%;
    left: 6%;
    right: 7%;
    line-height: 2.4rem;
    padding: 3rem 1rem 0;
    p:nth-of-type(1) {
      margin-bottom: 1.5rem;
    }
  }
  .p0 {
    padding: 0 !important;
  }
  .col-lg-4:nth-of-type(3) .desc {
    padding-top: 5.8rem;
  }
  padding-bottom: 8rem;
  .devops-iconbox {
    height: 26rem;
    img {
      width: 5.4rem;
      height: 5.4rem;
      margin: 2rem auto;
    }
    .icon-title {
      font-size: 1.8rem;
      font-weight: 600;
    }
    hr {
      width: 6rem;
      height: 0.1rem;
      background-color: #404DFF;
      margin: 2rem auto;
    }
    p {
      line-height: 2rem;
    }
  }
  .middle-box {
    .mobile-dom {
      display: none;
    }
  }
  
}
.modal-3 {
  background: #EEEEF4;
  padding: 5.4rem 0;
  .text-lg-center {
    padding-left: 0;
    padding-right: 0;
  }
  .devops-white-bg {
    position: absolute;
    top: 7.5rem;
    right: 2.9rem;
    width: 26rem;
    height: 23rem;
    background: #FFFFFF;
    font-size: 1.5rem;
    padding: 6rem 4rem;
    line-height: 3.5rem;
  }
  .devops-ol {
    padding: 6rem;
    li {
      background: url("../images/sem/devOps/kulian.png") 0 0 no-repeat;
      padding-left: 3rem;
      font-size: 1.5rem;
      padding-bottom: 3rem;
    }
  }
}
.modal-4 {
  padding: 8rem 0 5.4rem;
}
.more {
  font-size: 1.4rem;
  color: #404DFF;
  border-bottom: 1px solid #404DFF;
  display: inline-block;
  position: relative;
  padding-right: 2rem;
  margin-right: 1.8rem;
  float: right;
  .try-button--icon {
    width: 1.4rem;
    position: absolute;
    right: 0rem;
    top: 0rem;
    -webkit-animation: bounce 1.75s infinite;
    animation: bounce 1.75s infinite;
    transition: border .15s ease-in-out,transform .3s ease-in;
  }
}
.more:hover {
  color: #404DFF;
  transition: all .5s ease-in-out;
}
.modal-5 {
  height: 62rem;
  max-height: 620px;
  background: url("../images/sem/alertMonitor/bg12@2x.png") no-repeat;
  background-size: 100% 100%;
  .container {
    padding-top: 2rem;
    > div {
      top: 2rem;
      right: 24px;
      bottom: 0;
      left: 24px;
    }
    .modal-5-title {
      text-align: center;
      color: #FFFFFF;
      line-height: 64px;
      text-shadow: 5px 5px 2px rgba(255, 255, 255, 0.28);
      font-size: 4rem;
      font-weight: 600;
      padding-top: 18rem;
    }
    .form-title {
      font-size: 2.4rem;
      font-weight: 600;
      text-align: center;
      padding-bottom: 3rem;
    }
    .go-free {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 1.4rem;
      text-align: right;
      padding: 10px 10px 0 0;
      background: url("../images/sem/alertMonitor/bg14@2x.png") no-repeat;
      background-size: 100%;
      width: 15rem;
      height: 15rem;
      img {
        width: 16px;
        float: right;
        margin-right: 25px;
        margin-top: 4px;
      }
    }
  }
}
.submit-box {
  height: 100%;
  //padding: 34px;
  .form-info {
    position: relative;
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    //box-shadow: 2px 2px 19px 9px rgba(64, 77, 255, 0.07);
    border-radius: 6px;
    padding: 6rem 10rem 4rem;
    &.nobg {
      background: none;
    }
  }
}
.el-form-item {
  margin-bottom: 10px;
}
.el-input__inner {
  border-top: 0 !important;
  border-right: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  &:focus {
    border-color: #404DFF !important;
  }
}
.line {
  .el-input {
    width: calc(100% - 106px) !important;
    margin-right: 8px !important;
  }
  .code-btn {
    color: #404DFF !important;
    border-color:#404DFF !important;
    width: 92px !important;
    &:hover,&:focus {
      background: #fff !important;
      outline: 0 !important;
    }
    &.is-disabled {
      color: #fff !important;
      cursor: not-allowed !important;
      background: #404DFF !important;
      opacity: .4 !important;
      border-color: #404DFF !important;
    }
  }
}
.submit-btn {
  background: #404DFF !important;
  border-radius: 25px !important;
  color: #fff !important;
  font-size: 16px !important;
  width: 100% !important;
  margin-top: 4.5rem !important;
  &:hover,&:focus {
    box-shadow: 1px 1px 10px 3px rgba(64, 77, 255, 0.09) !important;
    color: #fff !important;
    background: #404DFF !important;
  }
}
.submit-btn.is-disabled, .submit-btn.is-disabled:focus, .submit-btn.is-disabled:hover {
  color: #fff !important;
  cursor: not-allowed !important;
  background: #404DFF !important;
  opacity: .4 !important;
  border-color: #404DFF !important;
}
@media (max-width: 1200px) {
  .modal-7 {
    .text-left, .text-right {
      text-align: center!important;
    }
    .input-box {
      label {
        margin-right: 30rem;
      }
    }
  }
}
@media (max-width: 1680px) {
  .banner-box.free-ca {
    .container {
      top: 30rem!important;
      left: 57%!important;
    }
    .banner-form {
      top: -35rem!important;
      right: 14rem!important;
    }
  }
}
@media (max-width: 1200px) {
  .banner-box.free-ca {
    .container {
      top: 23rem!important;
    }
    .banner-form {
      top: -35rem!important;
      right: 10rem!important;
    }
  }
}
@media (max-width: 992px) {
  .banner-box.free-ca {
    .container {
      left: 48%!important;
    }
    .banner-form {
      top: -25rem!important;
      right: -43rem!important;
    }
  }
}
@media (min-width: 1680px)  {
  .banner-box {
    .banner--button {
      position: absolute;
      bottom: -130%;
    }
  }
}
@media (min-width: 1780px)  {
  .banner-box {
    .banner--button {
      position: absolute;
      bottom: -180%;
    }
  }
}
@media (max-width: 450px)  {
  .freeca-box {
    .banner-box {
      min-height: 58rem !important;
      .container {
        top: 3rem !important;
        .row {
          & > div {
            padding-right: 1px;
          }
        }
        .banner-title {
          text-align: center;
          font-size: 2.6rem;
          line-height: 2rem;
        }
        .banner-sub-title {
          text-align: center;
          margin-top: 1.8rem;
          font-size: 2.6rem;
          line-height: 3rem;
        }
        .banner-desc {
          font-size: 1.4rem;
          line-height: 2rem;
        }
        .banner-form {
          width: 90%;
          top: 4rem !important;
          left: 5% !important;
          right: 1% !important;
          margin: auto;
          padding: 3rem 3rem 1rem;
          .input-box {
            input {
              width: 100%;
            }
          }
          .verification-box {
            & > input {
              width: 55% !important;
              padding: 3px 12px 3px 4.2rem;
              font-size: 1.4rem;
            }
            & > button {
              float: right;
              margin-left: 0 !important;
            }
          }
          .input-box {
            & > .banner-btn-box {
              text-align: center;
              & > .btn {
                width: 90% !important;
              }
            }
          }
        }
      }
    }
    .modal-2-box {
      padding: 2rem 0 4rem;
      .container {
        padding: 0 8px;
        .modal-title {
          padding-bottom: 1.5rem !important;
          font-size: 2.6rem;
        }
        & > h3 {
          margin-bottom: 3.5rem !important;
          font-size: 1.6rem;
          line-height: 2.2rem;
        }
        .xq-box {
          padding: 0 1rem;
          .position-relative {
            & > p {
              height: 4.2rem;
              padding: 0 .5rem;
              font-size: 1.4rem;
            }
            & > img {
              width: 5rem;
              height: 5rem;
              margin:  20px auto;
            }
          }
        }
      }
    }
    .modal-3-box {
      padding: 3rem 0 4rem;
      .container {
        padding: 0 8px;
        & > .modal-title {
          font-size: 2.6rem;
          line-height: 3.2rem;
        }
        .row {
          .input-box {
            width: 90%;
            margin: 1rem auto;
            text-align: left;
            & > label {
              margin-right: 0;
            }
            & > input {
              width: 100%;
            }
          }
          .verification-box {
            & > input {
              width: 50% !important;
            }
            & > button {
              width: 42% !important;
              margin-left: 5% !important;
            }
          }
          .btn-box {
            margin-top: 2rem;
            text-align: center;
            & > .input-box {
              & > button {
                width: 100%;
              }
            }
          }
        }
        .operation-box {
          .text-right {
            padding-right: 0;
            padding-left: 8%;
            .btn-box {
              margin: 2rem auto;
            }
          }
          .text-left {
            padding-left: 0;
            padding-right: 8%;
          }
        }
      }
    }
    .modal-4-box {
      padding-top: 5rem;
      .container {
        padding: 0 8px;
        .middle-box {
          .pc-dom {
            display: none;
          }
          .mobile-dom {
            display: block;
          }
        }
        .modal-title {
          font-size: 2.6rem;
          padding-bottom: 2rem;
        }
        .md-box {
          margin: 2rem 0;
          .text-box {
            padding: 2rem 0rem;
            & > h3 {
              margin-right: 2rem;
              font-size: 2.2rem;
              & > span {
                display: block;
                margin: 1rem 0 0 0;
              }
            }
            .try-button {
              margin-top: 2rem;
              padding: 1.2rem 5rem 1.2rem 2.8rem;
              font-size: 1.4rem;
              & > .try-button--icon {
                width: 1.2rem;
                top: 1.4rem;
              }
            }
          }
        }
      }
    }
    .modal-5-box {
      padding-bottom: 3rem;
      .container {
        padding: 0 8px;
        .modal-title {
          font-size: 2.6rem;
          padding: 2rem 0;
        }
        .safe-box {
          margin: 1rem;
          padding: 2rem 3rem;
          & > img {
            width: 4rem;
            height: 4rem;
          }
          .text {
            & >h3 {
              font-size: 1.8rem;
            }
          }
        }
      }
    }
    .modal-6-box {
      padding: 4rem 0 4rem;
      .container {
        .modal-title {
          padding-bottom: 3rem;
          font-size: 2.6rem;
        }
      }
    }
    .modal-7-box {
      .container {
        padding-top: 4rem !important;
        .modal-title {
          padding-bottom: 4rem !important;
          font-size: 2.6rem;
        }
      }
    }
    .modal-8-box {
      .container {
        .blue-box {
          min-height: auto;
          padding: 4rem 0;
          .text {
            font-size: 2.8rem;
            & > span {
              display: block;
              margin: 1rem 0 0 0;
            }
          }
        }
      }
    }
  }
}
@keyframes bounce{
  0% {
    transform: translateX(0);
  }
  6.5% {
    transform: translateX(-6px) rotateY(
            -9deg);
  }
  18.5% {
    transform: translateX(5px) rotateY(
            7deg);
  }
  31.5% {
    transform: translateX(-3px) rotateY(
            -5deg);
  }
  43.5% {
    transform: translateX(2px) rotateY(
            3deg);
  }
  50% {
    transform: translateX(0);
  }
}
//devOps
.text-shadow{
  text-shadow: 2px 2px 2px rgba(255,255,255,.7);
}
.el-dialog {
  border-radius: 0.6rem!important;
  background: linear-gradient(#FFFFFF, #ecefff)!important;
}
.el-input__inner {
  background: none!important;
}
//freeCa
.footer2 {
  background-color: #F5F6FA;
  padding-bottom: 0;
  .logo {
    float: left;
    width: 142px;
    height: 40px;
    margin-top: 30px;
  }
  .footer-nav {
    h6 {
      color: #0A0D2C;
    }
    .list-unstyled {
      li {
        a {
          color: #6C6E80;
        }
        a:hover {
          .iconfont {
            color: #404DFF;
          }
        }
        // .iconfont {
        //   color: #C1C2CB;
        //   border-radius: 50%;
        //   display: inline-block;
        //   width: 3.6rem;
        //   height: 3.6rem;
        //   line-height: 3.6rem;
        //   text-align: center;
        //   box-shadow: 0px 2px 5px 0px rgba(193, 194, 203, 0.38);
        //   vertical-align: middle;
        //   &.icon-toutiao1 {
        //     font-size: 1.6rem;
        //   }
        // }
        .phone-icon {
          float: left;
          width: 54px;
          height: 54px;
          line-height: 54px;
          text-align: center;
          border: 1px solid #C5C8D4;
          border-radius: 50%;
          font-weight: 500;
          margin-right: 10px;
          margin-top: 8px;
          .iconfont {
            margin: 0;
          }
        }
        .phone-num {
          a {
            font-weight: 500;
            font-size: 2.2rem;
            color: #0A0D2C;
          }
        }
        .wechartbox {
          z-index: 1;
        }
      }
    }
  }
}
.modal-4.free-ca {
  background-color: #F7F8FC;
}
.modal-5.free-ca {
  height: auto;
  max-height: none;
  min-height: 72rem;
  .container {
    padding-top: 13rem;
    .modal-title {
      padding-bottom: 8rem;
    }
  }
}
.modal-7 {
  background: linear-gradient(179deg, #FFFFFF 0%, #A5ABFF 100%);
  padding: 8rem;
  .modal-7-title {
    font-size: 2.8rem;
  }
}
.modal-8 {
  background-color: #404DFF;
}
.banner-box.free-ca {
  min-height: 60rem;
  overflow: hidden;
  .container {
    top: 37rem;
    left: 44%;
  }
  .banner-title {
    font-size: 4rem;
    line-height: 4rem;
    color: #404DFF;
    font-weight: 500;
  }
  .banner-sub-title {
    font-size: 4rem;
    line-height: 4rem;
    font-weight: 500;
  }
  .banner-desc {
    line-height: 3rem;
    font-weight: 500;
  }
  .banner-form {
    width: 38rem;
    padding: 50px 30px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0px 12px 32px 0px rgba(130, 132, 153, 0.2);
    position: absolute;
    top: -42rem;
    right: -14rem;
    .input-box {
      position: relative;
      img {
        position: absolute;
        width: 20px;
        height: 20px;
        top: 12px;
        left: 16px;
      }
      input{
        width: 30rem;
        padding-left: 45px;
        line-height: 1.4rem;
      }
    }
  }
}
.xq-box {
  .t-c {
    flex: 0 0 20%;
  }
  p {
    font-size: 2rem;
    font-weight: 500;
    padding-bottom: 10px;
    background: url("../images/sem/freeCa/xq_bg.png") no-repeat bottom center;
  }
  img {
    width: 6.4rem;
    height: 6.4rem;
    margin: 30px auto 20px;
  }
}
.md-box {
  margin: 30px 0 100px;
  img {
    max-width: 500px;
  }
  h3 {
    font-size: 2.4rem;
    padding-bottom: 10px;
    border-bottom: 2px solid #404DFF;
    margin-bottom: 20px;
    margin-right: 8rem;
    span {
      font-size: 1.4rem;
      color: #969696;
      font-weight: normal;
      margin-left: 10px;
    }
  }
  .text-box {
    padding: 20px;
  }
  .text {
    line-height: 2.6rem;
    font-size: 1.4rem;
    h4 {
      display: inline-block;
    }
  }
}
.input-box {
  margin-bottom: 2rem;
  label {
    display: block;
    color: #2B2E33;
    font-size: 1.4rem;
    &.left {
      margin-right: 29rem;
    }
  }
  input {
    width: 35rem;
    height: 44px;
    border-radius: 22px;
    border: 1px solid #6C6E80;
    padding: 3px 20px;
    font-size: 1.4rem;
  }
  .btn {
    height: 44px;
    width: 18rem;
    border-radius: 22px;
    border: 1px solid #404DFF;
    color: #404DFF;
    background-color: #fff;
    font-size: 1.4rem;
    &.blue-btn {
      color: #fff;
      background-color: #404DFF;
    }
  }
  &.btn-box {
    margin-top: 4rem;
  }
}
.safe-box {
  padding: 20px 50px;
  margin-right: 20px;
  margin-bottom: 40px;
  background: #F8F8FE;
  border-radius: 10px;
  min-height: 90px;
  img {
    float: left;
    width: 50px;
    height: 50px;
  }
  .text {
    margin-left: 85px;
    color: #000;
    h3 {
      font-size: 2.2rem;
      margin-bottom: 10px;
    }
    p {
      font-size: 1.2rem;
    }
  }
}
.blue-box {
  min-height: 260px;
  padding-top: 80px;
  background: url("../images/sem/freeCa/blue_bg.png") no-repeat top right;
  .text {
    color: #fff;
    font-size: 4.4rem;
    margin-bottom: 20px;
    span {
      font-size: 2.0rem;
      margin-left: 10px;
    }
  }
  .btn {
    padding: 8px 30px;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 22px;
    font-size: 1.6rem;
    background: transparent;
    &.white-btn {
      background-color: #fff;
      color: #404DFF;
      margin-right: 10px;
    }
  }
}
.btn-orange {
  border-radius: 18px;
}
// steady
.steady-main-box {
  #headerPage2 {
    .dropdown-menu {
      top: 35px;
      border-radius: 4px;
      .list-group-item {
        white-space: nowrap;
        &:hover {
          z-index: 11;
          transform: scale(1.05);
          border-radius: .25rem;
          background-color: #f5f9fb;
          box-shadow: 0 2px 4px rgba(3, 27, 78, 0.06);
          color: #3651D1;
        }
      }
      &:hover {
        & + a {
          // color: #fff !important;
          // border-bottom: 2px solid #fff !important;
        }
      }
    }
    .navbar-sticky.sticky {
      .navbar-nav {
        .nav-link:hover {
          color: #3651D1 !important;
          border-bottom: 2px solid #3651D1;
        }
      }
    }
  }
  #navbar-main {
    box-shadow: none;
    .container {
      .navbar-brand {
        .default-logo {
          display: block;
        }
        .slide-logo {
          display: none;
        }
      }
      #navbar-main-collapse {
        .nav-item {
          margin-left: 6rem;
          .nav-link {
            color: #D0DAFF;
            &:hover {
              color: #fff;
            }
          }
        }
        
        .register-btn {
          width: 80px;
          height: 34px;
          font-size: 14px;
          font-weight: 600;
          color: #3651D1;
          line-height: 20px;
          background: #FFFFFF;
          border-radius: 2px;
          border: 1px solid;
          border-image: linear-gradient(190deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.01)) 1 1;
        }
      }
    }
  }
  .steady-box {
    .banner-box {
      .container {
        height: 160px;
        top: 0;
        bottom: 0;
        margin: auto;
        color: #FFFFFF;
        letter-spacing: 1px;
        text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
        .banner-title {
          line-height: 8rem;
          .banner-text-big {
            display: inline-block;
            width: 90px;
            height: 75px;
            line-height: 75px;
            margin: 0 10px;
            font-size: 5.6rem;
            background: url(../images/sem/steady/wen.png) no-repeat;
            background-size: cover;
          }
        }
      }
    }
    .modal-2 {
      padding: 0;
      background: url(../images/sem/steady/modal-2-bac1.png) no-repeat;
      background-size: contain;
      .container {
        padding: 8rem 0 5rem;
        .modal-title {
          color: #323334;
        }
        .modal-sub-title {
          margin-top: 3rem;
          padding-bottom: 0;
          font-size: 14px;
          font-weight: 400;
          color: #323334;
          line-height: 24px;
          & > p {
            padding-bottom: 0;
          }
        }
      }
      .modal-2-card {
        position: relative;
        padding: 6.6rem 0 7rem 0;
        background: linear-gradient(180deg, #F8FBFF 0%, #FFFFFF 100%);
        z-index: 1;
        .modal-2-card-bac {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          background: url(../images/sem/steady/modal2-card-bac.png) no-repeat;
          background-size: contain;
          background-position: bottom right;
          z-index: -1;
        }
        .card-title {
          font-size: 32px;
          font-weight: 600;
          color: #323334;
          line-height: 40px;
          text-align: center;
        }
        .container {
          .row {
            .devops-iconbox {
              position: relative;
              overflow: hidden;
              height: 384px;
              margin-bottom: 4rem;
              padding: 44px 24px 30px;
              background: #FEFEFF;
              box-shadow: 0px 0px 20px 5px rgba(54, 81, 209, 0.09);
              filter: blur(0px);
              transition: all .2s;
              .title-icon {
                position: absolute;
                width: 70px;
                height: auto;
                right: 20px;
                top: 26px;
                margin: 0;
              }
              .icon-title-desc {
                margin: .8rem 0 .9rem;
                font-weight: 400;
                color: #646566;
                transform: scale(1.1);
                padding-left: 1.5rem;
              }
              & > hr {
                width: 100%;
                margin: auto;
                background: #3651D1;
                border-radius: 1px;
              }
              .devops-desc {
                margin-top: 1rem;
                font-size: 14px;
                font-weight: 400;
                color: #323334;
                line-height: 24px;
              }
              .register-btn {
                position: absolute;
                width: 120px;
                height: 44px;
                right: 24px;
                bottom: 30px;
                border-radius: 4px;
                font-size: 16px;
                font-weight: 500;
                color: #FFFFFF;
                line-height: 20px;
                letter-spacing: 1px;
                text-align: center;
                line-height: 44px;
                background: #3651D1;
                &:hover {
                  box-shadow: 0px 7px 12px 0px rgba(89, 90, 101, 0.17) !important;
                  backdrop-filter: blur(0px);
                  cursor: pointer;
                }
              }
              &:hover {
                transform: translateY(-1.5rem);
                background: #FEFEFF;
                box-shadow: 0px 0px 20px 5px rgba(54, 81, 209, 0.15);
                filter: blur(0px);
              }
            }
          }
        }
      }
    }
    .modal-3 {
      padding: 13rem 0 11rem;
      background: #3651D1;
      position: relative;
      &>img {
        position: absolute;
      }
      &>img:nth-of-type(1) {
        width: 122px;
        left: 157px;
        top: 39px;
      }
      &>img:nth-of-type(2) {
        width: 486px;
        top: 23px;
        right: 42px;
      }
      &>img:nth-of-type(3) {
        width: 592px;
        left: 0;
        bottom: 0;
      }
      .container {
        .modal-3-text {
          margin-top: 5rem;
          font-size: 32px;
          font-weight: 500;
          color: #FFFFFF;
          line-height: 45px;
          .modal-3-btn {
            display: block;
            width: 120px;
            height: 44px;
            margin-top: 7rem;
            border-radius: 4px;
            font-size: 16px;
            font-weight: 500;
            color: #3651D1;
            text-align: center;
            line-height: 44px;
            letter-spacing: 1px;
            background: #FFFFFF;
            cursor: pointer;
          }
        }
        .card-box {
          .brand-icon {
            float: left;
            width: 144px;
            height: 80px;
            margin: 12px;
            background: #FFFFFF;
            box-shadow: 0px 0px 9px 0px rgba(240, 242, 255, 0.11);
            border-radius: 4px;
            &:hover {
              box-shadow: 0px 0px 9px 0px rgba(240, 242, 255, 0.55);
              cursor: pointer;
            }
          }
        }
      }
    }
    .modal-4 {
      position: relative;
      padding: 16rem 0 19.7rem 0;
      .modal-4-title {
        padding-bottom: 6.6rem;
      }
      .modal-4-bac1 {
        position: absolute;
        top: 0;
        left: 0;
        background-size: contain;
      }
      .modal-4-bac2 {
        position: absolute;
        bottom: 0;
        left: 0;
        background-size: contain;
      }
      &>.container {
        position: relative;
        z-index: 10;
      }
    }
    #footerPage2 {
      background: #323334;
      .footer-nav {
        h6 {
          color: #fff;
        }
        .list-unstyled {
          li {
            a {
              font-size: 14px;
              font-weight: 400;
              color: #D0DAFF;
            }
            .contact-us-icon {
              background: #F5F6FA;
              box-shadow: 0px 2px 5px 0px rgba(193, 194, 203, 0.38);
            }
            .iconfont {
              color: #646566;
            }
          }
        }
        .link-mode {
          .contact-email {
            color: #D0DAFF;
          }
          .contact-phone {
            color: #D0DAFF;
            span {
              i {
                color: #D0DAFF;
                &::before {
                  color: #fff;
                }
              }
            }
          }
        }
      }
      .rights {
        color: #D0DAFF;
        border-top: 1px solid #D0DAFF;
        span {
          a {
            color: #D0DAFF !important;
          }
        }
      }
    }
  }
}
@media (max-width: 770px) {
  .steady-box {
    .banner-box {
      .container {
        .banner-title {
          font-size: 3.6rem;
          .banner-text-big {
            font-size: 4.4rem;
            width: 70px;
            height: 60px;
            line-height: 60px;
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}
@media (max-width: 1060px) {
  .steady-main-box #navbar-main .container #navbar-main-collapse .nav-item {
    margin-left: 5rem;
  }
}
.captcha-code-box {
  display: flex;
  input {
    width: 16rem !important;
    padding-left: 18px !important;
  }
  .code-img {
    flex: 1;
    margin: 0 20px;
    padding: 0 4px 0 3px;
    border: 1px solid #6C6E80;
    & > img {
      position: relative !important;
      width: auto !important;
      height: 42px !important;
      left: 0 !important;
      top: 0 !important;
      margin: auto;
    }
  }
}
.register-captcha-code {
    .code-img {
      display: flex;
      width: auto;
      & > img {
        border: 1px solid #6C6E80;
        width: auto;
        height: 44px;
        margin-left: 20px;
      }
    }
}
.captcha-code {
  display: flex;
  align-items: center;
  .code-img {
  float: right;
  margin-top: -2px;
  border: 1px solid #6C6E80;
    & > img {
      width: auto;
      height: 34px;
    }
  }
}
.captcha-code-freeca {
  .code-img {
    float: right;
    margin: 0 25px;
    padding: 0 4px 0 3px;
    border: 1px solid #6C6E80;
    img {
      position: static !important;
      width: auto !important;
      height: 43px !important;
    }
  }
}
.code-img-modal {
  height: 43px;
  margin-left: 10px;
  padding: 0 4px 0 3px;
  border: 1px solid #6C6E80;
  img {
    height: 100%;
  }
}