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
2.5 KiB
39 lines
2.5 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-page { background: #000; color: #fff; overflow-x: hidden; } |
|
.hero-scroll-container { position: relative; height: 100vh; width: 100%; overflow: hidden; } |
|
.parallax-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } |
|
.p-layer { position: absolute; top: -5%; left: -5%; width: 110%; height: 110%; object-fit: cover; will-change: transform; } |
|
.layer-1 { z-index: 1; } .layer-2 { z-index: 2; } .layer-3 { z-index: 3; } .layer-4 { z-index: 4; } |
|
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, transparent 20%, rgba(0,0,0,0.8) 100%); z-index: 5; } |
|
/* 메인 컨텐츠 위치 살짝 상단으로 */ |
|
.main-content { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; text-align: center; padding-top: 5vh; } |
|
/* 하단 텍스트를 화면 중앙 근처로 끌어올림 */ |
|
.next-content { position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); z-index: 11; text-align: center; width: 100%; } |
|
.next-content h2 { font-size: clamp(1.5rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.02em; color: #fff; } |
|
.tagline { font-size: 14px; letter-spacing: 4px; color: #00aeef; margin-bottom: 20px; font-weight: 600; } |
|
.title-wrapper { overflow: hidden; margin-bottom: 30px; } |
|
.reveal-text { display: inline-block; font-size: clamp(2.5rem, 8vw, 6rem); font-weight: 800; line-height: 1.1; } |
|
.desc { font-size: 18px; line-height: 1.6; color: #ccc; max-width: 600px; margin-bottom: 40px; } |
|
.btn-cta { padding: 15px 40px; border: 1px solid #fff; color: #fff; text-decoration: none; transition: all 0.3s; letter-spacing: 2px; font-weight: 500; } |
|
.btn-cta:hover { background: #fff; color: #000; } |
|
.next-content { position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); z-index: 11; text-align: center; } |