You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
1.6 KiB
39 lines
1.6 KiB
:root{ |
|
--header-height:96px; |
|
--color-primary:#3A4081; |
|
--color-primary-hover:#2F5DAA; |
|
--color-primary-light:#6B78B5; |
|
--color-primary-soft:rgba(58,64,129,.08); |
|
--color-primary-soft-strong:rgba(58,64,129,.12); |
|
--color-primary-soft-border:rgba(58,64,129,.16); |
|
--color-primary-border:rgba(58,64,129,.2); |
|
--color-primary-border-strong:rgba(58,64,129,.24); |
|
--color-primary-shadow:rgba(58,64,129,.18); |
|
} |
|
|
|
html{scrollbar-gutter:inherit;} |
|
body{overflow-x:hidden;} |
|
|
|
.main-layout{min-height:calc(100vh - var(--header-height));padding-top:var(--header-height);} |
|
.sub-layout{min-height:calc(100vh - var(--header-height));padding-top:var(--header-height);} |
|
|
|
/*main visual*/ |
|
.main-section{height:200vh;} |
|
.main-bg{position:sticky;top:var(--header-height);display:flex;max-width:1440px;margin:0 auto;height:600px;border-radius:8px;overflow:hidden;background:url('/images/1111.png') no-repeat 100% 50%/cover;transform:scale(1);transform-origin:center center;} |
|
.main-bg-hero2{position:absolute;inset:0;background:url('/images/hero3.png') no-repeat 50% 50%/cover;opacity:0;} |
|
.split-text-section{width:100%;} |
|
.main-text{position:relative;display:flex;flex:1;align-items:center;justify-content:center;padding:0 40px;} |
|
.main-text .text{position:absolute;color:#fff;font-size:48px;line-height:1.2;width:100%;text-align:center;perspective:500px;font-weight:600;left:50%;top:50%;transform:translate(-50%,-50%);} |
|
.main-text .text-change{opacity:0;} |
|
|
|
@media (max-width:1024px){ |
|
.main-bg{height:520px;} |
|
.main-text .text{font-size:38px;} |
|
} |
|
|
|
@media (max-width:768px){ |
|
.main-section{height:170vh;} |
|
.main-bg{top:80px;height:420px;} |
|
.main-text{padding:0 20px;} |
|
.main-text .text{font-size:28px;line-height:1.3;} |
|
} |