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

.capacity-box {
  .banner-box {
    width: 100%;
    position: relative;
    > img {
      width: 100%;
    }

    .container {
      position: absolute;
      left: 50%;
      height: 180px;
      top: -40px;
      bottom: 0;
      margin: auto;
      transform: translateX(-50%);
      color: #FFFFFF;
      letter-spacing: 1px;
      text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);

      .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);
      }

      .banner-sub-title {
        font-size: 20px;
        font-weight: 600;
        color: #FFFFFF;
        line-height: 40px;
        text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
      }
    }
  }

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

      .content {
        display: flex;
        padding-bottom: 170px;

        .nav-list {
          width: 180px;
          flex-shrink: 0;

          .nav-item {
            position: relative;
            display: flex;
            height: 60px;
            padding: 0 20px;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 500;
            color: #323334;
            text-align: center;
            cursor: pointer;
            transition: all .6s;

            .iconfont {
              position: absolute;
              right: 10px;
              transform: rotate(90deg);
              display: none;
            }
          }

          
          .nav-item-active {
            color: #3651D1;
            background: #FFFFFF;
            box-shadow: -10px 8px 12px 0px rgba(130, 132, 153, 0.1);

            .iconfont {
              display: block;
              color: #3651D1;
            }
          }
        }

        .list-item {
          flex: 1;
          padding: 25px 22px;
          background: #FFFFFF;
          box-shadow: 0px 10px 22px 0px rgba(130, 132, 153, 0.18);

          .item-box {
            float: left;
            width: 200px;
            height: 189px;
            margin: 15px 12px;
            background: #E8F1FF;
            box-shadow: 0px 10px 22px 0px rgba(130, 132, 153, 0.18);

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

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

@media (max-width: 992px) {
  .capacity-box{
    .banner-box {
      height: 310px;

      & > img {
        height: 100%;
      }

      .container {
        height: 300px;
      }
    }
  }
}