.p-homeHero { position: relative; padding-block: var(--spc-40); @media (max-width: 480px) { padding-block: var(--spc-28) var(--spc-40); }} .p-homeHero-inner { position: relative;} .p-homeHero-content + .p-homeHero-bottom { margin-top: var(--spc-6);} .p-homeHero__bgs { position: absolute; inset: 0; & > span { display: block; position: absolute; inset: 0; background-size: cover; background-position: top left; background-repeat: no-repeat; }} .p-homeHero__captcha { position: absolute; inset: 0; overflow: hidden;} .p-homeHero__captcha-content { transform: translateX(20vw); @media (max-width: 768px) { transform: translateX(44vw); } @media (max-width: 600px) { transform: translateX(72vw); } @media (max-width: 414px) { transform: translateX(100vw); } & > section { --img-width: 35vw; width: var(--img-width); margin-left: auto; animation: slide-diagonal-loop 16s linear infinite; &:nth-child(1) img { transform: translateX(0); } &:nth-child(2) img { transform: translateX(calc(-1 * (var(--img-width) * 2 / 3))); } &:nth-child(3) img { transform: translateX(calc(-2 * (var(--img-width) * 2 / 3))); } &:nth-child(4) img { transform: translateX(calc(-3 * (var(--img-width) * 2 / 3))); } &:nth-child(5) img { transform: translateX(calc(-4 * (var(--img-width) * 2 / 3))); } &:nth-child(6) img { transform: translateX(calc(-5 * (var(--img-width) * 2 / 3))); } &:nth-child(7) img { transform: translateX(calc(-6 * (var(--img-width) * 2 / 3))); } &:nth-child(8) img { transform: translateX(calc(-7 * (var(--img-width) * 2 / 3))); } @media (max-width: 768px) { animation-duration: 8s; } img { box-shadow: 0 0 var(--spc-2) 0 rgba(var(--c-blue-rgb), 0.1); } }} @keyframes slide-diagonal-loop { 0% { transform: translate(0, 0); } 100% { transform: translate(calc(var(--img-width) * 4 / 3), calc(var(--img-width) * -4 / 3)); }} .p-homeHero__captcha-bottom { position: absolute; inset: 0; background-size: cover; background-position: top right; background-repeat: no-repeat;} .p-homeHero__lead { & + .p-homeHero__title { margin-top: var(--spc-2); } & > span { color: var(--c-blue-500); }} .p-homeHero__title { & > span { &.--primary { color: var(--c-blue-500); } } & + .p-homeHero__badge { margin-top: var(--spc-4); }} .p-homeHero__badge { display: flex; gap: var(--spc-3); & > section { display: grid; grid-template-columns: 2.4rem auto auto 2.4rem; grid-template-rows: var(--spc-2) auto auto var(--spc-2); column-gap: var(--spc-1); & > span { display: block; grid-row: 1 / 5; &:last-child { grid-column-start: 4; } } }} .p-homeHero__badge-head,.p-homeHero__badge-content,.p-homeHero__badge-bottom { align-self: center; line-height: 1em;} .p-homeHero__badge-head { grid-column: 2 / 4; grid-row: 2 / 3; color: var(--c-secondary);} .p-homeHero__badge-content { grid-column: 2 / 3; grid-row: 3 / 4; color: transparent; -webkit-text-stroke: .1rem var(--c-secondary);} .p-homeHero__badge-bottom { grid-column: 3 / 4; grid-row: 3 / 4; color: var(--c-gray); transform: translateY(0.2rem);} .p-homeAi { position: relative; margin-top: calc(var(--spc-12) * -1); padding-block: var(--spc-20); @media (max-width: 1024px) { padding-block: var(--spc-12); }} .p-homeAi-inner { position: relative;} .p-homeAi-head + .p-homeAi-content { margin-top: var(--spc-8);} .p-homeAi-content + .p-homeAi-bottom { margin-top: var(--spc-8);} .p-homeAi__bg { position: absolute; inset: 0; border-radius: var(--spc-12) var(--spc-12) 0 0; background-size: cover; background-position: center; background-repeat: no-repeat; @media (max-width: 1024px) { border-radius: var(--spc-8) var(--spc-8) 0 0; }} .p-homeAi__title { display: flex; flex-direction: column; gap: var(--spc-2); * { color: var(--c-blue-100); } & + .p-homeAi__issue { margin-top: var(--spc-8); }} .p-homeAi__issue { position: relative; width: 100%; max-width: 36rem; padding: var(--spc-4) var(--spc-6); border: solid .1rem var(--c-blue-500); border-radius: var(--spc-4);} .p-homeAi__issue-head { position: absolute; top: calc(var(--spc-4) * -1); right: calc(var(--spc-4) * -1); width: 16rem;} .p-homeAi__issue-content { span { display: block; line-height: 1em; color: var(--c-blue-500); & + h5 { margin-top: var(--spc-2); } } h5 { color: var(--c-gray-300); }} .p-homeAi__solution-head span { color: var(--c-blue-500); & + h3 { margin-top: var(--spc-2); }} .p-homeAi__solution-head h3 { color: var(--c-blue-100);} .p-homeAi__solution-head + .p-homeAi__solution-content { margin-top: var(--spc-4);} .p-homeAi__solution-content { display: flex; flex-direction: column; gap: var(--spc-3); border-top: solid .1rem var(--c-blue-900); padding-top: var(--spc-4); * { color: var(--c-blue-100); } ul > li { display: flex; align-items: center; gap: var(--spc-1); color: var(--c-blue-300); img { width: 1.6rem; } }} .p-homeSection { padding-block: var(--spc-24); @media (max-width: 1024px) { padding-block: var(--spc-16); } &.--beforeRounded { padding-bottom: var(--spc-36); @media (max-width: 1024px) { padding-bottom: var(--spc-32); } } &.--gray { background-color: var(--c-gray-300); }} .p-homeSection-head + .p-homeSection-content { margin-top: var(--spc-12); @media (max-width: 1024px) { margin-top: var(--spc-6); }} .p-homeSection__title { color: var(--c-blue-900);} .p-homeLogos { overflow: hidden; width: 100%; padding-block: var(--spc-8); background-color: var(--c-white); & + .p-homeProduct { border-top: solid .1rem var(--c-gray-300); } & > ul { display: flex; gap: var(--spc-6); width: max-content; animation-name: logos-scroll; animation-timing-function: linear; animation-iteration-count: infinite; @media (max-width: 1024px) { gap: var(--spc-2); } }} .p-homeLogos__logo { flex: 0 0 auto; width: 12rem; @media (max-width: 1024px) { width: 8rem; }} @keyframes logos-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); }} .p-homeProduct { position: relative; padding-block: var(--spc-16) 0; @media (max-width: 1024px) { padding-block: var(--spc-12) 0; } &:before { content: ''; position: absolute; inset: 0 0 var(--spc-12) auto; width: 40%; background: linear-gradient(135deg, var(--c-gray-300) 0%, var(--c-gray-600) 100%); @media (max-width: 1024px) { display: none; } } & > * { position: relative; }} .p-homeProduct-head + .p-homeProduct-content { margin-top: var(--spc-4);} .p-homeProduct-head-inner { display: grid; grid-template-columns: 1fr 48rem; grid-template-rows: 1fr auto auto 1fr; column-gap: var(--spc-8); @media (max-width: 1280px) { grid-template-columns: 1fr 40rem; } @media (max-width: 1024px) { display: block; }} .p-homeProduct-content + .p-homeProduct-bottom { margin-top: var(--spc-16);} .p-homeProduct-bottom { border-radius: var(--spc-12); background-color: var(--c-blue-700); @media (max-width: 1024px) { border-radius: var(--spc-8); }} .p-homeProduct__title,.p-homeProduct__titleEn,.p-homeProduct__desc,.p-homeProduct__caption { grid-column: 1 / 2;} .p-homeProduct__title { color: var(--c-blue-900); & + .p-homeProduct__desc { margin-top: var(--spc-4); }} .p-homeProduct__titleEn { align-self: end; color: var(--c-gray-300);} .p-homeProduct__desc { color: var(--c-blue-900); & + .p-homeProduct__caption { margin-top: var(--spc-1); }} .p-homeProduct__caption { color: var(--c-gray-600);} .p-homeProduct__catch { grid-column: 2 / 3; grid-row: 1 / 5; @media (max-width: 1024px) { max-width: 36rem; }} .p-homeProduct__featureLinks { display: flex; gap: var(--spc-4); margin-inline: calc(var(--spc-8) * -1); @media (max-width: 1280px) { margin-inline: 0; } @media (max-width: 1024px) { gap: var(--spc-2); } @media (max-width: 600px) { flex-direction: column; } & + .p-homeProduct__btns { margin-top: var(--spc-12); @media (max-width: 1024px) { margin-top: var(--spc-8); } } & > * { flex: 1 1 0; min-width: 0; @media (max-width: 600px) { flex: none; } }} .p-homeProduct__btns { display: flex; flex-direction: column; gap: var(--spc-2);} .p-homeProduct__btns-head { h4 { color: var(--c-gray); }} .p-homeProduct__btns-content { display: flex; flex-wrap: wrap; gap: var(--spc-4); border-top: solid .1rem var(--c-gray-300); padding-top: var(--spc-4);} .p-homeData__titleEn { color: var(--c-blue-500);} .p-homeData__item { border-top: .1rem solid var(--c-gray-300); padding-top: var(--spc-8); @media (max-width: 1024px) { padding-top: var(--spc-4); } & + .p-homeData__item { margin-top: var(--spc-16); @media (max-width: 1024px) { margin-top: var(--spc-8); } }} .p-homeData__item-head { display: flex; align-items: center; gap: var(--spc-2); & > span { color: var(--c-blue-500); } & > h3 { color: var(--c-blue-900); } & + .p-homeData__item-content { margin-top: var(--spc-8); @media (max-width: 1024px) { margin-top: var(--spc-4); } }} .p-homeData__item-content { display: flex; flex-direction: column; gap: var(--spc-3); & + .p-homeData__item-bottom { margin-top: var(--spc-8); }} .p-homeData__item-bottom { display: flex; flex-direction: column; gap: var(--spc-3);} .p-homePlans-content + .p-homePlans-bottom { margin-top: var(--spc-8);} .p-homePlans-bottom-inner { display: flex; flex-direction: column; gap: var(--spc-4);} .p-homePlans__title { text-align: center; span { color: var(--c-blue-500); }} .p-homePlans__titleEn { text-align: center; color: var(--c-blue-900);} .p-homePlans__list { display: flex; flex-wrap: wrap; gap: var(--spc-1); @media (max-width: 1024px) { flex-direction: column; gap: var(--spc-8); } & > li { flex: 1; display: flex; flex-direction: column; }} .p-homePlans__list-head { display: flex; align-items: center; gap: var(--spc-4); text-align: center; color: var(--c-blue-700); &:before, &::after { content: ''; display: block; flex: 1; height: .1rem; background-color: var(--c-white); } & + .p-homePlans__list-content { margin-top: var(--spc-4); }} .p-homePlans__list-content { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spc-1); @media (max-width: 600px) { flex-direction: column; align-items: center; gap: var(--spc-4); } & > article { flex: 1; @media (max-width: 600px) { width: 100%; } }}