@use "utils" as *;
@use "global" as *;

.index {
  &.main {
    display: flex;
    flex-direction: column;
    background-color: rgb(255, 255, 255);
    overflow: hidden;
  }
  .section1 {
    display: flex;
    flex-direction: column;
    width: 1920px;
    height: 5200px;
    min-height: 5200px;
  }
  .cover {
    position: absolute;
    top: 3900px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    width: 1920px;
    height: 1300px;
  }
  .rect {
    position: absolute;
    top: 2715px;
    right: 1368px;
    bottom: 1431px;
    left: 93px;
    width: 459px;
    height: 1054px;
    background-color: rgb(59, 59, 65);
    border-radius: 40px 40px 40px 40px;
  }
  .rect1 {
    position: absolute;
    top: 3242px;
    right: 1404px;
    bottom: 1472px;
    left: 129px;
    width: 387px;
    height: 486px;
    background-color: rgb(217, 217, 217);
    border-radius: 40px 40px 40px 40px;
  }
  .big_title {
    position: absolute;
    top: 3264px;
    right: 1415px;
    bottom: 1576px;
    left: 136px;
    display: flex;
    justify-content: center;
    width: 369px;
    height: 360px;
    font: 400 37px/1.21 "Inter", Helvetica, Arial, serif;
    color: rgb(0, 0, 0);
    text-align: center;
  }
  .big_title1 {
    position: absolute;
    top: 4057px;
    right: 1587px;
    bottom: 1098px;
    left: 247px;
    display: flex;
    justify-content: center;
    width: 86px;
    height: 45px;
    font: 400 37px/1.21 "Inter", Helvetica, Arial, serif;
    color: rgb(59, 59, 65);
    text-align: center;
  }
  .big_title11 {
    position: absolute;
    top: 4161px;
    right: 1564px;
    bottom: 994px;
    left: 247px;
    display: flex;
    justify-content: center;
    width: 109px;
    height: 45px;
    font: 400 37px/1.21 "Inter", Helvetica, Arial, serif;
    color: rgb(59, 59, 65);
    text-align: center;
  }
  .big_title12 {
    position: absolute;
    top: 4263px;
    right: 1445px;
    bottom: 892px;
    left: 247px;
    display: flex;
    justify-content: center;
    width: 228px;
    height: 45px;
    font: 400 37px/1.21 "Inter", Helvetica, Arial, serif;
    color: rgb(59, 59, 65);
    text-align: center;
  }
  .image {
    position: absolute;
    top: 2747px;
    right: 1404px;
    bottom: 2066px;
    left: 129px;
    width: 387px;
    height: 387px;
    border-radius: 40px 40px 40px 40px;
  }
  .hero_title {
    position: absolute;
    top: 3146px;
    right: 1523.5px;
    bottom: 2000px;
    left: 226.5px;
    display: flex;
    justify-content: center;
    width: 170px;
    height: 54px;
    font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
    color: rgb(255, 255, 255);
    text-align: center;
  }
  .rect2 {
    position: absolute;
    top: 2715px;
    right: 731px;
    bottom: 1431px;
    left: 730px;
    width: 459px;
    height: 1054px;
    background-color: rgb(59, 59, 65);
    border-radius: 40px 40px 40px 40px;
  }
  .rect21 {
    position: absolute;
    top: 3242px;
    right: 767px;
    bottom: 1467px;
    left: 766px;
    width: 387px;
    height: 491px;
    background-color: rgb(217, 217, 217);
    border-radius: 40px 40px 40px 40px;
  }
  .big_title2 {
    position: absolute;
    top: 3264px;
    right: 787px;
    bottom: 1531px;
    left: 775px;
    display: flex;
    justify-content: center;
    width: 358px;
    height: 405px;
    font: 400 37px/1.21 "Inter", Helvetica, Arial, serif;
    color: rgb(0, 0, 0);
    text-align: center;
  }
  .image1 {
    position: absolute;
    top: 2747px;
    right: 767px;
    bottom: 2066px;
    left: 766px;
    width: 387px;
    height: 387px;
    border-radius: 40px 40px 40px 40px;
  }
  .hero_title1 {
    position: absolute;
    top: 3145px;
    right: 881px;
    bottom: 2001px;
    left: 880px;
    display: flex;
    justify-content: center;
    width: 159px;
    height: 54px;
    font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
    color: rgb(255, 255, 255);
    text-align: center;
  }
  .rect3 {
    position: absolute;
    top: 2715px;
    right: 93px;
    bottom: 1431px;
    left: 1368px;
    width: 459px;
    height: 1054px;
    background-color: rgb(59, 59, 65);
    border-radius: 40px 40px 40px 40px;
  }
  .rect22 {
    position: absolute;
    top: 3242px;
    right: 129px;
    bottom: 1467px;
    left: 1404px;
    width: 387px;
    height: 491px;
    background-color: rgb(217, 217, 217);
    border-radius: 40px 40px 40px 40px;
  }
  .big_title21 {
    position: absolute;
    top: 3264px;
    right: 149px;
    bottom: 1540px;
    left: 1413px;
    display: flex;
    justify-content: center;
    width: 358px;
    height: 396px;
    font: 400 36px/1.22 "Inter", Helvetica, Arial, serif;
    color: rgb(0, 0, 0);
    text-align: center;
  }
  .image2 {
    position: absolute;
    top: 2747px;
    right: 129px;
    bottom: 2066px;
    left: 1404px;
    width: 387px;
    height: 387px;
    border-radius: 40px 40px 40px 40px;
  }
  .hero_title2 {
    position: absolute;
    top: 3138px;
    right: 207.5px;
    bottom: 2008px;
    left: 1482.5px;
    display: flex;
    justify-content: center;
    width: 230px;
    height: 54px;
    font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
    color: rgb(255, 255, 255);
    text-align: center;
  }
  .wrapper {
    position: absolute;
    top: 1300px;
    right: 0px;
    bottom: 2600px;
    left: 0px;
    display: flex;
    flex-direction: column;
    width: 1920px;
    height: 1300px;
    min-height: 1300px;
    background-color: rgb(59, 60, 65);
  }
  .image11 {
    position: absolute;
    top: 155px;
    right: 1011px;
    bottom: 828px;
    left: 93px;
    width: 816px;
    height: 317px;
    border-radius: 40px 40px 40px 40px;
  }
  .image21 {
    position: absolute;
    top: 155px;
    right: 93px;
    bottom: 828px;
    left: 1012px;
    width: 815px;
    height: 317px;
    border-radius: 40px 40px 40px 40px;
  }
  .image12 {
    position: absolute;
    top: 697px;
    right: 1011px;
    bottom: 286px;
    left: 93px;
    width: 816px;
    height: 317px;
    border-radius: 40px 40px 40px 40px;
  }
  .image22 {
    position: absolute;
    top: 697px;
    right: 93px;
    bottom: 286px;
    left: 1012px;
    width: 815px;
    height: 317px;
    border-radius: 40px 40px 40px 40px;
  }
  .hero_title3 {
    position: absolute;
    top: 491px;
    right: 1011px;
    bottom: 701px;
    left: 93px;
    display: flex;
    justify-content: center;
    width: 816px;
    height: 108px;
    font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
    color: rgb(255, 255, 255);
    text-align: center;
  }
  .hero_title4 {
    position: absolute;
    top: 491px;
    right: 93px;
    bottom: 701px;
    left: 1012px;
    display: flex;
    justify-content: center;
    width: 815px;
    height: 108px;
    font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
    color: rgb(255, 255, 255);
    text-align: center;
  }
  .hero_title5 {
    position: absolute;
    top: 1028px;
    right: 93px;
    bottom: 164px;
    left: 1012px;
    display: flex;
    justify-content: center;
    width: 815px;
    height: 108px;
    font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
    color: rgb(255, 255, 255);
    text-align: center;
  }
  .hero_title6 {
    position: absolute;
    top: 1033px;
    right: 1012px;
    bottom: 159px;
    left: 93px;
    display: flex;
    justify-content: center;
    width: 815px;
    height: 108px;
    font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
    color: rgb(255, 255, 255);
    text-align: center;
  }
  .wrapper1 {
    position: absolute;
    top: 100px;
    right: 0px;
    bottom: 3900px;
    left: 0px;
    display: flex;
    flex-direction: column;
    width: 1920px;
    height: 1200px;
    min-height: 1200px;
    background: var(--src) center center / 100% 100% no-repeat;
  }
  .rect4 {
    position: absolute;
    top: 345px;
    right: 1011px;
    bottom: 413px;
    left: 93px;
    width: 816px;
    height: 442px;
    background-color: rgba(217, 217, 217, 0.149);
  }
  .hero_title11 {
    position: absolute;
    top: 375px;
    right: 893px;
    bottom: 459px;
    left: 108px;
    width: 919px;
    height: 366px;
    font: 700 101px/1.2 "Inter", Helvetica, Arial, serif;
    color: rgb(59, 59, 65);
  }
  .rect5 {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 5100px;
    left: 0px;
    width: 1920px;
    height: 100px;
    background-color: rgb(59, 60, 65);
  }
  .cover1 {
    position: absolute;
    top: 0px;
    right: 1737px;
    bottom: 5075px;
    left: 49px;
    width: 134px;
    height: 125px;
  }
  .image4 {
    position: absolute;
    top: 21px;
    right: 1762px;
    bottom: 5112px;
    left: 75px;
    width: 83px;
    height: 67px;
  }
  .hero_title7 {
    position: absolute;
    top: 23px;
    right: 934px;
    bottom: 5123px;
    left: 862px;
    width: 124px;
    height: 54px;
    font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
    color: rgb(255, 255, 255);
  }
  .hero_title8 {
    position: absolute;
    top: 23px;
    right: 576px;
    bottom: 5123px;
    left: 1061px;
    width: 283px;
    height: 54px;
    font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
    color: rgb(255, 255, 255);
  }
  .hero_title9 {
    position: absolute;
    top: 23px;
    right: 43px;
    bottom: 5123px;
    left: 1668px;
    width: 209px;
    height: 54px;
    font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
    color: rgb(255, 255, 255);
  }
  .hero_title10 {
    position: absolute;
    top: 23px;
    right: 327px;
    bottom: 5123px;
    left: 1419px;
    width: 174px;
    height: 54px;
    font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
    color: rgb(255, 255, 255);
  }
  .hero_title21_box {
    position: absolute;
    top: 4px;
    right: 1489px;
    bottom: 5097px;
    left: 116px;
    display: flex;
    justify-content: center;
    width: 315px;
    height: 99px;
  }
  .hero_title21 {
    font: 400 46px/1.21 "Inter", Helvetica, Arial, serif;
    color: rgb(255, 255, 255);
    text-align: center;
  }
  .hero_title21_span0 {
    font: 1em/1.21 "Inter", Helvetica, Arial, serif;
  }
  .hero_title21_span1 {
    font: 1.7826086956521738em/1.2 "Inter", Helvetica, Arial, serif;
  }
}
