* {
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
  font-family: SF PRO DISPLAY;
}
html,
body {
  height: 100%;
  width: 100%;
}
#main {
  position: relative;
  overflow: hidden;
}
#page {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #000;
}
#page > nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 20px;
  height: 7vh;
  width: 50vw;
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
}
#page > nav > button {
  padding: 7px 20px;
  border-radius: 50px;
  border: none;
  background-color: #fff;
}
#page > nav > h3 {
  font-weight: 400;
}
#page > video {
  height: 100%;
  width: 50%;
  object-fit: cover;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
#page-bottom {
  height: 20%;
  width: 25%;
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#page-bottom > h3 {
  color: #dadada93;
  margin-bottom: 1vw;
}
#page1 {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #fff;
}
#page1 > video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
#page1 > h1 {
  font-size: 4vw;
  color: #fff;
  font-weight: 400;
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

#page2 {
  position: relative;
  height: 100vh;
  width: 100vw;
}
#page2 > video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
#page2 > h1 {
  font-size: 4vw;
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
  color: #fff;
  font-weight: 400;
}

#page3 {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #fff;
}
#page3 > img {
  width: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#page3-upper {
  height: 25%;
  width: 35%;
  position: absolute;
  z-index: 9;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
}
#page3-upper > img {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
}
#page3-upper-inner {
  position: absolute;
  bottom: 0%;
  height: 60%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 80px;
  color: #ff823d;
}
#page3-upper-inner > h3 {
  font-weight: 500;
}
#page3 > button {
  position: absolute;
  bottom: 7%;
  left: 50%;
  transform: translateX(-50%);
  padding: 15px 30px;
  border: 1px solid #000;
  font-weight: 500;
  background-color: #fff;
  border-radius: 50px;
  font-size: 1.4vw;
}

#page4 {
  position: relative;
  height: 100vh;
  width: 100vw;
}
#page4 > video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
#center-page4 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  font-size: 2vw;
}

#page5 {
  display: flex;
  position: relative;
  height: 60vh;
  width: 100vw;
}
.left5 {
  position: relative;
  height: 100%;
  width: 50%;
}
.left5 > h1 {
  font-size: 2.3vw;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10%;
}
.right5 {
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  width: 50%;
  padding-left: 5vw;
}
.right5 > h3 {
  font-size: 2vw;
  width: 90%;
  color: #484848d7;
}
.right5 > button {
  padding: 10px 20px;
  border: none;
  background-color: #ff823d;
  color: #fff;
  font-weight: 400;
  border-radius: 50px;
  font-size: 1.3vw;
  margin-top: 1.5vw;
}
#page6 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  position: relative;
  height: 70vh;
  width: 100vw;
  background-color: #f5f5f7;
}
#page6 > h3 {
  margin-bottom: 1vw;
  font-size: 2vw;
}
#page6 > h1 {
  margin-bottom: 1.5vw;
  font-size: 4vw;
}
#page6 > p {
  font-size: 1.2vw;
  width: 60%;
  font-weight: 700;
  color: #545454c9;
}

#page7 {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #f5f5f7;
}

#page7 > canvas {
  position: relative;
  max-width: 100vw;
  max-height: 100vh;
  z-index: 99;
}
#page8 {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #f5f5f7;
}
#page8 > h1 {
  width: 20%;
  top: 50%;
  transform: translateY(-50%);
  left: 5%;
  font-size: 1.3vw;
  font-weight: 500;
  color: #4d4d4d;
  z-index: 99;
  position: absolute;
}
#page8 > h1 > span {
  color: #000;
}
#page9 {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #f5f5f7;
}
#page9 > h1 {
  width: 20%;
  top: 50%;
  transform: translateY(-50%);
  right: 5%;
  font-size: 1.3vw;
  font-weight: 500;
  color: #4d4d4d;
  z-index: 99;
  position: absolute;
}
#page9 > h1 > span {
  color: #000;
}
#page10 {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #f5f5f7;
}
#page10 > h1 {
  width: 20%;
  top: 50%;
  transform: translateY(-50%);
  left: 5%;
  font-size: 1.3vw;
  font-weight: 500;
  color: #4d4d4d;
  z-index: 99;
  position: absolute;
}
#page10 > h1 > span {
  color: #000;
}
#page11 {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #f5f5f7;
}
#page11 > h1 {
  width: 20%;
  top: 50%;
  transform: translateY(-50%);
  right: 5%;
  font-size: 1.3vw;
  font-weight: 500;
  color: #4d4d4d;
  z-index: 99;
  position: absolute;
}
#page11 > h1 > span {
  color: #000;
}
#page12 {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #f5f5f7;
}
#page12 > h1 {
  width: 20%;
  top: 50%;
  transform: translateY(-50%);
  left: 5%;
  font-size: 1.3vw;
  font-weight: 500;
  color: #4d4d4d;
  z-index: 99;
  position: absolute;
}
#page12 > h1 > span {
  color: #000;
}
#page13 {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #f5f5f7;
}
#page13 > h1 {
  width: 20%;
  top: 50%;
  transform: translateY(-50%);
  right: 5%;
  font-size: 1.3vw;
  font-weight: 500;
  color: #4d4d4d;
  z-index: 99;
  position: absolute;
}
#page13 > h1 > span {
  color: #000;
}
#page14 {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #fff;
}
.left14 {
  height: 90%;
  width: 45%;
  position: relative;
  background-image: url(https://www.apple.com/v/apple-vision-pro/a/images/overview/design/glass_top__k3b8lzqd1l2m_large.jpg);
  background-size: cover;
}
.right14 {
  height: 90%;
  width: 45%;
  position: relative;
  background-image: url(https://www.apple.com/v/apple-vision-pro/a/images/overview/design/glass_side__gm4agomrwl2e_large.jpg);
  background-size: cover;
}
#page15 {
  position: relative;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
#center-page15 {
  height: 90%;
  width: 95%;
  position: relative;
  overflow: hidden;
}
#center-page15 > video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
#page16 {
  position: relative;
  height: 120vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#page16 > h2 {
  position: absolute;
  width: 50%;
  color: #434343c7;
  font-weight: 500;
  top: 5%;
}
#page16 > h2 > span {
  color: #000;
}
#page16 > img {
  width: 60%;
  position: absolute;
  bottom: 0%;
}
#page16 > button {
  position: absolute;
  bottom: 10%;
  padding: 10px 20px;
  font-size: 1.5vw;
  border-radius: 50px;
  background-color: #ff823d;
  color: #fff;
  font-weight: 500;
  border: none;
}
#page17 {
  position: relative;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: #000;
  color: #fff;
}
#page17 > h4 {
  font-size: 2vw;
  font-weight: 500;
  margin-bottom: 2vw;
}
#page17 > h1 {
  font-size: 5vw;
  line-height: 1;
  font-weight: 500;
  margin-bottom: 3vw;
}
#page17 > p {
  font-size: 1.5vw;
  font-weight: 500;
  margin-bottom: 2vw;
  color: #ffffff7c;
  width: 50%;
  text-align: center;
}
#page17 > p > span {
  color: #fff;
}

#page18 {
  position: relative;
  height: 100vh;
  width: 100vw;
  top: 0%;
}
#page18 > canvas {
  position: relative;
  max-width: 100vw;
  max-height: 100vw;
}
#page19 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative;
  height: 30vh;
  width: 100vw;
  background-color: #000;
  flex-direction: column;
  text-align: center;
  font-size: 1.5vw;
}
#page19 > h5 {
  width: 35%;
}
#page20 {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #000;
}
#page20 > video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
#center-page20 {
  position: absolute;
  height: 20%;
  width: 20%;
  bottom: 18%;
  right: 5%;
  color: #fff;
}
#center-page20 > h1 {
  margin-bottom: 1.7vw;
}
#page21 {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #000;
}
#page21 > #troff {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  width: 50%;
  z-index: 9;
}
#page21 > #tron {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  width: 50%;
}
#page22 {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #000;
}
#page22 > #snroff {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  width: 50%;
  z-index: 9;
}
#page22 > #snron {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  width: 50%;
}
#page23 {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #000;
}
#page23 > img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  opacity: 0;
}

@media (max-width: 767px) {
  #page > video {
    width: 100%;
  }
}