.wrap,
.wrapper,
body,
html {
  background: linear-gradient(135deg, #d7ecff 0%, #edf7ff 42%, #ffffff 100%);
}

.wrapper:before,
.wrapper:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.wrapper:before {
  z-index: 1;
  background:
    linear-gradient(rgba(41,126,218,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41,126,218,.13) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), rgba(0,0,0,.15));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), rgba(0,0,0,.15));
}

.wrapper:after {
  z-index: 2;
  background:
    repeating-linear-gradient(115deg, transparent 0 70px, rgba(40,132,230,.12) 70px 72px, transparent 72px 150px),
    linear-gradient(115deg, transparent 0 35%, rgba(255,255,255,.5) 48%, transparent 62%);
  background-size: 100% 100%, 220% 100%;
  animation: qgm-soft-flow 8s ease-in-out infinite;
}

.header .nav_box a,
.page_wp .txt_box,
.btn_download,
.btns_wp > h2 {
  color: #141414;
}

.page_title_box h2:empty,
.page_intro_box .txt_brief:empty,
.btns_wp > h2:empty {
  display: none;
}

.page_wp .page {
  --qgm-title-top: clamp(104px, 14vh, 150px);
  --qgm-title-height: 44px;
  --qgm-title-image-gap: clamp(24px, 4vh, 46px);
  --qgm-product-height: clamp(300px, 48vh, 620px);
  --qgm-product-half-height: clamp(150px, 24vh, 310px);
}

.header .nav_box .ic_line {
  background: #141414;
}

.btn_download {
  border-color: #141414;
}

.footer .foot,
.foot .links a,
.foot a {
  color: #525252;
}

.page,
.page_wp,
.page .page_bg,
.page_5 .page_bg,
.star_wp,
.star_wp .star_bg {
  background: linear-gradient(135deg, #d7ecff 0%, #edf7ff 42%, #ffffff 100%) !important;
}

.page_wp .page.qgm-slide-visible {
  left: 0 !important;
}

.page_wp .page.qgm-slide-animate {
  transition: transform .68s cubic-bezier(.22,.72,.18,1), opacity .68s ease;
  -webkit-transition: -webkit-transform .68s cubic-bezier(.22,.72,.18,1), opacity .68s ease;
  will-change: transform, opacity;
}

.page_wp .page.qgm-slide-enter-down {
  transform: translateY(100%);
  -webkit-transform: translateY(100%);
  opacity: .98;
}

.page_wp .page.qgm-slide-enter-up {
  transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
  opacity: .98;
}

.page_wp .page.qgm-slide-leave-up {
  transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
  opacity: .98;
}

.page_wp .page.qgm-slide-leave-down {
  transform: translateY(100%);
  -webkit-transform: translateY(100%);
  opacity: .98;
}

.page_1 .page_bg:before {
  background: linear-gradient(135deg, #d7ecff 0%, #edf7ff 42%, #ffffff 100%) !important;
}

.page .page_bg:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 0 36%, rgba(255,255,255,.56) 48%, transparent 62%);
  transform: translateX(-120%);
  animation: qgm-light-sweep 7s ease-in-out infinite;
}

.page_1.show .page_bg,
.page_1.hide .page_bg:before,
.page_5.show .page_bg,
.star_wp.show .star_bg,
.star_wp.show .star_box,
.page_4.show .light_wp,
.page_4.show .light_1,
.page_4.show .light_2,
.page_4.show .light_3,
.page_4.show .light_4,
.page_4.show .light_5,
.page_4.show .meteor_box {
  animation: none !important;
  -webkit-animation: none !important;
}

.star_wp .star_box,
.page_4 .light_wp,
.page_4 .meteor_box,
#canvas {
  display: none !important;
}

.btn_control {
  right: 34px;
  z-index: 60;
}

.btn_control a {
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  margin: 0 0 14px;
  border: 2px solid rgba(18,86,168,.55);
  border-radius: 999px;
  background: rgba(255,255,255,.72) !important;
  box-shadow: 0 6px 18px rgba(29,94,166,.18);
  transition: height .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.btn_control a.cur,
.btn_control a:hover {
  width: 12px;
  height: 26px;
  border-color: #0b63ce;
  background: #0b63ce !important;
  box-shadow: 0 8px 22px rgba(11,99,206,.32);
}

@keyframes qgm-soft-flow {
  0% {
    background-position: 0 0, 120% 0;
    opacity: .52;
  }
  50% {
    background-position: 0 0, 20% 0;
    opacity: .85;
  }
  100% {
    background-position: 0 0, -80% 0;
    opacity: .52;
  }
}

@keyframes qgm-light-sweep {
  0%, 18% {
    transform: translateX(-120%);
    opacity: 0;
  }
  38%, 62% {
    opacity: .58;
  }
  82%, 100% {
    transform: translateX(120%);
    opacity: 0;
  }
}

.page_5 .page_bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2500px;
  height: 1600px;
  margin: -800px 0 0 -1250px;
  background: url(../img/page1_bg.jpg) center center no-repeat;
  transform-origin: center 708px;
  -webkit-transform-origin: center 708px;
}

.page_5.show .page_bg {
  animation: p1bg_effect1 300s both infinite linear, opc_effect .5s both linear;
  -webkit-animation: p1bg_effect1 300s both infinite linear, opc_effect .5s both linear;
}

.tutorial_title_box {
  position: absolute;
  left: 0;
  top: calc(50% - 370px);
  z-index: 19;
  width: 100%;
  color: #142033;
  text-align: center;
  font-size: 36px;
  line-height: 44px;
  font-weight: 600;
  letter-spacing: 0;
}

.tutorial_video_box {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 18;
  width: 960px;
  max-width: 78vw;
  aspect-ratio: 16 / 9;
  margin: -300px 0 0 -480px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(0,0,0,.44);
  box-shadow: 0 24px 80px rgba(0,0,0,.48), inset 0 0 80px rgba(255,255,255,.08);
}

.tutorial_video {
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  object-fit: contain;
}

.page_wp .page_title_box,
.page_wp .page_intro_box {
  position: absolute;
  left: 0;
  z-index: 16;
  width: 100%;
  color: #142033;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .42s ease, transform .42s ease;
  -webkit-transition: opacity .42s ease, -webkit-transform .42s ease;
}

.page_wp .show .page_title_box,
.page_wp .show .page_intro_box {
  opacity: 1;
}

.page_wp .page_title_box {
  top: var(--qgm-title-top);
  transform: translateY(-8px);
  -webkit-transform: translateY(-8px);
}

.page_wp .show .page_title_box {
  transform: translateY(0);
  -webkit-transform: translateY(0);
}

.page_wp .page_title_box h2 {
  font-size: 36px;
  line-height: 44px;
  font-weight: 600;
}

.page_wp .page_intro_box {
  bottom: 142px;
  transform: translateY(8px);
  -webkit-transform: translateY(8px);
}

.page_wp .show .page_intro_box {
  transform: translateY(0);
  -webkit-transform: translateY(0);
}

.page_wp .page_intro_box .txt_brief {
  width: min(760px, 82vw);
  margin: 0 auto;
  color: #31445f;
  font-size: 15px;
  line-height: 26px;
  font-weight: 400;
}

.page_4 .page_intro_box {
  top: clamp(210px, 22vh, 250px);
  bottom: 150px;
  transform: none;
  -webkit-transform: none;
}

.page_4.show .page_intro_box {
  transform: none;
  -webkit-transform: none;
}

.page_4 .page_intro_box .txt_brief {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(980px, 86vw);
  height: 100%;
  min-height: 0;
  max-height: none;
  padding: 32px 42px;
  border: 1px solid rgba(72,131,199,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.62);
  box-shadow: 0 24px 70px rgba(51,111,180,.13);
  color: #21344f;
  font-size: 16px;
  line-height: 30px;
  text-align: center;
  white-space: pre-line;
  overflow: auto;
}

.page_wp .intro_highlights {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 0 0 8px;
  color: #1d3555;
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
}

.page_wp .intro_highlights span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
}

.css3 .page_wp .product_img_box {
  display: flex;
}

.page_wp .product_img_box {
  top: calc(var(--qgm-title-top) + var(--qgm-title-height) + var(--qgm-title-image-gap) + var(--qgm-product-half-height));
  left: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(84vw, 1450px);
  height: var(--qgm-product-height);
  margin: 0;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  overflow: visible;
  perspective: 1200px;
}

.page_wp .product_img_box img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 22px 70px rgba(0,0,0,.42);
  transition: transform .34s ease, box-shadow .34s ease, filter .34s ease;
  transform-origin: center center;
  will-change: transform;
}

.page_wp .product_img_box:hover img {
  transform: scale(1.18) translateY(-8px);
  box-shadow: 0 46px 120px rgba(34,109,190,.32), 0 22px 60px rgba(0,0,0,.2);
  filter: saturate(1.03) contrast(1.02);
}

.download_actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
}

.download_actions .btn_download {
  margin: 10px 0 0;
}

.btns_wp {
  bottom: 42px;
  transition: opacity .28s ease, transform .28s ease;
  -webkit-transition: opacity .28s ease, -webkit-transform .28s ease;
}

.btns_wp > h2 {
  margin: 0 0 4px;
  line-height: 32px;
  color: #243247 !important;
}

.video-page-active .btns_wp,
.video-page-active .footer,
.wrap:has(.page_5.show) .btns_wp,
.wrap:has(.page_5.show) .footer {
  display: none;
}

.wrap:has(.product_img_box:hover) .btns_wp {
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px);
  -webkit-transform: translateY(18px);
}

@media only screen and (max-width:1023px) {
  .page_wp .page {
    --qgm-title-top: clamp(82px, 13vh, 112px);
    --qgm-title-height: 34px;
    --qgm-title-image-gap: clamp(18px, 3.8vh, 30px);
    --qgm-product-height: clamp(230px, 44vh, 430px);
    --qgm-product-half-height: clamp(115px, 22vh, 215px);
  }

  .page_wp .page_title_box {
    top: var(--qgm-title-top);
  }

  .page_wp .page_title_box h2 {
    font-size: 28px;
    line-height: 34px;
  }

  .page_wp .page_intro_box {
    bottom: 128px;
  }

  .page_wp .page_intro_box .txt_brief {
    width: 86vw;
    font-size: 14px;
    line-height: 23px;
  }

  .page_4 .page_intro_box {
    top: 156px;
    bottom: 142px;
  }

  .page_4 .page_intro_box .txt_brief {
    width: 90vw;
    height: 100%;
    min-height: 0;
    max-height: none;
    padding: 24px 24px;
    font-size: 14px;
    line-height: 25px;
  }

  .page_wp .intro_highlights {
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 14px;
    line-height: 20px;
  }

  .page_wp .product_img_box {
    width: 92vw;
    height: var(--qgm-product-height);
    top: calc(var(--qgm-title-top) + var(--qgm-title-height) + var(--qgm-title-image-gap) + var(--qgm-product-half-height));
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
  }

  .page_wp .product_img_box:hover img {
    transform: scale(1.08) translateY(-4px);
  }

  .tutorial_video_box {
    width: 92vw;
    max-width: 92vw;
    margin-left: -46vw;
  }

  .tutorial_title_box {
    top: calc(50% - 310px);
    font-size: 28px;
    line-height: 34px;
  }
}