* {
  margin: 0;
}

html,
body {
  width: 100%;
  overflow-x: hidden;
  min-height: 100vh;
}
.footer {
  margin-top: 35px;
  width: 100%;
  height: 5vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.frame {
  width: 30%;
  height: 100%;
}
.frame img {
  width: 195px;
  height: 100%;
}
.icons {
  width: 15vw;
  display: flex;
  justify-content: space-between;
}
.icons img {
  width: 45px;
}
@media screen and (max-width: 1920px) {
  .app {
    width: 100%;
    background-color: #15181d;
    position: relative;
    min-height: 100vh;
    display: flex;
    justify-content: center;
  }

  .tr-back-img {
    position: absolute;
    top: 0;
    right: 0;
  }

  .main {
    width: 100%;
    margin: 0 244px 0 244px;
  }

  .mine {
    margin-top: 100px;
    padding-top: 4px;
    display: flex;
    flex-wrap: wrap;
  }

  .self-introduction {
    display: flex;
    flex-wrap: wrap;
    width: 280px;
    margin-left: 16px;
    margin-bottom: 80px;
  }

  .self-name {
    font-weight: bold;
    color: #fff;
    font-size: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
  }

  .self-des {
    color: #fff;
    opacity: 62%;
    font-size: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
  }

  .title {
    width: 100%;
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 48px;
  }

  .come {
    font-size: 20px;
    color: #fff;
    opacity: 80%;
    font-weight: 300;
    margin-bottom: 48px;
  }

  .git-button {
    width: 100%;
    margin-bottom: 128px;
  }

  .button {
    width: 126px;
    line-height: 56px;
    font-weight: 600;
    font-size: #000;
    background-color: #fce803;
    border-radius: 100px;
    display: flex;
    align-content: center;
    justify-content: center;
  }

  .card-2 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 573px;
  }

  .CardSvg1 {
    background-image: url('/public/Card1.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .CardSvg2 {
    background-image: url('/public/Card2.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .CardSvg3 {
    background-image: url('/public/Card3.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .CardSvg4 {
    background-image: url('/public/Card4.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .CardSvg5 {
    background-image: url('/public/Card5.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .CardSvg6 {
    background-image: url('/public/Card6.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .CardSvg7 {
    background-image: url('/public/Card7.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .card-2-1 {
    width: 45%;
  }

  .card-2-2 {
    width: 45%;
  }

  .card-title {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
  }

  .card-des {
    color: #fff;
    opacity: 64%;
    font-size: 20px;
  }

  .mgauto {
    margin: auto;
  }

  .height278 {
    height: 378px;
  }

  .height354 {
    height: 454px;
  }

  .mt32 {
    margin-top: 32px;
  }

  .ml48 {
    margin-left: 48px;
  }

  .mb192 {
    margin-bottom: 192px;
  }

  .pt-64 {
    padding-top: 64px;
  }

  .pt-74 {
    padding-top: 74px;
  }

  .card-content {
    width: 372px;
  }

  .card-des {
    margin-top: 16px;
  }

  .card-1 {
    width: 100%;
  }

  .card-1 .card-content {
    width: 610px;
  }

  .join {
    margin-left: auto;
    margin-right: 64px;
  }
}
@media screen and (max-width: 1320px) {
  .app {
    width: 100%;
    background-color: #15181d;
    position: relative;
    min-height: 100vh;
    display: flex;
    justify-content: center;
  }

  .tr-back-img {
    position: absolute;
    top: 0;
    right: 0;
  }

  .main {
    width: 100%;
    margin: 0 96px 0 96px;
  }

  .mine {
    margin-top: 192px;
    padding-top: 4px;
    display: flex;
    flex-wrap: wrap;
  }

  .self-introduction {
    display: flex;
    flex-wrap: wrap;
    width: 280px;
    margin-left: 16px;
    margin-bottom: 80px;
  }

  .self-name {
    font-weight: bold;
    color: #fff;
    font-size: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
  }

  .self-des {
    color: #fff;
    opacity: 62%;
    font-size: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
  }

  .title {
    width: 100%;
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 48px;
  }

  .come {
    font-size: 20px;
    color: #fff;
    opacity: 80%;
    font-weight: 300;
    margin-bottom: 48px;
  }

  .git-button {
    width: 100%;
    margin-bottom: 128px;
  }

  .button {
    width: 126px;
    line-height: 56px;
    font-weight: 600;
    font-size: #000;
    background-color: #fce803;
    border-radius: 100px;
    display: flex;
    align-content: center;
    justify-content: center;
  }

  .card-2 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 473px;
  }

  .CardSvg1 {
    background-image: url('/public/Card1.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .CardSvg2 {
    background-image: url('/public/Card2.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .CardSvg3 {
    background-image: url('/public/Card3.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .CardSvg4 {
    background-image: url('/public/Card4.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .CardSvg5 {
    background-image: url('/public/Card5.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .CardSvg6 {
    background-image: url('/public/Card6.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .CardSvg7 {
    background-image: url('/public/Card7.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .card-2-1 {
    width: 48%;
  }

  .card-2-2 {
    width: 48%;
  }

  .card-title {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
  }

  .card-des {
    color: #fff;
    opacity: 64%;
    font-size: 14px;
  }

  .mgauto {
    margin: auto;
  }

  .height278 {
    height: 278px;
  }

  .height354 {
    height: 354px;
  }

  .mt32 {
    margin-top: 32px;
  }

  .ml48 {
    margin-left: 48px;
  }

  .mb192 {
    margin-bottom: 192px;
  }

  .pt-64 {
    padding-top: 64px;
  }

  .pt-74 {
    padding-top: 74px;
  }

  .card-content {
    width: 272px;
  }

  .card-des {
    margin-top: 16px;
  }

  .card-1 {
    width: 100%;
  }

  .card-1 .card-content {
    width: 312px;
  }

  .join {
    margin-left: auto;
    margin-right: 64px;
  }
}
@media screen and (max-width: 960px) {
  .app {
    width: 100%;
    background-color: #15181d;
    position: relative;
    min-height: 100vh;
    display: flex;
    justify-content: center;
  }

  .tr-back-img {
    position: absolute;
    top: 0;
    right: 0;
  }

  .main {
    width: 100%;
    margin: 0 96px 0 96px;
  }

  .mine {
    margin-top: 192px;
    padding-top: 4px;
    display: flex;
    flex-wrap: wrap;
  }

  .self-introduction {
    display: flex;
    flex-wrap: wrap;
    width: 280px;
    margin-left: 16px;
    margin-bottom: 80px;
  }

  .self-name {
    font-weight: bold;
    color: #fff;
    font-size: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
  }

  .self-des {
    color: #fff;
    opacity: 62%;
    font-size: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
  }

  .title {
    width: 100%;
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 48px;
  }

  .come {
    font-size: 20px;
    color: #fff;
    opacity: 80%;
    font-weight: 300;
    margin-bottom: 48px;
  }

  .git-button {
    width: 100%;
    margin-bottom: 128px;
  }

  .button {
    width: 126px;
    line-height: 56px;
    font-weight: 600;
    font-size: #000;
    background-color: #fce803;
    border-radius: 100px;
    display: flex;
    align-content: center;
    justify-content: center;
  }

  .card-2 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 473px;
  }

  .CardSvg1 {
    background-image: url('/public/Card1.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .CardSvg2 {
    background-image: url('/public/Card2.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .CardSvg3 {
    background-image: url('/public/Card3.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .CardSvg4 {
    background-image: url('/public/Card4.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .CardSvg5 {
    background-image: url('/public/Card5.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .CardSvg6 {
    background-image: url('/public/Card6.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .CardSvg7 {
    background-image: url('/public/Card7.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .card-2-1 {
    width: 48%;
  }

  .card-2-2 {
    width: 48%;
  }

  .card-title {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
  }

  .card-des {
    color: #fff;
    opacity: 64%;
    font-size: 14px;
  }

  .mgauto {
    margin: auto;
  }

  .height278 {
    height: 278px;
  }

  .height354 {
    height: 354px;
  }

  .mt32 {
    margin-top: 32px;
  }

  .ml48 {
    margin-left: 48px;
  }

  .mb192 {
    margin-bottom: 192px;
  }

  .pt-64 {
    padding-top: 64px;
  }

  .pt-74 {
    padding-top: 74px;
  }

  .card-content {
    width: 272px;
  }

  .card-des {
    margin-top: 16px;
  }

  .card-1 {
    width: 100%;
  }

  .card-1 .card-content {
    width: 312px;
  }

  .join {
    margin-left: auto;
    margin-right: 64px;
  }
  .footer {
    margin-top: 35px;
    width: 100%;
    height: 5vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .frame {
    width: 30%;
    height: 100%;
  }
  .frame img {
    width: 95px;
    height: 100%;
  }
  .icons {
    width: 25vw;
    display: flex;
    justify-content: space-between;
  }
  .icons img {
    width: 35px;
  }
}
@media screen and (max-width: 880px) {
  .app {
    width: 100%;
    background-color: #15181d;
    position: relative;
    min-height: 100vh;
    display: flex;
    justify-content: center;
  }

  .tr-back-img {
    position: absolute;
    top: 0;
    right: 0;
  }

  .main {
    width: 100%;
    margin: 0 46px 0 46px;
  }

  .mine {
    margin-top: 192px;
    padding-top: 4px;
    display: flex;
    flex-wrap: wrap;
  }

  .self-introduction {
    display: flex;
    flex-wrap: wrap;
    width: 280px;
    margin-left: 16px;
    margin-bottom: 80px;
  }

  .self-name {
    font-weight: bold;
    color: #fff;
    font-size: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
  }

  .self-des {
    color: #fff;
    opacity: 62%;
    font-size: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
  }

  .title {
    width: 100%;
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 48px;
  }

  .come {
    font-size: 20px;
    color: #fff;
    opacity: 80%;
    font-weight: 300;
    margin-bottom: 48px;
  }

  .git-button {
    width: 100%;
    margin-bottom: 128px;
  }

  .button {
    width: 126px;
    line-height: 56px;
    font-weight: 600;
    font-size: #000;
    background-color: #fce803;
    border-radius: 100px;
    display: flex;
    align-content: center;
    justify-content: center;
  }

  .card-2 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 473px;
  }

  .CardSvg1 {
    background-image: url('/public/Card1.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .CardSvg2 {
    background-image: url('/public/Card2.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .CardSvg3 {
    background-image: url('/public/Card3.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .CardSvg4 {
    background-image: url('/public/Card4.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .CardSvg5 {
    background-image: url('/public/Card5.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .CardSvg6 {
    background-image: url('/public/Card6.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .CardSvg7 {
    background-image: url('/public/Card7.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .card-2-1 {
    width: 48%;
  }

  .card-2-2 {
    width: 48%;
  }

  .card-title {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
  }

  .card-des {
    color: #fff;
    opacity: 64%;
    font-size: 14px;
  }

  .mgauto {
    margin: auto;
  }

  .height278 {
    height: 278px;
  }

  .height354 {
    height: 354px;
  }

  .mt32 {
    margin-top: 32px;
  }

  .ml48 {
    margin-left: 28px;
  }

  .mb192 {
    margin-bottom: 192px;
  }

  .pt-64 {
    padding-top: 64px;
  }

  .pt-74 {
    padding-top: 74px;
  }

  .card-content {
    width: 272px;
  }

  .card-des {
    margin-top: 16px;
  }

  .card-1 {
    width: 100%;
  }

  .card-1 .card-content {
    width: 312px;
  }

  .join {
    margin-left: auto;
    margin-right: 64px;
  }
}
@media screen and (max-width: 660px) {
  .app {
    width: 100%;
    background-color: #15181d;
    position: relative;
    min-height: 100vh;
    display: flex;
    justify-content: center;
  }

  .tr-back-img {
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
  }

  .main {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    margin: 0 25px 0 25px;
  }

  .mine {
    margin-top: 72px;
    padding-top: 4px;
    display: flex;
    flex-wrap: wrap;
  }

  .self-introduction {
    display: flex;
    flex-wrap: wrap;
    width: 280px;
    margin-left: 16px;
    margin-bottom: 30px;
  }

  .self-name {
    font-weight: bold;
    color: #fff;
    font-size: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
  }

  .self-des {
    color: #fff;
    opacity: 62%;
    font-size: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
  }

  .title {
    width: 100%;
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 28px;
  }

  .come {
    font-size: 16px;
    color: #fff;
    opacity: 80%;
    font-weight: 300;
    margin-bottom: 48px;
  }

  .git-button {
    width: 100%;
    margin-bottom: 28px;
  }

  .button {
    width: 116px;
    line-height: 36px;
    font-weight: 600;
    font-size: #000;
    background-color: #fce803;
    border-radius: 100px;
    display: flex;
    align-content: center;
    justify-content: center;
  }

  .card-2 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: auto;
    flex-wrap: wrap;
  }

  .CardSvg1 {
    background-image: url('/public/Card1.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .CardSvg2 {
    background-image: url('/public/Card2.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .CardSvg3 {
    background-image: url('/public/Card3.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .CardSvg4 {
    background-image: url('/public/Card4.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .CardSvg5 {
    background-image: url('/public/Card5.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .CardSvg6 {
    background-image: url('/public/Card6.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .CardSvg7 {
    background-image: url('/public/Card7.svg#svgView(preserveAspectRatio(none))');
    background-size: 100% 100%;
  }

  .card-2-1 {
    width: 100%;
    height: 485px;
    margin-bottom: 35px;
  }

  .card-2-2 {
    width: 100%;
    height: 485px;
  }

  .card-title {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
  }

  .card-des {
    color: #fff;
    opacity: 64%;
    width: 100%;
    font-size: 16px;
  }

  .mgauto {
    margin: auto;
  }

  .height278 {
    height: 278px;
  }

  .height354 {
    height: 260px;
  }

  .mt32 {
    margin-top: 32px;
  }

  .ml48 {
    margin-left: 8px;
  }

  .mb192 {
    margin-bottom: 192px;
  }

  .pt-64 {
    padding-top: 44px;
  }

  .pt-74 {
    padding-top: 34px;
  }

  .card-content {
    width: 90%;
    margin: auto;
  }

  .card-des {
    width: 100%;
    margin-top: 6px;
  }
  .mt15 {
    margin-top: 15px;
  }
  .card-1 {
    width: 100%;
  }

  .card-1 .card-content {
    width: 65%;
    margin: 0;
    margin-top: 15px;
  }
  .pl-15 {
    margin: 0;
    margin-left: 15px !important;
  }
  .pr-15 {
    margin: 0;
    margin-left: auto;
    margin-right: 15px !important;
  }
  .join {
    margin: 0;
    margin-left: auto !important;
    margin-right: 15px !important;
  }
  .join .card-title {
    text-align: right;
  }
  .join .card-des {
    text-align: right;
  }
  .footer {
    margin-top: 35px;
    width: 100%;
    height: 5vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .frame {
    width: 30%;
    height: 100%;
  }
  .frame img {
    width: 95px;
    height: 100%;
  }
  .icons {
    width: 30vw;
    display: flex;
    justify-content: space-between;
  }
  .icons img {
    width: 25px;
  }
}
