@import "../common/style.css";
@import "../common/header1";
@import "../common/footer.css";

.smart-warning-box {
  .banner-box {
    position: relative;

    .container {
      position: absolute;
      height: 166px;
      top: 0;
      bottom: 0;
      left: 50%;
      margin: auto;
      transform: translate(-50%);
      text-align: center;

      .banner-title {
        font-size: 48px;
        font-weight: 600;
        color: #FFFFFF;
        line-height: 80px;
        letter-spacing: 1px;
        text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
      }

      .btn {
        margin-top: 40px;
        padding: 10px 26px;
        background: #FFFFFF;
        border-radius: 4px;
        font-size: 16px;
        font-weight: 500;
        color: #3651D1;
        letter-spacing: 1px;

        &:hover {
          box-shadow: 0px 7px 12px 0px rgba(89, 90, 101, 0.17);
          backdrop-filter: blur(0px);
          cursor: pointer;
        }
      }
    }
  }

  .modal-2 {
    overflow: hidden;
    padding-bottom: 89px;

    .title {
      padding-top: 138px;
      font-size: 32px;
      font-weight: 600;
      color: #323334;
      line-height: 40px;
    }

    .card-item {
      height: 240px;
      margin: 36px 5px 0;
      padding: 22px 25px;
      background: linear-gradient(358deg, #E4E9FF 0%, #FFFFFF 100%);
      box-shadow: 0px 10px 22px 0px rgba(130, 132, 153, 0.18);
      transition: all .4s;
      cursor: pointer;

      &:hover {
        box-shadow: 0px 10px 22px 0px rgba(130, 132, 153, 0.28);
        transform: translateY(-12px);
      }

      .card-icon {
        width: 42px;
        margin: 0 auto;

        & > img {
          width: 100%;
        }
      }

      .card-title {
        margin-top: 10px;
        font-size: 18px;
        font-weight: 500;
        color: #323334;
        line-height: 24px;
        text-align: center;
      }

      .card-desc {
        margin-top: 8px;
        font-size: 14px;
        font-weight: 400;
        color: #646566;
        line-height: 20px;
      }
    }

    .option {
      margin-top: 70px;
      text-align: center;

      & > a {
        display: inline-block;
        margin: 0 22px;
        padding: 12px 26px;
        font-size: 16px;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 20px;
        letter-spacing: 1px;
        background: #3651D1;
        border-radius: 4px;
        border: 1px solid #3651D1;
        cursor: pointer;

        &:hover {
          box-shadow: 0px 7px 12px 0px rgba(89, 90, 101, 0.17);
          backdrop-filter: blur(0px);
          cursor: pointer;
        }

        &:nth-child(2) {
          background: #FFFFFF;
          border: 1px solid #3651D1;
          color: #3651D1;
        }
      }
    }
  }

  .modal-3 {
    padding-bottom: 100px;
    background: linear-gradient(180deg, #F8FBFF 0%, #FFFFFF 100%);

    .title {
      padding: 71px 0 12px;
      font-size: 32px;
      color: #323334;
      line-height: 40px;
    }

    .desc {
      font-size: 14px;
      font-weight: 400;
      color: #323334;
      line-height: 24px;
      text-align: center;
    }

    .content {
      margin-top: 68px;

      & > img {
        width: 100%;
      }
    }
  }

  .modal-4 {
    overflow: hidden;
    position: relative;
    background: linear-gradient(175deg, #FD9C21 0%, #FC6020 100%);

    .container {
      position: relative;
      min-height: 180px;
      z-index: 1;

      .title {
        float: left;
        margin-right: 12px;
        padding: 0;
        font-size: 40px;
        font-weight: 600;
        color: #FFFFFF;
        line-height: 180px;
        letter-spacing: 2px;
        text-shadow: 0px 2px 4px #B3701C;
      }

      .desc {
        font-size: 18px;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 180px;
      }

      .btn-box {
        text-align: right;

        .btn {
          display: inline-block;
          margin-top: 66px;
          padding: 12px 26px;
          background: #FFFFFF;
          border-radius: 4px;
          font-size: 16px;
          font-weight: 500;
          color: #3651D1;
          letter-spacing: 1px;

          &:hover {
            box-shadow: 0px 7px 12px 0px rgba(89, 90, 101, 0.17);
            backdrop-filter: blur(0px);
            cursor: pointer;
          }
        }
      }

      .bac-img1 {
        position: absolute;
        width: 262px;
        left: -125px;
        top: 0;
      }
    }

    .bac-img2 {
      position: absolute;
      width: 100%;
      height: 100%;
      right: 0;
      top: 0;

      background: url(/images/sem/warning/m4-b-2.png) no-repeat;
      background-size: cover;
    }
  }

  .modal-5 {
    padding: 110px 0 90px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFF 100%);

    .container {
      position: relative;
      text-align: right;

      .title {
        display: inline-block;
        margin-right: 32px;
        padding: 0 0 11px 30px;
        text-align: right;
        font-size: 32px;
        font-weight: 600;
        color: #323334;
        line-height: 40px;
        border-bottom: 6px solid #3651D1;;
      }

      .question {
        display: inline-block;
        width: 446px;
        margin-top: 280px;
        padding: 20px;
        text-align: left;
        font-size: 24px;
        font-weight: 500;
        color: #323334;
        line-height: 24px;
      }

      .desc {
        position: relative;
        display: inline-block;
        width: 446px;
        padding: 20px;
        text-align: left;
        font-size: 14px;
        font-weight: 400;
        color: #323334;
        line-height: 24px;
        border-radius: 5px;

        .fuzzy-bac {
          position: absolute;
          width: 100%;
          height: 100%;
          top: -5px;
          left: 0;
          background: linear-gradient(159deg, #A6E3FD 0%, #2BB0F2 100%);
          border-radius: 5px;
          opacity: 0.2;
          filter: blur(10px);
        }
      }

      .card-box {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        text-align: left;

        .card-item {
          width: 313px;
          height: 270px;
          margin-bottom: 30px;
          padding: 35px;
          background: #FFFFFF;
          box-shadow: 0px 10px 22px 0px rgba(130, 132, 153, 0.18);
          transition: all .2s;
          cursor: pointer;

          &:hover {
            background: #F4F8FF;
          }

          .card-icon {
            width: 50px;

            & > img {
              width: 100%;
            }
          }

          .card-title {
            margin-top: 12px;
            font-size: 18px;
            font-weight: 500;
            color: #323334;
            line-height: 24px;
          }

          .card-desc {
            margin-top: 10px;
            font-size: 14px;
            font-weight: 400;
            color: #646566;
            line-height: 24px;
          }
        }
      }

      .operation {
        margin-top: 70px;
        text-align: center;
        
        & > a {
          display: inline-block;
          margin: 0 22px;
          padding: 12px 26px;
          background: #3651D1;
          border-radius: 4px;
          font-size: 16px;
          font-weight: 500;
          color: #FFFFFF;
          line-height: 20px;
          letter-spacing: 1px;
          border: 1px solid #3651D1;
          cursor: pointer;

          &:hover {
            box-shadow: 0px 7px 12px 0px rgba(89, 90, 101, 0.17);
            backdrop-filter: blur(0px);
            cursor: pointer;
          }

          &:nth-child(2) {
            background: #FFFFFF;
            border: 1px solid #3651D1;
            color: #3651D1;
          }
        }
      }

      .left-box-bac {
        position: absolute;
        width: 336px;
        height: 336px;
        left: -6px;
        bottom: 140px;
        border-radius: 50%;
        background: linear-gradient(229deg, #3651D1 0%, #4FC0F8 100%);
        opacity: 0.14;
        filter: blur(10px);
      }
    }
  }

  .modal-6 {
    padding-top: 80px;

    .container {
      .title {
        padding: 0;
        font-size: 32px;
        font-weight: 600;
        color: #323334;
        line-height: 40px;
      }

      .content {
        margin-top: 90px;

        .card-item {
          width: 346px;
          padding: 34px 38px;
          background: linear-gradient(175deg, #F7FAFF 0%, #FFFFFF 100%);
          box-shadow: 0px 10px 22px 0px rgba(130, 132, 153, 0.18);
          border-radius: 4px;
          transition: all .2s;
          cursor: pointer;

          &:hover {
            box-shadow: 0px 10px 22px 0px rgba(130, 132, 153, 0.28);
            transform: translateY(-12px);
          }

          .card-icon {
            width: 124px;

            & > img {
              width: 100%;
            }
          }

          .card-title {
            margin-top: 33px;
            padding: 0 17px;
            font-size: 22px;
            font-weight: 600;
            color: #0A0D2C;
            line-height: 30px;
          }

          .card-desc {
            margin-top: 21px;
            padding: 0 17px;
            font-size: 14px;
            font-weight: 400;
            color: #0A0D2C;
            line-height: 22px;
          }
        }
      }
    }

    .data-show-box {
      position: relative;
      margin-top: -122px;
      padding-bottom: 76px;
      text-align: center;
      background: linear-gradient(186deg, #4FC0F8 0%, #3651D1 100%, #3651D1 100%);
      z-index: -1;

      .data-number {
        margin-top: 206px;
        font-size: 48px;
        font-weight: 600;
        color: #fff;
        line-height: 67px;

        .iconfont {
          font-size: 40px;
        }

        .icon-rotate {
          display: inline-block;
          transform: rotateY(180deg);
        }
      }

      .data-name {
        margin-top: 20px;
        font-size: 18px;
        font-weight: 600;
        color: #E8F1FF;
        line-height: 25px;
      }

      .box-bac {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
      }
    }
  }

  .modal-7 {
    padding-top: 140px;

    .container {

      .left-box {
        .title {
          margin-top: 70px;
          padding: 0;
          font-size: 32px;
          font-weight: 600;
          color: #323334;
          line-height: 40px;
          text-align: left;
        }

        .click-box {
          .swiper-pagination {
            margin-top: 34px;

            .pagination-dot-box {
              width: 70px;
              height: 70px;
              background: #FFFFFF;
              border-radius: 4px;
              opacity: .6;

              & > img {
                width: 100%;
                margin-top: 12px;
              }
            }

            .swiper-pagination-bullet-active {
              box-shadow: 0px 0px 9px 0px rgba(54, 81, 209, 0.13);
              opacity: 1;
            }
          }
        }
  
        .btn {
          margin-top: 192px;
          padding: 12px 26px;
          background: #3651D1;
          border-radius: 4px;
          font-size: 16px;
          font-weight: 500;
          color: #FFFFFF;
          line-height: 20px;
          letter-spacing: 1px;

          &:hover {
            box-shadow: 0px 7px 12px 0px rgba(89, 90, 101, 0.17);
            backdrop-filter: blur(0px);
            cursor: pointer;
          }
        }
      }

      .right-box {
        background: url(/images/sem/warning/m7-r-b.png) no-repeat;
        background-size: 386px 386px;
        background-position: right bottom;

        .content {
          position: relative;
          overflow: hidden;
          width: 530px;
          height: 336px;
          margin: 40px 0px 65px 20px;
          padding: 0 50px;
          background: #fff;
          box-shadow: 0px 0px 20px 5px rgba(54, 81, 209, 0.09);
          border-radius: 6px;
          filter: blur(0px);

          .card-icon {
            position: absolute;
            right: 4px;
            top: 0;
            width: auto;
            height: 94px;
          }

          .title {
            margin-top: 50px;
            padding: 0;
            font-size: 18px;
            font-weight: 500;
            color: #323334;
            line-height: 24px;
            text-align: left;
          }

          .desc {
            position: relative;
            margin-top: 20px;
            font-size: 14px;
            font-weight: 400;
            color: #646566;
            line-height: 20px;

            &::after {
              content: '';
              display: block;
              width: 80px;
              height: 4px;
              margin-top: 20px;
              background: #3651D1;
            }
          }

          .second-desc {
            margin-top: 20px;
            font-size: 14px;
            font-weight: 400;
            color: #323334;
            line-height: 24px;
          }
        }
      }
    }
    
  }

  .modal-8 {
    margin-top: 120px;
    padding-bottom: 190px;
    background: url(/images/sem/warning/m8-b.png) no-repeat;
    background-position: top right;
    background-size: cover;

    .container {
      padding-top: 2rem;

      > div {
        top: 2rem;
        right: 24px;
        bottom: 0;
        left: 24px;
      }

      .left-box-bac {
        width: 590px;
      }

      .modal-8-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: linear-gradient(46deg, rgba(54, 81, 209, 0) 0%, rgba(54, 81, 209, 0) 50%,  #3651D1 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);
        padding: 6rem 10rem 4rem;
        &.nobg {
          background: none;
        }
      }
    }
    .el-form-item {
      margin-bottom: 10px;
    }
    .el-input__inner {
      border-top: 0;
      border-right: 0;
      border-left: 0;
      border-radius: 0;
      &:focus {
        border-color: #3651D1;
      }
    }
    .line {
      .el-input {
        width: calc(100% - 106px);
        margin-right: 8px;
      }
      .code-btn {
        color: #3651D1;
        border-color:#3651D1;
        width: 92px;
        border-radius: 4px;

        &:hover,&:focus {
          background: #fff;
          outline: 0;
        }
        &.is-disabled {
          color: #fff;
          cursor: not-allowed;
          background: #3651D1;
          opacity: .4;
          border-color: #3651D1;
        }
      }
    }
    .submit-btn {
      background: #3651D1;
      color: #fff;
      font-size: 16px;
      width: 100%;
      margin-top: 4.5rem;
      box-shadow: 1px 1px 10px 3px rgba(64, 77, 255, 0.09);
      border-radius: 4px;

      &:hover,&:focus {
        box-shadow: 1px 1px 10px 3px rgba(64, 77, 255, 0.09);
        color: #fff;
        background: #3651D1;
      }
    }
    .submit-btn.is-disabled, .submit-btn.is-disabled:focus, .submit-btn.is-disabled:hover {
      color: #fff;
      cursor: not-allowed;
      background: #3651D1;
      opacity: .4;
      border-color: #3651D1;
    }
  }

  #navbar-main {
    box-shadow: none;
    background: #fff;

    .container {
      #navbar-main-collapse {
        .nav-item {
          margin-left: 6rem;

          .nav-link {
            color: #0A0D2C;

            &:hover {
              color: #3651D1;
            }
          }

          .list-group {
            .list-group-item {
              white-space: nowrap;
            }
          }
        }
        
        .register-btn {
          width: 80px;
          height: 34px;
          font-size: 14px;
          font-weight: 600;
          color: #fff;
          line-height: 20px;
          background: #3651D1;
          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;
        }
      }
    }
  }

  #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;
        }
      }
    }
  }
}

.captcha-code {
  display: flex;
  align-items: center;

  .code-img {
  float: right;
  margin-top: -2px;
  padding: 0 4px 0 3px;
  border: 1px solid #6C6E80;

    & > img {
      width: auto;
      height: 34px;
    }
  }
}

@media (max-width: 992px) {
  .smart-warning-box {

    .modal-4 {
      .container {
        .title {
          float: initial;
          margin-top: 40px;
          line-height: 48px;
        }
  
        .desc {
          margin-top: 14px;
          line-height: 22px;
          text-align: center;
        }
      }
    }
  }
}

@media (max-width: 580px) {
  .smart-warning-box {

    .modal-4 {
      .container {
        .btn-box {
          text-align: center !important;
          padding-bottom: 30px;
        }
      }
    }
  }
}