메인페이지 스타일 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;
|
||||
|
||||
Reference in New Issue
Block a user