메인페이지 스타일 1차 적용
This commit is contained in:
현성필
@@ -620,14 +620,13 @@ hr {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
background-color: #E5F8FF;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
box-shadow: var(--shadow-sm);
|
||||
z-index: 1000;
|
||||
height: 65px;
|
||||
height: 90px;
|
||||
transition: all 0.3s ease;
|
||||
border-bottom: 1px solid #5F666C;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
@@ -638,6 +637,7 @@ hr {
|
||||
max-width: 1920px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
@@ -3628,33 +3628,26 @@ select.form-control {
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.login-btn:hover {
|
||||
background: #EFF6FF;
|
||||
color: #4B9BFF;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
|
||||
}
|
||||
.login-btn-box {
|
||||
width: 75px;
|
||||
height: 37px;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #1A1A2E;
|
||||
gap: 4px;
|
||||
padding: 4px 10px;
|
||||
color: #212529;
|
||||
text-decoration: none;
|
||||
border: 1px solid #000000;
|
||||
border-radius: 5.5px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
border: 1px solid #212529;
|
||||
border-radius: 6px;
|
||||
font-family: "Noto Sans CJK KR", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
background: transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.login-btn-box:hover {
|
||||
background: #F8FAFC;
|
||||
color: #1A1A2E;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
.login-btn-box .user-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-profile-dropdown {
|
||||
@@ -4516,279 +4509,368 @@ select.form-control {
|
||||
animation: slideDown 0.3s ease;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
.hero-carousel-section {
|
||||
position: relative;
|
||||
padding: 160px 0 100px;
|
||||
background: linear-gradient(180deg, #EFF6FF 0%, #FFFFFF 100%);
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-carousel-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.hero-carousel-container {
|
||||
height: 800px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.hero-section {
|
||||
padding: 120px 0 60px;
|
||||
.hero-carousel-container {
|
||||
height: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-patterns {
|
||||
.hero-carousel-track {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hero-slide {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero-patterns .pattern-circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
opacity: 0.1;
|
||||
}
|
||||
.hero-patterns .pattern-circle.pattern-1 {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: #00D4FF;
|
||||
border-radius: 50%;
|
||||
opacity: 0.1;
|
||||
position: absolute;
|
||||
top: -200px;
|
||||
right: -100px;
|
||||
animation: float 20s ease-in-out infinite;
|
||||
}
|
||||
.hero-patterns .pattern-circle.pattern-2 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: #FFD93D;
|
||||
border-radius: 50%;
|
||||
opacity: 0.1;
|
||||
position: absolute;
|
||||
bottom: -150px;
|
||||
left: -50px;
|
||||
animation: float 15s ease-in-out infinite reverse;
|
||||
}
|
||||
.hero-patterns .pattern-dots {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 10%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-image: radial-gradient(circle, #A78BFA 2px, transparent 2px);
|
||||
background-size: 20px 20px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
height: 780px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 24px;
|
||||
background: #FFFFFF;
|
||||
border: 2px solid #FFD93D;
|
||||
border-radius: 50px;
|
||||
margin-bottom: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1A1A2E;
|
||||
animation: slideInDown 0.6s ease-out;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
|
||||
}
|
||||
.hero-badge .badge-icon {
|
||||
font-size: 20px;
|
||||
animation: bounce 2s infinite;
|
||||
.hero-slide.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.hero-slide[data-slide="0"] {
|
||||
background: #E5F8FF;
|
||||
}
|
||||
.hero-slide[data-slide="1"] {
|
||||
background: #E5F8FF;
|
||||
}
|
||||
.hero-slide[data-slide="2"] {
|
||||
background: #E5F8FF;
|
||||
}
|
||||
|
||||
.main-headline {
|
||||
font-size: 56px;
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 24px;
|
||||
color: #1A1A2E;
|
||||
animation: slideInUp 0.8s ease-out;
|
||||
.hero-slide-content {
|
||||
width: 100%;
|
||||
max-width: 1280px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 80px;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@media (min-width: 1440px) {
|
||||
.hero-slide-content {
|
||||
padding: 0 320px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.hero-slide-content {
|
||||
padding: 0 160px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.hero-slide-content {
|
||||
flex-direction: column;
|
||||
padding: 80px 40px;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.main-headline {
|
||||
.hero-slide-content {
|
||||
padding: 60px 20px;
|
||||
gap: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-text-content {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 46px;
|
||||
z-index: 2;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.hero-text-content {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-text .hero-subtitle {
|
||||
font-family: "Noto Sans KR", sans-serif;
|
||||
font-size: 36px;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
color: #212529;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.hero-text .hero-subtitle {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.hero-text .hero-subtitle {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.hero-text .hero-title {
|
||||
font-family: "Noto Sans KR", sans-serif;
|
||||
font-size: 50px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: #000000;
|
||||
margin: 0;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.hero-text .hero-title {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.main-headline {
|
||||
@media (max-width: 768px) {
|
||||
.hero-text .hero-title {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
.main-headline .headline-highlight {
|
||||
background: linear-gradient(135deg, #00D4FF 0%, #4B9BFF 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.sub-headline {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 40px;
|
||||
color: #64748B;
|
||||
animation: slideInUp 0.9s ease-out;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.sub-headline {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
margin-bottom: 64px;
|
||||
animation: slideInUp 1s ease-out;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.hero-buttons {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.hero-buttons .btn {
|
||||
.btn-hero-signup {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 16px 32px;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
justify-content: center;
|
||||
width: 178px;
|
||||
height: 60px;
|
||||
padding: 10px;
|
||||
background: #0049B4;
|
||||
color: #FFFFFF;
|
||||
font-family: "Noto Sans KR", sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
.hero-buttons .btn:hover {
|
||||
transform: translateY(-3px);
|
||||
.btn-hero-signup:hover {
|
||||
background: rgb(0, 52.3166666667, 129);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 73, 180, 0.3);
|
||||
}
|
||||
.hero-buttons .btn.btn-primary {
|
||||
background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
|
||||
color: #FFFFFF;
|
||||
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
|
||||
.btn-hero-signup:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.hero-buttons .btn.btn-primary:hover {
|
||||
box-shadow: 0 16px 40px rgba(75, 155, 255, 0.2);
|
||||
}
|
||||
.hero-buttons .btn.btn-secondary {
|
||||
background: #FFFFFF;
|
||||
color: #4B9BFF;
|
||||
border: 2px solid #4B9BFF;
|
||||
}
|
||||
.hero-buttons .btn.btn-secondary:hover {
|
||||
background: #EFF6FF;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.hero-buttons .btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
@media (max-width: 1024px) {
|
||||
.btn-hero-signup {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
.hero-image-content {
|
||||
flex: 0 0 auto;
|
||||
width: 556px;
|
||||
height: 455px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 64px;
|
||||
animation: fadeIn 1.2s ease-out;
|
||||
z-index: 1;
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.hero-image-content {
|
||||
width: 450px;
|
||||
height: 370px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.hero-image-content {
|
||||
width: 400px;
|
||||
height: 330px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.hero-stats {
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
.hero-image-content {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.hero-stats .stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.hero-stats .stat-item .stat-number {
|
||||
font-size: 40px;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.hero-stats .stat-item .stat-label {
|
||||
font-size: 14px;
|
||||
color: #64748B;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
position: relative;
|
||||
margin-top: 64px;
|
||||
text-align: center;
|
||||
}
|
||||
.hero-image img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 16px 40px rgba(75, 155, 255, 0.2);
|
||||
}
|
||||
.hero-image .hero-decoration {
|
||||
position: absolute;
|
||||
.hero-image-content .hero-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
object-fit: contain;
|
||||
}
|
||||
.hero-image .hero-decoration::before, .hero-image .hero-decoration::after {
|
||||
content: "";
|
||||
|
||||
.hero-nav-btn {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.hero-image .hero-decoration::before {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, #FFD93D 0%, #FF6B6B 100%);
|
||||
top: -30px;
|
||||
right: 10%;
|
||||
animation: bounce 2s infinite;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.hero-image .hero-decoration::after {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: linear-gradient(135deg, #00D4FF 0%, #4B9BFF 100%);
|
||||
bottom: -20px;
|
||||
left: 15%;
|
||||
animation: bounce 2s infinite 0.5s;
|
||||
.hero-nav-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
transform: translateY(-50%) scale(1.1);
|
||||
}
|
||||
.hero-nav-btn:active {
|
||||
transform: translateY(-50%) scale(0.95);
|
||||
}
|
||||
.hero-nav-btn svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.hero-nav-btn {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-nav-prev {
|
||||
left: 210px;
|
||||
}
|
||||
.hero-nav-prev svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.hero-nav-prev {
|
||||
left: 100px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.hero-nav-prev {
|
||||
left: 40px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.hero-nav-prev {
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-nav-next {
|
||||
right: 210px;
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.hero-nav-next {
|
||||
right: 100px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.hero-nav-next {
|
||||
right: 40px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.hero-nav-next {
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-carousel-indicators {
|
||||
position: absolute;
|
||||
bottom: 160px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
z-index: 10;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.hero-carousel-indicators {
|
||||
bottom: 30px;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-indicator {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: #F1F1F1;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.hero-indicator.active {
|
||||
background: #0049B4;
|
||||
}
|
||||
.hero-indicator:hover:not(.active) {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.hero-indicator {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
.hero-indicator.active {
|
||||
width: 28px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-autoplay-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
.hero-autoplay-toggle svg {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.hero-autoplay-toggle svg.active {
|
||||
opacity: 1;
|
||||
}
|
||||
.hero-autoplay-toggle:hover {
|
||||
background: rgb(255, 255, 255);
|
||||
border-color: #0049B4;
|
||||
box-shadow: 0 2px 8px rgba(0, 73, 180, 0.2);
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.hero-autoplay-toggle {
|
||||
margin-left: 6px;
|
||||
}
|
||||
.hero-autoplay-toggle svg {
|
||||
width: 10px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.api-search-section {
|
||||
position: relative;
|
||||
min-height: 314px;
|
||||
padding: 0;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
.api-search-section .curved-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 314px;
|
||||
background: linear-gradient(180deg, rgba(229, 248, 255, 0.3) 0%, rgba(255, 255, 255, 0.8) 100%);
|
||||
z-index: 0;
|
||||
}
|
||||
.api-search-section .curved-background::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -50px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 50% 50% 0 0/100% 100% 0 0;
|
||||
margin-top: -80px;
|
||||
}
|
||||
.api-search-section .search-content-wrapper {
|
||||
position: relative;
|
||||
@@ -5001,6 +5083,8 @@ select.form-control {
|
||||
|
||||
.api-showcase {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 80px 0 100px;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
@@ -5009,6 +5093,7 @@ select.form-control {
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.api-showcase .section-header {
|
||||
text-align: center;
|
||||
@@ -5045,7 +5130,6 @@ select.form-control {
|
||||
line-height: 1.5;
|
||||
color: #1E1E1E;
|
||||
margin: 0;
|
||||
text-align: center !important;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.api-showcase .section-subtitle {
|
||||
@@ -5174,6 +5258,7 @@ select.form-control {
|
||||
min-height: 980px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 150px;
|
||||
}
|
||||
.info-section .info-background {
|
||||
position: absolute;
|
||||
@@ -5326,10 +5411,11 @@ select.form-control {
|
||||
padding: 100px 0;
|
||||
background: #f2f6fb;
|
||||
overflow: hidden;
|
||||
min-height: 980px;
|
||||
}
|
||||
.support-center .support-background-pattern {
|
||||
position: absolute;
|
||||
right: 120px;
|
||||
right: 320px;
|
||||
top: 0;
|
||||
width: 700px;
|
||||
height: 660px;
|
||||
|
||||
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 676 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 581 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
@@ -31,35 +31,27 @@
|
||||
font-size: $font-size-sm;
|
||||
transition: $transition-base;
|
||||
|
||||
&:hover {
|
||||
background: $light-bg;
|
||||
color: $primary-blue;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
|
||||
// Box style for Figma design (75x37px with black border)
|
||||
// Box style for Figma design (node-id: 721-1489)
|
||||
&-box {
|
||||
width: 75px;
|
||||
height: 37px;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $text-dark;
|
||||
gap: 4px; // 아이콘-텍스트 간격
|
||||
padding: 4px 10px;
|
||||
color: #212529; // 강조 텍스트 색상
|
||||
text-decoration: none;
|
||||
border: 1px solid #000000;
|
||||
border-radius: 5.5px;
|
||||
font-weight: $font-weight-regular;
|
||||
font-size: $font-size-sm;
|
||||
border: 1px solid #212529;
|
||||
border-radius: 6px;
|
||||
font-family: 'Noto Sans CJK KR', $font-family-primary;
|
||||
font-weight: $font-weight-bold; // 700
|
||||
font-size: $font-size-base; // 16px
|
||||
background: transparent;
|
||||
transition: $transition-base;
|
||||
|
||||
&:hover {
|
||||
background: $gray-bg;
|
||||
color: $text-dark;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: $shadow-sm;
|
||||
.user-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -55,14 +55,14 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
//background-color: #C3DFEA;
|
||||
background-color: #E5F8FF;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
box-shadow: var(--shadow-sm);
|
||||
z-index: 1000;
|
||||
height: 65px;
|
||||
height: 90px;
|
||||
transition: all 0.3s ease;
|
||||
border-bottom: 1px solid #5F666C;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
@@ -73,6 +73,7 @@
|
||||
max-width: 1920px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
// ===========================
|
||||
|
||||
@@ -1,249 +1,366 @@
|
||||
// -----------------------------------------------------------------------------
|
||||
// Hero section styles - Modern vibrant design
|
||||
// Hero Carousel Section - Figma Design
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
.hero-section {
|
||||
.hero-carousel-section {
|
||||
position: relative;
|
||||
padding: 160px 0 100px;
|
||||
background: linear-gradient(180deg, $light-bg 0%, $white 100%);
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-carousel-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
overflow: hidden;
|
||||
|
||||
@include respond-to('md') {
|
||||
height: 800px;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
padding: 120px 0 60px;
|
||||
height: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
// Background patterns
|
||||
.hero-patterns {
|
||||
.hero-carousel-track {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// Individual slide
|
||||
.hero-slide {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
width: 100%;
|
||||
height: 780px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
|
||||
|
||||
.pattern-circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
opacity: 0.1;
|
||||
|
||||
&.pattern-1 {
|
||||
@include pattern-circle(400px, $accent-cyan);
|
||||
top: -200px;
|
||||
right: -100px;
|
||||
@include animate-float;
|
||||
}
|
||||
|
||||
&.pattern-2 {
|
||||
@include pattern-circle(300px, $accent-yellow);
|
||||
bottom: -150px;
|
||||
left: -50px;
|
||||
animation: float 15s ease-in-out infinite reverse;
|
||||
}
|
||||
&.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.pattern-dots {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 10%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-image: radial-gradient(circle, $accent-purple 2px, transparent 2px);
|
||||
background-size: 20px 20px;
|
||||
opacity: 0.3;
|
||||
// Slide backgrounds
|
||||
&[data-slide="0"] {
|
||||
background: #E5F8FF;
|
||||
}
|
||||
|
||||
&[data-slide="1"] {
|
||||
background: #E5F8FF;
|
||||
}
|
||||
|
||||
&[data-slide="2"] {
|
||||
background: #E5F8FF;
|
||||
}
|
||||
}
|
||||
|
||||
// Hero content
|
||||
.hero-content {
|
||||
text-align: center;
|
||||
.hero-slide-content {
|
||||
width: 100%;
|
||||
max-width: 1280px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 80px; // 기본 패딩 줄임
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: $container-max-width;
|
||||
margin: 0 auto;
|
||||
padding: 0 $spacing-lg;
|
||||
margin: 0 auto; // 가운데 정렬 보장
|
||||
|
||||
@include respond-to('xl') {
|
||||
padding: 0 320px; // 1440px 이상에서만 큰 패딩
|
||||
}
|
||||
|
||||
@include respond-to('lg') {
|
||||
padding: 0 160px; // 1280px 이상에서 중간 패딩
|
||||
}
|
||||
|
||||
@include respond-to('md') {
|
||||
flex-direction: column;
|
||||
padding: 80px 40px;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
padding: 60px 20px;
|
||||
gap: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
// Hero badge
|
||||
.hero-badge {
|
||||
.hero-text-content {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 46px;
|
||||
z-index: 2;
|
||||
|
||||
@include respond-to('md') {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
.hero-subtitle {
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
font-size: 36px;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
color: #212529;
|
||||
margin: 0 0 12px 0;
|
||||
|
||||
@include respond-to('md') {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
font-size: 50px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: #000000;
|
||||
margin: 0;
|
||||
|
||||
@include respond-to('md') {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-hero-signup {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $spacing-sm;
|
||||
padding: $spacing-sm $spacing-lg;
|
||||
background: $white;
|
||||
border: 2px solid $accent-yellow;
|
||||
border-radius: $border-radius-full;
|
||||
margin-bottom: $spacing-lg;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $text-dark;
|
||||
@include animate-slide-in-down;
|
||||
|
||||
.badge-icon {
|
||||
font-size: $font-size-lg;
|
||||
@include animate-bounce;
|
||||
}
|
||||
}
|
||||
|
||||
// Main headline
|
||||
.main-headline {
|
||||
font-size: $font-size-5xl;
|
||||
font-weight: $font-weight-extrabold;
|
||||
line-height: $line-height-tight;
|
||||
margin-bottom: $spacing-lg;
|
||||
color: $text-dark;
|
||||
@include animate-slide-in-up;
|
||||
|
||||
@include respond-to('sm') {
|
||||
font-size: $font-size-3xl;
|
||||
}
|
||||
|
||||
@include respond-to('xs') {
|
||||
font-size: $font-size-2xl;
|
||||
}
|
||||
|
||||
.headline-highlight {
|
||||
@include gradient-text($gradient-accent);
|
||||
}
|
||||
}
|
||||
|
||||
// Sub headline
|
||||
.sub-headline {
|
||||
font-size: $font-size-lg;
|
||||
font-weight: $font-weight-regular;
|
||||
line-height: $line-height-normal;
|
||||
margin-bottom: $spacing-2xl;
|
||||
color: $text-gray;
|
||||
animation: slideInUp 0.9s ease-out;
|
||||
|
||||
@include respond-to('sm') {
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
// Hero buttons
|
||||
.hero-buttons {
|
||||
display: flex;
|
||||
gap: $spacing-md;
|
||||
justify-content: center;
|
||||
margin-bottom: $spacing-4xl;
|
||||
animation: slideInUp 1s ease-out;
|
||||
width: 178px;
|
||||
height: 60px;
|
||||
padding: 10px;
|
||||
background: #0049B4;
|
||||
color: #FFFFFF;
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
@include respond-to('sm') {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
&:hover {
|
||||
background: darken(#0049B4, 10%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 73, 180, 0.3);
|
||||
}
|
||||
|
||||
.btn {
|
||||
@include button-base;
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&.btn-primary {
|
||||
background: $gradient-primary;
|
||||
color: $white;
|
||||
box-shadow: $shadow-md;
|
||||
|
||||
&:hover {
|
||||
box-shadow: $shadow-xl;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-secondary {
|
||||
background: $white;
|
||||
color: $primary-blue;
|
||||
border: 2px solid $primary-blue;
|
||||
|
||||
&:hover {
|
||||
background: $light-bg;
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-to('xs') {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
@include respond-to('md') {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
// Hero stats
|
||||
.hero-stats {
|
||||
.hero-image-content {
|
||||
flex: 0 0 auto;
|
||||
width: 556px;
|
||||
height: 455px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacing-4xl;
|
||||
@include animate-fade-in;
|
||||
z-index: 1;
|
||||
|
||||
@include respond-to('lg') {
|
||||
width: 450px;
|
||||
height: 370px;
|
||||
}
|
||||
|
||||
@include respond-to('md') {
|
||||
width: 400px;
|
||||
height: 330px;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
flex-direction: column;
|
||||
gap: $spacing-lg;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.stat-number {
|
||||
font-size: $font-size-3xl;
|
||||
font-weight: $font-weight-extrabold;
|
||||
@include gradient-text($gradient-primary);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: $font-size-sm;
|
||||
color: $text-gray;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hero image/illustration
|
||||
.hero-image {
|
||||
position: relative;
|
||||
margin-top: $spacing-4xl;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: auto;
|
||||
border-radius: $border-radius-xl;
|
||||
box-shadow: $shadow-xl;
|
||||
}
|
||||
|
||||
.hero-decoration {
|
||||
position: absolute;
|
||||
.hero-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
}
|
||||
// Navigation buttons
|
||||
.hero-nav-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
display: none; // 기본값: 숨김
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&::before {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: $gradient-warm;
|
||||
top: -30px;
|
||||
right: 10%;
|
||||
@include animate-bounce;
|
||||
}
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
transform: translateY(-50%) scale(1.1);
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: $gradient-accent;
|
||||
bottom: -20px;
|
||||
left: 15%;
|
||||
animation: bounce 2s infinite 0.5s;
|
||||
&:active {
|
||||
transform: translateY(-50%) scale(0.95);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
// 1280px 이상에서만 표시
|
||||
@include respond-to('lg') {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-nav-prev {
|
||||
left: 210px;
|
||||
|
||||
svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
@include respond-to('lg') {
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
@include respond-to('md') {
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-nav-next {
|
||||
right: 210px;
|
||||
|
||||
@include respond-to('lg') {
|
||||
right: 100px;
|
||||
}
|
||||
|
||||
@include respond-to('md') {
|
||||
right: 40px;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// Carousel indicators
|
||||
.hero-carousel-indicators {
|
||||
position: absolute;
|
||||
bottom: 160px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
z-index: 10;
|
||||
|
||||
@include respond-to('sm') {
|
||||
bottom: 30px;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-indicator {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: #F1F1F1;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.active {
|
||||
background: #0049B4;
|
||||
}
|
||||
|
||||
&:hover:not(.active) {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
||||
&.active {
|
||||
width: 28px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Auto play toggle button
|
||||
.hero-autoplay-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border-color: #0049B4;
|
||||
box-shadow: 0 2px 8px rgba(0, 73, 180, 0.2);
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
margin-left: 6px;
|
||||
|
||||
svg {
|
||||
width: 10px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// API Search section styles - 검색 섹션
|
||||
@@ -251,30 +368,9 @@
|
||||
|
||||
.api-search-section {
|
||||
position: relative;
|
||||
min-height: 314px;
|
||||
padding: 0;
|
||||
margin-bottom: 80px;
|
||||
|
||||
.curved-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 314px;
|
||||
background: linear-gradient(180deg, rgba(229, 248, 255, 0.3) 0%, rgba(255, 255, 255, 0.8) 100%);
|
||||
z-index: 0;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -50px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background: $white;
|
||||
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
|
||||
}
|
||||
}
|
||||
margin-top: -80px;
|
||||
|
||||
.search-content-wrapper {
|
||||
position: relative;
|
||||
@@ -499,6 +595,8 @@
|
||||
|
||||
.api-showcase {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center; // 수직 중앙 정렬
|
||||
padding: 80px 0 100px;
|
||||
background: $white;
|
||||
|
||||
@@ -507,6 +605,7 @@
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
@@ -543,12 +642,12 @@
|
||||
line-height: 1.5;
|
||||
color: #1E1E1E;
|
||||
margin: 0;
|
||||
text-align: center !important;
|
||||
|
||||
@include respond-to('md') {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
@include respond-to('sm') {
|
||||
font-size: 18px;
|
||||
}
|
||||
@@ -684,6 +783,7 @@
|
||||
min-height: 980px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 150px;
|
||||
|
||||
.info-background {
|
||||
position: absolute;
|
||||
@@ -861,10 +961,11 @@
|
||||
padding: $spacing-6xl 0;
|
||||
background: #f2f6fb;
|
||||
overflow: hidden;
|
||||
min-height: 980px;
|
||||
|
||||
.support-background-pattern {
|
||||
position: absolute;
|
||||
right: 120px;
|
||||
right: 320px;
|
||||
top: 0;
|
||||
width: 700px;
|
||||
height: 660px;
|
||||
|
||||
Reference in New Issue
Block a user