@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Jost:ital,wght@0,100..900;1,100..900&display=swap");
* {
  padding: 0;
  margin: 0;
  border: 0;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:focus,
:active {
  outline: none;
}

a:focus,
a:active {
  outline: none;
}

nav,
footer,
header,
aside {
  display: block;
}

html,
body {
  height: 100%;
  width: 100%;
  font-size: 100%;
  line-height: unset !important;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

input::-ms-clear {
  display: none;
}

button {
  cursor: pointer;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

a,
a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

ul li {
  list-style: none;
}

img {
  vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.SI2202landing {
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-weight: 400;
  z-index: 10;
}
.SI2202landing h1,
.SI2202landing h2,
.SI2202landing h3,
.SI2202landing h4,
.SI2202landing h5,
.SI2202landing h6,
.SI2202landing ul,
.SI2202landing ol,
.SI2202landing p,
.SI2202landing div,
.SI2202landing span {
  line-height: normal;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  border: none;
  margin-bottom: 0px !important;
}
.SI2202landing section {
  background-repeat: no-repeat;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
.SI2202landing img {
  max-width: 100%;
  pointer-events: none;
}

html {
  overflow-x: hidden;
}

.SI2202landing__main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: right;
      -ms-flex-pack: right;
          justify-content: right;
  background-image: url("../image/main/SI2202-main-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
@media (max-width: 600px) {
  .SI2202landing__main {
    background-image: url("../image/main/SI2202-main-backgroundmob.png");
  }
}
.SI2202landing__main-maincontainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2vw;
  padding-left: 8%;
  padding-right: 2%;
  padding-top: 2%;
  width: 72%;
}
@media (max-width: 600px) {
  .SI2202landing__main-maincontainer {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
    padding-left: 4%;
    gap: 1vw;
    padding-top: 1%;
  }
}
.SI2202landing__main-image {
  width: 48%;
  position: relative;
}
@media (max-width: 600px) {
  .SI2202landing__main-image {
    width: 100%;
  }
}
.SI2202landing__main-image img {
  width: 100%;
  height: 100%;
}
.SI2202landing__main-information {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-bottom: 8%;
  position: relative;
}
@media (max-width: 600px) {
  .SI2202landing__main-information {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
    padding-bottom: 0%;
    padding-left: 19%;
  }
}
.SI2202landing__main-logo {
  width: 68%;
  padding-bottom: 8%;
}
@media (max-width: 600px) {
  .SI2202landing__main-logo {
    display: none;
  }
}
.SI2202landing__main-logo img {
  width: 100%;
  height: 100%;
}
.SI2202landing__main-moblogo {
  width: 10.8%;
  padding-bottom: 8%;
  top: 10%;
  left: -3%;
  display: none;
  position: absolute;
}
@media (max-width: 600px) {
  .SI2202landing__main-moblogo {
    display: block;
  }
}
.SI2202landing__main-moblogo img {
  width: 100%;
  height: 100%;
}
.SI2202landing__main-text {
  font-weight: 200;
  font-size: 6.67vw;
  text-transform: uppercase;
  font-family: Jost;
}
@media (max-width: 600px) {
  .SI2202landing__main-text {
    font-size: 17.44vw;
  }
}
.SI2202landing__main-title {
  font-size: 5.46vw;
  font-weight: 400;
  color: #00cfd6;
  text-transform: uppercase;
  font-family: Jost;
  padding-bottom: 11%;
}
@media (max-width: 600px) {
  .SI2202landing__main-title {
    padding-bottom: 0%;
    font-size: 14.36vw;
    margin-top: -6.8%;
  }
}
.SI2202landing__main-titles {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.SI2202landing__main-subtitle {
  font-size: 2.31vw;
  text-transform: uppercase;
  font-weight: 330;
  font-family: Jost;
}
@media (max-width: 600px) {
  .SI2202landing__main-subtitle {
    font-size: 6.15vw;
  }
}
.SI2202landing__main-twosubtitle {
  font-size: 2.31vw;
  text-transform: uppercase;
  font-weight: 330;
  font-family: Jost;
}
@media (max-width: 600px) {
  .SI2202landing__main-twosubtitle {
    font-size: 6.15vw;
  }
}
.SI2202landing__power {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  background-image: url("../image/power/SI2202-power-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  background-position: center center;
}
@media (max-width: 600px) {
  .SI2202landing__power {
    background-image: url("../image/power/SI2202-power-backgroundmob.png");
  }
}
.SI2202landing__power-powercontainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.3vw;
  width: 86%;
  padding-right: 2%;
  padding-left: 16%;
  padding-bottom: 13%;
}
@media (max-width: 600px) {
  .SI2202landing__power-powercontainer {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
    padding-left: 2%;
    gap: 0vw;
    padding-bottom: 19%;
    margin-top: -13%;
  }
}
.SI2202landing__power-image {
  width: 63%;
  position: relative;
}
@media (max-width: 600px) {
  .SI2202landing__power-image {
    display: none;
  }
}
.SI2202landing__power-image img {
  width: 100%;
  height: 100%;
}
.SI2202landing__power-mobimage {
  width: 105%;
  display: none;
  position: relative;
}
@media (max-width: 600px) {
  .SI2202landing__power-mobimage {
    display: block;
  }
}
.SI2202landing__power-mobimage img {
  width: 100%;
  height: 100%;
}
.SI2202landing__power-information {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1vw;
  -webkit-transform: translateY(118%);
      -ms-transform: translateY(118%);
          transform: translateY(118%);
  width: 42%;
  position: relative;
}
@media (max-width: 600px) {
  .SI2202landing__power-information {
    -webkit-transform: translateY(0%);
        -ms-transform: translateY(0%);
            transform: translateY(0%);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: -10%;
  }
}
.SI2202landing__power-titles {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0vw;
}
.SI2202landing__power-title {
  font-size: 3.24vw;
  text-transform: uppercase;
  font-weight: 300;
  font-family: Jost;
}
@media (max-width: 600px) {
  .SI2202landing__power-title {
    font-size: 9.23vw;
  }
}
.SI2202landing__power-subtitle {
  font-size: 4.24vw;
  text-transform: uppercase;
  font-weight: 430;
  font-family: Jost;
}
@media (max-width: 600px) {
  .SI2202landing__power-subtitle {
    font-size: 10.23vw;
  }
}
.SI2202landing__power-icon {
  width: 35%;
}
@media (max-width: 600px) {
  .SI2202landing__power-icon {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
  }
}
.SI2202landing__power-icon img {
  width: 100%;
  height: 100%;
}
.SI2202landing__ceramic {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-image: url("../image/ceramic/SI2202-ceramic-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.SI2202landing__ceramic-ceramiccontainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 2%;
  padding-right: 2%;
  padding-bottom: 1%;
  width: 70%;
  gap: 0vw;
}
@media (max-width: 600px) {
  .SI2202landing__ceramic-ceramiccontainer {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
    padding-bottom: 35%;
    padding-right: 3%;
  }
}
.SI2202landing__ceramic-image {
  width: 95%;
  position: relative;
}
@media (max-width: 600px) {
  .SI2202landing__ceramic-image {
    width: 100%;
  }
}
.SI2202landing__ceramic-image img {
  width: 100%;
  height: 100%;
}
.SI2202landing__ceramic-information {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.5vw;
  width: 50%;
  position: relative;
}
@media (max-width: 600px) {
  .SI2202landing__ceramic-information {
    width: 100%;
    gap: 8vw;
    margin-top: -4%;
  }
}
.SI2202landing__ceramic-icon {
  width: 20.5%;
}
@media (max-width: 600px) {
  .SI2202landing__ceramic-icon {
    width: 16%;
  }
}
.SI2202landing__ceramic-icon img {
  width: 100%;
  height: 100%;
}
.SI2202landing__ceramic-title {
  font-size: 3.24vw;
  text-transform: uppercase;
  width: 100%;
  font-family: Jost;
  text-align: center;
}
@media (max-width: 600px) {
  .SI2202landing__ceramic-title {
    font-size: 9.26vw;
    text-align: center;
    width: 73%;
  }
}
.SI2202landing__steam {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.SI2202landing__steam-video {
  position: absolute;
  height: 110%;
  width: 100%;
  scale: 1.15;
  top: -5%;
  z-index: -1;
}
@media (max-width: 600px) {
  .SI2202landing__steam-video {
    scale: 4.83;
    top: -7%;
  }
}
.SI2202landing__steam-video video {
  width: 100%;
  height: 100%;
}
.SI2202landing__steam-steamcontainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 11%;
  padding-right: 2%;
  padding-top: 2.3%;
  width: 69%;
  gap: 2.3vw;
}
@media (max-width: 600px) {
  .SI2202landing__steam-steamcontainer {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
    padding-left: 0%;
    padding-top: 17%;
  }
}
.SI2202landing__steam-information {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.5vw;
  margin-top: -15%;
  position: relative;
  width: 32.5%;
}
@media (max-width: 600px) {
  .SI2202landing__steam-information {
    margin-top: 0%;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 7vw;
    width: 90%;
  }
}
.SI2202landing__steam-icon {
  width: 45%;
  padding-bottom: 6.7%;
}
.SI2202landing__steam-icon img {
  width: 100%;
  height: 100%;
}
.SI2202landing__steam-titles {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.7vw;
}
@media (max-width: 600px) {
  .SI2202landing__steam-titles {
    gap: 0vw;
  }
}
.SI2202landing__steam-title {
  font-size: 3.44vw;
  text-transform: uppercase;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Jost;
}
@media (max-width: 600px) {
  .SI2202landing__steam-title {
    font-size: 10.26vw;
    text-align: start;
    font-weight: 350;
  }
}
.SI2202landing__steam-image {
  width: 57%;
}
@media (max-width: 600px) {
  .SI2202landing__steam-image {
    width: 100%;
    margin-left: -27%;
  }
}
.SI2202landing__steam-image img {
  width: 100%;
  height: 100%;
}
.SI2202landing__function {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  background-color: #00f6ff;
  background-image: url("../image/function/SI2202-function-shadow.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
@media (max-width: 600px) {
  .SI2202landing__function {
    background-image: url("../image/function/SI2202-function-mobshadow.png");
    background-size: 110% 110%;
    background-color: transparent;
  }
}
.SI2202landing__function-functioncontainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 82%;
  gap: 4vw;
  padding-left: 6%;
  padding-bottom: 14.8%;
  padding-right: 2%;
}
@media (max-width: 600px) {
  .SI2202landing__function-functioncontainer {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
    padding-bottom: 90%;
    gap: 19vw;
    margin-top: -5%;
    padding-left: 2%;
  }
}
.SI2202landing__function-image {
  width: 67%;
  position: relative;
  z-index: 2;
}
@media (max-width: 600px) {
  .SI2202landing__function-image {
    width: 121%;
    rotate: -15deg;
    -webkit-transform: translateX(-17.3%);
        -ms-transform: translateX(-17.3%);
            transform: translateX(-17.3%);
  }
}
.SI2202landing__function-image img {
  width: 100%;
  height: 100%;
}
.SI2202landing__function-shadow {
  width: 200%;
  position: absolute;
  top: 5%;
  left: -13%;
  z-index: -1;
}
@media (max-width: 600px) {
  .SI2202landing__function-shadow {
    display: none;
  }
}
.SI2202landing__function-shadow img {
  width: 100%;
  height: 100%;
}
.SI2202landing__function-lines {
  width: 64%;
  position: absolute;
  left: 29.8%;
  bottom: -28.5%;
}
@media (max-width: 600px) {
  .SI2202landing__function-lines {
    width: 83%;
    bottom: -42%;
    left: 23%;
  }
}
.SI2202landing__function-lines img {
  width: 100%;
  height: 100%;
}
.SI2202landing__function-information {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.3vw;
  width: 30%;
  -webkit-transform: translateY(40%);
      -ms-transform: translateY(40%);
          transform: translateY(40%);
  z-index: 2;
  position: relative;
}
@media (max-width: 600px) {
  .SI2202landing__function-information {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
    gap: 3.9vw;
    padding-bottom: 4%;
  }
}
.SI2202landing__function-icon {
  width: 48%;
}
@media (max-width: 600px) {
  .SI2202landing__function-icon {
    width: 123%;
  }
}
.SI2202landing__function-icon img {
  width: 100%;
  height: 100%;
}
.SI2202landing__function-title {
  font-size: 3.24vw;
  text-transform: uppercase;
  text-align: center;
  font-family: Jost;
}
@media (max-width: 600px) {
  .SI2202landing__function-title {
    font-size: 10.26vw;
  }
}
.SI2202landing__system {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.SI2202landing__system-video {
  position: absolute;
  height: 101%;
  width: 136.5%;
  z-index: -1;
  right: -6%;
  scale: 1.1;
}
@media (max-width: 600px) {
  .SI2202landing__system-video {
    scale: 3.4;
  }
}
.SI2202landing__system-video video {
  width: 100%;
  height: 100%;
}
.SI2202landing__system-systemcontainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 84%;
  padding-left: 2%;
}
@media (max-width: 600px) {
  .SI2202landing__system-systemcontainer {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 3vw;
    width: 100%;
    margin-top: -7%;
    padding-bottom: 25%;
  }
}
.SI2202landing__system-information {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2.5vw;
  margin-right: -10%;
  position: relative;
  z-index: 2;
}
@media (max-width: 600px) {
  .SI2202landing__system-information {
    margin-right: 0%;
    gap: 5.3vw;
  }
}
.SI2202landing__system-shadow {
  width: 100%;
  position: absolute;
  scale: 2.8;
  z-index: -1;
  opacity: 0.8;
}
.SI2202landing__system-shadow img {
  width: 100%;
  height: 100%;
}
.SI2202landing__system-icon {
  width: 31%;
}
@media (max-width: 600px) {
  .SI2202landing__system-icon {
    width: 24%;
  }
}
.SI2202landing__system-icon img {
  width: 100%;
  height: 100%;
}
.SI2202landing__system-title {
  font-size: 3.24vw;
  text-transform: uppercase;
  text-align: center;
  font-family: Jost;
  width: 80%;
}
@media (max-width: 600px) {
  .SI2202landing__system-title {
    font-size: 11.79vw;
  }
}
.SI2202landing__system-image {
  width: 111%;
  -webkit-transform: translateY(-8.3%) translateX(-7.3%) scale(1.145);
      -ms-transform: translateY(-8.3%) translateX(-7.3%) scale(1.145);
          transform: translateY(-8.3%) translateX(-7.3%) scale(1.145);
  margin-top: -13%;
  position: relative;
}
@media (max-width: 600px) {
  .SI2202landing__system-image {
    -webkit-transform: translateY(0%) translateX(-9.8%) scale(1);
        -ms-transform: translateY(0%) translateX(-9.8%) scale(1);
            transform: translateY(0%) translateX(-9.8%) scale(1);
    width: 124%;
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
  }
}
.SI2202landing__system-image img {
  width: 100%;
  height: 100%;
}