:root {
  --c-white: #fff;
  --c-black: #000;
  --c-1: #0025e3;
  --c-2: #2c2e3b;
  --c-3: #f1f1fa;
  --c-4: #f0f1f9;
  --c-5: #00f0ff;
  --c-6: #07165f;
  --c-7: #e7e9f5;
  --font-sans-serif: "Poppins", sans-serif;
  --font-sans-serif-header: "Ubuntu", sans-serif;
  --font-serif: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --base-bg: var(--c-4);
  --base-ff: var(--font-sans-serif);
  --base-fz: calc(var(--vw, 1vw)*1.25);
  --base-lh: 1.444444444;
  --base-tc: var(--c-2);
  --base-lc: inherit;
  --base-mw: 320px;
  --base-ts: 0.3s;
  --base-rd: 1.6rem;
  --gap: 15px;
  --gap-y: 0;
  --btn-fz: calc(var(--vw, 1vw)*0.9375);
  --btn-ff: var(--font-sans-serif-header);
  --btn-pd: 0.8888888889em 1.333333333em;
  --btn-height: 3.388888889em;
  --btn-rd: 8.333333333em;
  --btn-bg: var(--c-2);
  --btn-color: var(--c-white);
  --h-s-h1: calc(var(--vw, 1vw)*5.72917);
  --h-s-h2: calc(var(--vw, 1vw)*3.125)
}

.clearfix:after {
  content: "";
  display: block;
  clear: both
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}

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

html {
  font-size: 62.5%;
  scroll-behavior: smooth
}

body {
  position: relative;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--base-tc);
  background: var(--base-bg);
  font: var(--base-fz)/var(--base-lh) var(--base-ff);
  min-width: var(--base-mw);
  overflow-anchor: none;
  font-optical-sizing: auto
}

.lity-active {
  overflow: hidden
}

img {
  max-width: 100%;
  height: auto
}

.gm-style img {
  max-width: none
}

.h,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-sans-serif-header);
  margin: 0;
  line-height: 1.2;
  letter-spacing: normal;
  letter-spacing: .01em
}

.h1:not(:last-child),
.h2:not(:last-child),
.h3:not(:last-child),
.h4:not(:last-child),
.h5:not(:last-child),
.h6:not(:last-child),
.h:not(:last-child),
h1:not(:last-child),
h2:not(:last-child),
h3:not(:last-child),
h4:not(:last-child),
h5:not(:last-child),
h6:not(:last-child) {
  margin-bottom: 1.4rem
}

.h1,
h1 {
  font-size: var(--h-s-h1)
}

.h2,
h2 {
  font-size: var(--h-s-h2)
}

.h3,
h3 {
  font-size: var(--h-s-h3)
}

.h4,
h4 {
  font-size: var(--h-s-h4)
}

.h5,
h5 {
  font-size: var(--h-s-h5)
}

.h6,
h6 {
  font-size: var(--h-s-h6)
}

p {
  margin: 0
}

p:not(:last-child) {
  margin-bottom: 2rem
}

a {
  color: inherit;
  text-decoration: none
}

a:hover {
  text-decoration: underline
}

ol,
ul {
  padding-left: 1.25em
}

.lt {
  font-weight: 300 !important
}

.rg {
  font-weight: 400 !important
}

.md {
  font-weight: 500 !important
}

.sbd {
  font-weight: 600 !important
}

.bd {
  font-weight: 700 !important
}

.under {
  text-decoration: underline
}

.ttu {
  text-transform: uppercase
}

.tar {
  text-align: right
}

.tal {
  text-align: left
}

.tac {
  text-align: center
}

.hero .item_floating-text,
.theme-block p,
.ub {
  font-family: Ubuntu, sans-serif
}

.pop {
  font-family: Poppins, sans-serif
}

.c-1 {
  color: var(--c-1) !important
}

.c-2 {
  color: var(--c-2) !important
}

.c-3 {
  color: var(--c-3) !important
}

.c-4 {
  color: var(--c-4) !important
}

.c-5 {
  color: var(--c-5) !important
}

.icon {
  --i-size: 2.4rem;
  fill: currentColor;
  stroke: currentColor;
  color: inherit;
  min-width: var(--i-size);
  width: var(--i-size);
  height: var(--i-size);
  display: inline-block;
  -webkit-mask-size: contain;
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  background-color: currentColor;
  -webkit-mask-image: none;
  mask-image: none
}

.icon-arrow--r {
  -webkit-mask-image: url(../images/icons/icon-arrow--r.svg);
  mask-image: url(../images/icons/icon-arrow--r.svg)
}

.icon-r-l {
  -webkit-mask-image: url(../images/icons/icon-r-l.svg);
  mask-image: url(../images/icons/icon-r-l.svg)
}

.logo {
  transition: all var(--base-ts) ease-in-out;
  color: inherit;
  max-width: calc(var(--vw, 1vw)*100*0.1026);
  min-width: 14rem;
  -webkit-mask-size: contain;
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  background-color: currentColor
}

.logo,
.logo picture {
  position: relative;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: inherit;
  flex-wrap: nowrap;
  flex-direction: row;
  width: 100%
}

.logo picture {
  height: 100%;
  opacity: 0;
  -webkit-user-select: none;
  user-select: none
}

.logo img {
  width: 100%;
  height: auto;
  pointer-events: none
}

.image,
.image picture {
  position: relative;
  display: flex;
  width: 100%;
  height: auto
}

.image picture {
  align-items: center;
  align-content: center;
  justify-content: inherit;
  flex-wrap: nowrap;
  flex-direction: row;
  min-height: 100%;
  z-index: 1
}

.image img {
  width: 100%
}

.image--cover {
  min-height: 100%;
  height: auto
}

.image--cover img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.wrapper {
  left: 0;
  top: 0;
  width: 100%;
  flex-direction: column;
  min-height: calc(var(--vh, 1vh)*100);
  z-index: 2
}

.content,
.wrapper {
  position: relative;
  display: flex
}

.content {
  flex-direction: column;
  flex: 1;
  z-index: 0;
  overflow: hidden
}

.ct {
  position: relative;
  width: calc(var(--vw, 1vw)*100 - 16.66667%);
  margin-left: auto;
  margin-right: auto;
  z-index: 1
}

.sc {
  position: relative;
  width: 100%
}

.sc_bg {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  z-index: -1
}

.sc_bg,
.sc_bg .d {
  position: absolute
}

.sc_bg .d {
  --w: inherit;
  --h: inherit;
  width: var(--w);
  height: var(--h)
}

.sc_bg .d svg {
  width: 100%;
  height: 100%
}

.sc_nav {
  position: relative;
  height: calc(var(--vw, 1vw)*3.48958);
  font-size: calc(var(--vw, 1vw)*3.48958);
  left: 0;
  width: 100%;
  bottom: 0;
  display: flex;
  justify-content: center
}

.sc_nav-inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  padding: .0895522388em .1791044776em;
  gap: 0 1.194029851em;
  background: #e7e9f5;
  border-radius: 3.7rem;
  --n-size: 0.8358208955em
}

.sc_nav-inner a {
  width: var(--n-size);
  height: var(--n-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  border-radius: 100%
}

.sc_nav-inner a .dot {
  position: absolute;
  inset: 0;
  margin: auto;
  width: .8rem;
  height: .8rem;
  border-radius: 100%;
  background: var(--c-2);
  transition: all .2s ease;
  z-index: 0
}

.sc_nav-inner a .icon {
  --i-size: 0.3582089552em;
  transition: all .2s ease;
  transform-origin: center;
  transform: scale(0);
  color: var(--c-white);
  z-index: 1
}

.sc_nav-inner a.active .dot {
  width: 100%;
  height: 100%;
  background: var(--c-1)
}

.sc_nav-inner a.active .icon {
  transform: scale(1)
}

.sc_nav-inner a:not(.active):hover .dot {
  width: 1.6rem;
  height: 1.6rem;
  background: var(--c-1)
}

.sc_nav-inner a[data-hide=true] {
  display: none
}

.sc_nav-inner .indicator {
  left: var(--left, 1.2rem);
  width: var(--n-size);
  height: var(--n-size);
  position: absolute;
  border-radius: 100%;
  background: var(--c-1);
  transition: all .3s ease
}

.sc_nav-inner .indicator.move .icon {
  transform: scale(0)
}

.sc_notice {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center
}

.sc_notice .col {
  position: relative;
  padding: 0 2.4rem
}

.sc_notice .col_text {
  text-align: center;
  text-transform: uppercase
}

.sc_notice .col-cross {
  --c-size: 2.4rem;
  width: var(--c-size);
  min-width: var(--c-size);
  height: var(--c-size);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0
}

.sc_notice .col-cross:after,
.sc_notice .col-cross:before {
  content: "";
  position: absolute;
  width: 1.4rem;
  height: .2rem;
  border-radius: .2rem;
  background: currentColor;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg)
}

.sc_notice .col-cross:after {
  transform: translate(-50%, -50%) rotate(45deg)
}

.sc_notice .col:first-child .col-cross:first-of-type {
  left: 0
}

.sc_notice .col:first-child .col-cross:nth-of-type(2),
.sc_notice .col:nth-child(2) .col-cross:first-of-type {
  right: calc(var(--c-size)*-0.5)
}

.sc_notice .col:nth-child(3) .col-cross:first-of-type {
  right: 0
}

.sc_text {
  position: relative
}

.sc_text:not(:last-child) {
  margin-bottom: 5.6rem
}

.sc_buttons {
  position: relative;
  display: flex;
  gap: 1.2rem
}

.intro {
  padding: 15rem 0;
  height: calc(var(--vh, 1vh)*100);
  display: flex;
  align-items: center;
  align-content: center
}

.hero {
  padding: 5rem 0
}

.hero .sc_bg .d {
  --w: calc(var(--vw, 1vw)*59.94792);
  --h: calc(var(--w)*0.62467);
  bottom: calc(var(--h)*-0.10153);
  right: calc(var(--vw, 1vw)*3.64583)
}

.hero .sc_bg .d svg {
  fill: var(--c-1);
  opacity: .9;
  filter: blur(55rem)
}

.hero_content {
  position: relative;
  width: 100%;
  gap: 3.2rem;
  display: flex
}

.hero_content:not(:last-child) {
  margin-bottom: 4rem
}

.hero .item {
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  background: #e7f3ff;
  border-radius: var(--base-rd);
  min-height: 100%;
  padding: calc(var(--vw, 1vw)*2.08333) 0;
  display: flex;
  flex-wrap: wrap
}

.hero .item_wrap:first-child {
  max-width: 40.5%;
  width: 100%
}

.hero .item_wrap:first-child .item {
  aspect-ratio: 1/1.162037037
}

.hero .item_wrap:first-child .item_lottise {
  position: relative;
  height: auto;
  padding: 0 calc(var(--vw, 1vw)*2.08333)
}

.hero .item_wrap:nth-child(2) {
  flex: 1
}

.hero .item_floating-text {
  position: relative;
  left: 0;
  width: 100%;
  overflow: hidden;
  font-size: calc(var(--vw, 1vw)*2.39583);
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: .01em;
  display: flex;
  flex-direction: column
}

.hero .item_floating-text .c-1 {
  font-size: calc(var(--vw, 1vw)*2.39583);
  line-height: calc(var(--vw, 1vw)*2.39583);
  transform: translateY(.12em)
}

.hero .item_floating-text .line {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 1.8rem
}

.hero .item_floating-text .line:not(:last-child) {
  margin-bottom: calc(var(--vw, 1vw)*1.04167)
}

.hero .item_floating-text .line>span {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 1.8rem
}

.hero .item_lottie {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden
}

.hero .item .lottie {
  position: relative;
  height: 100%;
  width: 120%;
  margin-left: -10%;
  display: flex;
  background: #e7f3ff
}

.hero .item .lottie>* {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  mix-blend-mode: multiply
}

.hero .item .image {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%
}

.hero .item .image img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.text-block {
  padding: 5rem 0
}

.text-block .sc_bg .d {
  --w: calc(var(--vw, 1vw)*42.60417);
  --h: calc(var(--w)*1.1088);
  left: calc(var(--vw, 1vw)*-2.34375);
  top: calc(var(--h)*-0.23925)
}

.text-block .sc_bg .d svg {
  fill: var(--c-5);
  opacity: .5;
  filter: blur(55rem)
}

.text-block .sc_text {
  max-width: calc(var(--vw, 1vw)*40.67708);
  margin-left: auto
}

.floating-text {
  padding: 12rem 0;
  overflow: hidden;
  font-size: calc(var(--vw, 1vw)*7.5);
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.2
}

.floating-text .line {
  display: flex;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 1.8rem
}

.floating-text .line:not(:last-child) {
  margin-bottom: 4rem
}

.floating-text .js-marquee>span,
.floating-text .line>span {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 1.8rem
}

.floating-text .js-marquee .word,
.floating-text .line .word {
  position: relative
}

.floating-text .js-marquee .word .c,
.floating-text .line .word .c {
  line-height: calc(var(--vw, 1vw)*7.5);
  color: var(--c-5);
  transform: translateY(.18em);
  font-size: calc(var(--vw, 1vw)*10.41667)
}

.floating-text .js-marquee .word:nth-child(2n) .c,
.floating-text .line .word:nth-child(2n) .c {
  color: var(--c-1)
}

.theme {
  position: relative;
  overflow: hidden;
  width: 100%
}

.theme_inner {
  position: relative;
  left: 0;
  top: 0;
  display: grid;
  grid-template-columns: repeat(var(--size), 1fr);
  width: calc(var(--size)*var(--vw, 1vw)*100)
}

.theme_extra {
  position: absolute;
  height: calc(var(--vw, 1vw)*11.97917);
  z-index: 99;
  left: 0;
  bottom: 0;
  width: calc(var(--vw, 1vw)*100);
  padding: calc(var(--vw, 1vw)*2.08333) 0;
  display: flex;
  align-items: flex-end;
  align-content: flex-end
}

.theme_extra .ct {
  display: block !important;
  height: auto !important
}

.theme_extra .ct>:not(:last-child) {
  margin-bottom: calc(var(--vw, 1vw)*2.08333)
}

.theme_extra .swiper-pagination {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  padding: .4rem;
  gap: 0 1.2rem;
  background: #e7e9f5;
  border-radius: 3.7rem;
  --n-size: 0.8358208955em;
  width: auto;
  bottom: 0;
  height: 4rem
}

.theme_extra .swiper-pagination_wrap {
  position: relative;
  display: flex;
  justify-content: center
}

.theme_extra .swiper-pagination-bullet {
  width: 3.2rem;
  height: 3.2rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  border-radius: 100%;
  background: none;
  opacity: 1
}

.theme_extra .swiper-pagination-bullet:after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: .8rem;
  height: .8rem;
  border-radius: 100%;
  background: var(--c-2);
  transition: all .2s ease;
  z-index: 0
}

.theme_extra .swiper-pagination-bullet:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.3rem;
  height: 1.3rem;
  transition: all .2s ease;
  transform-origin: center;
  transform: scale(0) translate(-50%, -50%);
  background-color: var(--c-white);
  z-index: 1;
  -webkit-mask-size: contain;
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-image: url(../images/icons/icon-r-l.svg);
  mask-image: url(../images/icons/icon-r-l.svg)
}

.theme_extra .swiper-pagination-bullet-active:after {
  width: 100%;
  height: 100%;
  background: var(--c-1)
}

.theme_extra .swiper-pagination-bullet-active:before {
  transform: scale(1) translate(-50%, -50%)
}

.theme_head {
  position: absolute;
  width: calc(var(--vw, 1vw)*100);
  left: 0;
  top: calc(10vh + var(--h-s-h2)*1.2);
  z-index: 2
}

.theme_head h2 {
  position: relative;
  display: inline-flex
}

.theme-4 .theme_head h2 {
  display: block;
  max-width: calc(var(--vw, 1vw)*50.36458)
}

.theme-block {
  height: calc(var(--vh, 1vh)*100)
}

.theme-block .text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start
}

.theme-block p {
  position: relative;
  display: inline-block;
  width: max-content;
  width: auto;
  font-size: calc(var(--vw, 1vw)*1.04167);
  font-weight: 500
}

.theme-block .ct_side-left {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  padding-top: calc(25vh + var(--h-s-h2)*1.2)
}

.theme-block .sc_text {
  max-width: 60rem
}

.theme-block .image-main {
  position: absolute;
  right: calc(var(--vw, 1vw)*-8.33333);
  top: 0;
  bottom: 0;
  margin: auto 0;
  height: 100%;
  width: 100%;
  -webkit-user-select: none;
  user-select: none;
  z-index: 0;
  justify-content: flex-end
}

.theme-block .image-main img {
  width: 100%;
  max-height: 90vh
}

.theme-block .image-main picture {
  z-index: 1;
  width: auto;
  padding-bottom: calc(var(--vw, 1vw)*10.41667);
  align-items: flex-end;
  align-content: flex-end
}

.theme-block .image-main picture:before {
  content: "";
  position: absolute;
  width: calc(var(--vw, 1vw)*65.10417);
  height: calc(var(--vw, 1vw)*65.10417);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50%;
  z-index: 0
}

.theme-block#t1s1 .sc_bg .image {
  width: 40.8rem;
  height: 44.8rem;
  left: 11rem;
  top: 14rem
}

.theme-block#t1s1 .sc_text {
  max-width: calc(var(--vw, 1vw)*43.63542)
}

.theme-block#t1s1 .image-main picture {
  width: calc(var(--vw, 1vw)*55.36458)
}

.theme-block#t1s1 .image-main picture:before {
  background-image: url(../images/theme/1/t-1-s-1-ill-bg.png)
}

.theme-block#t1s2 .sc_bg .image {
  width: 186.9rem;
  height: 78.8rem;
  inset: 0;
  margin: auto
}

.theme-block#t1s2 .sc_text {
  max-width: calc(var(--vw, 1vw)*61.60417)
}

.theme-block#t1s2 .image-main picture {
  width: calc(var(--vw, 1vw)*37.39583)
}

.theme-block#t1s2 .image-main picture:before {
  background-image: url(../images/theme/1/t-1-s-2-ill-bg.png)
}

.theme-block#t1s3 .sc_bg .image {
  width: 186.9rem;
  height: 78.8rem;
  inset: 0;
  margin: auto
}

.theme-block#t1s3 .sc_text {
  max-width: calc(var(--vw, 1vw)*50)
}

.theme-block#t1s3 .image-main picture {
  width: calc(var(--vw, 1vw)*49.01042)
}

.theme-block#t1s3 .image-main picture:before {
  background-image: url(../images/theme/1/t-1-s-3-ill-bg.png)
}

.theme-block#t1s4 .sc_bg .image {
  width: 186.9rem;
  height: 78.8rem;
  inset: 0;
  margin: auto
}

.theme-block#t1s4 .sc_text {
  max-width: calc(var(--vw, 1vw)*49)
}

.theme-block#t1s4 .image-main picture {
  width: calc(var(--vw, 1vw)*50.41667)
}

.theme-block#t2s1 .sc_bg .image {
  width: 186.9rem;
  height: 78.8rem;
  inset: 0;
  margin: auto
}

.theme-block#t2s1 .sc_bg .line {
  position: absolute;
  left: -7rem;
  top: 7rem;
  width: calc(var(--vw, 1vw)*100 + 2rem)
}

.theme-block#t2s1 .sc_bg .line svg {
  width: 100%;
  height: auto;
  aspect-ratio: 2.506038647/1
}

.theme-block#t2s1 .sc_bg .line path {
  stroke-dasharray: 3860.890625;
  stroke-dashoffset: var(--stroke)
}

.theme-block#t2s1 .sc_text {
  width: 68.4rem;
  max-width: calc(var(--vw, 1vw)*50.36458)
}

.theme-block#t2s1 .image-main picture {
  width: calc(var(--vw, 1vw)*40);
  padding-bottom: calc(var(--vw, 1vw)*7.41667)
}

.theme-block#t2s1 .image-main picture:before {
  background-image: url(../images/theme/1/t-1-s-1-ill-bg.png)
}

.theme-block#t2s2 .sc_bg .image {
  width: 186.9rem;
  height: 78.8rem;
  inset: 0;
  margin: auto
}

.theme-block#t2s2 .sc_text {
  width: 48.7rem;
  max-width: calc(var(--vw, 1vw)*45.36458)
}

.theme-block#t2s2 .image-main picture {
  width: calc(var(--vw, 1vw)*50.39583);
  padding-bottom: calc(var(--vw, 1vw)*7.41667)
}

.theme-block#t2s2 .image-main picture:before {
  background-image: url(../images/theme/1/t-1-s-2-ill-bg.png)
}

.theme-block#t3s1 .sc_bg .image {
  width: 186.9rem;
  height: 78.8rem;
  inset: 0;
  margin: auto
}

.theme-block#t3s1 .sc_text {
  width: 68.4rem;
  max-width: calc(var(--vw, 1vw)*35.36458)
}

.theme-block#t3s1 .image-main picture {
  width: calc(var(--vw, 1vw)*70.6875);
  padding-bottom: calc(var(--vw, 1vw)*6.41667)
}

.theme-block#t3s1 .image-main picture:before {
  background-image: url(../images/theme/1/t-1-s-1-ill-bg.png)
}

.theme-block#t3s2 .sc_bg .image {
  width: 126.7rem;
  height: 67.3rem;
  inset: 0;
  margin: auto
}

.theme-block#t3s2 .sc_text {
  width: 68.4rem;
  max-width: calc(var(--vw, 1vw)*35.36458)
}

.theme-block#t3s2 .image-main picture {
  width: calc(var(--vw, 1vw)*60.6875);
  padding-bottom: calc(var(--vw, 1vw)*10.41667)
}

.theme-block#t3s2 .image-main picture:before {
  background-image: url(../images/theme/1/t-1-s-1-ill-bg.png)
}

.theme-block#t4s1 .sc_bg .image {
  width: 178.1rem;
  height: 65.8rem;
  inset: 0;
  margin: auto
}

.theme-block#t4s1 .sc_bg .line {
  position: absolute;
  right: 0;
  top: auto;
  bottom: 35rem;
  width: calc(var(--vw, 1vw)*40.625 + 2rem)
}

.theme-block#t4s1 .sc_bg .line svg {
  width: 100%;
  height: auto;
  aspect-ratio: 1.805555556/1
}

.theme-block#t4s1 .sc_bg .line path {
  stroke-dasharray: 1084.150513;
  stroke-dashoffset: var(--stroke)
}

.theme-block#t4s1 .sc_text {
  width: 68.4rem;
  max-width: calc(var(--vw, 1vw)*35.36458)
}

.theme-block#t4s1 .image-main picture {
  width: calc(var(--vw, 1vw)*69.47917);
  padding-bottom: calc(var(--vw, 1vw)*7.41667)
}

.theme-block#t4s1 .image-main picture:before {
  background-image: url(../images/theme/1/t-1-s-1-ill-bg.png)
}

.theme-block#t4s2 .sc_bg .image {
  width: 178.1rem;
  height: 65.8rem;
  inset: 0;
  margin: auto
}

.theme-block#t4s2 .sc_text {
  width: 68.4rem;
  max-width: calc(var(--vw, 1vw)*35.36458)
}

.theme-block#t4s2 .image-main picture {
  width: calc(var(--vw, 1vw)*59.47917);
  padding-bottom: calc(var(--vw, 1vw)*7.41667)
}

.theme-block#t4s2 .image-main picture:before {
  background-image: url(../images/theme/1/t-1-s-1-ill-bg.png)
}

.theme-4 .ct_side-left {
  padding-top: calc(25vh + var(--h-s-h2)*1.2) !important
}

.theme .ct {
  display: flex;
  height: 100%
}

.contact {
  padding: 9.5rem 0
}

.contact .sc_form {
  position: relative;
  border-radius: 2.4rem;
  overflow: hidden;
  background: var(--c-7);
  padding: calc(var(--vw, 1vw)*4.16667) calc(var(--vw, 1vw)*2.08333)
}

.contact .sc_form-success {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: var(--c-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  transition: all .4s ease
}

.contact .sc_form-success .image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%
}

.contact .sc_form-success .image img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.contact .sc_form-success.show {
  top: 0
}

.contact .sc_form-success .h1 {
  font-weight: 700;
  color: var(--c-1)
}

.contact .sc_form-success .h1:not(:last-child) {
  margin-bottom: 1.6rem
}

.contact .sc_notice:not(:last-child),
.contact .sc_text:not(:last-child) {
  margin-bottom: calc(var(--vw, 1vw)*2.08333)
}

.contact .form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--vw, 1vw)*2.08333);
  z-index: 0
}

.contact .form_field--wide {
  grid-column: -1/1
}

.contact .form_field-actions {
  text-align: center
}

.contact .form input,
.contact .form textarea {
  width: 100%;
  border-radius: var(--base-rd);
  background: var(--c-white);
  padding: calc(var(--vw, 1vw)*1.5625) calc(var(--vw, 1vw)*2.08333);
  color: var(--c-2);
  border: 1px solid var(--c-white);
  outline: none;
  font-size: calc(var(--vw, 1vw)*0.9375)
}

.contact .form input::-webkit-input-placeholder,
.contact .form textarea::-webkit-input-placeholder {
  color: inherit
}

.contact .form input::-moz-placeholder,
.contact .form textarea::-moz-placeholder {
  opacity: 1;
  color: inherit
}

.contact .form input:-moz-placeholder,
.contact .form textarea:-moz-placeholder {
  color: inherit
}

.contact .form input:-ms-input-placeholder,
.contact .form textarea:-ms-input-placeholder {
  color: inherit
}

.contact .form input.placeholder,
.contact .form textarea.placeholder {
  color: inherit
}

.contact .form input:focus,
.contact .form textarea:focus {
  color: var(--c-1)
}

.contact .form textarea {
  height: calc(var(--vw, 1vw)*11.35417)
}

.btn {
  --sub-bg: var(--c-white);
  padding: var(--btn-pd);
  height: var(--btn-height);
  font-family: var(--btn-ff);
  font-size: var(--btn-fz);
  background: var(--btn-bg);
  color: var(--btn-color);
  text-transform: none;
  text-decoration: none !important;
  border-radius: var(--btn-rd);
  border: none;
  transition: all var(--base-ts) ease-in-out;
  line-height: normal;
  cursor: pointer;
  overflow: hidden;
  gap: 1.2rem;
  text-transform: uppercase;
  box-shadow: 0 .2rem 1.5rem 0 rgba(0, 0, 0, .10196078431372549)
}

.btn,
.btn>* {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-content: center;
  justify-content: center
}

.btn>* {
  line-height: inherit
}

.btn_text {
  z-index: 2
}

.btn_text-def {
  position: relative
}

.btn_text-def,
.btn_text-hover {
  transition: all var(--base-ts) ease-in-out
}

.btn_text-hover {
  position: absolute;
  top: 0;
  opacity: 0;
  left: -50%
}

.btn_dot {
  position: relative;
  z-index: 1;
  width: .4444444444em;
  height: .4444444444em;
  min-width: .4444444444em;
  border-radius: 100%
}

.btn_dot-circle {
  width: 100%;
  height: 100%;
  transition: all var(--base-ts) ease;
  background: var(--btn-color);
  z-index: 2
}

.btn_dot-circle,
.btn_dot-circle:before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100%
}

.btn_dot-circle:before {
  content: "";
  background: var(--c-1);
  width: 0;
  height: 0;
  transition: all .6s ease
}

.btn_dot .icon {
  transition: transform var(--base-ts) ease;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(100%, -50%)
}

.btn:hover .btn_dot-circle:before {
  width: 55rem;
  height: 55rem
}

.btn:hover .btn_dot .icon {
  transition: calc(var(--base-ts)/2) transform var(--base-ts) ease;
  transform: translate(-50%, -50%);
  z-index: 2
}

.header {
  --h-pos: fixed;
  --h-pd: 1.5rem 0;
  position: var(--h-pos);
  padding: var(--h-pd);
  background-color: var(--base-bg);
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999
}

.header_nav{

}

.header_nav.mobile{
  display: none;
}

.header_list{
  display: flex;
  align-items: center;
  gap: 2.5rem;
  font-size: calc(var(--vw, 1vw)*0.9375);
}

@media (max-width: 991px){
  .header_actions .btn_text{
    font-size: 12px;
  }
  .header_nav{
    transition: all 0.25s ease;
    position: absolute;
    right: 0;
    top: 40%;
    opacity: 0;
    pointer-events: none;
    background-color: #F5F6FB;
    box-shadow: 0px 16px 32px -4px rgba(145, 158, 171, 0.24),0px 0px 2px 0px rgba(145, 158, 171, 0.24);
    line-height: 1.6;
    z-index: 999;
  }
  .header_list{
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    font-size: 16px;
    min-width: 213px;
  }
  .header_link button{
    padding: 12px 16px 8px 16px;
    line-height: 1.6;
    text-align: left;
    transition: all 0.25s ease;
    font-family: Ubuntu;
  }
  .header_link button.active{
    padding: 12px 16px 8px 16px;
    background-color: #E7F3FF;
    line-height: 1.6;
    text-align: left;
  }
  .header_link button span{
    position: relative;
  }
  .header_link button span::after{
    content: '';
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #0025E3;
    opacity: 0;
  }
  .header_link button.active span::after{
    opacity: 1;
  }
  .header_link:last-child button{
    padding: 12px 16px 12px 16px;
  }
}

.header_link{
  list-style-type: none;
}

.header_link button{
  width: 100%;
  cursor: pointer;
  border: none;
  background-color: transparent;
}

.header_burger{
  padding: 8px;
  border-radius: 50%;
  margin-left: 12px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  transition: all 0.25s ease;
  border: none;
  cursor: pointer;
}

.header_burger.active{
  background-color: #0025E3;
}
.header_burger.active .menu-icon::before,
.header_burger.active .menu-icon::after,
.header_burger.active .menu-icon span {
  background-color: #fff;
}
.menu-icon{
  width: 18px;
  height: 14px;
  position: relative;
  border: none;
  background: transparent;
}
@media (min-width: 991px){
  .header_burger{
    display: none;
  }
}

.menu-icon::before,
.menu-icon::after,
.menu-icon span {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 3px;
  background-color: #2C2E3B;
}

.menu-icon::before{
  top: 0;
}
.menu-icon span{
  top: 50%;
  transform: translateY(-50%);
}
.menu-icon::after{
  bottom: 0;
}

.header-ct {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-between
}

.header:has(.header_burger.active) .header_nav{
  opacity: 1;
  pointer-events: all;
  top: calc(100% + 12px);
}


.header .logo {
  color: var(--c-2)
}

.footer {
  padding: 4rem 0;
  background: var(--c-6);
  color: var(--c-white)
}

.footer_block {
  position: relative
}

.footer_block:not(:last-child) {
  margin-bottom: 4rem
}

.footer_block-top {
  display: flex;
  justify-content: space-between
}

.footer_block-bottom {
  text-align: center;
  font-size: 1.4rem
}

.footer_logo {
  position: relative;
  max-width: calc(var(--vw, 1vw)*100*0.1026);
  min-width: 14rem
}

.footer_info {
  position: relative;
  font-size: calc(var(--vw, 1vw)*0.9375);
  color: hsla(0, 0%, 100%, .7)
}

.footer_info a {
  position: relative;
  display: inline-flex;
  transition: all .2s ease
}

.footer_info a:hover {
  text-decoration: none;
  color: var(--c-5);
  transform: translateX(1rem)
}

.footer_form {
  position: relative;
  padding: 2rem;
  border-radius: var(--base-rd);
  width: 100%;
  max-width: calc(var(--vw, 1vw)*34.58333);
  background: hsla(0, 0%, 100%, .08);
  aspect-ratio: 1/.3810240964;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.footer_form-text {
  text-transform: uppercase
}

.footer_form-text .success {
  display: none
}

.footer_form.success {
  justify-content: center
}

.footer_form.success .footer_form-text .def {
  display: none
}

.footer_form.success .footer_form-text .success {
  display: block
}

.footer_form.success .form {
  display: none;
  opacity: 0;
  visibility: hidden
}

.footer .logo {
  color: inherit
}

.footer .form {
  position: relative
}

.footer .form input {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid hsla(0, 0%, 100%, .4);
  padding: 1.35rem 4rem 1.35rem .8rem;
  font-size: 1.4rem;
  color: inherit;
  outline: none !important
}

.footer .form input::-webkit-input-placeholder {
  color: #fff;
  opacity: 1
}

.footer .form input:-moz-placeholder,
.footer .form input::-moz-placeholder {
  color: #fff;
  opacity: 1
}

.footer .form input:-ms-input-placeholder {
  color: #fff;
  opacity: 1
}

.footer .form input.placeholder {
  color: #fff;
  opacity: 1
}

.footer .form input:focus,
.footer .form input[required]:valid {
  color: var(--c-5);
  border-block-color: var(--c-5)
}

.footer .form button {
  background: none;
  padding: 0;
  border: none;
  cursor: pointer;
  color: inherit
}

.footer .form_field {
  position: relative;
  width: 100%
}

.footer .form_field-actions {
  position: absolute;
  right: .8rem;
  width: 2.4rem;
  height: 2.4rem;
  z-index: 1;
  top: 0;
  bottom: 0;
  margin: auto 0
}

.footer .copy {
  opacity: .7
}

.word {
  position: relative;
  display: inline-flex !important
}

canvas {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  mix-blend-mode: multiply
}

@media (max-width:1199px) {
  .sc_nav {
    display: none
  }

  .theme.only-desktop {
    display: none
  }

  .header_nav{
    display: none;
  }

  .header_nav.mobile{
    display: block;
  }

  .theme-block .image-main {
    width: 100% !important
  }

  .theme-block .image-main picture {
    width: 50% !important
  }

  .theme .theme_inner {
    position: relative;
    display: block !important
  }

  .theme .theme_slider {
    position: relative;
    width: 100%;
    height: 100%
  }

  .theme .sc,
  .theme .swiper-slide {
    width: calc(var(--vw, 1vw)*100)
  }

  .theme .swiper-slide {
    overflow: hidden
  }

  .theme .swiper-slide .sc_text {
    transform: translateY(5rem);
    opacity: 0;
    transition: all .3s ease .4s
  }

  .theme .swiper-slide .sc_buttons {
    transform: translateY(5rem);
    opacity: 0;
    transition: all .3s ease .7s
  }

  .theme .swiper-slide .image-main {
    transform: translateX(100%);
    opacity: 0;
    transition: all .3s ease 1s
  }

  .theme .swiper-slide-active .sc_buttons,
  .theme .swiper-slide-active .sc_text {
    transform: translateY(0);
    opacity: 1
  }

  .theme .swiper-slide-active .image-main {
    transform: translateX(0);
    opacity: 1
  }

  .header {
    --h-pd: 2.4rem 0
  }

  canvas {
    display: none
  }
}

@media (max-width:991px) {
  :root {
    --base-fz: 1.6rem
  }

  .header-ct{
    justify-content: start;
  }
  .header_logo{
    flex: 1 0 auto;
  }

  .logo {
    max-width: 11.3rem;
    min-width: 11.3rem
  }

  .sc_nav {
    height: 4rem;
    font-size: 1.3rem
  }

  .sc_nav-inner {
    gap: 0 1.2rem
  }

  .sc_nav-inner a .icon {
    --i-size: 1.3rem
  }

  .sc_nav-inner a {
    width: 3.2rem;
    height: 3.2rem
  }

  .sc_notice .col_text {
    font-size: 1.2rem
  }

  .sc_notice .col-cross:after,
  .sc_notice .col-cross:before {
    width: .9rem;
    height: .1rem
  }

  .sc_notice .col:nth-child(2) {
    min-width: max-content
  }

  .sc_text:not(:last-child) {
    margin-bottom: 2.8rem
  }

  .text-block .sc_text {
    max-width: 50%
  }

  .floating-text {
    padding: 6rem 0
  }

  .theme .line {
    display: none !important
  }

  .theme .ct {
    flex-direction: column;
    align-items: center;
    align-content: center;
    text-align: center
  }

  .theme-block {
    width: calc(var(--vw, 1vw)*100)
  }

  .theme-block .text {
    align-items: center;
    align-content: center
  }

  .theme-block p {
    font-size: 1.4rem
  }

  .theme-block .ct_side-left {
    padding-top: calc(17vh + var(--h-s-h2)*1.2);
    width: 100%
  }

  .theme-block .sc_text {
    max-width: 100% !important;
    width: 100% !important
  }

  .theme-block .sc_buttons {
    display: flex;
    justify-content: center;
    width: 100%
  }

  .theme-block .image-main img {
    max-height: 100%;
    height: 100%;
    object-fit: contain
  }

  .theme-block .image-main {
    width: 100%;
    position: relative;
    flex: 1;
    height: auto;
    right: 0 !important
  }

  .theme-block .image-main picture {
    width: 100% !important;
    padding-bottom: 0 !important;
    align-items: flex-start;
    align-content: flex-start
  }

  .theme-block .image-main img {
    margin-top: 1rem;
    max-height: calc(100% - 9rem)
  }

  .theme-block#t4s1 .sc_bg .line {
    bottom: 25rem
  }
}

@media (max-width:767px) {
  :root {
    --h-s-h1: 4.5rem;
    --h-s-h2: 2.4rem;
    --btn-fz: 1.4rem
  }

  .ct {
    width: 100%;
    padding: 0 1.6rem
  }

  .hero_content {
    flex-direction: column;
    gap: 1.6rem
  }

  .hero_content:not(:last-child) {
    margin-bottom: 2.4rem
  }

  .hero .item_wrap:first-child {
    max-width: 100%
  }

  .hero .item_wrap:nth-child(2) .item {
    aspect-ratio: 1/1.162037037
  }

  .hero .item_floating-text {
    display: none
  }

  .text-block .sc_text {
    max-width: 100%
  }

  .floating-text {
    font-size: 3.6rem
  }

  .floating-text .line:not(:last-child) {
    margin-bottom: 1.6rem
  }

  .theme-block#t4s1 .sc_bg .line {
    bottom: 30%
  }

  .contact {
    padding: 4rem 0
  }

  .contact .sc_form {
    padding: 2.4rem 1.6rem
  }

  .contact .form {
    gap: 1.6rem
  }

  .contact .form_field {
    grid-column: -1/1
  }

  .contact .form input,
  .contact .form textarea {
    font-size: 1.8rem;
    padding: 2.9rem 1.9rem;
    height: 8rem
  }

  .contact .form textarea {
    height: 16.8rem
  }

  .footer_block-top {
    flex-direction: column;
    align-items: flex-start;
    align-content: flex-start;
    gap: 4.8rem
  }

  .footer_info {
    font-size: 1.8rem
  }

  .footer_form {
    max-width: 100%;
    height: 25.3rem
  }
}

.theme_slider {
  width: 100%;
  max-width: 100%;
  max-height: 100vh;
  min-height: 0;
  min-width: 0;
}

@media (min-width:1200px) {
  .theme:not(.only-desktop) {
    display: none
  }
}

@media (min-width:1921px) {
  :root {
    --btn-fz: 1.8rem
  }

  .sc_nav {
    height: 6.7rem;
    font-size: 6.7rem
  }

  .theme_extra {
    height: 23rem;
    padding: 4rem 0
  }

  .theme_extra .ct>:not(:last-child) {
    margin-bottom: 4rem
  }
}


.floating_text{
  display: grid;
}