.top-wrap {
max-width: 960px;
margin: 0 auto;
padding-bottom: 64px;
} .top-hero {
background: linear-gradient(145deg, #062a46 0%, #0073aa 100%);
color: #fff;
padding: 68px 24px 60px;
text-align: center;
}
.top-hero__inner {
max-width: 620px;
margin: 0 auto;
}
.top-hero__eyebrow {
font-size: 0.78rem;
letter-spacing: 0.12em;
color: rgba(255,255,255,0.7);
margin-bottom: 14px;
text-transform: uppercase;
}
.top-hero__title {
font-size: clamp(1.45rem, 5vw, 2.1rem);
font-weight: 800;
line-height: 1.45;
color: #fff;
margin-bottom: 18px;
letter-spacing: 0.01em;
}
.top-hero__sub {
font-size: 0.98rem;
line-height: 1.8;
color: rgba(255,255,255,0.85);
margin-bottom: 36px;
}
.top-hero__cta {
display: inline-block;
padding: 16px 44px;
background: #f39c12;
color: #fff !important;
font-size: 1.05rem;
font-weight: 700;
border-radius: 50px;
text-decoration: none !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.25);
transition: background 0.18s, transform 0.15s, box-shadow 0.15s;
}
.top-hero__cta:hover {
background: #e67e22;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
} .top-trust-bar {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 6px 28px;
padding: 13px 20px;
background: #f4f6f8;
border-bottom: 1px solid #e0e4e8;
font-size: 0.8rem;
color: #555;
}
.top-trust-bar__item {
display: inline-flex;
align-items: center;
gap: 5px;
}
.top-trust-bar__item svg {
color: #0073aa;
flex-shrink: 0;
} .top-section {
padding: 40px 20px 0;
}
.top-section__title {
font-size: 1.25rem;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 6px;
padding-left: 14px;
border-left: 4px solid #0073aa;
}
.top-section__title--camp {
border-left-color: #f39c12;
}
.top-section__desc {
font-size: 0.82rem;
color: #888;
margin-bottom: 20px;
padding-left: 18px;
} .top-section__more {
text-align: center;
margin-top: 20px;
}
.top-section__more-link {
display: inline-block;
padding: 11px 32px;
border: 2px solid #0073aa;
color: #0073aa !important;
border-radius: 50px;
font-size: 0.88rem;
font-weight: 600;
text-decoration: none !important;
transition: background 0.15s, color 0.15s;
}
.top-section__more-link:hover {
background: #0073aa;
color: #fff !important;
} .top-rank-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
} .top-rank-card {
display: grid;
grid-template-columns: 52px 1fr auto auto;
grid-template-rows: auto auto;
align-items: center;
gap: 4px 16px;
padding: 16px;
background: #fff;
border: 1px solid #dde2e8;
border-left: 4px solid #dde2e8;
border-radius: 10px;
box-shadow: 0 1px 4px rgba(0,0,0,0.05);
transition: box-shadow 0.15s;
}
.top-rank-card:hover {
box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}
.top-rank-card.is-gold   { border-left-color: #f5c400; background: #fffdf0; }
.top-rank-card.is-silver { border-left-color: #a8a8a8; }
.top-rank-card.is-bronze { border-left-color: #c47a32; } .top-rank-card__badge {
grid-column: 1;
grid-row: 1 / span 2;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
font-size: 0.72rem;
font-weight: 700;
background: #e8f0fe;
color: #0073aa;
align-self: center;
}
.top-rank-card.is-gold   .top-rank-card__badge { background: #f5c400; color: #5a4200; }
.top-rank-card.is-silver .top-rank-card__badge { background: #c8c8c8; color: #444; }
.top-rank-card.is-bronze .top-rank-card__badge { background: #c47a32; color: #fff; } .top-rank-card__bank {
grid-column: 2;
grid-row: 1;
display: flex;
align-items: center;
gap: 10px;
}
.top-rank-card__logo {
width: 64px;
height: 32px;
object-fit: contain;
flex-shrink: 0;
}
.top-rank-card__name {
font-weight: 700;
font-size: 0.95rem;
color: #1a1a2e;
} .top-rank-card__camp {
grid-column: 2;
grid-row: 2;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
min-height: 18px;
font-size: 0.74rem;
}
.top-rank-card__camp-label {
color: #5d4037;
}
.top-rank-card__camp-end {
color: #aaa;
font-size: 0.7rem;
} .top-rank-card__rate {
grid-column: 3;
grid-row: 1 / span 2;
text-align: right;
white-space: nowrap;
align-self: center;
}
.top-rank-card__rate-main {
font-size: 1.7rem;
font-weight: 700;
color: #c0392b;
}
.top-rank-card__rate-base {
font-size: 0.82rem;
color: #bbb;
text-decoration: line-through;
}
.top-rank-card__rate-arrow {
font-size: 0.85rem;
color: #e67e22;
margin: 0 4px;
}
.top-rank-card__rate-camp {
font-size: 1.7rem;
font-weight: 700;
color: #c0392b;
}
.top-rank-card__rate-unit {
font-size: 0.82rem;
color: #888;
margin-left: 1px;
} .top-rank-card__btn {
grid-column: 4;
grid-row: 1 / span 2;
display: inline-flex;
align-items: center;
padding: 9px 16px;
background: #e74c3c;
color: #fff !important;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 600;
text-decoration: none !important;
white-space: nowrap;
align-self: center;
transition: background 0.15s;
}
.top-rank-card__btn:hover {
background: #c0392b;
} .top-tag {
display: inline-block;
padding: 2px 7px;
border-radius: 3px;
font-size: 0.68rem;
font-weight: 700;
white-space: nowrap;
flex-shrink: 0;
}
.top-tag--new       { background: #e74c3c; color: #fff; }
.top-tag--new-funds { background: #e67e22; color: #fff; }
.top-tag--all       { background: #27ae60; color: #fff; } .top-camp-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 16px;
}
.top-camp-card {
padding: 18px;
background: #fffbf0;
border: 1px solid #fcd34d;
border-top: 3px solid #f39c12;
border-radius: 8px;
font-size: 0.85rem;
display: flex;
flex-direction: column;
gap: 8px;
}
.top-camp-card__head {
display: flex;
align-items: center;
gap: 8px;
}
.top-camp-card__logo {
width: 52px;
height: 26px;
object-fit: contain;
flex-shrink: 0;
}
.top-camp-card__name {
font-weight: 700;
font-size: 0.88rem;
color: #1a1a2e;
}
.top-camp-card__title {
font-size: 0.78rem;
color: #5d4037;
line-height: 1.5;
margin: 0;
}
.top-camp-card__rate {
font-size: 0.84rem;
color: #555;
margin: 0;
}
.top-camp-card__rate strong {
font-size: 1.4rem;
font-weight: 700;
color: #c0392b;
margin-left: 4px;
}
.top-camp-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.top-camp-card__end {
font-size: 0.72rem;
color: #aaa;
}
.top-camp-card__btn {
display: block;
margin-top: 4px;
padding: 9px;
background: #e74c3c;
color: #fff !important;
border-radius: 5px;
font-size: 0.78rem;
font-weight: 600;
text-align: center;
text-decoration: none !important;
transition: background 0.15s;
}
.top-camp-card__btn:hover {
background: #c0392b;
} .top-section__title--article {
border-left-color: #0a2d46;
}
.top-article-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
}
.top-article-card {
display: flex;
flex-direction: column;
padding: 20px 18px;
background: #fff;
border: 1px solid #dde2e8;
border-top: 3px solid #0a2d46;
border-radius: 8px;
text-decoration: none !important;
color: inherit !important;
transition: box-shadow 0.15s, transform 0.12s;
}
.top-article-card:hover {
box-shadow: 0 4px 16px rgba(10,45,70,0.12);
transform: translateY(-2px);
}
.top-article-card__icon {
font-size: 1.9rem;
margin-bottom: 12px;
line-height: 1;
}
.top-article-card__title {
font-size: 0.93rem;
font-weight: 700;
color: #0a2d46;
margin-bottom: 8px;
line-height: 1.45;
}
.top-article-card__desc {
font-size: 0.8rem;
color: #666;
line-height: 1.65;
flex: 1;
}
.top-article-card__arrow {
margin-top: 14px;
font-size: 0.79rem;
font-weight: 600;
color: #0073aa;
} .top-notice {
margin: 40px 20px 0;
padding-top: 16px;
border-top: 1px solid #eee;
font-size: 0.74rem;
color: #aaa;
line-height: 1.8;
} @media (max-width: 680px) {
.top-hero {
padding: 48px 16px 40px;
}
.top-hero__title {
font-size: 1.6rem;
}
.top-hero__cta {
padding: 14px 28px;
font-size: 0.98rem;
} .top-rank-card {
grid-template-columns: 44px 1fr auto;
grid-template-rows: auto auto auto;
gap: 4px 10px;
}
.top-rank-card__rate {
grid-column: 3;
grid-row: 1;
}
.top-rank-card__camp {
grid-column: 2 / span 2;
grid-row: 2;
}
.top-rank-card__btn {
grid-column: 1 / span 3;
grid-row: 3;
justify-content: center;
margin-top: 4px;
}
.top-rank-card__rate-main,
.top-rank-card__rate-camp {
font-size: 1.4rem;
}
.top-camp-list {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 420px) {
.top-camp-list {
grid-template-columns: 1fr;
}
.top-trust-bar {
gap: 4px 16px;
font-size: 0.75rem;
}
.top-article-grid {
grid-template-columns: 1fr;
}
}