@font-face {
font-family: 'Indivisible';
src: url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-Thin.woff2) format('woff2'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-Thin.woff) format('woff'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-Thin.ttf) format('truetype');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Gilroy';
src: url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Gilroy-Black.woff2) format('woff2'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Gilroy-Black.woff) format('woff'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Gilroy-Black.ttf) format('truetype'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Gilroy-Black.svg#Gilroy-Black) format('svg');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Indivisible';
src: url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-ThinItalic.woff2) format('woff2'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-ThinItalic.woff) format('woff'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-ThinItalic.ttf) format('truetype');
font-weight: 100;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Indivisible';
src: url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-Light.woff2) format('woff2'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-Light.woff) format('woff'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-Light.ttf) format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Indivisible';
src: url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-LightItalic.woff2) format('woff2'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-LightItalic.woff) format('woff'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-LightItalic.ttf) format('truetype');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Indivisible';
src: url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-Regular.woff2) format('woff2'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-Regular.woff) format('woff'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-Regular.ttf) format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Indivisible';
src: url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-RegularItalic.woff2) format('woff2'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-RegularItalic.woff) format('woff'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-RegularItalic.ttf) format('truetype');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Indivisible';
src: url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-Medium.woff2) format('woff2'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-Medium.woff) format('woff'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-Medium.ttf) format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Indivisible';
src: url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-MediumItalic.woff2) format('woff2'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-MediumItalic.woff) format('woff'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-MediumItalic.ttf) format('truetype');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Indivisible';
src: url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-SemiBold.woff2) format('woff2'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-SemiBold.woff) format('woff'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-SemiBold.ttf) format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Indivisible';
src: url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-SemiBoldItalic.woff2) format('woff2'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-SemiBoldItalic.woff) format('woff'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-SemiBoldItalic.ttf) format('truetype');
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Indivisible';
src: url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-Bold.woff2) format('woff2'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-Bold.woff) format('woff'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-Bold.ttf) format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Indivisible';
src: url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-BoldItalic.woff2) format('woff2'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-BoldItalic.woff) format('woff'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-BoldItalic.ttf) format('truetype');
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Indivisible';
src: url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-BlackItalic.woff2) format('woff2'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-BlackItalic.woff) format('woff'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-BlackItalic.ttf) format('truetype');
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Indivisible';
src: url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-Black.woff2) format('woff2'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-Black.woff) format('woff'), url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Indivisible/Indivisible-Black.ttf) format('truetype');
font-weight: 900;
font-style: normal;
font-display: swap;
} @font-face {
font-family: "Kallisto";
src: url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Kallisto/Kallisto-Bold.woff2) format("woff2"),
url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Kallisto/Kallisto-Bold.woff) format("woff");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Kallisto";
src: url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Kallisto/Kallisto-BoldItalic.woff2) format("woff2"),
url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Kallisto/Kallisto-BoldItalic.woff) format("woff");
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Kallisto";
src: url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Kallisto/Kallisto-Heavy.woff2) format("woff2"),
url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Kallisto/Kallisto-Heavy.woff) format("woff");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Kallisto";
src: url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Kallisto/Kallisto-HeavyItalic.woff2) format("woff2"),
url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Kallisto/Kallisto-HeavyItalic.woff) format("woff");
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Kallisto";
src: url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Kallisto/Kallisto-Light.woff2) format("woff2"),
url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Kallisto/Kallisto-Light.woff) format("woff");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Kallisto";
src: url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Kallisto/Kallisto-LightItalic.woff2) format("woff2"),
url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Kallisto/Kallisto-LightItalic.woff) format("woff");
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Kallisto Lined";
src: url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Kallisto/Kallisto-Lined.woff2) format("woff2"),
url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Kallisto/Kallisto-Lined.woff) format("woff");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Kallisto";
src: url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Kallisto/Kallisto-Medium.woff2) format("woff2"),
url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Kallisto/Kallisto-Medium.woff) format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Kallisto";
src: url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Kallisto/Kallisto-MediumItalic.woff2) format("woff2"),
url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Kallisto/Kallisto-MediumItalic.woff) format("woff");
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Kallisto";
src: url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Kallisto/Kallisto-Thin.woff2) format("woff2"),
url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Kallisto/Kallisto-Thin.woff) format("woff");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Kallisto";
src: url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Kallisto/Kallisto-ThinItalic.woff2) format("woff2"),
url(//tracers.app.br/wp-content/themes/twentytwentyfour-child/fonts/Kallisto/Kallisto-ThinItalic.woff) format("woff");
font-weight: 100;
font-style: italic;
font-display: swap;
}
html {
font-size: 62.5%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
scroll-behavior: smooth;
}
body {
font-family: "Indivisible", sans-serif;
font-size: 1.6rem;
line-height: 1.3;
color: #f4f4f4;
background: #111111;
margin: 0;
padding: 0;
position: relative;
}
* {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
font-family: "Kallisto", sans-serif;
}
p {
margin: 0;
}
img {
user-select: none;
pointer-events: none;
}
.cc-btn {
margin: 2.34vw 0 0;
padding: 1.17vw 1.87vw 1.05vw;
font-size: 1.05vw;
font-weight: 600;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 5.26vw;
color: #fff;
background: linear-gradient(90deg, #ae71ff, #3b78ff, #ae71ff, #3b78ff);
background-size: 300% 300%;
animation: gradientMove 4s linear infinite;
position: relative;
}
.cc-btn::before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 5.26vw;
background: linear-gradient(90deg, #ae71ff, #3b78ff);
z-index: -1;
filter: blur(1.17vw);
transition: opacity 0.2s;
opacity: 0;
}
.cc-btn:hover::before {
opacity: 1;
}
@keyframes gradientMove {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}
.s01 {
position: relative;
}
.s01-bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
.s01-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.s01-wrap {
width: 57.31vw;
margin: 0 auto;
padding: 7.72vw 0 7.02vw;
}
.s01-logo {
width: 11.7vw;
}
.s01 h1 {
width: 30.41vw;
padding: 3.51vw 0 1.29vw;
font-size: 3.04vw;
font-weight: 200;
line-height: 1.06;
color: #eeeeee;
}
.s01 h1 span {
font-weight: 500;
background: -webkit-linear-gradient(278deg, #ae71ff, #3b78ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.s01 p.p01 {
width: 28.07vw;
padding: 0 0 2.34vw;
font-size: 1.05vw;
line-height: 1.4;
color: #cfcfcf;
}
.s01 p.p01 span {
font-weight: 600;
color: #eee;
}
.s01 p.p02 {
display: flex;
align-items: center;
gap: 0.58vw;
font-size: 1.05vw;
color: #cfcfcf;
}
.s01 p.p02 svg {
width: 1.64vw;
flex-shrink: 0;
}
.s01 p.p02 + p.p02 {
margin: 0.58vw 0 0;
}
.s02 {
position: relative;
overflow: hidden;
}
.s02-bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
.s02-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.s02-wrap {
width: 57.31vw;
margin: 0 auto;
padding: 7.72vw 0 7.02vw;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.s02-info {
width: 24.56vw;
}
.s02 h2 {
width: 30.41vw;
font-size: 2.81vw;
font-weight: 700;
line-height: 1.06;
color: #383838;
}
.s02 h2 span {
background: -webkit-linear-gradient(278deg, #ae71ff, #3b78ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.s02 p.p01 {
width: 28.07vw;
padding: 1.75vw 0 1.99vw;
font-size: 1.05vw;
line-height: 1.4;
color: #414141;
}
.s02 p.p02 {
padding: 0.82vw 1.11vw 0.7vw 0.82vw;
font-size: 1.05vw;
font-weight: 600;
line-height: 1.4;
display: inline-block;
color: #f0f0f0;
border-radius: 1.75vw 5.26vw 5.26vw 1.75vw;
background: linear-gradient(90deg, #ae71ff, #3b78ff);
}
.s02 p.p02 + p.p02 {
margin: 0.58vw 0 0;
}
.s02-text {
width: 19.88vw;
padding: 2.34vw 0 0;
display: flex;
align-items: center;
gap: 0.94vw;
}
.s02-text svg {
width: 0.94vw;
flex-shrink: 0;
}
.s02 p.p03 {
font-size: 1.35vw;
line-height: 1.4;
color: #111111;
}
.s02 p.p03 span {
font-weight: 600;
}
.s02 p.p03 img {
width: 0.94vw;
}
.s03 {
padding: 7.72vw 0;
display: flex;
flex-direction: column;
align-items: center;
background-color: #000303;
}
.s03 h2 {
font-size: 2.81vw;
font-weight: 700;
line-height: 1.06;
text-align: center;
text-transform: uppercase;
background: -webkit-linear-gradient(278deg, #ae71ff, #3b78ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.s03 p.p01 {
width: 31.58vw;
padding: 1.17vw 0 1.99vw;
font-family: "Kallisto", sans-serif;
font-size: 1.64vw;
font-weight: 200;
line-height: 1.4;
text-align: center;
color: #ffffff;
}
.s03 p.p01 span {
font-weight: 700;
}
.s03 p.p02 {
font-size: 1.05vw;
text-align: center;
color: #cfcfcf;
}
.s03-text {
width: 100%;
padding: 2.34vw 0 0;
position: relative;
display: flex;
justify-content: center;
overflow: hidden;
}
.s03-text::before {
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 100%;
height: 0.1rem;
background-image: linear-gradient(90deg, #ae71ff, #3b78ff);
opacity: 0.5;
}
.s03 p.p03 {
width: 31.58vw;
font-family: "Kallisto", sans-serif;
font-size: 2.92vw;
line-height: 0.9;
text-transform: uppercase;
color: #f0f0f0;
transform: translateY(0.29vw);
transition: transform 0.2s;
}
.s03-text:hover p.p03 {
transform: translateY(-0.29vw);
}
.s03-text:nth-of-type(1) p.p03 {
margin-left: -21.64vw;
}
.s03-text:nth-of-type(2) p.p03 {
margin-left: -5.26vw;
}
.s03-text:nth-of-type(3) p.p03 {
margin-left: 4.68vw;
}
.s03-text:nth-of-type(4) p.p03 {
margin-left: 21.05vw;
}
.s03 p.p04 {
margin: 3.51vw 0 0.58vw;
font-size: 1.25vw;
font-weight: 700;
background: -webkit-linear-gradient(278deg, #ae71ff, #3b78ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.s03 p.p05 {
font-size: 1.25vw;
font-weight: 300;
}
.s03 p.p05 span {
font-weight: 700;
}
.s04 {
padding: 8.19vw 0 0;
display: flex;
flex-direction: column;
align-items: center;
background-color: #006cff;
position: relative;
}
.s04 h2 {
padding: 0 0 4.09vw;
font-size: 2.11vw;
font-weight: 600;
text-align: center;
color: #f0f0f0;
}
.s04-info {
width: 43.51vw;
height: 15.91vw;
border: 0.2rem solid #fff;
border-radius: 10.53vw;
position: relative;
}
.s04 p.p01 {
position: absolute;
padding: 0.64vw 1.05vw 0.47vw 0.82vw;
font-size: 1.05vw;
font-weight: 600;
line-height: 1;
text-align: center;
border-radius: 0.58vw 2.34vw 2.34vw 0.58vw;
color: #414141;
background-color: #fff;
}
.s04 p.p01:nth-of-type(1) {
top: 0;
right: 5.85vw;
transform: translateY(-50%);
}
.s04 p.p01:nth-of-type(2) {
top: 1.17vw;
left: -1.17vw;
}
.s04 p.p01:nth-of-type(3) {
left: -1.17vw;
bottom: 2.34vw;
}
.s04 p.p01:nth-of-type(4) {
right: -4.09vw;
bottom: 4.09vw;
}
.s04-img {
position: absolute;
width: 30.06vw;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
.s04-img::before {
position: absolute;
content: "";
width: 100%;
height: 5.26vw;
left: 50%;
bottom: 0;
transform: translateX(-50%);
background-image: linear-gradient(transparent, rgb(0 108 255 / 60%));
z-index: 2;
}
.s04-img img {
width: 100%;
display: flex;
}
.s04 p.p02 {
width: 27.13vw;
margin: 9.01vw 0 5.5vw;
padding: 0.88vw 1.17vw;
font-family: "Kallisto", sans-serif;
font-size: 1.64vw;
font-weight: 300;
line-height: 1.2;
text-align: center;
color: #414141;
background-color: #fff;
z-index: 2;
}
.s04 p.p02 span {
font-weight: 700;
background: -webkit-linear-gradient(278deg, #ae71ff, #3b78ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.s05 {
position: relative;
}
.s05-bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
.s05-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.s05-wrap {
width: 57.31vw;
margin: 0 auto;
padding: 7.72vw 0 7.02vw;
}
.s05 p.p01 {
width: 20.47vw;
font-family: "Kallisto", sans-serif;
font-size: 1.87vw;
font-weight: 700;
}
.s05 h2 {
width: 21.05vw;
padding: 1.05vw 0 1.64vw;
font-size: 3.74vw;
font-weight: 700;
line-height: 1.06;
color: #fff;
text-shadow: 0 0 0.58vw #ffffff85, rgb(185 132 255 / 100%) -0.58vw 0.06vw 1.17vw,
#b984ff 0vw 0vw 1.17vw, rgb(104 120 255) 0.58vw 0vw 3.51vw;
}
.s05 p.p02 {
font-size: 1.05vw;
}
.s05 p.p02 span {
font-weight: 600;
}
.s05 p.p03 {
padding: 2.92vw 0 0.58vw;
font-family: "Kallisto", sans-serif;
font-size: 1.29vw;
}
.s05 p.p04 {
width: 22.81vw;
padding: 1.17vw 0;
display: flex;
align-items: center;
gap: 0.82vw;
font-size: 1.05vw;
border-bottom: 0.1rem solid rgb(255 255 255 / 20%);
}
.s05 p.p04:last-of-type {
border: none;
}
.s05 p.p04 svg {
width: 1.29vw;
flex-shrink: 0;
}
.s06 {
padding: 7.72vw 0;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.s06-bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
.s06-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.s06 h2 {
font-size: 2.05vw;
font-weight: 700;
text-align: center;
}
.s06 h2 span {
background: -webkit-linear-gradient(278deg, #ae71ff, #3b78ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.s06 p.p01 {
padding: 1.99vw 0 3.16vw;
display: flex;
align-items: center;
gap: 0.58vw;
font-size: 1.05vw;
color: #414141;
}
.s06 p.p01 img {
width: 1.46vw;
}
.s06-row {
width: 58.48vw;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.7vw;
}
.s06-card {
width: 14.04vw;
flex-shrink: 0;
border-radius: 0.84vw;
background-color: #fff;
}
.s06-card:first-of-type {
margin-left: 1.17vw;
}
.s06-card p {
padding: 0.73vw 0.7vw;
display: flex;
justify-content: space-between;
font-family: "Kallisto", sans-serif;
font-size: 0.88vw;
color: #111;
border-bottom: 0.1rem solid rgb(59 120 255 / 40%);
}
.s06-card p span {
background: -webkit-linear-gradient(278deg, #ae71ff, #3b78ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.s06 h3 {
padding: 2.46vw 1.17vw;
font-size: 1.25vw;
font-weight: 700;
text-align: center;
}
.s06 p.p02 {
padding: 3.74vw 0 0;
display: flex;
align-items: center;
font-family: "Kallisto", sans-serif;
font-size: 1.64vw;
font-weight: 300;
color: #414141;
}
.s06 p.p02 span {
margin-left: 0.58vw;
padding: 0.35vw 0.58vw;
font-weight: 700;
text-transform: uppercase;
border-radius: 0.47vw;
color: #fff;
background-image: linear-gradient(90deg, #ae71ff, #3b78ff);
}
.s07 {
padding: 7.72vw 0 4.09vw;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f0f0f0;
position: relative;
z-index: 1;
}
.s07-dec {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.s07 h2 {
padding: 0 0 1.52vw;
font-size: 2.92vw;
font-weight: 700;
color: #f0f0f0;
}
.s07-box {
margin: 5.26vw 0 1.99vw;
padding: 0.12vw;
border-radius: 1.17vw;
background: linear-gradient(90deg, #ae71ff, #3b78ff);
}
.s07 p.p01 {
padding: 0.94vw 1.17vw 0.82vw 1.17vw;
border-radius: 1.05vw;
font-size: 1.05vw;
text-align: center;
color: #414141;
background-color: #f0f0f0;
}
.s07 p.p01 span {
font-weight: 700;
}
.s07 p.p02 {
font-size: 1.05vw;
text-align: center;
color: #414141;
}
.s07-examples {
padding: 0.94vw 0 1.99vw;
display: flex;
justify-content: center;
gap: 0.41vw;
}
.s07-examples p {
padding: 0.58vw 1.05vw 0.47vw;
font-size: 0.94vw;
font-weight: 600;
text-align: center;
border-radius: 5.26vw;
border: 0.1rem solid #d7d7d7;
color: #6d6d6d;
background-color: #ffffff;
}
.s07-row {
display: flex;
gap: 1.17vw;
}
.s07-row img {
width: 13.68vw;
border-radius: 1.17vw;
}
.s07 p.p03 {
padding: 3.51vw 0 2.92vw;
font-family: "Kallisto", sans-serif;
font-size: 1.29vw;
font-weight: 200;
color: #414141;
}
.s07 p.p03 span {
font-weight: 700;
background: -webkit-linear-gradient(278deg, #ae71ff, #3b78ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.s07-cicle {
width: 37.78vw;
}
.s08 {
padding: 14.85vw 0 7.49vw;
position: relative;
}
.s08-bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
.s08-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.s08-wrap {
width: 45.03vw;
margin: 0 auto;
display: flex;
align-items: center;
gap: 6.08vw;
}
.s08-info {
width: 23.39vw;
flex-shrink: 0;
}
.s08 h2 {
padding: 0 0 1.99vw;
font-size: 2.81vw;
font-weight: 700;
color: #f0f0f0;
}
.s08 p.p01 {
margin: -1.17vw 0;
display: flex;
align-items: center;
font-size: 1.05vw;
}
.s08 p.p01 img {
width: 3.86vw;
margin-right: -0.58vw;
}
.s08 p.p02 {
padding: 2.11vw 0 0.35vw;
font-family: "Kallisto", sans-serif;
font-size: 1.29vw;
color: #f0f0f0;
}
.s08 p.p03 {
font-family: "Kallisto", sans-serif;
font-size: 1.29vw;
font-weight: 700;
color: #f0f0f0;
}
.s08 p.p03 span {
background: -webkit-linear-gradient(278deg, #ae71ff, #3b78ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.s08-video {
width: 15.67vw;
}
.s08-video video {
width: 100%;
border-radius: 1.17vw;
}
.s09 {
padding: 7.72vw 0;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.s09-bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
.s09-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.s09-mockup {
width: 54.15vw;
position: relative;
}
.s09-mockup video,
.play-btn {
position: absolute;
width: 37.19vw;
height: 20.82vw;
top: 5.85vw;
left: 8.48vw;
border-radius: 0.58vw;
cursor: pointer;
}
.play-btn {
background: transparent;
}
.play-btn svg {
animation: pulsePlay 1.5s ease-in-out infinite;
}
.play-btn svg path {
fill: #eee;
box-shadow: 0 0 #fff;
}
.play-btn svg circle {
display: none;
}
@keyframes pulsePlay {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.s09-text {
position: absolute;
display: flex;
flex-direction: column;
gap: 0.84vw;
}
.s09-text-01 {
align-items: flex-start;
top: 1.99vw;
left: -3.51vw;
z-index: 2;
}
.s09-text-01 p:nth-of-type(1) {
transform: translateX(6.43vw);
}
.s09-text-01 p:nth-of-type(3) {
transform: translateX(1.75vw);
}
.s09-text-02 {
align-items: flex-end;
right: -8.77vw;
bottom: 6.67vw;
z-index: 2;
}
.s09-text-02 p:nth-of-type(1) {
transform: translateX(-2.22vw);
}
.s09-text-02 p:nth-of-type(2) {
transform: translateX(-5.26vw);
}
.s09-text-02 p:nth-of-type(4) {
transform: translateX(-13.92vw);
}
.s09-text p {
padding: 0.7vw 1.4vw 0.7vw 0.7vw;
display: flex;
align-items: center;
gap: 0.53vw;
font-size: 1.05vw;
border-radius: 5.26vw 0.29vw 3.51vw 5.26vw;
color: #414141;
background-color: #fff;
}
.s09 p.p01 {
padding: 2.57vw 0 0;
display: flex;
align-items: center;
gap: 0.58vw;
font-family: "Kallisto", sans-serif;
font-size: 1.64vw;
font-weight: 700;
color: #f0f0f0;
}
.s10 {
padding: 16.84vw 0 5.56vw;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.s10-bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
.s10-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.s10-title {
padding: 0 0 4.8vw;
display: flex;
gap: 14.04vw;
transform: translateX(2.34vw);
}
.s10 h2,
.s10 h3 {
font-size: 2.65vw;
font-weight: 700;
line-height: 1;
text-align: right;
text-transform: uppercase;
}
.s10 h2 span {
background: -webkit-linear-gradient(278deg, #ae71ff, #3b78ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.s10 h3 {
text-align: center;
}
.s10 p {
max-width: 12.87vw;
padding: 0.7vw 1.29vw 0.7vw 0.7vw;
display: flex;
align-items: center;
gap: 0.58vw;
font-size: 0.82vw;
font-weight: 600;
color: #fff;
border: 0.1rem solid rgb(174 113 255 / 60%);
border-radius: 0.58vw 0.58vw 2.11vw 0.58vw;
background-color: rgb(13 17 25 / 40%);
backdrop-filter: blur(0.35vw);
}
.s10-text {
display: flex;
flex-direction: column;
gap: 1.75vw;
}
.s10-text svg {
width: 1.17vw;
flex-shrink: 0;
}
.s10-text p:nth-of-type(1) {
transform: translateX(-7.6vw);
}
.s10-text p:nth-of-type(2) {
transform: translateX(2.34vw);
}
.s10-text p:nth-of-type(3) {
transform: translateX(-7.02vw);
}
.s10-text p:nth-of-type(4) {
transform: translateX(7.6vw);
}
.s11 {
padding: 9.12vw 0;
position: relative;
}
.s11-bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
.s11-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.s11-main {
width: 27.25vw;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.s11 h2 {
width: 27.13vw;
height: 27.13vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 1.87vw;
font-weight: 200;
line-height: 1.1;
text-align: center;
text-transform: uppercase;
color: #fff;
border-radius: 50%;
border: 0.1rem solid #fff;
position: relative;
}
.s11 h2::before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: radial-gradient(closest-side, #7275ff, transparent);
filter: blur(1.17vw);
z-index: -1;
}
.s11 h2 span {
font-size: 3.51vw;
font-weight: 700;
text-shadow: rgba(255, 255, 255, 0) -0.58vw 0.06vw 1.17vw,
rgba(185, 132, 255, 0.9) -0.58vw 0.06vw 1.17vw, rgb(185, 132, 255) 0vw 0vw 1.17vw,
rgba(83, 99, 235, 0.9) 0.58vw 0vw 1.17vw;
text-shadow: 0 0 0.41vw #fff, 0 0 0.58vw #fff, 0 0 2.46vw #b984ff, 0 0 4.8vw #b984ff,
0 0 5.38vw #b984ff, 0 0 5.96vw #b984ff, 0 0 8.83vw #b984ff;
}
.s11 p {
padding: 0.64vw 0.82vw 0.64vw 0.64vw;
display: flex;
align-items: center;
gap: 0.53vw;
border-radius: 5.26vw;
font-size: 0.82vw;
color: #0d1119;
background-color: #fff;
position: absolute;
}
.s11 p span {
margin: 0.12vw 0 0;
white-space: nowrap;
}
.s11 p:nth-of-type(1) {
top: 1.17vw;
right: 0;
}
.s11 p:nth-of-type(2) {
left: -2.92vw;
bottom: 5.26vw;
}
.s11 p:nth-of-type(3) {
top: 5.26vw;
left: -6.43vw;
}
.s11 p:nth-of-type(4) {
right: -0.58vw;
bottom: 0.58vw;
}
.s11 p:nth-of-type(5) {
top: 11.7vw;
right: -5.85vw;
}
.s12 {
padding: 9.12vw 0;
position: relative;
}
.s12-bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
.s12-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.s12-wrap {
width: 56.14vw;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.s12-card {
width: 22.22vw;
margin: 0.35vw 0;
padding: 1.23vw;
display: flex;
align-items: center;
gap: 1.64vw;
border-radius: 0.82vw;
border: 0.1rem solid #fff;
}
.s12-card svg {
width: 2.92vw;
flex-shrink: 0;
}
.s12-card h3 {
padding: 0 0 1.17vw;
font-family: "Kallisto", sans-serif;
font-size: 1.25vw;
font-weight: 700;
color: #fff;
}
.s12-card p {
font-size: 0.94vw;
color: #cfcfcf;
}
.s12-card:nth-of-type(1) {
transform: translateX(-2.92vw);
}
.s12-card:nth-of-type(3) {
transform: translateX(-1.75vw);
}
.s12-card:nth-of-type(4) {
transform: translateX(-4.91vw);
}
.s13 {
padding: 17.43vw 0 7.6vw;
display: flex;
flex-direction: column;
align-items: center;
background-color: #efefee;
position: relative;
z-index: 1;
overflow: hidden;
}
.s13-bg {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 67.37vw;
z-index: -1;
}
.s13 h2 {
width: 21.05vw;
padding: 0 0 1.75vw;
font-size: 3.74vw;
font-weight: 700;
line-height: 1.06;
text-align: center;
color: #fff;
text-shadow: 0 0 0.58vw #ffffff85, rgb(185 132 255 / 100%) -0.58vw 0.06vw 1.17vw,
#b984ff 0vw 0vw 1.17vw, rgb(104 120 255) 0.58vw 0vw 3.51vw;
}
.s13-row {
display: flex;
gap: 1.64vw;
}
.s13-row p {
padding: 0.7vw 1.75vw 0.7vw 0.82vw;
display: flex;
align-items: center;
gap: 0.82vw;
font-family: "Kallisto", sans-serif;
font-size: 1.24vw;
font-weight: 700;
border-radius: 5.26vw;
color: #0d1119;
background-color: #fff;
box-shadow: 0 0 1.17vw rgb(0 0 0 / 20%);
}
.s13-row p img {
width: 1.52vw;
}
.s13 p.p01 {
width: 28.3vw;
margin: 5.26vw 0 1.29vw;
padding: 0.82vw;
display: flex;
justify-content: center;
align-items: center;
gap: 0.82vw;
font-family: "Kallisto", sans-serif;
font-size: 1.24vw;
font-weight: 700;
border-radius: 0.82vw;
background-image: linear-gradient(90deg, #ae71ff, #3b78ff);
}
.s13 p.p01 img {
width: 1.17vw;
}
.s13-off {
width: 28.3vw;
padding: 2.11vw;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.17vw;
border-radius: 0.82vw;
background-color: #d5d5d5;
}
.s13 p.p02 {
font-family: "Kallisto", sans-serif;
font-size: 1.24vw;
font-weight: 300;
color: #3b3b3b;
}
.s13 p.p02 span {
font-weight: 700;
}
.s13 p.p03 {
font-size: 0.88vw;
color: #414141;
}
.s13 p.p04 {
padding: 2.11vw 0 1.17vw;
font-family: "Kallisto", sans-serif;
font-size: 1.24vw;
font-weight: 500;
text-align: center;
color: #414141;
}
.s13 p.p04 .neon {
font-weight: 700;
background: -webkit-linear-gradient(278deg, #ae71ff, #3b78ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.s13 p.p04 .bold {
font-weight: 700;
}
.s13 .dec-arrow {
width: 2.22vw;
}
.s13-on {
margin: 2.05vw 0 0;
padding: 2.51vw 1.17vw;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.46vw;
border-radius: 0.82vw;
background: linear-gradient(30deg, #ae71ff, #3b78ff);
}
.s13 p.p05 {
font-family: "Kallisto", sans-serif;
font-size: 2.92vw;
font-weight: 300;
color: #fff;
}
.s13 p.p05 span {
font-weight: 900;
}
.s13 p.p06 {
font-size: 1.05vw;
font-weight: 300;
color: #fff;
}
.s13 p.p06 span {
font-weight: 700;
}
.s13 p.p07 {
width: 17.54vw;
padding: 0.64vw;
font-family: "Kallisto", sans-serif;
font-size: 0.94vw;
font-weight: 300;
text-align: center;
border-radius: 0.7vw;
color: #414141;
background-color: #fff;
}
.s13 p.p07 .bold {
font-weight: 700;
}
.s13 p.p07 .neon {
padding: 0.06vw 0.35vw 0.12vw;
font-weight: 700;
border-radius: 0.35vw;
color: #fff;
background-image: linear-gradient(90deg, #040016, #3431c6);
}
.s14 {
padding: 9.12vw 0;
position: relative;
}
.s14-bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
.s14-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.s14-wrap {
width: 56.14vw;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.s14-info {
width: 21.29vw;
}
.s14 h2 {
font-family: "Kallisto", sans-serif;
font-size: 2.92vw;
font-weight: 300;
line-height: 1.06;
color: #f0f0f0;
}
.s14 h2 span {
font-weight: 700;
background: -webkit-linear-gradient(278deg, #ae71ff, #3b78ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.s14 p {
padding: 1.75vw 0 0;
font-size: 1.05vw;
color: #cfcfcf;
}
.s14 p span {
font-weight: 700;
color: #eeeeee;
}
.s15 {
padding: 47.13vw 0 14.74vw;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.s15-bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
.s15-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.s15-wrap {
width: 56.14vw;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.s15 p.p01 {
width: 100%;
margin: 0.47vw 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.05vw;
text-align: center;
background-color: rgb(0 0 0 / 20%);
backdrop-filter: blur(0.23vw);
border-top: 0.1rem solid rgb(255 255 255 / 20%);
border-bottom: 0.1rem solid rgb(255 255 255 / 20%);
}
.s15 p.p01 span {
margin-left: 0.35vw;
font-weight: 600;
}
.s15 p.p02 {
padding: 4.09vw 0 1.52vw;
font-size: 1.05vw;
text-align: center;
color: #cfcfcf;
}
.s15 p.p03 {
width: 28.07vw;
font-size: 1.29vw;
text-align: center;
line-height: 1.5;
color: #fff;
}
.s15 p.p03 .bold {
font-weight: 600;
}
.s15 p.p03 .neon {
font-weight: 700;
background: -webkit-linear-gradient(278deg, #ae71ff, #3b78ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hide-desktop {
display: none;
}
@media screen and (max-width: 600px) {
.cc-btn {
margin: 8.33vw 0 0;
padding: 4.17vw 6.67vw 3.75vw;
font-size: 3.75vw;
border-radius: 18.75vw;
}
.s01-bg img {
object-fit: contain;
object-position: top;
}
.s01-wrap {
width: 85.42vw;
padding: 14.17vw 0 25vw;
display: flex;
flex-direction: column;
align-items: center;
}
.s01-logo {
width: 49.58vw;
}
.s01 h1 {
width: 100%;
padding: 125vw 0 8.33vw;
font-size: 10vw;
}
.s01 p.p01 {
width: 100%;
padding: 0 0 8.33vw;
font-size: 3.75vw;
}
.s01 p.p02 {
width: 80%;
gap: 2.08vw;
font-size: 3.75vw;
}
.s01 p.p02 svg {
width: 5.83vw;
}
.s01 .cc-btn {
width: 100%;
}
.s02-bg img {
height: auto;
object-fit: contain;
position: absolute;
bottom: 0;
}
.s02-wrap {
width: 87.5vw;
padding: 27.08vw 0 160vw;
}
.s02 h2 {
width: 81.25vw;
font-size: 9.17vw;
text-align: center;
}
.s02-info {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.s02 p.p01 {
width: 100%;
padding: 6.25vw 0 7.08vw;
font-size: 4.17vw;
text-align: center;
}
.s02 p.p02 {
width: 100%;
padding: 2.92vw 3.96vw 2.5vw 4.58vw;
font-size: 4.17vw;
border-radius: 6.25vw 18.75vw 18.75vw 6.25vw;
}
.s02-text {
width: 70.83vw;
padding: 8.33vw 0 0;
gap: 3.33vw;
}
.s02 p.p03 {
font-size: 4.79vw;
}
.s03 {
padding: 27.5vw 0;
}
.s03 h2 {
font-size: 10vw;
}
.s03 p.p01 {
width: 87.5vw;
padding: 4.17vw 0 7.08vw;
font-size: 4.58vw;
}
.s03 p.p02 {
font-size: 4.58vw;
}
.s03 p.p03 {
width: 100vw;
font-size: 8.33vw;
transform: translateY(1.04vw);
}
.s03-text {
padding: 8.33vw 0 0;
}
.s03-text:nth-of-type(1) p.p03 {
margin-left: 8.33vw;
}
.s03-text:nth-of-type(2) p.p03 {
margin-left: 47.92vw;
}
.s03-text:nth-of-type(3) p.p03 {
margin-left: 6.25vw;
}
.s03-text:nth-of-type(4) p.p03 {
margin-left: 10.42vw;
}
.s03 p.p04 {
margin: 12.5vw 0 2.08vw;
font-size: 4.46vw;
}
.s03 p.p05 {
font-size: 4.46vw;
}
.s04 {
padding: 22.92vw 0 0;
overflow: hidden;
}
.s04 p.p02 {
width: 70.83vw;
margin: 89.58vw 0 29.17vw;
padding: 3.13vw 8.33vw;
font-size: 6.67vw;
}
.s04-img {
width: 107.08vw;
bottom: 39.58vw;
}
.s04-img::before {
height: 41.67vw;
background-image: linear-gradient(transparent, #006cff);
}
.s04-info {
width: 83.33vw;
height: 56.67vw;
border: none;
border-radius: 37.5vw;
position: relative;
z-index: 1;
}
.s04-info::before,
.s04-info::after {
position: absolute;
content: "";
width: 200vw;
height: 200vw;
border-radius: 50%;
border: 0.3rem solid #fff;
z-index: -1;
}
.s04-info::before {
left: -90%;
bottom: 70%;
}
.s04-info::after {
top: 70%;
left: -50%;
}
.s04 p.p01:nth-of-type(1) {
right: -4.17vw;
}
.s04 p.p01:nth-of-type(2) {
top: 11.67vw;
left: -4.17vw;
}
.s04 p.p01:nth-of-type(3) {
left: -4.17vw;
bottom: 0vw;
}
.s04 p.p01:nth-of-type(4) {
right: 2.08vw;
bottom: 12.5vw;
}
.s04 h2 {
padding: 0 0 14.58vw;
font-size: 7.5vw;
}
.s04 p.p01 {
padding: 2.29vw 3.75vw 1.67vw 2.92vw;
font-size: 3.75vw;
border-radius: 2.08vw 8.33vw 8.33vw 2.08vw;
}
.s05-bg img {
height: auto;
object-position: top;
}
.s05-wrap {
width: 87.5vw;
padding: 306.25vw 0 25vw;
}
.s05 p.p01 {
width: 72.92vw;
font-size: 6.67vw;
}
.s05 h2 {
width: 75vw;
padding: 3.75vw 0 5.83vw;
font-size: 13.33vw;
text-shadow: 0 0 2.08vw #ffffff85, rgb(185 132 255 / 100%) -2.08vw 0.21vw 4.17vw,
#b984ff 0vw 0vw 4.17vw, rgb(104 120 255) 2.08vw 0vw 12.5vw;
}
.s05 p.p02 {
font-size: 4.17vw;
}
.s05 p.p03 {
padding: 10.42vw 0 2.08vw;
font-size: 4.58vw;
}
.s05 p.p04 {
width: 81.25vw;
padding: 4.17vw 0;
gap: 2.92vw;
font-size: 3.75vw;
}
.s05 p.p04 svg {
width: 4.58vw;
}
.s06 {
padding: 27.5vw 0;
}
.s06 h2 {
width: 83.33vw;
font-size: 7.29vw;
}
.s06 p.p01 {
padding: 7.08vw 0 11.25vw;
gap: 2.08vw;
font-size: 3.75vw;
}
.s06 p.p01 img {
width: 5.21vw;
}
.s06-row {
width: 91.67vw;
gap: 2.5vw;
position: relative;
}
.s06-card {
width: 50vw;
border-radius: 3vw;
position: sticky;
top: 4.17vw;
border: 0.1rem solid rgb(0 0 0 / 10%);
}
.s06-card:first-of-type {
margin-left: 0;
}
.s06-card p {
padding: 2.58vw 2.5vw;
font-size: 3.13vw;
}
.s06 h3 {
padding: 8.75vw 4.17vw;
font-size: 4.46vw;
}
.s06 p.p02 {
padding: 13.33vw 0 0;
font-size: 5.83vw;
}
.s07 {
width: 100%;
padding: 27.5vw 0 14.58vw;
overflow: hidden;
}
.s07-dec {
height: 62.5vw;
object-fit: cover;
}
.s07 h2 {
padding: 0 0 5.42vw;
font-size: 10.42vw;
}
.s07-box {
margin: 18.75vw 0 7.08vw;
padding: 0.42vw;
border-radius: 4.17vw;
}
.s07 p.p01 {
padding: 2.5vw 4.17vw 2.08vw 4.17vw;
border-radius: 3.75vw;
font-size: 3.75vw;
}
.s07 p.p02 {
font-size: 3.75vw;
}
.s07-examples {
padding: 3.33vw 0 7.08vw;
gap: 1.46vw;
}
.s07-examples p {
padding: 2.08vw 3.75vw 1.67vw;
font-size: 3.33vw;
border-radius: 18.75vw;
}
.s07-row {
width: 100%;
gap: 4.17vw;
padding: 0 4.17vw;
overflow-x: scroll;
}
.s07-row img {
max-width: 62.5vw;
width: 58.33vw;
border-radius: 4.17vw;
flex-shrink: 0;
}
.s07 p.p03 {
padding: 12.5vw 0 10.42vw;
font-size: 4.58vw;
}
.s07-cicle {
width: 97.5vw;
}
.s08 {
margin: -0.1rem 0 0;
padding: 65.83vw 0 35vw;
}
.s08-wrap {
width: 87.5vw;
flex-direction: column-reverse;
gap: 25vw;
}
.s08-video {
width: 72.92vw;
}
.s08-info {
width: 83.33vw;
}
.s08 h2 {
padding: 0 0 7.08vw;
font-size: 10vw;
}
.s08 p.p01 {
margin: -4.17vw 0;
font-size: 3.75vw;
}
.s08 p.p01 img {
width: 13.75vw;
margin-right: -2.08vw;
}
.s08 p.p02 {
padding: 7.5vw 0 1.25vw;
font-size: 4.58vw;
}
.s08 p.p03 {
font-size: 4.58vw;
}
.s09 {
padding: 66.67vw 0 35.42vw;
}
.s09-mockup {
width: 88.75vw;
}
.s09-mockup video,
.play-btn {
width: 60.42vw;
height: 34.38vw;
top: 9.58vw;
left: 14.17vw;
border-radius: 1.25vw;
}
.s09-mockup-img {
width: 100%;
}
.s09-text-01 {
left: 0;
top: initial;
bottom: 100%;
}
.s09-text-01 p:nth-of-type(1),
.s09-text-01 p:nth-of-type(3),
.s09-text-02 p:nth-of-type(1),
.s09-text-02 p:nth-of-type(2),
.s09-text-02 p:nth-of-type(4) {
transform: none;
}
.s09-text-02 {
top: 100%;
right: 0;
bottom: initial;
}
.s09-text p {
padding: 2.5vw 5vw 2.5vw 2.5vw;
gap: 1.88vw;
font-size: 3.75vw;
border-radius: 18.75vw 1.04vw 12.5vw 18.75vw;
}
.s09 p.p01 {
padding: 75vw 0 0;
gap: 2.08vw;
font-size: 5.83vw;
}
.s10 {
padding: 25vw 0 16.67vw;
}
.s10-title {
padding: 0 0 63.33vw;
gap: 50vw;
transform: none;
flex-direction: column;
gap: 0;
}
.s10 h2,
.s10 h3 {
font-size: 9.46vw;
}
.s10 p {
max-width: 45.83vw;
padding: 2.5vw 4.58vw 2.5vw 2.5vw;
gap: 2.08vw;
font-size: 2.92vw;
border-radius: 2.08vw 2.08vw 7.5vw 2.08vw;
backdrop-filter: blur(1.25vw);
}
.s10-text p:nth-of-type(1) {
transform: translateX(-20.83vw);
}
.s10-text p:nth-of-type(2) {
transform: translateX(8.33vw);
}
.s10-text p:nth-of-type(3) {
transform: translateX(-25vw);
}
.s10-text p:nth-of-type(4) {
transform: translateX(20.83vw);
}
.s10-text svg {
width: 4.17vw;
}
.s11 {
padding: 36.67vw 0 135vw;
}
.s11 h2 {
width: 96.67vw;
height: 96.67vw;
font-size: 6.67vw;
}
.s11 h2 span {
font-size: 12.5vw;
text-shadow: rgba(255, 255, 255, 0) -2.08vw 0.21vw 4.17vw,
rgba(185, 132, 255, 0.9) -2.08vw 0.21vw 4.17vw, rgb(185, 132, 255) 0vw 0vw 4.17vw,
rgba(83, 99, 235, 0.9) 2.08vw 0vw 4.17vw;
text-shadow: 0 0 1.46vw #fff, 0 0 2.08vw #fff, 0 0 8.75vw #b984ff, 0 0 17.08vw #b984ff,
0 0 19.17vw #b984ff, 0 0 21.25vw #b984ff, 0 0 31.46vw #b984ff;
}
.s11 p:nth-of-type(1),
.s11 p:nth-of-type(2),
.s11 p:nth-of-type(3),
.s11 p:nth-of-type(4),
.s11 p:nth-of-type(5) {
top: initial;
left: initial;
right: initial;
bottom: initial;
left: 50%;
transform: translate(-50%);
}
.s11 p:nth-of-type(1) {
top: calc(100% + 25vw);
}
.s11 p:nth-of-type(2) {
top: calc(100% + 41.67vw);
}
.s11 p:nth-of-type(3) {
top: calc(100% + 60.42vw);
}
.s11 p:nth-of-type(4) {
top: calc(100% + 77.08vw);
}
.s11 p:nth-of-type(5) {
top: calc(100% + 92.08vw);
}
.s11 p {
padding: 2.29vw 2.92vw 2.29vw 2.29vw;
gap: 1.88vw;
border-radius: 18.75vw;
font-size: 2.92vw;
}
.s12 {
padding: 160vw 0 34.58vw;
}
.s12-wrap {
width: 83.33vw;
}
.s12-card:nth-of-type(1),
.s12-card:nth-of-type(3),
.s12-card:nth-of-type(4) {
transform: none;
}
.s12-card {
width: 79.17vw;
margin: 1.25vw 0;
padding: 4.38vw;
gap: 5.83vw;
border-radius: 2.92vw;
}
.s12-card svg {
width: 10.42vw;
}
.s12-card h3 {
padding: 0 0 4.17vw;
font-size: 4.46vw;
}
.s12-card p {
font-size: 3.33vw;
}
.s13 {
padding: 62.08vw 0 27.08vw;
}
.s13-bg {
width: 240vw;
}
.s13 h2 {
width: 75vw;
padding: 0 0 6.25vw;
font-size: 13.33vw;
text-shadow: 0 0 2.08vw #ffffff85, rgb(185 132 255 / 100%) -2.08vw 0.21vw 4.17vw,
#b984ff 0vw 0vw 4.17vw, rgb(104 120 255) 2.08vw 0vw 12.5vw;
}
.s13-row {
padding: 4.17vw 0 0;
flex-direction: column;
gap: 5.83vw;
}
.s13-row p {
padding: 2.5vw 6.25vw 2.5vw 2.92vw;
gap: 2.92vw;
font-size: 4.42vw;
border-radius: 18.75vw;
box-shadow: 0 0 4.17vw rgb(0 0 0 / 20%);
}
.s13-row p img {
width: 5.42vw;
}
.s13 p.p01 {
width: 81.25vw;
margin: 18.75vw 0 4.58vw;
padding: 2.92vw;
gap: 2.92vw;
font-size: 4.42vw;
border-radius: 2.92vw;
}
.s13 p.p01 img {
width: 4.17vw;
}
.s13-off {
width: 81.25vw;
padding: 7.5vw;
gap: 4.17vw;
border-radius: 2.92vw;
}
.s13 p.p02 {
font-size: 4.42vw;
}
.s13 p.p03 {
font-size: 3.13vw;
}
.s13 p.p04 {
padding: 7.5vw 0 4.17vw;
font-size: 4.42vw;
}
.s13 .dec-arrow {
width: 7.92vw;
}
.s13-on {
margin: 7.29vw 0 0;
padding: 8.96vw 4.17vw;
gap: 5.21vw;
border-radius: 2.92vw;
}
.s13 p.p05 {
font-size: 10.42vw;
}
.s13 p.p06 {
font-size: 4.17vw;
}
.s13 p.p07 {
width: 62.5vw;
padding: 2.29vw;
font-size: 3.33vw;
border-radius: 2.5vw;
}
.s14-wrap {
width: 81.25vw;
}
.s14 {
padding: 132.92vw 0 34.79vw;
}
.s14 h2 {
font-size: 10.42vw;
text-align: center;
}
.s14 p {
padding: 6.25vw 0 0;
font-size: 3.75vw;
text-align: center;
}
.s14-info {
width: 100%;
}
.s15 {
padding: 210.42vw 0 33.75vw;
}
.s15 p.p01 {
margin: 1.67vw 0;
font-size: 3.75vw;
backdrop-filter: blur(0.83vw);
}
.s15 p.p02 {
padding: 14.58vw 0 5.42vw;
font-size: 3.75vw;
}
.s15 p.p03 {
width: 87.5vw;
font-size: 4.17vw;
}
.s15 .cc-btn {
width: 83.33vw;
padding: 4.17vw 14.58vw 3.75vw;
}
.hide-desktop {
display: flex;
}
.hide-mobile {
display: none;
}
}