*{
        padding:0;
        margin:0;
        font-size:14px;
    }
    :root{
      --navHei:70px;
    }
    #app{
      padding-top: var(--navHei);
    }
    .maxWidth{
      width:1200px;
      margin:0 auto;
    }
    header{
      width:100%;
      display: flex;
      justify-content: center;
      box-sizing: border-box;
      position: fixed;
      background-color: rgba(250,250,250,.8);
      top:0;
      box-shadow: 0 0 10px 0 rgba(100,100,100,.5);
      padding-left:10px;
    }
    header>div{
       height:var(--navHei);
       display: flex;
       justify-content: space-between;
       flex-wrap: wrap;
    }
    header>div .logoBox{
        padding:0 20px;
        box-sizing: border-box;
        height:var(--navHei);
        display: flex;
        align-items: center;
        height:var(--navHei);
    }
    header>div .navBox{
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding-right:20px;
      height:var(--navHei);
      overflow: hidden;
      transition:.5s;
    }
    header>div .logoBox img{
      height:60px;
    }
    header>div .navBox a{
          display: flex;
          justify-content: center;
          align-items: center;
          font-weight: 600;
          text-transform: capitalize;
          text-decoration:none;
          font-size: 16px;
          padding: 0 20px;
          color: #545454;
          line-height:var(--navHei);
          height:var(--navHei);
          transition: .5s;
    }
    header>div .navBox a:hover{
      color:#fff;
      background-color: #248d92;
    }
    header>div .navBox>.iconBox{
       display: flex;
       align-items: center;
       justify-content: center;
       height: var(--navHei);
       width: var(--navHei);
       font-weight: bold;
    }
    header>div .navBox>.iconBox i{
       font-size:50px;
    }
    header>div .navBox>div:nth-child(1){
      display: none;
    }
    .bgImage{
        width:100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(100,100,100,.1);
        height:500px;
        overflow: hidden;
    }
    .bgImage img{
      width:100%;
       /* height:100%; */
    }
    .container-title{
      display: flex;
      justify-content: center;
      padding:100px 0 60px;
      box-sizing: border-box;
    }
    .container-title>div{
      color: rgb(34, 34, 34);
      visibility: visible;
      animation-delay: 100ms;
      animation-name: fadeInUp;
      font-size: 36px;
      font-weight: 400;
    }
    .container-nav{
      width:100%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding:20px 0 120px;
    }
    .container-nav>div{
       width:160px;
       height:60px;
       display:flex;
       justify-content: center;
       align-items: center;
       background-color: rgba(0,0,0,.8);
       transition: .5s;
       font-size:24px;
       color:#fff;
       font-weight: bold;
       box-sizing: border-box;
       cursor: pointer;
    }
    .container-nav>div:hover{
      background-color: rgba(0,0,0,.6);
    }
    .container-nav>div:not(:last-child){
      border-right:1px solid #fff;
    }
    .container-nav>div.activeBox{
      background-color: #248d92 !important;
    }
    .card-box{
      width:300px;
      padding:20px;
      box-sizing: border-box;
      border-radius:10px;
      box-shadow:0 0 10px 0 rgba(100,100,100,.2);
    }
    .card-box-image{
      width:100%;
      height:140px;
      overflow: hidden;
      border-radius:4px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .card-box-image img{
      width:100%;
    }
    .card-box-title{
      padding:20px 0 10px;
      display: flex;
      justify-content: center;
    }
    .card-box-title span{
      font-size:16px;
    }
    .container-list{
      padding-bottom:20px;
    }

    footer{
      margin-top:60px;
      min-height:200px;
      background-color: rgba(0,0,0,.9);
      padding-top: 60px;
      padding-bottom: 50px;
      box-sizing: border-box;
    }
    .footer-line-box{
      margin-top:30px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color:rgba(250,250,250,.8);
    }
    .footer-line-box>div{
      display: flex;
      align-content: center;
      line-height:30px;
      font-size:14px;
    }
    .footer-line-box a{
       text-transform: capitalize;
       color:rgba(250,250,250,.8);  
       font-size:14px;
    }
    .footer-links-box{
      display: flex;
      justify-content: center;
    }
    .footer-links-box>div a{
         height:30px;
         padding:0 10px;
         display: flex;
         justify-content: center;
         align-items: center;
         text-transform: capitalize;
         text-decoration:none;
         box-sizing: border-box;
         color:#fff;
         font-size:16px;
    }
    .container-list-title{
        display: flex;
        align-items: center;
        height:40px;
        padding-left:10px;
        margin-bottom:20px;
        padding-bottom:4px;
        border-bottom:2px solid rgba(0,0,0,.2);
    }
    .container-list-title>i{
        width:30px;
        font-size:18px;
        display: flex;
        justify-content: center;
        padding-top:2px;
    }
    .container-list-title>span{
        font-size:18px;
        font-weight: 400;
    }
    /* 中等屏幕 */
    @media (max-width: 800px) {
         header>div{
            width:100%;
            justify-content: flex-start;
            padding-right:100px;
         }
         header>div .navBox{
            width:200px;
            flex-wrap: wrap;
            position: absolute;
            top:0;
            right:0;
            padding:0;
            justify-content: flex-end;
            background-color:#fff;
         }
         header>div .navBox:hover{
            height: auto;
         }
         header>div .navBox>div:nth-child(1){
           display:flex;
         }
         header>div .navBox>div:not(:first-child){
            width:100%;
            background-color:rgba(100,100,100,.2);
            border:1px solid rgba(100,100,100,.1);
            border-bottom:none;
         }
         header>div .navBox>div:last-child{
             border-bottom:1px solid rgba(100,100,100,.1);
         }
    }