메인 페이지 디자인 수정
This commit is contained in:
현성필
@@ -4843,8 +4843,18 @@ select.form-control {
|
||||
.api-search-section {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin-bottom: 80px;
|
||||
margin-top: -80px;
|
||||
overflow: hidden;
|
||||
background: #e9f9ff;
|
||||
}
|
||||
.api-search-section .search-background {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: url("/img/bg_main_intersect.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
pointer-events: none;
|
||||
}
|
||||
.api-search-section .search-content-wrapper {
|
||||
position: relative;
|
||||
@@ -5061,6 +5071,16 @@ select.form-control {
|
||||
align-items: center;
|
||||
padding: 80px 0 100px;
|
||||
background: #FFFFFF;
|
||||
overflow: hidden;
|
||||
}
|
||||
.api-showcase .showcase-background {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: url("/img/bg_main_recommend_apis.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
pointer-events: none;
|
||||
}
|
||||
.api-showcase .showcase-wrapper {
|
||||
max-width: 1228px;
|
||||
@@ -5068,6 +5088,7 @@ select.form-control {
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
.api-showcase .section-header {
|
||||
text-align: center;
|
||||
@@ -5121,30 +5142,35 @@ select.form-control {
|
||||
top: 64px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 15px 20px;
|
||||
justify-content: center;
|
||||
gap: 21px;
|
||||
padding: 12px 24px;
|
||||
font-family: "Noto Sans KR", sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
color: #FFFFFF;
|
||||
background: #008ae2;
|
||||
text-decoration: none;
|
||||
border-radius: 6px;
|
||||
border-radius: 10px;
|
||||
transition: all 0.3s ease;
|
||||
min-height: 44px;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.api-showcase .btn-all-apis {
|
||||
position: static;
|
||||
margin-top: 24px;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.api-showcase .btn-all-apis svg {
|
||||
width: 7px;
|
||||
height: 15px;
|
||||
width: 11px;
|
||||
height: 17px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.api-showcase .btn-all-apis svg path {
|
||||
stroke: #FFFFFF;
|
||||
}
|
||||
.api-showcase .btn-all-apis:hover {
|
||||
background: #F5F5F5;
|
||||
background: rgb(0, 106.8584070796, 175);
|
||||
}
|
||||
.api-showcase .btn-all-apis:hover svg {
|
||||
transform: translateX(4px);
|
||||
@@ -5349,18 +5375,18 @@ select.form-control {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.info-section .action-btn-primary {
|
||||
background: #00acdd;
|
||||
background: #0049B4;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.info-section .action-btn-primary:hover {
|
||||
background: rgb(0, 132.3076923077, 170);
|
||||
background: rgb(0, 52.3166666667, 129);
|
||||
}
|
||||
.info-section .action-btn-secondary {
|
||||
background: #d5a654;
|
||||
background: #00ACDD;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.info-section .action-btn-secondary:hover {
|
||||
background: rgb(197.4929577465, 143.2112676056, 48.5070422535);
|
||||
background: rgb(0, 132.3076923077, 170);
|
||||
}
|
||||
.info-section .info-image {
|
||||
flex: 1;
|
||||
@@ -5383,21 +5409,10 @@ select.form-control {
|
||||
.support-center {
|
||||
position: relative;
|
||||
padding: 100px 0;
|
||||
background: #f2f6fb;
|
||||
background: #eef7fd;
|
||||
overflow: hidden;
|
||||
min-height: 980px;
|
||||
}
|
||||
.support-center .support-background-pattern {
|
||||
position: absolute;
|
||||
right: 320px;
|
||||
top: 0;
|
||||
width: 700px;
|
||||
height: 660px;
|
||||
background-image: url("/img/bg_main_community.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
.support-center .container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@@ -5435,6 +5450,7 @@ select.form-control {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.support-center .support-grid {
|
||||
@@ -5442,55 +5458,6 @@ select.form-control {
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
.support-center .support-card-large {
|
||||
flex: 1;
|
||||
max-width: 598px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 55px 52px 37px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20px;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
min-height: 377px;
|
||||
}
|
||||
.support-center .support-card-large .card-icon {
|
||||
width: 104px;
|
||||
height: 104px;
|
||||
margin-bottom: 42px;
|
||||
}
|
||||
.support-center .support-card-large .card-icon img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.support-center .support-card-large h3 {
|
||||
font-family: "Noto Sans KR", sans-serif;
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: #212529;
|
||||
margin: 0 0 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.support-center .support-card-large p {
|
||||
font-family: "Noto Sans KR", sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
color: #515961;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.support-center .support-card-large:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.support-center .support-card-large {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
.support-center .support-cards-small {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -5507,55 +5474,80 @@ select.form-control {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.support-center .support-card-small {
|
||||
width: 283px;
|
||||
.support-center .support-card {
|
||||
width: 388px;
|
||||
height: 377px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 55px 52px 37px;
|
||||
background: #FAFAFA;
|
||||
border: 1px solid #DDDDDD;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20px;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
min-height: 377px;
|
||||
}
|
||||
.support-center .support-card-small .card-icon {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
margin-bottom: 30px;
|
||||
.support-center .support-card .card-icon {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
.support-center .support-card-small .card-icon img {
|
||||
.support-center .support-card .card-icon img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.support-center .support-card-small .card-content {
|
||||
text-align: center;
|
||||
}
|
||||
.support-center .support-card-small .card-content h3 {
|
||||
.support-center .support-card h3 {
|
||||
font-family: "Noto Sans KR", sans-serif;
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: #000000;
|
||||
color: #212529;
|
||||
margin: 0 0 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.support-center .support-card p {
|
||||
font-family: "Noto Sans KR", sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
color: #515961;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.support-center .support-card .card-content {
|
||||
text-align: center;
|
||||
}
|
||||
.support-center .support-card .card-content h3 {
|
||||
font-family: "Noto Sans KR", sans-serif;
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: #212529;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
.support-center .support-card-small .card-content p {
|
||||
.support-center .support-card .card-content p {
|
||||
font-family: "Noto Sans KR", sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
color: #515961;
|
||||
margin: 0;
|
||||
}
|
||||
.support-center .support-card-small:hover {
|
||||
.support-center .support-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
||||
background: #FFFFFF;
|
||||
}
|
||||
.support-center .support-card--notice {
|
||||
background: #FFFEF4;
|
||||
}
|
||||
.support-center .support-card--faq {
|
||||
background: #DAF0FF;
|
||||
}
|
||||
.support-center .support-card--qna {
|
||||
background: #D9F5F8;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.support-center .support-card-small {
|
||||
.support-center .support-card {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: 377px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11549,50 +11541,6 @@ select.form-control {
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
.user-action-buttons .btn-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.user-action-buttons .btn-action.btn-sm {
|
||||
padding: 4px 10px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.user-action-buttons .btn-action.btn-primary {
|
||||
background-color: #0049b4;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.user-action-buttons .btn-action.btn-primary:hover {
|
||||
background-color: rgb(0, 52.3166666667, 129);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.user-action-buttons .btn-action.btn-danger {
|
||||
background-color: #FF6B6B;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.user-action-buttons .btn-action.btn-danger:hover {
|
||||
background-color: #ff3838;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.user-action-buttons .btn-action.btn-warning {
|
||||
background-color: #FFD93D;
|
||||
color: #1F2937;
|
||||
}
|
||||
.user-action-buttons .btn-action.btn-warning:hover {
|
||||
background-color: rgb(255, 207.0103092784, 10);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.user-action-buttons .btn-action:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.user-empty-state {
|
||||
text-align: center;
|
||||
|
||||
Reference in New Issue
Block a user