.hero-experience{
overflow-x: clip;
}
.hero-experience .hero{
min-height: calc(100vh - 68px);
display: flex;
align-items: center;
padding: 48px 0 32px;
background: radial-gradient(circle at 82% 15%,#dbeafe 0,rgba(219,234,254,0) 34%), linear-gradient(#fff,#f8fbff);
}
.hero-experience .hero-grid{
grid-template-columns: minmax(0, 920px) !important;
justify-content: center;
gap: 0 !important;
}
.hero-experience .hero-grid > div:first-child,
.hero-experience .hero-copy-center{
width: 100%;
max-width: 920px;
margin: 0 auto;
text-align: center !important;
}
.hero-experience .hero .actions{
justify-content: center !important;
}
.hero-experience .hero-title-primary,
.hero-experience .hero-title-secondary{
text-align: center;
}
.hero-experience .hero-title-line{
white-space: normal;
}
.hero-experience .hero-title-primary + .hero-title-primary{
margin-top: .12em !important;
}
.hero-experience .hero-title-secondary{
margin-top: .26em !important;
}
.hero-experience .hero-workflow-wrap{
width: min(calc(100% - 40px), var(--max));
margin: 0 auto;
padding: 12px 0 0;
display: flex;
flex-direction: column;
gap: 36px;
}
.hero-experience .workflow-after-preview{
margin-top: 0 !important;
}
.hero-experience .hero-preview-wrap{
width: 100%;
}
.hero-experience .hero-preview-wrap .skiin-preview{
width: min(100%, 1120px) !important;
max-width: 1120px !important;
margin: 0 auto;
}
.hero-experience .workflow-after-preview .workflow-intro h3{
text-align: center;
}
.js-reveal .reveal-on-scroll{
opacity: 0;
transform: translate3d(0, 34px, 0);
transition: opacity .8s ease, transform .9s cubic-bezier(.22,1,.36,1);
will-change: opacity, transform;
}
.js-reveal .reveal-on-scroll.reveal-delay-2{
transition-delay: .12s;
}
.js-reveal .reveal-on-scroll.is-visible{
opacity: 1;
transform: translate3d(0, 0, 0);
}
@media (max-width: 900px){
.hero-experience .hero{
min-height: calc(100svh - 68px);
padding: 34px 0 22px;
}
.hero-experience .hero-grid > div:first-child,
.hero-experience .hero-copy-center{
text-align: center !important;
}
.hero-experience .hero .actions{
justify-content: center !important;
}
.hero-experience .hero-workflow-wrap{
width: min(calc(100% - 28px), var(--max));
gap: 28px;
}
}
@media (max-width: 640px){
.hero-experience .hero{
min-height: calc(100svh - 68px);
padding: 28px 0 14px;
}
.hero-experience .hero-grid{
grid-template-columns: minmax(0, 100%) !important;
}
.hero-experience .hero-grid > div:first-child,
.hero-experience .hero-copy-center{
max-width: 100%;
text-align: center !important;
}
.hero-experience .hero-title-line{
white-space: normal !important;
}
.hero-experience .hero .actions .btn{
width: auto;
min-width: 0;
}
.hero-experience .workflow-after-preview .workflow-intro h3{
font-size: clamp(1.25rem, 6vw, 1.8rem);
}
}
.hero-experience .workflow-old::after{
content:none !important;
display:none !important;
}
.hero-experience .hero-preview-wrap{
margin-top:36px;
}
@media (max-width:900px){
.hero-experience .hero-preview-wrap{
margin-top:28px;
}
}
@media (max-width:640px){
.hero-experience .hero-preview-wrap{
margin-top:24px;
}
}
.hero-experience .hero-copy-center{
display:flex;
flex-direction:column;
align-items:center;
}
.hero-experience .hero-copy-center .actions{
display:flex;
justify-content:center!important;
align-items:center;
margin-top:22px;
width:100%;
}
.hero-experience .hero-copy-center .actions .btn{
flex:0 0 auto;
}
.hero-preview-actions{
display:flex;
justify-content:center;
align-items:center;
margin:28px auto 12px;
}
.hero-preview-actions .btn{
min-width:220px;
}
.hero-preview-wrap{
margin-bottom:4px;
}
.skiin-preview .skdemo-camera-control select,
.skiin-preview .skdemo-camera-control select option{
font-family:inherit;
font-size:13px;
font-weight:700;
line-height:1.4;
}
@media (max-width:900px){
.hero-preview-actions{
margin:24px auto 10px;
}
}
@media (max-width:640px){
.hero-experience .hero-grid > div:first-child,
.hero-experience .hero-copy-center{
text-align:center!important;
}
.hero-experience .hero-copy-center{
align-items:center;
}
.hero-experience .hero-copy-center .actions{
display:block;
text-align:center;
margin-top:20px;
}
.hero-experience .hero-copy-center .actions .btn{
display:inline-flex;
width:auto;
min-width:0;
max-width:100%;
}
.hero-preview-actions{
margin:22px auto 10px;
padding:0 16px;
}
.hero-preview-actions .btn{
width:100%;
max-width:320px;
min-width:0;
}
.skiin-preview .skdemo-workspace-tools{
background:transparent!important;
border-color:rgba(255,255,255,.08)!important;
box-shadow:none!important;
}
.skiin-preview .skdemo-camera-control select,
.skiin-preview .skdemo-camera-control select option{
font-size:12px;
}
}
.hero-experience{
background:linear-gradient(180deg,#ffffff 0%,#f8fbff 18%,#edf4ff 42%,#f7fbff 68%,#ffffff 100%);
}
.hero-experience .hero{
background:transparent!important;
}
.hero-experience .hero-workflow-wrap{
position:relative;
padding:44px 0 0;
}
.hero-experience .workflow-after-preview{
margin-top:0!important;
}
.hero-experience .hero-copy-center .actions .btn,
.hero-preview-actions .btn{
min-width:260px;
padding:15px 22px;
line-height:1.35;
white-space:normal;
text-wrap:balance;
word-break:keep-all;
text-align:center;
}
.hero-preview-actions{
margin:34px auto 28px;
}
body.lang-zh .hero-experience .hero-copy-center .actions .btn,
body.lang-zh .hero-preview-actions .btn,
body.lang-ja .hero-experience .hero-copy-center .actions .btn,
body.lang-ja .hero-preview-actions .btn,
body.lang-ko .hero-experience .hero-copy-center .actions .btn{
letter-spacing:0;
}
@media (max-width:900px){
.hero-experience .hero-workflow-wrap{
padding-top:36px;
}
.hero-preview-actions{
margin:28px auto 24px;
}
}
@media (max-width:640px){
.hero-experience .hero-workflow-wrap{
padding-top:28px;
}
.hero-experience .hero-copy-center .actions .btn,
.hero-preview-actions .btn{
width:min(100%,340px);
max-width:340px;
min-width:246px;
padding:15px 20px;
font-size:15px;
line-height:1.4;
}
.hero-preview-actions{
margin:24px auto 24px;
}
}
.hero-experience .workflow-after-preview .workflow-pair.workflow-simple-stack{
display:grid!important;
grid-template-columns:1fr!important;
gap:0!important;
width:min(100%,1120px);
margin:0 auto;
border:1px solid #d9e2ec;
border-radius:22px;
overflow:hidden;
background:rgba(255,255,255,.86);
box-shadow:0 18px 48px rgba(15,23,42,.06);
}
.hero-experience .workflow-simple-stack .workflow-panel{
position:relative;
display:grid;
grid-template-columns:150px minmax(0,1fr) auto;
align-items:center;
gap:24px;
padding:24px 28px!important;
margin:0;
border:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
overflow:visible!important;
}
.hero-experience .workflow-simple-stack .workflow-panel + .workflow-panel{
border-top:1px solid #d9e2ec!important;
}
.hero-experience .workflow-simple-stack .workflow-old::after,
.hero-experience .workflow-simple-stack .workflow-new::before{
content:none!important;
display:none!important;
}
.hero-experience .workflow-simple-stack .workflow-label{
margin:0!important;
padding:0!important;
color:#172033!important;
font-size:1rem!important;
font-weight:850!important;
line-height:1.4;
}
.hero-experience .workflow-simple-stack .workflow-new .workflow-label{
color:#1d4ed8!important;
}
.hero-experience .workflow-simple-stack .workflow-chain{
display:flex!important;
flex-direction:row!important;
align-items:center!important;
flex-wrap:wrap!important;
gap:8px!important;
margin:0!important;
min-width:0;
}
.hero-experience .workflow-simple-stack .workflow-chain span{
width:auto!important;
min-height:0!important;
padding:8px 10px!important;
border:1px solid #dce4ee!important;
border-radius:10px!important;
background:#f8fafc!important;
color:#334155!important;
box-shadow:none!important;
font-size:.86rem!important;
font-weight:750!important;
line-height:1.35!important;
text-align:center;
}
.hero-experience .workflow-simple-stack .workflow-new .workflow-chain span{
border-color:#c9ddfb!important;
background:#f3f8ff!important;
color:#234a7d!important;
}
.hero-experience .workflow-simple-stack .workflow-chain b{
display:inline!important;
width:auto!important;
height:auto!important;
position:static!important;
overflow:visible!important;
opacity:1!important;
color:#94a3b8!important;
font-size:16px!important;
line-height:1!important;
text-indent:0!important;
}
.hero-experience .workflow-simple-stack .workflow-chain b::before{content:none!important}
.hero-experience .workflow-simple-stack .workflow-new .workflow-chain b{color:#4f8df8!important}
.workflow-benefit-tags{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:8px;
}
.workflow-benefit-tag{
display:inline-flex;
align-items:center;
gap:7px;
white-space:nowrap;
font-size:.83rem;
font-weight:800;
line-height:1.35;
}
.workflow-benefit-tag i{
position:relative;
width:16px;
height:16px;
flex:0 0 16px;
border-radius:50%;
}
.workflow-benefit-tag i::before{
position:absolute;
inset:0;
display:grid;
place-items:center;
font-size:12px;
font-style:normal;
font-weight:900;
line-height:1;
}
.workflow-benefit-tag.is-negative{color:#8b5b61}
.workflow-benefit-tag.is-negative i{background:#fff1f2;border:1px solid #fecdd3}
.workflow-benefit-tag.is-negative i::before{content:'×';color:#be4452}
.workflow-benefit-tag.is-positive{color:#315f50}
.workflow-benefit-tag.is-positive i{background:#ecfdf5;border:1px solid #bbf7d0}
.workflow-benefit-tag.is-positive i::before{content:'✓';color:#16845d}
@media(max-width:900px){
.hero-experience .workflow-simple-stack .workflow-panel{
grid-template-columns:120px minmax(0,1fr);
gap:14px 18px;
}
.hero-experience .workflow-simple-stack .workflow-benefit-tags{
grid-column:2;
justify-content:flex-start;
}
}
@media(max-width:640px){
.hero-experience .workflow-after-preview .workflow-pair.workflow-simple-stack{
border-radius:18px;
}
.hero-experience .workflow-simple-stack .workflow-panel{
grid-template-columns:1fr;
gap:14px;
padding:21px 18px!important;
}
.hero-experience .workflow-simple-stack .workflow-benefit-tags{
grid-column:auto;
justify-content:flex-start;
gap:7px 14px;
}
.hero-experience .workflow-simple-stack .workflow-chain{
display:grid!important;
grid-template-columns:1fr!important;
gap:0!important;
}
.hero-experience .workflow-simple-stack .workflow-chain span{
width:100%!important;
padding:10px 12px!important;
}
.hero-experience .workflow-simple-stack .workflow-chain b{
display:block!important;
height:24px!important;
font-size:0!important;
text-align:center;
}
.hero-experience .workflow-simple-stack .workflow-chain b::before{
content:'↓'!important;
display:block!important;
color:currentColor;
font-size:17px;
line-height:24px;
}
.workflow-benefit-tag{
font-size:.82rem;
}
}