:root {
--p: #1B1464;
--a: #6C63FF;
--a2: #00C9A7;
--w: #FF6B6B;
--bg: #FAFBFF;
--t1: #1B1464;
--t2: #4A4A68;
--t3: #8888A4;
--bd: #E8EAF6
}
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
body {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
color: var(--t1);
background: var(--bg)
}
a {
text-decoration: none
}
.w {
max-width: 1100px;
margin: 0 auto;
padding: 0 32px
}
.sec {
padding: 68px 0
}
.secw {
padding: 68px 0;
background: #fff
}
.ct {
text-align: center
}
h1 {
font-size: 40px !important;
font-weight: 800 !important;
color: #fff;
line-height: 1.12;
letter-spacing: -1px
}
h2 {
color: var(--p);
margin: 8px 0
}
h3 {
font-weight: 700;
color: var(--t1);
margin: 0 0 5px
}
.sub {
font-weight: 700;
color: var(--c);
text-transform: uppercase;
letter-spacing: 2px
}
.btn {
padding: 12px 24px;
border-radius: 8px;
background: var(--g);
color: #fff;
font-size: 13px;
font-weight: 700;
border: none;
cursor: pointer;
font-family: inherit;
display: inline-block
}
.inp {
width: 100%;
padding: 9px 11px;
border-radius: 7px;
border: 1px solid var(--bd);
font-size: 12px;
outline: none;
font-family: inherit;
background: var(--bg)
}
.g2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px
}
.g3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 14px
}
.g4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px
}
.cd {
background: #fff;
border-radius: 12px;
padding: 22px;
border: 1px solid var(--bd);
transition: all .2s
}
.cd:hover {
box-shadow: 0 6px 20px rgba(27, 20, 100, .06)
}
.tbl {
width: 100%;
border-collapse: collapse;
font-size: 11px
}
.tbl thead tr {
background: var(--p)
}
.tbl th {
padding: 9px 10px;
color: #fff;
font-weight: 700;
font-size: 10px
}
.tbl td {
padding: 8px 10px;
border-bottom: 1px solid var(--bd)
}
.tbl tbody tr:nth-child(even) {
background: var(--bg)
}
.fq {
padding: 12px 14px;
background: #fff;
border-radius: 8px;
border: 1px solid var(--bd);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px
}
.fq.o {
background: var(--p);
border-radius: 8px 8px 0 0;
margin-bottom: 0
}
.fq.o .ft {
color: #fff
}
.fq.o .fi {
color: var(--a2);
transform: rotate(45deg)
}
.fa {
padding: 12px 14px;
background: #fff;
border-radius: 0 0 8px 8px;
border: 1px solid var(--bd);
border-top: none;
display: none;
margin-bottom: 5px
}
.fa.o {
display: block
}
.ft {
font-size: 12px;
font-weight: 600;
color: var(--t1)
}
.fi {
font-size: 15px;
color: var(--c);
transition: transform .2s
}
#toast {
position: fixed;
bottom: 16px;
left: 16px;
z-index: 200;
background: #fff;
border-radius: 9px;
padding: 9px 14px;
box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
border: 1px solid var(--bd);
max-width: 320px;
font-size: 11px;
color: var(--t2);
display: flex;
align-items: center;
gap: 7px
}
#stk {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 150;
background: var(--p);
padding: 9px 0;
border-top: 2px solid var(--c);
transform: translateY(100%);
transition: transform .3s
}
#stk.v {
transform: translateY(0)
}
#lm {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .5);
z-index: 300;
display: none;
align-items: center;
justify-content: center
}
#lm.a {
display: flex
}
@media(max-width:768px) {
.g2,
.g3,
.g4 {
grid-template-columns: 1fr
}
.hg {
grid-template-columns: 1fr !important
}
.rg {
grid-template-columns: 1fr !important
}
}