@font-face{
    font-family: 'NotoSansSC';
    src : url(NotoSansSC-Thin.otf);
}

@font-face{
    font-family: 'SourceSansPro';
    src : url(SourceSansPro-Bold.ttf);
}

body {
    font-family: 'NotoSansSC', serif;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    /* min-height: 100vh; */
    width: 100%;
    height: 100%;
    background-color: #223d73;
}


@media only screen and (min-width: 980px) {
    
    .main-content-mobile {
        display: none;
    }
    .main-content {
        display: flex;
        /* margin: 0 auto; */
        width: 100%;
        min-height: 100vh;
        flex-direction: column;
        justify-content: flex-end;  
        margin: 0;
        position: relative; 
    }

    .main-content header {
      background-image: url(top.png);
      color: white;
      text-align: center;
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-size: cover;
      background-position: center;
      position: relative;
    }
    .logo {
        display: flex;
        align-items: center;   /* 垂直居中 ⭐ */
    }
    .logo > a {
        display: flex;
        align-items: center;
    }
    .main-content header img {
      width: 325px;
      height: 85px; 
      vertical-align: middle;
    }
    .main-content header .r {
        float: right;
    }
    
    .main-content header .social-groups {
        position: absolute;
        right: 50px;   /* 距离右侧边距 */
        top: 50%;
        transform: translateY(-50%); /* 垂直居中 */
    }
    .main-content header .social-groups img {
        width: 137px;     
        height: 20px;     
        flex-shrink: 0;
        display: block;
    }
    .main-content .image {
      flex: 1;
      width: 100%;
      min-height: 1000px;
      position: relative; 
      overflow: hidden;
    }
    .main-content .image img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      object-position: center top;
    }
    
    .main-content .btn-groups {
        display: flex;
        position: absolute;
        bottom: 150px;
        left: 0;
        right: 0;
        justify-content: center;
        align-items: center;
    }
    .main-content .btn-groups .wrap {
        display: flex;
        align-items: center;
        gap: 0.3em;
        /* width: 100%; */
        padding: 0;
    }
    .main-content .btn-groups .wrap a {
        display: block;
        width: 3.05rem;
        margin-bottom: 0;
    }
    .main-content .btn-groups .wrap img {
        width: 3.05rem;
        height: auto;
        display: block;
        cursor: pointer;
    }

    .main-content footer {
      background: #091c42;
      color: white;
      text-align: center;
      width: 100%;
      height: 100px;
      font-size: 18px;
      display: flex;            
      justify-content: center;  
      align-items: center;
      flex-shrink: 0;
    }
    
    .main-content .content {
        color: #ffffff;
        font-size: .14rem;
        padding: 0 0 0 .2rem;
    }
    .main-content .content > div {
        display: inline-block;
    }
    .main-content .gli {
        width: 115px;
        height: 40px;
        /* position: relative; */
        vertical-align: middle;
        cursor: pointer;
        margin-left: 30px;
    }
    
}

@media only screen and (max-width: 980px) {
    .main-content {
        display: none;
    }
    .main-content-mobile {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;  
        margin: 0;
        position: relative; 
        min-height: 100vh;
    }

    .main-content-mobile header {
      background-image: url(mobile/top.png);
      color: white;
      text-align: center;
      width: 100%;
      height: 70px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-size: cover;
      background-position: center;
      position: relative; 
      margin: 0;
      /* padding: 0 1rem; */
      /* box-sizing: border-box; */
    }
    .logo {
        display: flex;
        align-items: center;   /* 垂直居中 ⭐ */
    }
    .logo > a {
        display: flex;
        align-items: center;
    }
    .main-content-mobile header img {
      width: 196px; /* 245px; */
      height: auto;
      /* vertical-align: middle; */
      display: block;
      margin-left: 10px;
    }

    .main-content-mobile .image {
      flex: 1;
      /* width: 100%;
      height: 100%; */
      /* min-height: 1085px; */
      position: relative; 
      overflow: hidden;
    }
    .main-content-mobile .image img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
      position: absolute;
      top: 0;
      left: 0;
      object-position: center top;
    }
    
    .main-content-mobile header .r {
        float: right;
        display: flex;
        gap: 0.2rem;       /* 图标间距 */
        align-items: center; 
        vertical-align: middle;
        flex-shrink: 1;                        /* 当空间不足时允许缩小 */
        overflow: hidden;                       /* 超出隐藏 */
    }
    
    .main-content-mobile header .social-groups {
        position: relative;
        /* top: .6rem; */
        /* right: 0rem; */
    }
    .main-content-mobile header .social-groups img {
        width: 89px;
        height: 14px;
        margin-right: 15px;
    }
    .main-content-mobile .btn-groups-mobile {
        display: flex;
        position: absolute;
        bottom: 90px;
        left: 0;
        right: 0;
        justify-content: center;
        align-items: center;
    }
    .main-content-mobile .btn-groups-mobile .wrap {
        display: flex;
        align-items: center;
        padding: 0;
        flex-direction: column;
    }
    .main-content-mobile .btn-groups-mobile .wrap a {
        display: inline-block;
    }
    .main-content-mobile .btn-groups-mobile .wrap img {
        width: auto;
        height: 1.5rem;
        display: inline-block;
        margin-bottom: .3rem;
    }
    
    .main-content-mobile footer {
        background: #091c42;
        color: white;
        text-align: center;
        width: 100%;
        height: 80px;
        font-size: 12px;
        display: flex;            
        justify-content: center;  
        align-items: center;
        flex-shrink: 0;
    }
    .main-content-mobile .gli {
        width: auto;
        height: .64rem;
        cursor: pointer;
        vertical-align: middle;
        margin-left: 0.3rem;
    } 
}