html,body,#app {
width: 100%;
height: 100%
}
.el-button {
padding: 8px 16px;
font-size: 14px;
font-weight: 400;
border-radius: 3px
}
.el-button--mini {
padding: 5px 14px
}
.el-button--primary {
background-color: #366ef4;
border-color: #366ef4
}
.el-button--primary:hover,.el-button--primary:focus {
border-color: #6691f7;
background-color: #6691f7
}
.el-button--primary:active {
background-color: #366ef4
}
.el-button--primary.el-button--primary.el-button--primary.is-plain:active,.el-button--primary.el-button--primary.el-button--primary.is-plain:hover {
color: #fff
}
.el-button--success {
background-color: #2ba471;
border-color: #2ba471
}
.el-button--success:hover,.el-button--success:focus {
border-color: #37cb8d;
background-color: #37cb8d
}
.el-button--success:active {
background-color: #2ba471
}
.el-button--info {
background-color: #e7e7e7;
border-color: #e7e7e7;
color: rgba(0,0,0,.9)
}
.el-button--warning {
background-color: #e37318;
border-color: #e37318
}
.el-button--warning:hover,.el-button--warning:focus {
border-color: #eb8e43;
background-color: #eb8e43
}
.el-button--warning:active {
background-color: #e37318
}
.el-button--danger {
background-color: #d54941;
border-color: #d54941
}
.el-button--danger:hover {
border-color: #de716b;
background-color: #de716b
}
.el-button--danger:active {
background-color: #d54941
}
.el-button.is-ghost,.el-button.is-dashed,.el-button.is-text,.el-button.is-ghost:hover,.el-button.is-dashed:hover,.el-button.is-text:hover {
background-color: rgba(255,0,0,0)
}
.el-button.is-dashed {
border-style: dashed
}
.el-button.is-ghost.el-button--primary,.el-button.is-text.el-button--primary,.el-button.is-dashed.el-button--primary,.el-button.is-plain.el-button--primary {
color: #366ef4
}
.el-button.is-ghost.el-button--primary:hover,.el-button.is-text.el-button--primary:hover,.el-button.is-dashed.el-button--primary:hover,.el-button.is-plain.el-button--primary:hover,.el-button.is-ghost.el-button--primary:focus,.el-button.is-text.el-button--primary:focus,.el-button.is-dashed.el-button--primary:focus,.el-button.is-plain.el-button--primary:focus {
color: #6691f7
}
.el-button.is-ghost.el-button--primary:active,.el-button.is-text.el-button--primary:active,.el-button.is-dashed.el-button--primary:active,.el-button.is-plain.el-button--primary:active {
color: #366ef4
}
.el-button.is-ghost.el-button--success,.el-button.is-text.el-button--success,.el-button.is-dashed.el-button--success,.el-button.is-plain.el-button--success {
color: #2ba471
}
.el-button.is-ghost.el-button--success:hover,.el-button.is-text.el-button--success:hover,.el-button.is-dashed.el-button--success:hover,.el-button.is-plain.el-button--success:hover,.el-button.is-ghost.el-button--success:focus,.el-button.is-text.el-button--success:focus,.el-button.is-dashed.el-button--success:focus,.el-button.is-plain.el-button--success:focus {
color: #37cb8d
}
.el-button.is-ghost.el-button--success:active,.el-button.is-text.el-button--success:active,.el-button.is-dashed.el-button--success:active,.el-button.is-plain.el-button--success:active {
color: #2ba471
}
.el-button.is-ghost.el-button--info,.el-button.is-text.el-button--info,.el-button.is-dashed.el-button--info,.el-button.is-plain.el-button--info {
color: rgba(0,0,0,.9)
}
.el-button.is-ghost.el-button--warning,.el-button.is-text.el-button--warning,.el-button.is-dashed.el-button--warning,.el-button.is-plain.el-button--warning {
color: #e37318
}
.el-button.is-ghost.el-button--warning:hover,.el-button.is-text.el-button--warning:hover,.el-button.is-dashed.el-button--warning:hover,.el-button.is-plain.el-button--warning:hover,.el-button.is-ghost.el-button--warning:focus,.el-button.is-text.el-button--warning:focus,.el-button.is-dashed.el-button--warning:focus,.el-button.is-plain.el-button--warning:focus {
color: #fff
}
.el-button.is-ghost.el-button--warning:active,.el-button.is-text.el-button--warning:active,.el-button.is-dashed.el-button--warning:active,.el-button.is-plain.el-button--warning:active {
color: #e37318
}
.el-button.is-ghost.el-button--danger,.el-button.is-text.el-button--danger,.el-button.is-dashed.el-button--danger,.el-button.is-plain.el-button--danger {
color: #d54941
}
.el-button.is-ghost.el-button--danger:hover,.el-button.is-text.el-button--danger:hover,.el-button.is-dashed.el-button--danger:hover,.el-button.is-plain.el-button--danger:hover,.el-button.is-ghost.el-button--danger:focus,.el-button.is-text.el-button--danger:focus,.el-button.is-dashed.el-button--danger:focus,.el-button.is-plain.el-button--danger:focus {
color: #fff
}
.el-button.is-ghost.el-button--danger:active,.el-button.is-text.el-button--danger:active,.el-button.is-dashed.el-button--danger:active,.el-button.is-plain.el-button--danger:active {
color: #d54941
}
.el-button--text,.el-button.is-text {
border: none
}
.el-button.is-round {
border-radius: 20px;
padding: 8px 23px
}
.el-button.is-circle {
border-radius: 50%;
padding: 12px
}
.el-dialog {
border-radius: 8px
}
.el-dialog__header {
padding: 8px 20px;
border-bottom: 1px solid #e4e4e4
}
.el-dialog__header .el-dialog__title {
font-size: 16px
}
.el-dialog__header .el-dialog__headerbtn {
top: 12px;
right: 14px
}
.el-dialog__footer {
border-top: 1px solid #e4e4e4;
padding: 6px 20px;
background-color: #f9f9f9;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px
}
.el-message {
padding: 12px 16px;
outline: 0;
list-style: none;
min-width: -moz-fit-content;
min-width: fit-content;
color: rgba(0,0,0,.918);
box-shadow: #000 0 0 7px -5px;
background-color: #fff;
border-radius: 6px;
border: none
}
.el-message--success>.el-message__content {
color: rgba(0,0,0,.918)
}
.el-message--info>.el-message__content {
color: rgba(0,0,0,.918)
}
.el-message--error>.el-message__content {
color: rgba(0,0,0,.918)
}
.el-message--warning>.el-message__content {
color: rgba(0,0,0,.918)
}
.el-message__closeBtn {
margin-left: 0;
position: initial;
transform: initial
}
.el-input__inner:focus {
border-color: #366ef4
}
.el-select .el-input__inner:focus {
border-color: #366ef4
}
.el-textarea__inner:focus {
border-color: #366ef4
}
.el-switch.is-checked .el-switch__core,.el-checkbox__input.is-checked .el-checkbox__inner {
background-color: #366ef4;
border-color: #366ef4
}
.el-checkbox__input.is-checked+.el-checkbox__label {
color: #366ef4
}
.el-radio__input.is-checked .el-radio__inner {
background-color: #366ef4;
border-color: #366ef4
}
.el-radio__input.is-checked+.el-radio__label {
color: #366ef4
}
.el-date-table td.today span {
color: #366ef4
}
.el-date-table td.current:not(.disabled) span {
background-color: #366ef4
}
.el-date-picker__header-label.active,.el-date-picker__header-label:hover,.el-picker-panel__icon-btn:hover {
color: #366ef4
}
.el-year-table td .cell:hover,.el-year-table td.current:not(.disabled) .cell {
color: #366ef4
}
.el-month-table td.current:not(.disabled) .cell {
color: #366ef4
}
.el-date-table td.available:hover {
color: #366ef4
}
.el-tag--dark {
border-color: #366ef4;
background-color: #366ef4
}
.el-tag--dark.el-tag--success {
border-color: #2ba471;
background-color: #2ba471
}
.el-tag--dark.el-tag--warning {
border-color: #e37318;
background-color: #e37318
}
.el-tag--dark.el-tag--danger {
border-color: #d54941;
background-color: #d54941
}
.el-tag--dark.el-tag--info {
color: rgba(0,0,0,.9);
border-color: #e7e7e7;
background-color: #e7e7e7
}
.el-radio-group .el-radio-button .el-radio-button__inner:hover {
color: #366ef4
}
.el-radio-group .el-radio-button.is-active .el-radio-button__inner {
color: #fff;
background-color: #366ef4;
border-color: #366ef4;
box-shadow: -1px 0 #366ef4
}
.el-pagination.is-background .btn-prev,.el-pagination.is-background .btn-next,.el-pagination.is-background .el-pager li {
background-color: #fff
}
.el-card__header {
background: #f4f4f58a;
height: 40px;
line-height: 40px;
padding: 0 20px!important;
font-size: 14px;
border-radius: 6px 6px 0 0
}
.el-menu--vertical .el-menu .el-menu-item,.el-menu--vertical .el-menu--popup .el-menu-item,.el-menu--vertical .el-menu .el-submenu__title,.el-menu--vertical .el-menu--popup .el-submenu__title {
height: 45px;
line-height: 45px
}
.xarr-form-drawer {
min-width: 240px
}
.xarr-sub-page-root {
width: 100%;
min-width: 400px
}
.xarr-shadow {
box-shadow: 0 2px 12px rgba(0,0,0,.1)
}
.icon {
width: 1em;
height: 1em;
vertical-align: -.15em;
overflow: hidden;
fill: currentColor;
display: inline-block
}
h1,h2,h3,h4,h5,h6 {
font-size: inherit;
font-weight: inherit
}
*,:before,:after {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: #e5e7eb;
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-scroll-snap-strictness: proximity;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / .5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000
}
:before,:after {
--tw-content: ""
}
html,:host {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
font-family: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
font-feature-settings: normal;
font-variation-settings: normal;
-webkit-tap-highlight-color: transparent
}
body {
margin: 0;
line-height: inherit
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted
}
b,strong {
font-weight: bolder
}
code,kbd,samp,pre {
font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
font-feature-settings: normal;
font-variation-settings: normal;
font-size: 1em
}
small {
font-size: 80%
}
sub,sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -.25em
}
sup {
top: -.5em
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse
}
button,input,optgroup,select,textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
color: inherit;
margin: 0;
padding: 0
}
button,select {
text-transform: none
}
button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]) {
-webkit-appearance: button;
background-color: transparent;
background-image: none
}
:-moz-focusring {
outline: auto
}
progress {
vertical-align: baseline
}
summary {
display: list-item
}
blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre {
margin: 0
}
fieldset {
margin: 0;
padding: 0
}
legend {
padding: 0
}
ol,ul,menu {
list-style: none;
margin: 0;
padding: 0
}
dialog {
padding: 0
}
textarea {
resize: vertical
}
input::-moz-placeholder,textarea::-moz-placeholder {
opacity: 1;
color: #9ca3af
}
input::placeholder,textarea::placeholder {
opacity: 1;
color: #9ca3af
}
button,[role=button] {
cursor: pointer
}
:disabled {
cursor: default
}
img,svg,video,canvas,audio,iframe,embed,object {
display: block;
vertical-align: middle
}
img,video {
max-width: 100%;
height: auto
}
[hidden] {
display: none
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-scroll-snap-strictness: proximity;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / .5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000
}
.collapse {
visibility: collapse
}
.static {
position: static
}
.inset-0 {
inset: 0px
}
.\!w-fit {
width: -moz-fit-content!important;
width: fit-content!important
}
.w-1 {
width: .25rem
}
.w-fit {
width: -moz-fit-content;
width: fit-content
}
.flex-shrink {
flex-shrink: 1
}
.-rotate-12 {
--tw-rotate: -12deg;
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.rotate-12 {
--tw-rotate: 12deg;
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.transform {
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
@keyframes pulse {
50% {
opacity: .5
}
}
@keyframes spin {
to {
transform: rotate(360deg)
}
}
.gap-1 {
gap: .25rem
}
.gap-2 {
gap: .5rem
}
.gap-3 {
gap: .75rem
}
.gap-4 {
gap: 1rem
}
.gap-6 {
gap: 1.5rem
}
.gap-x-2 {
-moz-column-gap: .5rem;
column-gap: .5rem
}
.text-wrap {
text-wrap: wrap
}
.border {
border-width: 1px
}
.border-blue-100 {
--tw-border-opacity: 1;
border-color: rgb(219 234 254 / var(--tw-border-opacity))
}
.border-blue-500 {
--tw-border-opacity: 1;
border-color: rgb(59 130 246 / var(--tw-border-opacity))
}
.border-gray-100 {
--tw-border-opacity: 1;
border-color: rgb(243 244 246 / var(--tw-border-opacity))
}
.border-gray-200 {
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity))
}
.border-green-100 {
--tw-border-opacity: 1;
border-color: rgb(220 252 231 / var(--tw-border-opacity))
}
.border-orange-100 {
--tw-border-opacity: 1;
border-color: rgb(255 237 213 / var(--tw-border-opacity))
}
.\!bg-gray-100 {
--tw-bg-opacity: 1 !important;
background-color: rgb(243 244 246 / var(--tw-bg-opacity))!important
}
.\!bg-green-500 {
--tw-bg-opacity: 1 !important;
background-color: rgb(34 197 94 / var(--tw-bg-opacity))!important
}
.bg-\[\#e5e7eb\] {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity))
}
.bg-blue-50 {
--tw-bg-opacity: 1;
background-color: rgb(239 246 255 / var(--tw-bg-opacity))
}
.bg-blue-500 {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity))
}
.bg-blue-700 {
--tw-bg-opacity: 1;
background-color: rgb(29 78 216 / var(--tw-bg-opacity))
}
.bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity))
}
.bg-gray-200 {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity))
}
.bg-gray-300 {
--tw-bg-opacity: 1;
background-color: rgb(209 213 219 / var(--tw-bg-opacity))
}
.bg-gray-50 {
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / var(--tw-bg-opacity))
}
.bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity))
}
.bg-green-100 {
--tw-bg-opacity: 1;
background-color: rgb(220 252 231 / var(--tw-bg-opacity))
}
.bg-green-50 {
--tw-bg-opacity: 1;
background-color: rgb(240 253 244 / var(--tw-bg-opacity))
}
.bg-green-500 {
--tw-bg-opacity: 1;
background-color: rgb(34 197 94 / var(--tw-bg-opacity))
}
.bg-orange-100 {
--tw-bg-opacity: 1;
background-color: rgb(255 237 213 / var(--tw-bg-opacity))
}
.bg-orange-50 {
--tw-bg-opacity: 1;
background-color: rgb(255 247 237 / var(--tw-bg-opacity))
}
.bg-orange-500 {
--tw-bg-opacity: 1;
background-color: rgb(249 115 22 / var(--tw-bg-opacity))
}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity))
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}
.bg-white\/10 {
background-color: rgba(255,255,255,.1)
}
.bg-white\/20 {
background-color: rgba(255,255,255,.2)
}
.bg-yellow-50 {
--tw-bg-opacity: 1;
background-color: rgb(254 252 232 / var(--tw-bg-opacity))
}
.from-blue-400 {
--tw-gradient-from: #60a5fa var(--tw-gradient-from-position);
--tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-blue-50 {
--tw-gradient-from: #eff6ff var(--tw-gradient-from-position);
--tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-blue-500 {
--tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-blue-600 {
--tw-gradient-from: #2563eb var(--tw-gradient-from-position);
--tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-green-400 {
--tw-gradient-from: #4ade80 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-green-500 {
--tw-gradient-from: #22c55e var(--tw-gradient-from-position);
--tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-indigo-100 {
--tw-gradient-from: #e0e7ff var(--tw-gradient-from-position);
--tw-gradient-to: rgb(224 231 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-red-400 {
--tw-gradient-from: #f87171 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(248 113 113 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-yellow-400 {
--tw-gradient-from: #facc15 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(250 204 21 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.via-purple-100 {
--tw-gradient-to: rgb(243 232 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), #f3e8ff var(--tw-gradient-via-position), var(--tw-gradient-to)
}
.to-blue-600 {
--tw-gradient-to: #2563eb var(--tw-gradient-to-position)
}
.to-blue-700 {
--tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position)
}
.to-blue-800 {
--tw-gradient-to: #1e40af var(--tw-gradient-to-position)
}
.to-green-600 {
--tw-gradient-to: #16a34a var(--tw-gradient-to-position)
}
.to-indigo-600 {
--tw-gradient-to: #4f46e5 var(--tw-gradient-to-position)
}
.to-orange-500 {
--tw-gradient-to: #f97316 var(--tw-gradient-to-position)
}
.to-pink-100 {
--tw-gradient-to: #fce7f3 var(--tw-gradient-to-position)
}
.to-red-600 {
--tw-gradient-to: #dc2626 var(--tw-gradient-to-position)
}
.to-white {
--tw-gradient-to: #fff var(--tw-gradient-to-position)
}
.text-\[14px\] {
font-size: 14px
}
.text-\[48px\] {
font-size: 48px
}
.uppercase {
text-transform: uppercase
}
.italic {
font-style: italic
}
.\!text-gray-500 {
--tw-text-opacity: 1 !important;
color: rgb(107 114 128 / var(--tw-text-opacity))!important
}
.text-\[\#555555\] {
--tw-text-opacity: 1;
color: rgb(85 85 85 / var(--tw-text-opacity))
}
.text-blue-400 {
--tw-text-opacity: 1;
color: rgb(96 165 250 / var(--tw-text-opacity))
}
.text-blue-500 {
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity))
}
.text-blue-600 {
--tw-text-opacity: 1;
color: rgb(37 99 235 / var(--tw-text-opacity))
}
.text-blue-700 {
--tw-text-opacity: 1;
color: rgb(29 78 216 / var(--tw-text-opacity))
}
.text-gray-300 {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity))
}
.text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity))
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity))
}
.text-gray-600 {
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity))
}
.text-gray-700 {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity))
}
.text-gray-800 {
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity))
}
.text-green-500 {
--tw-text-opacity: 1;
color: rgb(34 197 94 / var(--tw-text-opacity))
}
.text-green-600 {
--tw-text-opacity: 1;
color: rgb(22 163 74 / var(--tw-text-opacity))
}
.text-green-700 {
--tw-text-opacity: 1;
color: rgb(21 128 61 / var(--tw-text-opacity))
}
.text-green-800 {
--tw-text-opacity: 1;
color: rgb(22 101 52 / var(--tw-text-opacity))
}
.text-orange-500 {
--tw-text-opacity: 1;
color: rgb(249 115 22 / var(--tw-text-opacity))
}
.text-orange-700 {
--tw-text-opacity: 1;
color: rgb(194 65 12 / var(--tw-text-opacity))
}
.text-orange-800 {
--tw-text-opacity: 1;
color: rgb(154 52 18 / var(--tw-text-opacity))
}
.text-purple-500 {
--tw-text-opacity: 1;
color: rgb(168 85 247 / var(--tw-text-opacity))
}
.text-red-500 {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity))
}
.text-red-600 {
--tw-text-opacity: 1;
color: rgb(220 38 38 / var(--tw-text-opacity))
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity))
}
.text-white\/80 {
color: rgba(255,255,255,.8)
}
.text-yellow-500 {
--tw-text-opacity: 1;
color: rgb(234 179 8 / var(--tw-text-opacity))
}
.underline {
text-decoration-line: underline
}
.shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
}
.shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
}
.shadow-inner {
--tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / .05);
--tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
}
.shadow-sm {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
}
.outline {
outline-style: solid
}
.blur {
--tw-blur: blur(8px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.blur-lg {
--tw-blur: blur(16px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.backdrop-blur-sm {
--tw-backdrop-blur: blur(4px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.backdrop-filter {
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.transition {
transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;
transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .15s
}
.transition-colors {
transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .15s
}
.hover\:-translate-y-1:hover {
--tw-translate-y: -.25rem;
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.hover\:rotate-12:hover {
--tw-rotate: 12deg;
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.hover\:scale-110:hover {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.hover\:scale-150:hover {
--tw-scale-x: 1.5;
--tw-scale-y: 1.5;
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.hover\:border-blue-300:hover {
--tw-border-opacity: 1;
border-color: rgb(147 197 253 / var(--tw-border-opacity))
}
.hover\:border-blue-400:hover {
--tw-border-opacity: 1;
border-color: rgb(96 165 250 / var(--tw-border-opacity))
}
.hover\:bg-gray-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity))
}
.hover\:bg-gray-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity))
}
.hover\:bg-gray-50:hover {
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / var(--tw-bg-opacity))
}
.hover\:bg-green-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(187 247 208 / var(--tw-bg-opacity))
}
.hover\:bg-orange-600:hover {
--tw-bg-opacity: 1;
background-color: rgb(234 88 12 / var(--tw-bg-opacity))
}
.hover\:from-blue-600:hover {
--tw-gradient-from: #2563eb var(--tw-gradient-from-position);
--tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.hover\:to-blue-700:hover {
--tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position)
}
.hover\:text-blue-500:hover {
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity))
}
.hover\:text-blue-700:hover {
--tw-text-opacity: 1;
color: rgb(29 78 216 / var(--tw-text-opacity))
}
.hover\:text-green-700:hover {
--tw-text-opacity: 1;
color: rgb(21 128 61 / var(--tw-text-opacity))
}
.hover\:text-red-700:hover {
--tw-text-opacity: 1;
color: rgb(185 28 28 / var(--tw-text-opacity))
}
.hover\:shadow:hover {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
}
.hover\:shadow-lg:hover {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
}
.hover\:shadow-md:hover {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
}
.hover\:shadow-sm:hover {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
}
.hover\:shadow-xl:hover {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
}
.hover\:shadow-blue-100:hover {
--tw-shadow-color: #dbeafe;
--tw-shadow: var(--tw-shadow-colored)
}
.group:hover .group-hover\:translate-x-2 {
--tw-translate-x: .5rem;
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.group:hover .group-hover\:translate-y-2 {
--tw-translate-y: .5rem;
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.group:hover .group-hover\:-rotate-45 {
--tw-rotate: -45deg;
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.group:hover .group-hover\:rotate-45 {
--tw-rotate: 45deg;
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.group:hover .group-hover\:scale-105 {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.group:hover .group-hover\:scale-110 {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.group:hover .group-hover\:scale-125 {
--tw-scale-x: 1.25;
--tw-scale-y: 1.25;
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.group:hover .group-hover\:scale-\[0\.99\] {
--tw-scale-x: .99;
--tw-scale-y: .99;
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.group:hover .group-hover\:text-blue-500 {
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity))
}
.dark\:bg-gray-800:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity))
}
@media (min-width: 768px) {
.md\:w-auto {
width:auto
}
.md\:max-w-none {
max-width: none
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2,minmax(0,1fr))
}
.md\:flex-row {
flex-direction: row
}
.md\:items-start {
align-items: flex-start
}
.md\:items-center {
align-items: center
}
.md\:gap-6 {
gap: 1.5rem
}
.md\:text-right {
text-align: right
}
}
@media (min-width: 1024px) {
.lg\:mb-0 {
margin-bottom:0
}
.lg\:w-80 {
width: 20rem
}
.lg\:w-\[300px\] {
width: 300px
}
.lg\:w-\[400px\] {
width: 400px
}
.lg\:grid-cols-2 {
grid-template-columns: repeat(2,minmax(0,1fr))
}
.lg\:grid-cols-3 {
grid-template-columns: repeat(3,minmax(0,1fr))
}
.lg\:flex-row {
flex-direction: row
}
}
@font-face {
font-family: iconfont;
src: url(/static/woff2/iconfont-7866e912.woff2?t=1745904906702) format("woff2"),url(/static/woff/iconfont-0b815e9e.woff?t=1745904906702) format("woff"),url(/static/ttf/iconfont-f9f2ac7b.ttf?t=1745904906702) format("truetype")
}
.iconfont {
font-family: iconfont!important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.icon-taobao:before {
content: ""
}
.icon-Gitlab-fill:before {
content: ""
}
.icon-apple-fill:before {
content: ""
}
.icon-weibo:before {
content: ""
}
.icon-alipay-circle-fill:before {
content: ""
}
.icon-github-fill:before {
content: ""
}
.icon-QQ-circle-fill:before {
content: ""
}
.icon-baidu:before {
content: ""
}
.icon-baidubg:before {
content: ""
}
.icon-baidu1:before {
content: ""
}
.icon-wechat:before {
content: ""
}
.icon-QQ:before {
content: ""
}
.icon-wechat1:before {
content: ""
}
.icon-alipay:before {
content: ""
}
.icon-alipay1:before {
content: ""
}
.icon-QQ1:before {
content: ""
}
.icon-wechat-fill:before {
content: ""
}
.icon-wechat2:before {
content: ""
}
.icon-dingtalk:before {
content: ""
}
.icon-alipay2:before {
content: ""
}
.icon-QQ2:before {
content: ""
}
.icon-huawei:before {
content: ""
}
.icon-xiaomi:before {
content: ""
}
.icon-douyin:before {
content: ""
}
.icon-dingtalk-circle-fill:before {
content: ""
}
.icon-huawei1:before {
content: ""
}
.icon-huawei2:before {
content: ""
}
.icon-baidu2:before {
content: ""
}
.icon-dingtalk1:before {
content: ""
}
.icon-gitee:before {
content: ""
}
.icon-wechat3:before {
content: ""
}
.icon-douyin1:before {
content: ""
}
.icon-xiaomi1:before {
content: ""
}
*,:before,:after {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: #e5e7eb
}
* {
--tw-ring-inset: var(--tw-empty, );
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgba(59, 130, 246, .5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000
}
:root {
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4
}
:-moz-focusring {
outline: 1px dotted ButtonText
}
:-moz-ui-invalid {
box-shadow: none
}
::moz-focus-inner {
border-style: none;
padding: 0
}
::-webkit-inner-spin-button,::-webkit-outer-spin-button {
height: auto
}
::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
abbr[title] {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted
}
a {
color: inherit;
text-decoration: inherit
}
body {
margin: 0;
font-family: inherit;
line-height: inherit
}
code,pre {
font-size: 1em;
font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace
}
html {
-webkit-text-size-adjust: 100%;
font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
line-height: 1.5
}
hr {
height: 0;
color: inherit;
border-top-width: 1px
}
h1,h2,hr,p,blockquote,h3,pre,h4,h5 {
margin: 0
}
h1,h2,h3,h4,h5 {
font-size: inherit;
font-weight: inherit
}
img {
border-style: solid;
max-width: 100%;
height: auto
}
img,svg,canvas,audio,iframe {
display: block;
vertical-align: middle
}
strong {
font-weight: bolder
}
ul {
list-style: none;
margin: 0;
padding: 0
}
.container {
width: 100%
}
@media (min-width: 640px) {
.container {
max-width:640px
}
}
@media (min-width: 768px) {
.container {
max-width:768px
}
}
@media (min-width: 1024px) {
.container {
max-width:1024px
}
}
@media (min-width: 1280px) {
.container {
max-width:1280px
}
}
@media (min-width: 1536px) {
.container {
max-width:1536px
}
}
.space-y-4>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse))
}
.space-y-1>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(.25rem * var(--tw-space-y-reverse))
}
.space-y-3>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(.75rem * var(--tw-space-y-reverse))
}
.space-y-6>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse))
}
.space-y-2>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(.5rem * var(--tw-space-y-reverse))
}
.space-y-7>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.75rem * var(--tw-space-y-reverse))
}
.space-x-2>:not([hidden])~:not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(.5rem * var(--tw-space-x-reverse));
margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse)))
}
.dark .dark\:bg-gray-800 {
--tw-bg-opacity: 1;
background-color: rgba(31,41,55,var(--tw-bg-opacity))
}
.\!bg-gray-100 {
--tw-bg-opacity: 1 !important;
background-color: rgba(243,244,246,var(--tw-bg-opacity))!important
}
.bg-gray-300 {
--tw-bg-opacity: 1;
background-color: rgba(209,213,219,var(--tw-bg-opacity))
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgba(255,255,255,var(--tw-bg-opacity))
}
.bg-gray-200 {
--tw-bg-opacity: 1;
background-color: rgba(229,231,235,var(--tw-bg-opacity))
}
.bg-gray-50 {
--tw-bg-opacity: 1;
background-color: rgba(249,250,251,var(--tw-bg-opacity))
}
.bg-\[\#e5e7eb\] {
--tw-bg-opacity: 1;
background-color: rgba(229,231,235,var(--tw-bg-opacity))
}
.bg-blue-500 {
--tw-bg-opacity: 1;
background-color: rgba(59,130,246,var(--tw-bg-opacity))
}
.bg-white\/20 {
--tw-bg-opacity: .2;
background-color: rgba(255,255,255,var(--tw-bg-opacity))
}
.bg-blue-50 {
--tw-bg-opacity: 1;
background-color: rgba(239,246,255,var(--tw-bg-opacity))
}
.bg-orange-50 {
--tw-bg-opacity: 1;
background-color: rgba(255,247,237,var(--tw-bg-opacity))
}
.bg-orange-100 {
--tw-bg-opacity: 1;
background-color: rgba(255,237,213,var(--tw-bg-opacity))
}
.bg-green-50 {
--tw-bg-opacity: 1;
background-color: rgba(236,253,245,var(--tw-bg-opacity))
}
.bg-green-100 {
--tw-bg-opacity: 1;
background-color: rgba(209,250,229,var(--tw-bg-opacity))
}
.bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgba(243,244,246,var(--tw-bg-opacity))
}
.bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgba(17,24,39,var(--tw-bg-opacity))
}
.bg-green-500 {
--tw-bg-opacity: 1;
background-color: rgba(16,185,129,var(--tw-bg-opacity))
}
.hover\:bg-gray-50:hover {
--tw-bg-opacity: 1;
background-color: rgba(249,250,251,var(--tw-bg-opacity))
}
.hover\:bg-gray-100:hover {
--tw-bg-opacity: 1;
background-color: rgba(243,244,246,var(--tw-bg-opacity))
}
.bg-orange-500 {
--tw-bg-opacity: 1;
background-color: rgba(249,115,22,var(--tw-bg-opacity))
}
.hover\:bg-orange-600:hover {
--tw-bg-opacity: 1;
background-color: rgba(234,88,12,var(--tw-bg-opacity))
}
.hover\:bg-green-200:hover {
--tw-bg-opacity: 1;
background-color: rgba(167,243,208,var(--tw-bg-opacity))
}
.hover\:bg-gray-200:hover {
--tw-bg-opacity: 1;
background-color: rgba(229,231,235,var(--tw-bg-opacity))
}
.bg-blue-700 {
--tw-bg-opacity: 1;
background-color: rgba(29,78,216,var(--tw-bg-opacity))
}
.bg-yellow-50 {
--tw-bg-opacity: 1;
background-color: rgba(255,251,235,var(--tw-bg-opacity))
}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgba(239,68,68,var(--tw-bg-opacity))
}
.bg-white\/10 {
--tw-bg-opacity: .1;
background-color: rgba(255,255,255,var(--tw-bg-opacity))
}
.\!bg-green-500 {
--tw-bg-opacity: 1 !important;
background-color: rgba(16,185,129,var(--tw-bg-opacity))!important
}
.bg-gradient-to-br {
background-image: linear-gradient(to bottom right,var(--tw-gradient-stops))
}
.bg-gradient-to-r {
background-image: linear-gradient(to right,var(--tw-gradient-stops))
}
.from-blue-50 {
--tw-gradient-from: rgba(239, 246, 255, var(--tw-from-opacity, 1));
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0))
}
.from-blue-500 {
--tw-gradient-from: rgba(59, 130, 246, var(--tw-from-opacity, 1));
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0))
}
.from-blue-600 {
--tw-gradient-from: rgba(37, 99, 235, var(--tw-from-opacity, 1));
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0))
}
.from-green-500 {
--tw-gradient-from: rgba(16, 185, 129, var(--tw-from-opacity, 1));
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0))
}
.from-indigo-100 {
--tw-gradient-from: rgba(224, 231, 255, var(--tw-from-opacity, 1));
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0))
}
.from-red-400 {
--tw-gradient-from: rgba(248, 113, 113, var(--tw-from-opacity, 1));
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0))
}
.from-green-400 {
--tw-gradient-from: rgba(52, 211, 153, var(--tw-from-opacity, 1));
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0))
}
.from-blue-400 {
--tw-gradient-from: rgba(96, 165, 250, var(--tw-from-opacity, 1));
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0))
}
.from-yellow-400 {
--tw-gradient-from: rgba(251, 191, 36, var(--tw-from-opacity, 1));
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0))
}
.hover\:from-blue-600:hover {
--tw-gradient-from: rgba(37, 99, 235, var(--tw-from-opacity, 1));
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0))
}
.via-purple-100 {
--tw-gradient-stops: var(--tw-gradient-from), rgba(237, 233, 254, var(--tw-via-opacity, 1)), var(--tw-gradient-to, rgba(255, 255, 255, 0))
}
.to-white {
--tw-gradient-to: rgba(255, 255, 255, var(--tw-to-opacity, 1))
}
.to-blue-600 {
--tw-gradient-to: rgba(37, 99, 235, var(--tw-to-opacity, 1))
}
.to-blue-700 {
--tw-gradient-to: rgba(29, 78, 216, var(--tw-to-opacity, 1))
}
.to-green-600 {
--tw-gradient-to: rgba(5, 150, 105, var(--tw-to-opacity, 1))
}
.to-pink-100 {
--tw-gradient-to: rgba(252, 231, 243, var(--tw-to-opacity, 1))
}
.to-red-600 {
--tw-gradient-to: rgba(220, 38, 38, var(--tw-to-opacity, 1))
}
.to-indigo-600 {
--tw-gradient-to: rgba(79, 70, 229, var(--tw-to-opacity, 1))
}
.to-blue-800 {
--tw-gradient-to: rgba(30, 64, 175, var(--tw-to-opacity, 1))
}
.to-orange-500 {
--tw-gradient-to: rgba(249, 115, 22, var(--tw-to-opacity, 1))
}
.hover\:to-blue-700:hover {
--tw-gradient-to: rgba(29, 78, 216, var(--tw-to-opacity, 1))
}
.bg-opacity-90 {
--tw-bg-opacity: .9
}
.border-gray-200 {
--tw-border-opacity: 1;
border-color: rgba(229,231,235,var(--tw-border-opacity))
}
.border-blue-100 {
--tw-border-opacity: 1;
border-color: rgba(219,234,254,var(--tw-border-opacity))
}
.hover\:border-blue-300:hover {
--tw-border-opacity: 1;
border-color: rgba(147,197,253,var(--tw-border-opacity))
}
.border-orange-100 {
--tw-border-opacity: 1;
border-color: rgba(255,237,213,var(--tw-border-opacity))
}
.border-green-100 {
--tw-border-opacity: 1;
border-color: rgba(209,250,229,var(--tw-border-opacity))
}
.border-gray-100 {
--tw-border-opacity: 1;
border-color: rgba(243,244,246,var(--tw-border-opacity))
}
.border-blue-500 {
--tw-border-opacity: 1;
border-color: rgba(59,130,246,var(--tw-border-opacity))
}
.hover\:border-blue-400:hover {
--tw-border-opacity: 1;
border-color: rgba(96,165,250,var(--tw-border-opacity))
}
.rounded-full {
border-radius: 9999px
}
.rounded-md {
border-radius: .375rem
}
.rounded-lg {
border-radius: .5rem
}
.rounded {
border-radius: .25rem
}
.rounded-xl {
border-radius: .75rem
}
.rounded-t-lg {
border-top-left-radius: .5rem;
border-top-right-radius: .5rem
}
.border-dashed {
border-style: dashed
}
.border,.border-1 {
border-width: 1px
}
.border-5 {
border-width: 5px
}
.border-0 {
border-width: 0px
}
.border-2 {
border-width: 2px
}
.border-b {
border-bottom-width: 1px
}
.border-t {
border-top-width: 1px
}
.cursor-pointer {
cursor: pointer
}
.cursor-help {
cursor: help
}
.block {
display: block
}
.inline-block {
display: inline-block
}
.inline {
display: inline
}
.flex {
display: flex
}
.table {
display: table
}
.grid {
display: grid
}
.hidden {
display: none
}
.flex-row {
flex-direction: row
}
.flex-col {
flex-direction: column
}
.flex-wrap {
flex-wrap: wrap
}
.items-start {
align-items: flex-start
}
.items-end {
align-items: flex-end
}
.items-center {
align-items: center
}
.items-stretch {
align-items: stretch
}
.justify-start {
justify-content: flex-start
}
.justify-end {
justify-content: flex-end
}
.justify-center {
justify-content: center
}
.justify-between {
justify-content: space-between
}
.justify-evenly {
justify-content: space-evenly
}
.flex-1 {
flex: 1 1 0%
}
.flex-shrink-0 {
flex-shrink: 0
}
.font-mono {
font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace
}
.font-medium {
font-weight: 500
}
.font-bold {
font-weight: 700
}
.font-semibold {
font-weight: 600
}
.h-full {
height: 100%
}
.h-9 {
height: 2.25rem
}
.h-20 {
height: 5rem
}
.h-10 {
height: 2.5rem
}
.h-8 {
height: 2rem
}
.h-6 {
height: 1.5rem
}
.h-40 {
height: 10rem
}
.h-24 {
height: 6rem
}
.h-32 {
height: 8rem
}
.h-1\.5 {
height: .375rem
}
.h-72 {
height: 18rem
}
.h-16 {
height: 4rem
}
.h-2 {
height: .5rem
}
.h-12 {
height: 3rem
}
.h-28 {
height: 7rem
}
.h-3 {
height: .75rem
}
.h-48 {
height: 12rem
}
.h-11 {
height: 2.75rem
}
.h-4 {
height: 1rem
}
.text-xs {
font-size: .75rem;
line-height: 1rem
}
.text-size-sm {
font-size: .875rem;
line-height: 1.25rem
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
.text-base {
font-size: 1rem;
line-height: 1.5rem
}
.text-sm {
font-size: .875rem;
line-height: 1.25rem
}
.text-6xl {
font-size: 3.75rem;
line-height: 1
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem
}
.text-5xl {
font-size: 3rem;
line-height: 1
}
.text-\[14px\] {
font-size: 14px;
line-height: 1
}
.text-\[48px\] {
font-size: 48px;
line-height: 1
}
.leading-relaxed {
line-height: 1.625
}
.m-52 {
margin: 13rem
}
.m-386\.338816-45\.24032c-16\.95744 {
margin: 4.23936rem
}
.m-239\.794176 {
margin: 59.948544rem
}
.m-563\.702 {
margin: 140.9255rem
}
.m-215\.9 {
margin: 53.975rem
}
.m-124\.586666 {
margin: 31.146667rem
}
.m-265\.386667 {
margin: 66.346667rem
}
.m-294\.4 {
margin: 73.6rem
}
.m-228\.192524 {
margin: 57.048131rem
}
.m-282\.254688 {
margin: 70.563672rem
}
.\!m-0 {
margin: 0!important
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem
}
.mx-auto {
margin-left: auto;
margin-right: auto
}
.my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem
}
.mt-1 {
margin-top: .25rem
}
.mr-1 {
margin-right: .25rem
}
.mt-2 {
margin-top: .5rem
}
.ml-2 {
margin-left: .5rem
}
.mt-5 {
margin-top: 1.25rem
}
.mr-2 {
margin-right: .5rem
}
.mb-4 {
margin-bottom: 1rem
}
.mt-3 {
margin-top: .75rem
}
.mb-6 {
margin-bottom: 1.5rem
}
.mb-3 {
margin-bottom: .75rem
}
.mb-1 {
margin-bottom: .25rem
}
.mt-4 {
margin-top: 1rem
}
.ml-3 {
margin-left: .75rem
}
.mb-2 {
margin-bottom: .5rem
}
.ml-4 {
margin-left: 1rem
}
.mt-\[-10px\] {
margin-top: -10px
}
.\!mb-4 {
margin-bottom: 1rem!important
}
.mt-6 {
margin-top: 1.5rem
}
.mt-8 {
margin-top: 2rem
}
.mb-0 {
margin-bottom: 0
}
.mr-4 {
margin-right: 1rem
}
.ml-1 {
margin-left: .25rem
}
.mb-8 {
margin-bottom: 2rem
}
.mb-10 {
margin-bottom: 2.5rem
}
.mb-12 {
margin-bottom: 3rem
}
.mt-0\.5 {
margin-top: .125rem
}
.max-h-\[80vh\] {
max-height: 80vh
}
.max-h-\[300px\] {
max-height: 300px
}
.max-h-\[500px\] {
max-height: 500px
}
.max-w-lg {
max-width: 32rem
}
.max-w-sm {
max-width: 24rem
}
.max-w-80 {
max-width: 20rem
}
.max-w-full {
max-width: 100%
}
.max-w-40 {
max-width: 10rem
}
.max-w-120 {
max-width: 30rem
}
.max-w-\[80vw\] {
max-width: 80vw
}
.max-w-\[300px\] {
max-width: 300px
}
.max-w-\[100\%\] {
max-width: 100%
}
.max-w-\[1200px\] {
max-width: 1200px
}
.max-w-\[200px\] {
max-width: 200px
}
.max-w-160 {
max-width: 40rem
}
.min-h-24 {
min-height: 6rem
}
.min-h-0 {
min-height: 0px
}
.min-h-screen {
min-height: 100vh
}
.min-h-\[200px\] {
min-height: 200px
}
.min-h-\[40px\] {
min-height: 40px
}
.min-w-24 {
min-width: 6rem
}
.min-w-0 {
min-width: 0px
}
.min-w-\[200px\] {
min-width: 200px
}
.min-w-\[600px\] {
min-width: 600px
}
.opacity-5 {
opacity: .05
}
.opacity-80 {
opacity: .8
}
.opacity-60 {
opacity: .6
}
.group:hover .group-hover\:opacity-100 {
opacity: 1
}
.opacity-0 {
opacity: 0
}
.opacity-90 {
opacity: .9
}
.opacity-\[0\.03\] {
opacity: .03
}
.opacity-\[0\.02\] {
opacity: .02
}
.overflow-hidden {
overflow: hidden
}
.overflow-x-auto {
overflow-x: auto
}
.overflow-y-auto {
overflow-y: auto
}
.p-0 {
padding: 0
}
.p-3 {
padding: .75rem
}
.p-4 {
padding: 1rem
}
.p-2 {
padding: .5rem
}
.p-5 {
padding: 1.25rem
}
.p-8 {
padding: 2rem
}
.p-10 {
padding: 2.5rem
}
.p-6 {
padding: 1.5rem
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem
}
.py-2 {
padding-top: .5rem;
padding-bottom: .5rem
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.px-3 {
padding-left: .75rem;
padding-right: .75rem
}
.py-3 {
padding-top: .75rem;
padding-bottom: .75rem
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem
}
.py-1 {
padding-top: .25rem;
padding-bottom: .25rem
}
.px-0 {
padding-left: 0;
padding-right: 0
}
.py-0 {
padding-top: 0;
padding-bottom: 0
}
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem
}
.px-2 {
padding-left: .5rem;
padding-right: .5rem
}
.py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem
}
.py-0\.5 {
padding-top: .125rem;
padding-bottom: .125rem
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem
}
.py-12 {
padding-top: 3rem;
padding-bottom: 3rem
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem
}
.pb-1 {
padding-bottom: .25rem
}
.pb-3 {
padding-bottom: .75rem
}
.pt-\[40px\] {
padding-top: 40px
}
.pt-4 {
padding-top: 1rem
}
.pr-4 {
padding-right: 1rem
}
.pb-2 {
padding-bottom: .5rem
}
.pt-2 {
padding-top: .5rem
}
.pt-3 {
padding-top: .75rem
}
.pb-0 {
padding-bottom: 0
}
.pt-0 {
padding-top: 0
}
.pb-4 {
padding-bottom: 1rem
}
.tab {
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4
}
.pointer-events-none {
pointer-events: none
}
.fixed {
position: fixed
}
.absolute {
position: absolute
}
.relative {
position: relative
}
.sticky {
position: sticky
}
.inset-0 {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px
}
.right-0 {
right: 0px
}
.top-0 {
top: 0px
}
.-right-10 {
right: -2.5rem
}
.-top-10 {
top: -2.5rem
}
.-left-6 {
left: -1.5rem
}
.bottom-10 {
bottom: 2.5rem
}
.bottom-0 {
bottom: 0px
}
.left-0 {
left: 0px
}
.top-6 {
top: 1.5rem
}
.-top-1 {
top: -.25rem
}
.left-15 {
left: 3.75rem
}
.-top-2 {
top: -.5rem
}
.-right-2 {
right: -.5rem
}
.-top-16 {
top: -4rem
}
.-left-16 {
left: -4rem
}
.-bottom-16 {
bottom: -4rem
}
.-right-16 {
right: -4rem
}
.top-16 {
top: 4rem
}
.top-2 {
top: .5rem
}
.right-2 {
right: .5rem
}
.resize {
resize: both
}
.shadow-sm {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0/.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
}
.hover\:shadow-xl:hover {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0/.1),0 8px 10px -6px rgb(0 0 0/.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
}
.shadow-inner {
--tw-shadow: inset 0 2px 4px 0 rgb(0 0 0/.05);
--tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
}
.hover\:shadow-lg:hover {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
}
.hover\:shadow-sm:hover {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0/.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
}
.hover\:shadow-md:hover {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
}
.shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0/.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
}
.shadow,.hover\:shadow:hover {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0/.1),0 1px 2px -1px rgb(0 0 0/.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
}
.hover\:shadow-3xl:hover {
--tw-shadow: var(--tw-shadow-colored)
}
.hover\:shadow-blue-100:hover {
--tw-shadow-color: rgba(219, 234, 254, 1);
--tw-shadow: var(--tw-shadow-colored)
}
.text-left {
text-align: left
}
.text-center {
text-align: center
}
.text-right {
text-align: right
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgba(107,114,128,var(--tw-text-opacity))
}
.text-red-600 {
--tw-text-opacity: 1;
color: rgba(220,38,38,var(--tw-text-opacity))
}
.text-gray-600 {
--tw-text-opacity: 1;
color: rgba(75,85,99,var(--tw-text-opacity))
}
.text-gray-400 {
--tw-text-opacity: 1;
color: rgba(156,163,175,var(--tw-text-opacity))
}
.text-white {
--tw-text-opacity: 1;
color: rgba(255,255,255,var(--tw-text-opacity))
}
.text-gray-700 {
--tw-text-opacity: 1;
color: rgba(55,65,81,var(--tw-text-opacity))
}
.text-\[\#555555\] {
--tw-text-opacity: 1;
color: rgba(85,85,85,var(--tw-text-opacity))
}
.text-blue-500 {
--tw-text-opacity: 1;
color: rgba(59,130,246,var(--tw-text-opacity))
}
.text-blue-700 {
--tw-text-opacity: 1;
color: rgba(29,78,216,var(--tw-text-opacity))
}
.hover\:text-blue-500:hover {
--tw-text-opacity: 1;
color: rgba(59,130,246,var(--tw-text-opacity))
}
.text-blue-400 {
--tw-text-opacity: 1;
color: rgba(96,165,250,var(--tw-text-opacity))
}
.text-orange-500 {
--tw-text-opacity: 1;
color: rgba(249,115,22,var(--tw-text-opacity))
}
.text-orange-800 {
--tw-text-opacity: 1;
color: rgba(154,52,18,var(--tw-text-opacity))
}
.text-orange-700 {
--tw-text-opacity: 1;
color: rgba(194,65,12,var(--tw-text-opacity))
}
.text-green-500 {
--tw-text-opacity: 1;
color: rgba(16,185,129,var(--tw-text-opacity))
}
.text-green-800 {
--tw-text-opacity: 1;
color: rgba(6,95,70,var(--tw-text-opacity))
}
.text-green-700 {
--tw-text-opacity: 1;
color: rgba(4,120,87,var(--tw-text-opacity))
}
.text-green-600 {
--tw-text-opacity: 1;
color: rgba(5,150,105,var(--tw-text-opacity))
}
.text-blue-600 {
--tw-text-opacity: 1;
color: rgba(37,99,235,var(--tw-text-opacity))
}
.group:hover .group-hover\:text-blue-500 {
--tw-text-opacity: 1;
color: rgba(59,130,246,var(--tw-text-opacity))
}
.text-red-500 {
--tw-text-opacity: 1;
color: rgba(239,68,68,var(--tw-text-opacity))
}
.text-gray-800 {
--tw-text-opacity: 1;
color: rgba(31,41,55,var(--tw-text-opacity))
}
.text-purple-500 {
--tw-text-opacity: 1;
color: rgba(139,92,246,var(--tw-text-opacity))
}
.text-yellow-500 {
--tw-text-opacity: 1;
color: rgba(245,158,11,var(--tw-text-opacity))
}
.\!text-gray-500 {
--tw-text-opacity: 1 !important;
color: rgba(107,114,128,var(--tw-text-opacity))!important
}
.text-gray-300 {
--tw-text-opacity: 1;
color: rgba(209,213,219,var(--tw-text-opacity))
}
.text-white\/80 {
--tw-text-opacity: .8;
color: rgba(255,255,255,var(--tw-text-opacity))
}
.hover\:text-blue-700:hover {
--tw-text-opacity: 1;
color: rgba(29,78,216,var(--tw-text-opacity))
}
.hover\:text-green-700:hover {
--tw-text-opacity: 1;
color: rgba(4,120,87,var(--tw-text-opacity))
}
.hover\:text-red-700:hover {
--tw-text-opacity: 1;
color: rgba(185,28,28,var(--tw-text-opacity))
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.text-ellipsis {
text-overflow: ellipsis
}
.content-container {
content: "container"
}
.content-left {
content: "left"
}
.content-right {
content: "right"
}
.content-wrapper {
content: "wrapper"
}
.select-none {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.visible {
visibility: visible
}
.whitespace-nowrap {
white-space: nowrap
}
.break-all {
word-break: break-all
}
.w-full {
width: 100%
}
.w-1\/2 {
width: 50%
}
.w-20 {
width: 5rem
}
.w-10 {
width: 2.5rem
}
.w-8 {
width: 2rem
}
.w-6 {
width: 1.5rem
}
.w-40 {
width: 10rem
}
.w-24 {
width: 6rem
}
.w-px {
width: 1px
}
.w-16 {
width: 4rem
}
.w-28 {
width: 7rem
}
.w-48 {
width: 12rem
}
.w-32 {
width: 8rem
}
.w-auto {
width: auto
}
.w-36 {
width: 9rem
}
.w-4 {
width: 1rem
}
.w-3 {
width: .75rem
}
.w-max-90 {
width: 22.5rem
}
.w-25 {
width: 6.25rem
}
.w-min-20 {
width: 5rem
}
.w-max-60 {
width: 15rem
}
.w-30 {
width: 7.5rem
}
.w-max-80 {
width: 20rem
}
.w-\[450px\] {
width: 450px
}
.w-max-10 {
width: 2.5rem
}
.z-10 {
z-index: 10
}
.gap-2 {
grid-gap: .5rem;
gap: .5rem
}
.gap-1 {
grid-gap: .25rem;
gap: .25rem
}
.gap-6 {
grid-gap: 1.5rem;
gap: 1.5rem
}
.gap-3 {
grid-gap: .75rem;
gap: .75rem
}
.gap-4 {
grid-gap: 1rem;
gap: 1rem
}
.gap-x-2 {
-webkit-column-gap: .5rem;
-moz-column-gap: .5rem;
grid-column-gap: .5rem;
column-gap: .5rem
}
.grid-cols-1 {
grid-template-columns: repeat(1,minmax(0,1fr))
}
.grid-cols-4 {
grid-template-columns: repeat(4,minmax(0,1fr))
}
.transform {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-translate-z: 0;
--tw-rotate: 0;
--tw-rotate-x: 0;
--tw-rotate-y: 0;
--tw-rotate-z: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-scale-z: 1;
transform: translate(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotate(var(--tw-rotate-z)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z))
}
.hover\:scale-150:hover {
--tw-scale-x: 1.5;
--tw-scale-y: 1.5;
--tw-scale-z: 1.5
}
.group:hover .group-hover\:scale-110 {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
--tw-scale-z: 1.1
}
.group:hover .group-hover\:scale-125 {
--tw-scale-x: 1.25;
--tw-scale-y: 1.25;
--tw-scale-z: 1.25
}
.group:hover .group-hover\:scale-105,.hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
--tw-scale-z: 1.05
}
.hover\:scale-110:hover {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
--tw-scale-z: 1.1
}
.rotate-12 {
--tw-rotate: 12deg
}
.group:hover .group-hover\:rotate-45 {
--tw-rotate: 45deg
}
.-rotate-12 {
--tw-rotate: -12deg
}
.group:hover .group-hover\:-rotate-45 {
--tw-rotate: -45deg
}
.hover\:rotate-12:hover {
--tw-rotate: 12deg
}
.group:hover .group-hover\:translate-x-2 {
--tw-translate-x: .5rem
}
.group:hover .group-hover\:translate-y-2 {
--tw-translate-y: .5rem
}
.hover\:-translate-y-1:hover {
--tw-translate-y: -.25rem
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .15s
}
.transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .15s
}
.transition-colors {
transition-property: background-color,border-color,color,fill,stroke;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .15s
}
.transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .15s
}
.transition-shadow {
transition-property: box-shadow;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .15s
}
.transition {
transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;
transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .15s
}
.ease-in-out {
transition-timing-function: cubic-bezier(.4,0,.2,1)
}
.ease-out {
transition-timing-function: cubic-bezier(0,0,.2,1)
}
.duration-300 {
transition-duration: .3s
}
.duration-700 {
transition-duration: .7s
}
.duration-200 {
transition-duration: .2s
}
.duration-500 {
transition-duration: .5s
}
.duration-150 {
transition-duration: .15s
}
@keyframes pulse {
0%,to {
opacity: 1
}
50% {
opacity: .5
}
}
@keyframes spin {
0% {
transform: rotate(0)
}
to {
transform: rotate(360deg)
}
}
.animate-pulse {
animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite
}
.animate-spin {
animation: spin 1s linear infinite
}
.animated {
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-duration: 1s;
animation-fill-mode: both
}
.blur {
--tw-blur: blur(8px)
}
.blur-lg {
--tw-blur: blur(16px)
}
.backdrop-filter {
--tw-backdrop-blur: var(--tw-empty, );
--tw-backdrop-brightness: var(--tw-empty, );
--tw-backdrop-contrast: var(--tw-empty, );
--tw-backdrop-grayscale: var(--tw-empty, );
--tw-backdrop-hue-rotate: var(--tw-empty, );
--tw-backdrop-invert: var(--tw-empty, );
--tw-backdrop-opacity: var(--tw-empty, );
--tw-backdrop-saturate: var(--tw-empty, );
--tw-backdrop-sepia: var(--tw-empty, );
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.backdrop-blur-sm {
--tw-backdrop-blur: blur(4px)
}
@media (min-width: 640px) {
.sm\:grid-cols-2 {
grid-template-columns:repeat(2,minmax(0,1fr))
}
}
@media (min-width: 768px) {
.md\:flex-row {
flex-direction:row
}
.md\:items-start {
align-items: flex-start
}
.md\:items-center {
align-items: center
}
.md\:max-w-none {
max-width: none
}
.md\:text-right {
text-align: right
}
.md\:w-auto {
width: auto
}
.md\:gap-6 {
grid-gap: 1.5rem;
gap: 1.5rem
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2,minmax(0,1fr))
}
}
@media (min-width: 1024px) {
.lg\:flex-row {
flex-direction:row
}
.lg\:mb-0 {
margin-bottom: 0
}
.lg\:w-80 {
width: 20rem
}
.lg\:w-\[300px\] {
width: 300px
}
.lg\:w-\[400px\] {
width: 400px
}
.lg\:grid-cols-2 {
grid-template-columns: repeat(2,minmax(0,1fr))
}
.lg\:grid-cols-3 {
grid-template-columns: repeat(3,minmax(0,1fr))
}
}
@media (min-width: 1280px) {
.xl\:grid-cols-4 {
grid-template-columns:repeat(4,minmax(0,1fr))
}
}
.header{
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 55;
min-width: 320px;
max-width: 100%;
width: auto;
background: rgba(255,255,255,.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: #1a1a1a;
border-bottom: 1px solid rgba(0,110,255,.1);
transition: all .3s ease
}
.header.scrolled{
background: rgba(255,255,255,.98);
box-shadow: 0 2px 20px rgba(0,110,255,.08);
border-bottom: 1px solid rgba(0,110,255,.15)
}
.header .header-container{
padding: 0 1.875rem;
margin: 0 auto;
height: 4rem;
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1400px
}
.header .header-container .logo{
font-size: 1.5rem;
font-weight: 600;
color: #006eff;
letter-spacing: -.02em
}
.header .header-container .menu-toggle{
display: none;
font-size: 1.5rem;
cursor: pointer;
z-index: 100;
color: #1a1a1a
}
.header .header-container .action{
display: flex;
align-items: center;
gap: 2rem
}
.header .header-container .action .action-item a{
color: #1a1a1a;
text-decoration: none;
font-weight: 500;
font-size: 14px;
transition: all .3s ease;
position: relative
}
.header .header-container .action .action-item a:hover,.header .header-container .action .action-item a.router-link-active{
color: #006eff
}
.header .header-container .action .action-item a.router-link-active:after {
content: "";
position: absolute;
bottom: -8px;
left: 0;
right: 0;
height: 2px;
background: #006EFF;
border-radius: 1px
}
.header .header-container .action .action-item .el-button{
background: linear-gradient(135deg,#006EFF 0%,#0052D9 100%);
border: 1px solid transparent;
color: #fff;
font-weight: 500;
border-radius: 8px;
padding: 8px 16px;
position: relative;
overflow: hidden;
transition: all .4s cubic-bezier(.175,.885,.32,1.275);
box-shadow: 0 2px 8px rgba(0,110,255,.2)
}
.header .header-container .action .action-item .el-button:before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(135deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.1) 100%);
transition: left .5s ease
}
.header .header-container .action .action-item .el-button:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255,255,255,.3);
border-radius: 50%;
transform: translate(-50%,-50%);
transition: width .6s ease,height .6s ease;
pointer-events: none
}
.header .header-container .action .action-item .el-button:hover {
background: linear-gradient(135deg,#0052D9 0%,#003AB8 100%);
transform: translateY(-2px) scale(1.02);
box-shadow: 0 8px 25px rgba(0,110,255,.4),0 0 0 1px rgba(255,255,255,.1)
}
.header .header-container .action .action-item .el-button:hover:before {
left: 100%
}
.header .header-container .action .action-item .el-button:active {
transform: translateY(0) scale(.98);
transition: all .1s ease
}
.header .header-container .action .action-item .el-button:active:after {
width: 120px;
height: 120px;
transition: width .3s ease,height .3s ease
}
.header .header-container .action .action-item .el-button:focus {
outline: none;
box-shadow: 0 8px 25px rgba(0,110,255,.4),0 0 0 3px rgba(0,110,255,.2)
}
@media screen and (max-width: 768px) {
.header .header-container .menu-toggle{
display:block
}
.header .header-container .action{
position: fixed;
top: 4rem;
left: 0;
right: 0;
background: rgba(255,255,255,.98);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-top: 1px solid rgba(0,110,255,.1);
box-shadow: 0 4px 20px rgba(0,110,255,.08);
flex-direction: column;
padding: 1.5rem;
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: all .3s ease
}
.header .header-container .action.mobile-menu-active{
transform: translateY(0);
opacity: 1;
visibility: visible
}
.header .header-container .action .action-item{
width: 100%;
padding: .75rem 0;
text-align: center
}
.header .header-container .action .action-item a{
color: #1a1a1a;
font-size: 16px
}
.header .header-container .action .action-item a:hover {
color: #006eff
}
.header .header-container .action .action-item .el-button{
width: 100%;
margin-top: .5rem
}
.header .header-container .action .action-item .el-button:hover {
transform: translateY(-1px) scale(1.02)
}
.header .header-container .action .action-item .el-button:active {
transform: translateY(0) scale(.98)
}
}
.footer {
height: 100px;
background: linear-gradient(135deg,#F8FAFE 0%,#F0F7FF 100%);
padding: 10px 16px;
border-top: 1px solid rgba(0,110,255,.08)
}
.footer .footer-container {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
margin: 0 auto;
max-width: 1400px;
color: #666;
font-size: 14px
}
.footer .footer-container .footer-web-title {
color: #006eff;
font-weight: 600
}
.frontend {
color: #212529;
height: 100%;
width: 100%;
background-color: #f6f7f9
}
.frontend .footer .footer-container,.frontend .banner .banner-container,.frontend .header .header-container {
max-width: 1280px
}
.user-content {
flex: 1;
padding: 20px;
background-color: #edeff6;
min-width: 400px
}
.header-l {
max-width: 240px;
width: 100%;
padding: 0 16px;
height: 60px;
display: flex;
justify-content: center;
align-items: center
}
.header-l a {
display: flex;
align-items: center
}
.header-l .header-logo-container {
display: flex;
cursor: pointer
}
.header-l .header-logo-container .header-logo {
height: 36px
}
.header-l .header-logo-container .header-logo img {
height: 30px
}
.header-l .header-logo-container .web-title {
font-size: 18px;
color: #2f2f32;
padding-left: 6px;
height: 36px;
line-height: 30px
}
.x-space {
display: flex
}
.x-space>*+* {
margin-left: var(--space-size)
}
.x-space.x-space--vertical>*+* {
margin-left: 0;
margin-top: var(--space-size)
}
.el-avatar {
background-color: #fff
}
.user-info {
cursor: pointer;
padding-right: 15px
}
.user-info .el-dropdown-link .x-space {
align-items: center
}
.user-info .el-dropdown-link .el-avatar>img {
width: 100%
}
.user-header {
width: 100%;
height: 60px;
background-color: #fff;
display: flex;
position: fixed;
top: 0;
z-index: 99
}
.user-header .header-content {
display: flex;
align-items: center;
flex: 1
}
.user-header .header-content .header-mid {
display: flex;
width: 100%;
justify-content: space-between;
padding: 0 10px
}
.user-header .header-content .header-mid .header-actions {
display: flex;
align-content: center
}
.user-header .header-content .header-mid .header-actions .el-button {
padding: 8px 4px;
color: #1677ff
}
.user-menu-root {
height: 100%
}
.user-menu-root .user-menu-modal {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 100;
background-color: rgba(0,0,0,.5)
}
.user-menus-container {
height: 100%;
min-width: 62px
}
.user-menus-container.mobile {
position: fixed;
top: 0;
left: 0;
z-index: 101
}
.user-menus {
height: 100vh;
background-color: #fff;
border-right: 2px solid #e8ecf5;
position: fixed;
left: 0;
top: 0;
z-index: 4;
display: flex;
flex-direction: column
}
.user-menus .el-menu {
padding-top: 15px;
background-color: #fff;
color: #5e5e5e
}
.user-menus .el-menu .el-menu--inline {
padding-top: 0
}
.user-menus .el-menu.el-menu--collapse .el-submenu .el-submenu__title,.user-menus .el-menu.el-menu--collapse .el-menu-item,.user-menus .el-menu.el-menu--collapse .el-menu-item .el-tooltip {
display: flex!important;
justify-content: center;
align-items: center
}
.user-menus .el-menu .el-submenu.is-opened {
height: auto;
line-height: normal
}
.user-menus .el-menu .el-menu-item,.user-menus .el-menu .el-submenu__title {
height: 45px;
line-height: 45px;
margin: 0 4px 4px;
border-radius: 10px
}
.user-menus .el-menu .el-menu-item.el-tooltip,.user-menus .el-menu .el-submenu__title.el-tooltip {
display: flex;
justify-content: center;
align-items: center
}
.user-menus .el-menu .el-menu-item.is-active {
background-color: #e9f2ff;
font-weight: 700;
color: #1677ff
}
.user-menus .user-menu-vertical-collapse {
width: 240px;
overflow-y: auto;
flex: 1
}
.user-menus .actions {
display: flex;
position: absolute;
bottom: 15px;
justify-content: center;
width: auto
}
.user-container {
display: flex
}
.user-content {
padding-top: 80px;
display: flex
}
.user-content-v2 {
padding-top: 0;
height: 100vh
}
.user-container-v2 {
display: flex;
flex: 1;
flex-direction: column;
overflow-x: hidden
}
.hero-section {
position: relative;
min-height: 100vh;
overflow: hidden;
padding-top: 64px
}
.hero-banner {
position: relative;
min-height: calc(100vh - 64px);
display: flex;
align-items: center;
overflow: hidden
}
.hero-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1
}
.hero-background .bg-gradient {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,#F8FAFE 0%,#F0F7FF 25%,#E8F4FF 75%,#FFFFFF 100%)
}
.hero-background .bg-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: radial-gradient(circle at 25% 25%,rgba(0,110,255,.03) 0%,transparent 50%),radial-gradient(circle at 75% 75%,rgba(0,110,255,.02) 0%,transparent 50%);
background-size: 400px 400px,600px 600px
}
.hero-background .floating-elements {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0
}
.hero-background .floating-elements .element {
position: absolute;
border-radius: 50%;
background: rgba(0,110,255,.05);
animation: float-627c4164 6s ease-in-out infinite
}
.hero-background .floating-elements .element.element-1 {
width: 120px;
height: 120px;
top: 15%;
left: 10%;
animation-delay: 0s
}
.hero-background .floating-elements .element.element-2 {
width: 80px;
height: 80px;
top: 60%;
left: 85%;
animation-delay: 2s
}
.hero-background .floating-elements .element.element-3 {
width: 60px;
height: 60px;
top: 25%;
left: 80%;
animation-delay: 4s
}
.hero-background .floating-elements .element.element-4 {
width: 100px;
height: 100px;
top: 70%;
left: 5%;
animation-delay: 1s
}
.hero-container {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
padding-top: 40px;
width: 100%
}
.hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
min-height: 600px
}
.content-left .brand-showcase .brand-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: rgba(255,255,255,.9);
border: 1px solid rgba(0,110,255,.2);
border-radius: 20px;
color: #006eff;
font-size: 14px;
font-weight: 500;
margin-bottom: 24px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px)
}
.content-left .brand-showcase .brand-badge i {
color: gold
}
.content-left .brand-showcase .hero-title {
font-size: 48px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 24px;
letter-spacing: -.02em
}
.content-left .brand-showcase .hero-title .title-main {
display: block;
color: #1a1a1a
}
.content-left .brand-showcase .hero-title .title-highlight {
display: block;
color: #006eff;
background: linear-gradient(135deg,#006EFF 0%,#0052D9 100%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text
}
.content-left .brand-showcase .hero-subtitle {
font-size: 18px;
line-height: 1.6;
color: #666;
margin-bottom: 32px;
max-width: 500px
}
.content-left .brand-showcase .value-props {
display: flex;
gap: 24px;
margin-bottom: 40px
}
.content-left .brand-showcase .value-props .prop-item {
display: flex;
align-items: center;
gap: 8px;
color: #666;
font-size: 14px;
font-weight: 500
}
.content-left .brand-showcase .value-props .prop-item i {
color: #006eff;
font-size: 16px
}
.content-left .brand-showcase .cta-section {
display: flex;
gap: 16px;
align-items: center
}
.content-left .brand-showcase .cta-section .primary-cta {
background: linear-gradient(135deg,#006EFF 0%,#0052D9 100%);
border: none;
border-radius: 8px;
padding: 12px 32px;
font-size: 16px;
font-weight: 600;
height: 48px;
transition: all .3s ease
}
.content-left .brand-showcase .cta-section .primary-cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0,110,255,.3)
}
.content-left .brand-showcase .cta-section .primary-cta i {
margin-right: 8px
}
.content-left .brand-showcase .cta-section .secondary-cta {
background: transparent;
border: 2px solid #006EFF;
color: #006eff;
border-radius: 8px;
padding: 10px 32px;
font-size: 16px;
font-weight: 600;
height: 48px;
transition: all .3s ease
}
.content-left .brand-showcase .cta-section .secondary-cta:hover {
background: #006EFF;
color: #fff;
transform: translateY(-2px)
}
.content-left .brand-showcase .cta-section .secondary-cta i {
margin-left: 8px
}
.content-right .hero-visual {
position: relative
}
.content-right .hero-visual .dashboard-preview {
background: white;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0,110,255,.15);
overflow: hidden;
transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
transition: transform .3s ease
}
.content-right .hero-visual .dashboard-preview:hover {
transform: perspective(1000px) rotateY(-2deg) rotateX(2deg)
}
.content-right .hero-visual .dashboard-preview .dashboard-header {
background: #F8FAFE;
padding: 16px 20px;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid rgba(0,110,255,.1)
}
.content-right .hero-visual .dashboard-preview .dashboard-header .header-dots {
display: flex;
gap: 6px
}
.content-right .hero-visual .dashboard-preview .dashboard-header .header-dots .dot {
width: 12px;
height: 12px;
border-radius: 50%
}
.content-right .hero-visual .dashboard-preview .dashboard-header .header-dots .dot.red {
background: #FF5F56
}
.content-right .hero-visual .dashboard-preview .dashboard-header .header-dots .dot.yellow {
background: #FFBD2E
}
.content-right .hero-visual .dashboard-preview .dashboard-header .header-dots .dot.green {
background: #27CA3F
}
.content-right .hero-visual .dashboard-preview .dashboard-header .header-title {
color: #666;
font-size: 14px;
font-weight: 500
}
.content-right .hero-visual .dashboard-preview .dashboard-content {
padding: 24px
}
.content-right .hero-visual .dashboard-preview .dashboard-content .stats-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 24px
}
.content-right .hero-visual .dashboard-preview .dashboard-content .stats-row .stat-card {
background: #F8FAFE;
padding: 16px;
border-radius: 8px;
border: 1px solid rgba(0,110,255,.1)
}
.content-right .hero-visual .dashboard-preview .dashboard-content .stats-row .stat-card .stat-value {
font-size: 20px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 4px
}
.content-right .hero-visual .dashboard-preview .dashboard-content .stats-row .stat-card .stat-label {
font-size: 12px;
color: #999;
margin-bottom: 8px
}
.content-right .hero-visual .dashboard-preview .dashboard-content .stats-row .stat-card .stat-trend {
font-size: 12px;
font-weight: 600
}
.content-right .hero-visual .dashboard-preview .dashboard-content .stats-row .stat-card .stat-trend.up {
color: #52c41a
}
.content-right .hero-visual .dashboard-preview .dashboard-content .chart-area .chart-placeholder {
height: 120px;
background: #F8FAFE;
border-radius: 8px;
padding: 16px;
display: flex;
align-items: end;
justify-content: center
}
.content-right .hero-visual .dashboard-preview .dashboard-content .chart-area .chart-placeholder .chart-bars {
display: flex;
gap: 8px;
align-items: end;
height: 80px
}
.content-right .hero-visual .dashboard-preview .dashboard-content .chart-area .chart-placeholder .chart-bars .bar {
width: 12px;
background: linear-gradient(to top,#006EFF,#40A9FF);
border-radius: 2px;
animation: barGrow-627c4164 2s ease-out
}
.content-right .hero-visual .floating-icons {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none
}
.content-right .hero-visual .floating-icons .icon-item {
position: absolute;
width: 48px;
height: 48px;
background: white;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 25px rgba(0,110,255,.15);
color: #006eff;
font-size: 20px;
animation: iconFloat-627c4164 4s ease-in-out infinite
}
.content-right .hero-visual .floating-icons .icon-item.icon-1 {
top: -10px;
right: 20px;
animation-delay: 0s
}
.content-right .hero-visual .floating-icons .icon-item.icon-2 {
bottom: 60px;
right: -10px;
animation-delay: 1s
}
.content-right .hero-visual .floating-icons .icon-item.icon-3 {
top: 40%;
left: -20px;
animation-delay: 2s
}
.content-right .hero-visual .floating-icons .icon-item.icon-4 {
bottom: -10px;
left: 30%;
animation-delay: 3s
}
.scroll-indicator {
position: absolute;
bottom: 40px;
left: 50%;
transform: translate(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
cursor: pointer;
z-index: 3;
transition: all .3s ease
}
.scroll-indicator:hover {
transform: translate(-50%) translateY(-5px)
}
.scroll-indicator .scroll-text {
color: #666;
font-size: 14px;
font-weight: 500
}
.scroll-indicator .scroll-arrow {
width: 32px;
height: 32px;
border: 2px solid #006EFF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #006eff;
animation: bounce-627c4164 2s infinite
}
.scroll-indicator .scroll-arrow i {
font-size: 14px
}
@media (max-width: 768px) {
.hero-content {
grid-template-columns:1fr;
gap: 40px;
text-align: center
}
.content-left .brand-showcase .hero-title {
font-size: 36px
}
.content-left .brand-showcase .hero-subtitle {
font-size: 16px
}
.content-left .brand-showcase .value-props,.content-left .brand-showcase .cta-section {
justify-content: center;
flex-wrap: wrap
}
.content-right .hero-visual .dashboard-preview {
transform: none;
max-width: 400px;
margin: 0 auto
}
.content-right .hero-visual .floating-icons {
display: none
}
}
@keyframes float-627c4164 {
0%,to {
transform: translateY(0) rotate(0)
}
50% {
transform: translateY(-20px) rotate(5deg)
}
}
@keyframes iconFloat-627c4164 {
0%,to {
transform: translateY(0)
}
50% {
transform: translateY(-10px)
}
}
@keyframes barGrow-627c4164 {
0% {
height: 0
}
to {
height: var(--height, 50%)
}
}
@keyframes bounce-627c4164 {
0%,20%,50%,80%,to {
transform: translateY(0)
}
40% {
transform: translateY(-10px)
}
60% {
transform: translateY(-5px)
}
}
.feature-cards-section {
padding: 100px 0;
background: linear-gradient(135deg,#FFFFFF 0%,#F8FAFE 50%,#F0F7FF 100%);
position: relative;
overflow: hidden
}
.feature-cards-section:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: radial-gradient(circle at 20% 20%,rgba(0,110,255,.03) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(0,110,255,.02) 0%,transparent 50%);
background-size: 600px 600px,800px 800px;
pointer-events: none
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
position: relative;
z-index: 2
}
.section-header {
text-align: center;
margin-bottom: 60px
}
.section-header .section-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: rgba(255,255,255,.9);
border: 1px solid rgba(0,110,255,.2);
border-radius: 20px;
color: #006eff;
font-size: 14px;
font-weight: 500;
margin-bottom: 24px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px)
}
.section-header .section-badge i {
color: gold
}
.section-header .section-title {
font-size: 42px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 16px;
letter-spacing: -.02em
}
.section-header .section-subtitle {
font-size: 18px;
color: #666;
line-height: 1.6;
max-width: 600px;
margin: 0 auto
}
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(380px,1fr));
gap: 24px;
margin-bottom: 80px
}
.feature-card {
background: white;
border-radius: 16px;
padding: 32px;
position: relative;
cursor: pointer;
transition: all .4s cubic-bezier(.4,0,.2,1);
border: 1px solid rgba(0,110,255,.08);
overflow: hidden;
animation: cardSlideUp-6cbb5625 .6s ease-out forwards;
opacity: 0;
transform: translateY(30px)
}
.feature-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(0,110,255,.15);
border-color: rgba(0,110,255,.2)
}
.feature-card:hover .card-decoration .decoration-circle {
transform: scale(1.2);
opacity: .8
}
.feature-card:hover .card-decoration .decoration-line {
width: 100%
}
.feature-card:hover .card-action .action-text {
color: #006eff
}
.feature-card:hover .card-action i {
transform: translate(4px)
}
.feature-card.featured {
border: 2px solid #006EFF;
box-shadow: 0 8px 30px rgba(0,110,255,.12)
}
.feature-card.featured .card-badge {
background: #006EFF;
color: #fff
}
.card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 24px
}
.card-header .card-icon {
width: 64px;
height: 64px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
transition: all .3s ease
}
.card-header .card-badge {
background: #FFD700;
color: #1a1a1a;
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase
}
.card-content {
margin-bottom: 24px
}
.card-content .card-title {
font-size: 24px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 12px;
letter-spacing: -.01em
}
.card-content .card-description {
font-size: 16px;
color: #666;
line-height: 1.6;
margin-bottom: 20px
}
.card-content .card-features {
display: flex;
flex-direction: column;
gap: 8px
}
.card-content .card-features .feature-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #666
}
.card-content .card-features .feature-item i {
color: #52c41a;
font-size: 12px;
font-weight: 700
}
.card-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 20px;
border-top: 1px solid rgba(0,110,255,.08)
}
.card-footer .card-stats .stat-item {
display: flex;
flex-direction: column;
gap: 2px
}
.card-footer .card-stats .stat-item .stat-value {
font-size: 18px;
font-weight: 700;
color: #006eff
}
.card-footer .card-stats .stat-item .stat-label {
font-size: 12px;
color: #999
}
.card-footer .card-action {
display: flex;
align-items: center;
gap: 8px;
transition: all .3s ease
}
.card-footer .card-action .action-text {
font-size: 14px;
font-weight: 600;
color: #666;
transition: color .3s ease
}
.card-footer .card-action i {
color: #006eff;
transition: transform .3s ease
}
.card-decoration {
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
pointer-events: none;
overflow: hidden
}
.card-decoration .decoration-circle {
position: absolute;
top: -20px;
right: -20px;
width: 60px;
height: 60px;
background: rgba(0,110,255,.05);
border-radius: 50%;
transition: all .4s ease
}
.card-decoration .decoration-line {
position: absolute;
top: 20px;
right: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg,transparent 0%,#006EFF 100%);
transition: width .4s ease
}
.section-cta {
text-align: center
}
.section-cta .cta-button {
background: linear-gradient(135deg,#006EFF 0%,#0052D9 100%);
border: none;
border-radius: 12px;
padding: 16px 40px;
font-size: 18px;
font-weight: 600;
height: 56px;
margin-bottom: 16px;
transition: all .3s ease
}
.section-cta .cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(0,110,255,.3)
}
.section-cta .cta-button i {
margin-right: 8px;
font-size: 16px
}
.section-cta .cta-note {
color: #666;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px
}
.section-cta .cta-note i {
color: #006eff
}
@media (max-width: 768px) {
.feature-cards-section {
padding:60px 0
}
.section-header {
margin-bottom: 40px
}
.section-header .section-title {
font-size: 32px
}
.section-header .section-subtitle {
font-size: 16px
}
.cards-grid {
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: 60px
}
.feature-card {
padding: 24px
}
.feature-card .card-header .card-icon {
width: 56px;
height: 56px;
font-size: 24px
}
.feature-card .card-content .card-title {
font-size: 20px
}
.feature-card .card-content .card-description {
font-size: 14px
}
}
@keyframes cardSlideUp-6cbb5625 {
to {
opacity: 1;
transform: translateY(0)
}
}
.product-advantages-section {
padding: 100px 0;
background: linear-gradient(135deg,#FFFFFF 0%,#F8FAFE 50%,#F0F7FF 100%);
position: relative;
overflow: hidden
}
.product-advantages-section:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: radial-gradient(circle at 25% 25%,rgba(0,110,255,.02) 0%,transparent 50%),radial-gradient(circle at 75% 75%,rgba(0,110,255,.03) 0%,transparent 50%);
background-size: 600px 600px,800px 800px;
pointer-events: none
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
position: relative;
z-index: 2
}
.section-header {
text-align: center;
margin-bottom: 60px
}
.section-header .section-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: rgba(255,255,255,.9);
border: 1px solid rgba(0,110,255,.2);
border-radius: 20px;
color: #006eff;
font-size: 14px;
font-weight: 500;
margin-bottom: 24px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px)
}
.section-header .section-title {
font-size: 42px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 16px;
letter-spacing: -.02em
}
.section-header .section-subtitle {
font-size: 18px;
color: #666;
line-height: 1.6;
max-width: 600px;
margin: 0 auto
}
.advantages-section {
margin-bottom: 120px
}
.advantages-grid {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
gap: 32px
}
.advantage-card {
background: white;
border-radius: 20px;
padding: 40px 32px;
position: relative;
overflow: hidden;
border: 1px solid rgba(0,110,255,.08);
transition: all .4s cubic-bezier(.4,0,.2,1);
opacity: 1;
transform: translateY(0)
}
.advantage-card.visible {
opacity: 1;
transform: translateY(0)
}
.advantage-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(0,110,255,.15);
border-color: rgba(0,110,255,.2)
}
.advantage-card:hover .card-decoration .decoration-element {
transform: scale(1.2);
opacity: .8
}
.advantage-card .card-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none
}
.advantage-card .card-background .bg-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0
}
.advantage-card .card-content {
position: relative;
z-index: 2
}
.advantage-card .card-content .advantage-icon {
width: 72px;
height: 72px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
margin-bottom: 24px
}
.advantage-card .card-content .advantage-title {
font-size: 24px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 16px;
letter-spacing: -.01em
}
.advantage-card .card-content .advantage-description {
font-size: 16px;
color: #666;
line-height: 1.6;
margin-bottom: 24px
}
.advantage-card .card-content .advantage-features {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 24px
}
.advantage-card .card-content .advantage-features .feature-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #666
}
.advantage-card .card-content .advantage-features .feature-item i {
color: #52c41a;
font-size: 12px;
font-weight: 700
}
.advantage-card .card-content .advantage-stats .stat-item .stat-value {
font-size: 28px;
font-weight: 700;
margin-bottom: 4px
}
.advantage-card .card-content .advantage-stats .stat-item .stat-label {
font-size: 14px;
color: #666
}
.advantage-card .card-decoration {
position: absolute;
top: 20px;
right: 20px;
width: 60px;
height: 60px;
pointer-events: none
}
.advantage-card .card-decoration .decoration-element {
width: 100%;
height: 100%;
border-radius: 50%;
opacity: .1;
transition: all .4s ease
}
.testimonials-section {
margin-bottom: 80px
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(350px,1fr));
gap: 32px
}
.testimonial-card {
background: white;
border-radius: 20px;
padding: 32px;
border: 1px solid rgba(0,110,255,.08);
transition: all .4s ease;
opacity: 1;
transform: translateY(0)
}
.testimonial-card.visible {
opacity: 1;
transform: translateY(0)
}
.testimonial-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0,110,255,.12)
}
.testimonial-card .testimonial-content {
margin-bottom: 24px
}
.testimonial-card .testimonial-content .quote-icon {
width: 48px;
height: 48px;
background: rgba(0,110,255,.1);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #006eff;
font-size: 20px;
margin-bottom: 16px
}
.testimonial-card .testimonial-content .testimonial-text {
font-size: 16px;
color: #1a1a1a;
line-height: 1.6;
font-style: italic
}
.testimonial-card .testimonial-author {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 20px
}
.testimonial-card .testimonial-author .author-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 18px;
font-weight: 600
}
.testimonial-card .testimonial-author .author-info {
flex: 1
}
.testimonial-card .testimonial-author .author-info .author-name {
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 4px
}
.testimonial-card .testimonial-author .author-info .author-title {
font-size: 14px;
color: #666;
margin-bottom: 2px
}
.testimonial-card .testimonial-author .author-info .company-name {
font-size: 14px;
color: #999
}
.testimonial-card .testimonial-author .company-logo {
width: 40px;
height: 40px;
background: rgba(0,110,255,.05);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px
}
.testimonial-card .testimonial-stats {
display: flex;
gap: 24px;
padding-top: 20px;
border-top: 1px solid rgba(0,110,255,.08)
}
.testimonial-card .testimonial-stats .stat-item {
display: flex;
flex-direction: column;
gap: 4px
}
.testimonial-card .testimonial-stats .stat-item .stat-value {
font-size: 18px;
font-weight: 700;
color: #006eff
}
.testimonial-card .testimonial-stats .stat-item .stat-label {
font-size: 12px;
color: #666
}
.partners-section .section-header {
text-align: center;
margin-bottom: 40px
}
.partners-section .section-header .partners-title {
font-size: 28px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 12px
}
.partners-section .section-header .partners-subtitle {
font-size: 16px;
color: #666
}
.partners-grid {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
gap: 24px
}
.partner-item {
background: white;
border-radius: 12px;
padding: 24px;
text-align: center;
border: 1px solid rgba(0,110,255,.08);
transition: all .3s ease;
opacity: 1;
transform: translateY(0)
}
.partner-item.visible {
opacity: 1;
transform: translateY(0)
}
.partner-item:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0,110,255,.1)
}
.partner-item .partner-logo {
width: 48px;
height: 48px;
background: rgba(0,110,255,.05);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 12px;
overflow: hidden
}
.partner-item .partner-logo img {
width: 32px;
height: 32px;
-o-object-fit: contain;
object-fit: contain
}
.partner-item .partner-name {
font-size: 14px;
color: #666;
font-weight: 500
}
@media (max-width: 768px) {
.product-advantages-section {
padding:60px 0
}
.section-header {
margin-bottom: 40px
}
.section-header .section-title {
font-size: 32px
}
.section-header .section-subtitle {
font-size: 16px
}
.advantages-grid {
grid-template-columns: 1fr;
gap: 24px
}
.advantage-card {
padding: 32px 24px
}
.advantage-card .card-content .advantage-icon {
width: 64px;
height: 64px;
font-size: 28px
}
.advantage-card .card-content .advantage-title {
font-size: 20px
}
.testimonials-grid {
grid-template-columns: 1fr;
gap: 24px
}
.testimonial-card {
padding: 24px
}
.partners-grid {
grid-template-columns: repeat(2,1fr)
}
}
@keyframes slideUpFade-0a7531c6 {
to {
opacity: 1;
transform: translateY(0)
}
}
.cta-section {
background: linear-gradient(135deg,#F8FAFE 0%,#F0F7FF 50%,#E8F4FF 100%)
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px
}
.main-cta {
position: relative;
padding: 100px 0;
overflow: hidden
}
.main-cta .cta-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1
}
.main-cta .cta-background .bg-gradient {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,rgba(0,110,255,.05) 0%,rgba(0,110,255,.02) 100%)
}
.main-cta .cta-background .bg-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: radial-gradient(circle at 25% 25%,rgba(0,110,255,.03) 0%,transparent 50%),radial-gradient(circle at 75% 75%,rgba(0,110,255,.02) 0%,transparent 50%);
background-size: 400px 400px,600px 600px
}
.main-cta .cta-background .floating-elements {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0
}
.main-cta .cta-background .floating-elements .element {
position: absolute;
border-radius: 50%;
background: rgba(0,110,255,.05);
animation: float-ad9fc19d 6s ease-in-out infinite
}
.main-cta .cta-background .floating-elements .element.element-1 {
width: 100px;
height: 100px;
top: 20%;
left: 15%;
animation-delay: 0s
}
.main-cta .cta-background .floating-elements .element.element-2 {
width: 60px;
height: 60px;
top: 60%;
right: 20%;
animation-delay: 2s
}
.main-cta .cta-background .floating-elements .element.element-3 {
width: 80px;
height: 80px;
bottom: 20%;
left: 70%;
animation-delay: 4s
}
.main-cta .cta-content {
position: relative;
z-index: 2;
text-align: center
}
.main-cta .cta-content .cta-header {
margin-bottom: 40px
}
.main-cta .cta-content .cta-header .cta-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: rgba(255,255,255,.9);
border: 1px solid rgba(0,110,255,.2);
border-radius: 20px;
color: #006eff;
font-size: 14px;
font-weight: 500;
margin-bottom: 24px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px)
}
.main-cta .cta-content .cta-header .cta-badge i {
color: gold
}
.main-cta .cta-content .cta-header .cta-title {
font-size: 48px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 24px;
letter-spacing: -.02em
}
.main-cta .cta-content .cta-header .cta-title .title-main {
display: block;
color: #1a1a1a;
margin-bottom: 8px
}
.main-cta .cta-content .cta-header .cta-title .title-highlight {
display: block;
color: #006eff;
background: linear-gradient(135deg,#006EFF 0%,#0052D9 100%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text
}
.main-cta .cta-content .cta-header .cta-subtitle {
font-size: 18px;
line-height: 1.6;
color: #666;
max-width: 600px;
margin: 0 auto
}
.main-cta .cta-content .cta-actions {
display: flex;
gap: 16px;
justify-content: center;
margin-bottom: 32px
}
.main-cta .cta-content .cta-actions .primary-action {
background: linear-gradient(135deg,#006EFF 0%,#0052D9 100%);
border: none;
border-radius: 12px;
padding: 16px 40px;
font-size: 18px;
font-weight: 600;
height: 56px;
transition: all .3s ease
}
.main-cta .cta-content .cta-actions .primary-action:hover {
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(0,110,255,.3)
}
.main-cta .cta-content .cta-actions .primary-action i {
margin-right: 8px;
font-size: 16px
}
.main-cta .cta-content .cta-actions .secondary-action {
background: transparent;
border: 2px solid #006EFF;
color: #006eff;
border-radius: 12px;
padding: 14px 40px;
font-size: 18px;
font-weight: 600;
height: 56px;
transition: all .3s ease
}
.main-cta .cta-content .cta-actions .secondary-action:hover {
background: #006EFF;
color: #fff;
transform: translateY(-2px)
}
.main-cta .cta-content .cta-actions .secondary-action i {
margin-right: 8px;
font-size: 16px
}
.main-cta .cta-content .cta-features {
display: flex;
gap: 32px;
justify-content: center;
flex-wrap: wrap
}
.main-cta .cta-content .cta-features .feature-item {
display: flex;
align-items: center;
gap: 8px;
color: #666;
font-size: 14px;
font-weight: 500
}
.main-cta .cta-content .cta-features .feature-item i {
color: #52c41a;
font-size: 12px;
font-weight: 700
}
.contact-section {
padding: 80px 50px;
background: white
}
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
gap: 32px
}
.contact-item {
display: flex;
gap: 20px;
padding: 32px;
background: rgba(0,110,255,.02);
border-radius: 16px;
border: 1px solid rgba(0,110,255,.08);
transition: all .3s ease
}
.contact-item:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0,110,255,.1);
border-color: rgba(0,110,255,.15)
}
.contact-item .contact-icon {
width: 56px;
height: 56px;
background: linear-gradient(135deg,#006EFF 0%,#40A9FF 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 24px;
flex-shrink: 0
}
.contact-item .contact-info {
flex: 1
}
.contact-item .contact-info .contact-title {
font-size: 20px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 8px
}
.contact-item .contact-info .contact-desc {
font-size: 14px;
color: #666;
margin-bottom: 16px;
line-height: 1.5
}
.contact-item .contact-info .contact-action .el-button {
color: #006eff;
font-weight: 500;
padding: 0
}
.contact-item .contact-info .contact-action .el-button:hover {
color: #0052d9
}
.contact-item .contact-info .contact-action .el-button:hover i {
transform: translate(4px)
}
.contact-item .contact-info .contact-action .el-button i {
margin-left: 4px;
transition: transform .3s ease
}
.site-footer {
background: #1A1A1A;
color: #ccc;
padding: 60px 0 30px
}
.site-footer .footer-content .footer-main {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 60px;
margin-bottom: 40px
}
.site-footer .footer-content .footer-brand .brand-logo {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px
}
.site-footer .footer-content .footer-brand .brand-logo .logo-icon {
width: 40px;
height: 40px;
background: #006EFF;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 20px
}
.site-footer .footer-content .footer-brand .brand-logo .brand-name {
font-size: 24px;
font-weight: 600;
color: #fff;
letter-spacing: -.5px
}
.site-footer .footer-content .footer-brand .brand-desc {
font-size: 14px;
line-height: 1.6;
margin-bottom: 24px;
max-width: 300px
}
.site-footer .footer-content .footer-brand .social-links {
display: flex;
gap: 12px
}
.site-footer .footer-content .footer-brand .social-links .social-link {
width: 40px;
height: 40px;
background: rgba(255,255,255,.1);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #ccc;
text-decoration: none;
transition: all .3s ease
}
.site-footer .footer-content .footer-brand .social-links .social-link:hover {
background: #006EFF;
color: #fff;
transform: translateY(-2px)
}
.site-footer .footer-content .footer-links {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 40px
}
.site-footer .footer-content .footer-links .link-group .group-title {
font-size: 16px;
font-weight: 600;
color: #fff;
margin-bottom: 16px
}
.site-footer .footer-content .footer-links .link-group .link-list {
list-style: none;
padding: 0;
margin: 0
}
.site-footer .footer-content .footer-links .link-group .link-list li {
margin-bottom: 8px
}
.site-footer .footer-content .footer-links .link-group .link-list li a {
color: #ccc;
text-decoration: none;
font-size: 14px;
transition: color .3s ease
}
.site-footer .footer-content .footer-links .link-group .link-list li a:hover {
color: #006eff
}
.site-footer .footer-content .footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 30px;
border-top: 1px solid rgba(255,255,255,.1)
}
.site-footer .footer-content .footer-bottom .copyright p {
font-size: 14px;
margin: 0
}
.site-footer .footer-content .footer-bottom .footer-meta {
display: flex;
gap: 16px;
font-size: 14px;
color: #999
}
@media (max-width: 768px) {
.main-cta {
padding:60px 0
}
.main-cta .cta-content .cta-header .cta-title {
font-size: 36px
}
.main-cta .cta-content .cta-header .cta-title .title-main {
margin-bottom: 4px
}
.main-cta .cta-content .cta-header .cta-subtitle {
font-size: 16px
}
.main-cta .cta-content .cta-actions {
flex-direction: column;
align-items: center
}
.main-cta .cta-content .cta-actions .primary-action,.main-cta .cta-content .cta-actions .secondary-action {
width: 100%;
max-width: 300px
}
.main-cta .cta-content .cta-features {
gap: 16px;
justify-content: center
}
.contact-section {
padding: 60px 0
}
.contact-grid {
grid-template-columns: 1fr;
gap: 24px
}
.contact-item {
padding: 24px
}
.site-footer {
padding: 40px 0 20px
}
.site-footer .footer-content .footer-main {
grid-template-columns: 1fr;
gap: 40px
}
.site-footer .footer-content .footer-links {
grid-template-columns: repeat(2,1fr);
gap: 30px
}
.site-footer .footer-content .footer-bottom {
flex-direction: column;
gap: 16px;
text-align: center
}
.site-footer .footer-content .footer-bottom .footer-meta {
justify-content: center
}
}
@keyframes float-ad9fc19d {
0%,to {
transform: translateY(0) rotate(0)
}
50% {
transform: translateY(-20px) rotate(5deg)
}
}
.frontend-index {
position: relative
}
.frontend-index .section {
opacity: 0;
transform: translateY(30px);
transition: all .8s ease-out
}
.frontend-index .section.active {
opacity: 1;
transform: translateY(0)
}
.frontend-index .page-anchors {
position: fixed;
right: 30px;
top: 50%;
transform: translateY(-50%);
z-index: 100;
display: flex;
flex-direction: column;
gap: 20px;
background: rgba(255,255,255,.1);
padding: 15px 10px;
border-radius: 30px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px)
}
.frontend-index .page-anchors a {
position: relative;
display: flex;
align-items: center;
text-decoration: none;
color: #fff;
transition: all .3s ease
}
.frontend-index .page-anchors a:before {
content: "";
width: 8px;
height: 8px;
background: rgba(255,255,255,.3);
border-radius: 50%;
margin-right: 0;
transition: all .3s ease
}
.frontend-index .page-anchors a span {
position: absolute;
right: 30px;
padding: 5px 10px;
background: #0f66dd;
color: #fff;
border-radius: 4px;
font-size: 14px;
opacity: 0;
transform: translate(10px);
transition: all .3s ease;
white-space: nowrap;
pointer-events: none
}
.frontend-index .page-anchors a:hover:before,.frontend-index .page-anchors a.active:before {
background: #0f66dd;
transform: scale(1.5)
}
.frontend-index .page-anchors a:hover span,.frontend-index .page-anchors a.active span {
opacity: 1;
transform: translate(0)
}
.frontend-index .back-to-top {
position: fixed;
right: 30px;
bottom: 30px;
width: 40px;
height: 40px;
background: #0f66dd;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all .3s;
z-index: 100;
box-shadow: 0 2px 12px rgba(15,102,221,.2)
}
.frontend-index .back-to-top:hover {
transform: translateY(-3px);
box-shadow: 0 4px 16px rgba(15,102,221,.3)
}
.frontend-index .back-to-top i {
font-size: 20px
}
.frontend-index #home,.frontend-index #features,.frontend-index #advantages,.frontend-index #cases {
min-height: 100vh;
scroll-margin-top: 60px;
position: relative
}
@media (max-width: 768px) {
.frontend-index .page-anchors {
display:none
}
.frontend-index .back-to-top {
right: 20px;
bottom: 20px
}
}