/*Section1*/
.section1 {
  position: relative;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.section1::before {
  width: 100%;
  height: 100vh;
  content: "";
  background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.div {
  width: 100%;
  height: 100vh;
  position: relative;
}

.div01 video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 0;
  transition: 0s;
}

.video02.is-inview {
  opacity: 0;
  transition: 0s;
}

.div01::after {
  width: 100%;
  height: 80vh;
  content: "";
  background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.div01.is-inview::after {
  opacity: 0;
}

.hero {
  width: 100%;
  height: 100%;
  background: url(../img/bg03.webp) no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  z-index: 3;
  clip-path: circle(0% at 50% 50%);
  mix-blend-mode: luminosity;
  transition: 1s;

  display: flex;
  justify-content: center;
  align-items: center;
}

.section1.isReady .hero {
  clip-path: circle(40% at 50% 0%);
  transition: 1s;
}

.heroImg01 {
  display: block;
  width: 66%;
  position: absolute;
  top: -48%;
  left: 17%;
  opacity: 0.6;
}

.heroTitle {
  margin-top: -7%;
  font-weight: 200;
  letter-spacing: 1em;
  color: var(--Green);
}

.hero svg {
  width: 45%;
  height: auto;
  display: block;
  position: absolute;
  top: 160px;
  right: 27.5%;

  fill: #fff;
  fill-opacity: 0;
  stroke: url(#gradation-1);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.isReady svg #logo01 {
  -webkit-animation: dash1 2s linear forwards;
  animation: dash1 2s linear forwards;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
}

.isReady svg #logo02 {
  -webkit-animation: dash1 2s linear forwards;
  animation: dash1 2s linear forwards;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
}

.isReady svg #logo03 {
  -webkit-animation: dash1 2s linear forwards;
  animation: dash1 2s linear forwards;
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
}

.isReady svg #logo04 {
  -webkit-animation: dash1 2s linear forwards;
  animation: dash1 2s linear forwards;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
}

.isReady svg #logo05 {
  -webkit-animation: dash1 2s linear forwards;
  animation: dash1 2s linear forwards;
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
}

.isReady svg #logo06 {
  -webkit-animation: dash1 2s linear forwards;
  animation: dash1 2s linear forwards;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
}

.isReady svg #logo07 {
  -webkit-animation: dash1 2s linear forwards;
  animation: dash1 2s linear forwards;
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
}

.isReady svg #logo08 {
  -webkit-animation: dash1 2s linear forwards;
  animation: dash1 2s linear forwards;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
}

.isReady svg #logo09 {
  -webkit-animation: dash1 2s linear forwards;
  animation: dash1 2s linear forwards;
  -webkit-animation-delay: 1.3s;
  animation-delay: 1.3s;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
}

-webkit-keyframes dash1 {
  0% {
    stroke-dashoffset: 800;
    stroke-width: 3px;
  }

  50% {
    stroke-dashoffset: 1600;
    stroke-width: 0.1px;
  }

  50.1% {
    stroke-dashoffset: 800;
  }

  80% {
    stroke-width: 2px;
    fill: #1bb;
    fill-opacity: 0;
  }

  100% {
    stroke-dashoffset: 0;
    stroke: #fff;
    stroke-width: 0;
    fill: #fff;
    fill-opacity: 1;
    stroke-dasharray: 400;
  }
}

@keyframes dash1 {
  0% {
    stroke-dashoffset: 800;
    stroke-width: 3px;
  }

  50% {
    stroke-dashoffset: 1600;
    stroke-width: 0.1px;
  }

  50.1% {
    stroke-dashoffset: 800;
  }

  80% {
    stroke-width: 2px;
    fill: #1bb;
    fill-opacity: 0;
  }

  100% {
    stroke-dashoffset: 0;
    stroke: #fff;
    stroke-width: 0;
    fill: #fff;
    fill-opacity: 1;
    stroke-dasharray: 400;
  }
}

.heroOutSide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

.heroOutSideInner {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 30px;
  text-align: center;
}

.heroOutSideInner p {
  display: block;
}

.heroOutSide2Title {
  font-weight: bold;
  font-size: 5vw;
  line-height: 1em;
  text-transform: uppercase;
  margin-top: 40vh;
}

/*Section2*/
.section2 {
  position: relative;
}

.section2 .content {
  position: relative;
  border-top: 1px solid var(--darkGray);
  border-bottom: 1px solid var(--darkGray);

  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.section2Box {
  width: 50%;
  aspect-ratio: 4/3;
  border-right: 1px solid var(--darkGray);
  padding: 20px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  line-height: 1.2em;
  text-align: center;
}
.section2Box:last-child {
  border-right: none;
}
.section2Box h1 {
  font-size: 2.5em;
  line-height: 1.2em;
}
.section2Box p {
  width: 100%;
  color: var(--lightGray);
}
.section2BtnGroup {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.section2BtnGroup .btn {
  width: calc(50% - 5px);
}
.section2BtnGroup .btn:last-child {
  width: 100%;
}

.section2Title {
  font-size: 20px;
  line-height: 1.2em;
  font-weight: bold;
  padding: 20px 0;
  width: 100%;
  text-align: left;
  overflow: hidden;
  border-bottom: 1px solid var(--darkGray);
}
.section2Title:nth-child(2) {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.section2Title01,
.section2Title02,
.section2Title03 {
  white-space: nowrap;
}

/*Section3*/
.section3 {
  position: relative;
}
.section3 .content {
  position: relative;
  border-bottom: 1px solid var(--darkGray);

  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}
.section3Title {
  font-size: 40px;
  line-height: 1.2em;
  font-weight: bold;
  padding: 20px 0;
  width: 100%;
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid var(--darkGray);
}
.section3Content {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 0 50px;
}
.aQuestion {
  width: 100%;
  position: relative;

  padding: 30px 10px;
  border-bottom: 1px solid var(--darkGray);
  transition: 0.3s;
}

.aQuestion:last-child {
  border-bottom: none;
}
.aQuestion a {
  color: var(--lightGray);
  text-decoration: underline;

  overflow-wrap: break-word;
  word-break: break-all;
}

.faqAccordion__title {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  cursor: pointer;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.2em;
}

.faqAccordion__icons {
  display: grid;
  place-content: center;
  transition: 0.4s;
}

.faqAccordion__icon--plus,
.faqAccordion__icon--minus {
  grid-area: 1/1/2/2;
  transition: 0.4s ease-in-out;
  font-size: 30px;
}

.faqAccordion__icon--minus {
  opacity: 0;
}

.faqAccordion__content {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 20px;
  transition: 0.4s ease-in-out;
}

.faqAccordion__content > * {
  overflow: hidden;
}

.faqAccordionText {
  width: 100%;
  font-size: 16px;
  color: var(--lightGray);
  line-height: 1.5em;
}

/* active */
.aQuestion.is-active .faqAccordion__content {
  grid-template-rows: 1fr;
  margin-top: 20px;
}

.aQuestion.is-active .faqAccordionText {
}

.aQuestion.is-active .faqAccordion__icon--plus {
  opacity: 0;
}

.aQuestion.is-active .faqAccordion__icon--minus {
  opacity: 1;
}

.aQuestion.is-active .faqAccordion__content > * {
  animation: overflowModify 0.5s ease-in-out forwards;
}

@keyframes overflowModify {
  0%,
  99.9% {
    overflow: hidden;
  }

  100% {
    overflow: visible;
  }
}

/*Light Box*/
.lightBoxBG {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: var(--Glass);
  backdrop-filter: blur(10px);
  z-index: 100;
}
.lightBox01 {
  clip-path: circle(0% at 20% 50%);
  transition: 1s;
}
.lightBox01.active {
  clip-path: circle(200% at 20% 50%);
  transition: 1s;
}
.lightBox02 {
  clip-path: circle(0% at 50% 50%);
  transition: 1s;
}
.lightBox02.active {
  clip-path: circle(200% at 50% 50%);
  transition: 1s;
}
.lightBox03 {
  clip-path: circle(0% at 80% 50%);
  transition: 1s;
}
.lightBox03.active {
  clip-path: circle(200% at 80% 50%);
  transition: 1s;
}
.lightBoxContent {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lightBoxContainer {
  width: 90%;
  height: 90%;
  max-width: 768px;
  position: relative;
  border-radius: 10px 10px;
  border: 1px solid var(--darkGray);
  background: var(--Glass);
  padding: 50px 20px;

  overflow-y: auto;
}
.lightBoxContainerContent {
  width: 100%;
  position: relative;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  gap: 30px;
}
.lightBoxClose {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  cursor: pointer;
}
.lightBoxSwitch {
  width: 250px;
  height: 50px;
  border-radius: 50px 50px;
  border: 1px solid var(--darkGray);

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.lightBoxOption {
  width: calc(50% - 8px);
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 50px 50px;
  text-align: center;
  font-weight: bold;
  transition: 0.3s;
}
.lightBoxOption i {
  margin-right: 10px;
}
.lightBoxOption.active {
  background: var(--Text);
  color: var(--Bg);
  transition: 0.3s;
}
.lightBoxOption:hover {
  background: var(--Text);
  color: var(--Bg);
  transition: 0.3s;
}
.lightBoxDevice {
  width: 100%;
  position: relative;
}
.optionDevice {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  flex-direction: column;
}
.optionDevice img {
  width: 100%;
  height: auto;
  display: block;
}
.optionDevice img:first-child {
  position: relative;
  z-index: 1;
}
.mobielDevice {
  opacity: 0;
  transition: 0.5s;
}
.desktopDevice {
  opacity: 0;
  transition: 0.5s;
  position: absolute;
  top: 0;
  left: 0;
}
.mobielDevice.active,
.desktopDevice.active {
  opacity: 1;
  transition: 0.5s;
}
.mobielDevice .aDevice {
  width: 50%;
  position: relative;

  mask-image: url(../img/iPhone.webp);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url(../img/iPhone.webp);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.desktopDevice .aDevice {
  width: 90%;
  position: relative;

  /*mask-image: url(../img/mac.webp);
    mask-size:100% 111%;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url(../img/mac.webp);
    -webkit-mask-size:100% 111%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;*/
}
.mobielDevice .swiper {
  width: 90%;
  position: absolute;
  top: 2%;
  left: 5%;
  z-index: 0;
}
.desktopDevice .swiper {
  width: 95%;
  position: absolute;
  top: 4%;
  left: 2.5%;
  z-index: 0;
}
.lightBoxContainerContent .flexContainer {
  width: 100%;
  gap: 10px;
}
.lightBoxContainerContent .flexContainer div {
  width: 30%;
}
.dropDownLightBox {
  width: 100%;
  height: 40px;
  font-size: 16px;
  line-height: 1em;
  padding: 10px 15px;
  margin: 0;
}
.lightBoxContainerContent .flexContainer div p {
  display: block;
  width: 100%;
  color: var(--lightGray);
  font-size: 10px;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.swiper-button-next,
.swiper-button-prev {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  color: var(--lightGray);
  margin: 0 auto;
  transition: 0.3s;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  color: var(--Text);
  transition: 0.3s;
}
.swiperControl {
  width: 100%;
  display: flex;
  margin-top: 20px;
}

/*////RWD////*/
@media screen and (max-width: 1660px) {
}

@media screen and (max-width: 1440px) {
}

@media screen and (max-width: 1366px) {
}

@media screen and (max-width: 1280px) {
}
@media screen and (max-width: 1024px) {
  .hero {
    background-attachment: inherit;
  }

  .hero svg {
    top: 140px;
  }

  .heroTitle {
    margin-top: -15%;
  }
  .section2Box {
    aspect-ratio: 3/4;
  }
  .section2Box h1 {
    font-size: 2.2em;
  }
}
@media (orientation: landscape) and (max-height: 767px) {
}

@media (orientation: portrait) and (max-height: 1180px) {
  .hero svg {
    width: 50%;
    right: 25%;
  }

  .heroTitle {
    margin-top: -60%;
  }
  .heroOutSideInner {
    padding: 0 100px;
  }
  .heroOutSide2Title {
    font-weight: bold;
    font-size: 11vw;
  }
  .box {
    font-size: 20px;
  }
  .logoBgContainer img {
    width: auto;
    height: 100%;
    bottom: 0;
    left: -20%;
  }
  .section2Box {
    border-right: none;
    border-bottom: 1px solid var(--darkGray);
    width: 100%;
    aspect-ratio: 4/3;
  }
  .section2Box:last-child {
    border-bottom: none;
  }
  .lightBox01,
  .lightBox03 {
    clip-path: circle(0% at 50% 50%);
  }
  .lightBox01.active,
  .lightBox03.active {
    clip-path: circle(200% at 50% 50%);
  }
  .mobielDevice .aDevice {
    width: 60%;
  }
}
@media (orientation: portrait) and (max-height: 1024px) {
  .mobielDevice .aDevice {
    width: 55%;
  }
}

@media screen and (max-width: 480px) {
  .status {
    background: transparent;
  }

  .section1.isReady .hero {
    clip-path: circle(50% at 50% 0%);
  }

  .hero svg {
    width: 80%;
    right: 10%;
    top: 140px;
  }

  .heroTitle {
    margin-top: -70%;
    font-size: 20px;
  }

  .heroOutSideInner {
    padding: 0 20px;
  }
  .heroOutSide2Title {
    font-size: 14vw;
  }
  .lightBoxContainer {
    padding: 30px 15px;
  }
  .logoBgContainer img {
    height: 80%;
    bottom: 10%;
    left: -30%;
  }
  .section2Title {
    font-size: 12px;
  }
  .section2Box {
    aspect-ratio: 1/1;
  }
  .lightBoxSwitch {
    width: 90%;
  }
  .mobielDevice .aDevice {
    width: 90%;
  }
  .lightBoxContainerContent .flexContainer {
    flex-direction: column;
  }
  .lightBoxContainerContent .flexContainer div {
    width: 90%;
  }
  .section3Content {
    padding: 0 20px;
  }
}
/*Iphone XR 414*896 */
@media (orientation: portrait) and (max-height: 896px) {
}

/*Iphone 12Pro 390*844 */
@media (orientation: portrait) and (max-height: 844px) {
}

@media (orientation: portrait) and (max-width: 390px) {
}

/*Iphone 10 375*812 */
@media (orientation: portrait) and (max-height: 812px) {
}

@media (orientation: portrait) and (max-width: 375px) {
}

/*Iphone 8Plus 414*736 */
@media (orientation: portrait) and (max-height: 736px) {
}

/*Iphone 8 375*667 */
@media (orientation: portrait) and (max-height: 667px) {
}

@media screen and (max-width: 360px) {
}

@media screen and (max-width: 320px) {
}