.s-padding { padding-top: 100px; padding-bottom: 100px; }
.s-padding:has(.container > .s-title-wrap) { padding-top: 90px; }
.s-padding-b { padding-bottom: 100px; }
.s-padding-t:has(.container > .s-title-wrap) { padding-top: 90px; }

.h-s1-inner { text-align: center; }
.h-s1-inner .h-title { font-size: 58px; line-height: 78px; color: rgb(255, 255, 255); margin-bottom: 24px; }
.h-s1-inner .h-desc { font-size: 20px; line-height: 32px; color: rgb(255, 255, 255); width: 58%; margin: auto; }
.h-s1-inner .s-bar-s1 { margin-top: 50px; }
.h-s1-inner .counter-sm { padding-bottom: 0px; }

.s-bar-s1 .s-bar-inner { width: 618px; height: 68px; margin: auto; background: rgb(255, 255, 255); border-radius: 6px; display: flex; align-items: stretch; justify-content: space-between; }
.s-bar-s1 .s-bar-inner .p-left { flex: 1 1 0px; display: flex; gap: 20px; }
.s-bar-s1 .s-bar-inner .p-right { flex: 0 1 0%; }
.s-bar-s1 .nice-select { float: none; width: 146px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgb(22, 43, 73); border: none; border-radius: 5px 0px 0px 5px; }
.s-bar-s1 .nice-select > * { font-weight: 500; font-size: 14px; line-height: 24px; color: rgb(255, 255, 255); }
.s-bar-s1 .nice-select .option { color: rgb(0, 0, 0); }
.s-bar-s1 .nice-select::after { width: 7px; height: 7px; border-color: rgb(255, 255, 255); right: 23px; }
.s-bar-s1 .nice-select .list { max-height: 270px; overflow-y: scroll !important; }
.s-bar-s1 input[type="text"] { border: none; outline: none; background: transparent; }
.s-bar-s1 input[type="text"]::placeholder { color: rgb(108, 121, 139); }
.s-bar-s1 .btn-frm, .s-bar-s1 .btn-frm-s2 { margin-top: 5px; margin-right: 5px; }
.s-bar-s1.accent-lightBlue .nice-select { background: rgb(29, 201, 183); }
.s-bar-s1.accent-darkBlue .nice-select { background: rgb(22, 43, 73); }

.nice-select { -webkit-tap-highlight-color: transparent; background-color: rgb(255, 255, 255); border-radius: 5px; border: 1px solid rgb(232, 232, 232); box-sizing: border-box; clear: both; cursor: pointer; display: block; float: left; font-family: inherit; font-size: 14px; font-weight: normal; height: 42px; line-height: 40px; outline: none; padding-left: 18px; padding-right: 30px; position: relative; transition: 0.2s ease-in-out; user-select: none; white-space: nowrap; width: auto; text-align: left !important; }
.nice-select:hover { border-color: rgb(219, 219, 219); }
.nice-select:active, .nice-select.open, .nice-select:focus { border-color: rgb(153, 153, 153); }
.nice-select::after { border-bottom: 2px solid rgb(153, 153, 153); border-right: 2px solid rgb(153, 153, 153); content: ""; display: block; height: 5px; margin-top: -4px; pointer-events: none; position: absolute; right: 12px; top: 50%; transform-origin: 66% 66%; transform: rotate(45deg); transition: 0.15s ease-in-out; width: 5px; }
.nice-select.open::after { transform: rotate(-135deg); }
.nice-select.open .list { opacity: 1; pointer-events: auto; transform: scale(1) translateY(0px); }
.nice-select.disabled { border-color: rgb(237, 237, 237); color: rgb(153, 153, 153); pointer-events: none; }
.nice-select.disabled::after { border-color: rgb(204, 204, 204); }
.nice-select.wide { width: 100%; }
.nice-select.wide .list { left: 0px !important; right: 0px !important; }
.nice-select.right { float: right; }
.nice-select.right .list { left: auto; right: 0px; }
.nice-select.small { font-size: 12px; height: 36px; line-height: 34px; }
.nice-select.small::after { height: 4px; width: 4px; }
.nice-select.small .option { line-height: 34px; min-height: 34px; }
.nice-select .list { min-width: 144px;background-color: rgb(255, 255, 255); border-radius: 5px; box-shadow: rgba(68, 68, 68, 0.11) 0px 0px 0px 1px; box-sizing: border-box; margin-top: 4px; opacity: 0; overflow: hidden; padding: 0px; pointer-events: none; position: absolute; top: 100%; left: 0px; transform-origin: 50% 0px; transform: scale(0.75) translateY(-21px); transition: 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; z-index: 9; }
.nice-select .list:hover .option:not(:hover) { background-color: transparent !important; }
.nice-select .option { cursor: pointer; font-weight: 400; line-height: 40px; list-style: none; min-height: 40px; outline: none; padding-left: 18px; padding-right: 29px; text-align: left; transition: 0.2s; }
.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus { background-color: rgb(246, 246, 246); }
.nice-select .option.selected { font-weight: bold; }
.nice-select .option.disabled { background-color: transparent; color: rgb(153, 153, 153); cursor: default; }



.btn-frm, .btn-frm-s2 { background: linear-gradient(102.93deg, rgb(77, 34, 170) 0%, rgb(218, 18, 106) 95.54%); border-radius: 4px; font-weight: 500; font-size: 18px; line-height: 22px; color: rgb(255, 255, 255); width: 141px; height: 58px; display: inline-block; border: none; outline: none; position: relative; overflow: hidden; transition: 0.25s; }
.btn-frm:hover, .btn-frm-s2:hover, .btn-frm:active, .btn-frm-s2:active { opacity: 0.95; }
.btn-frm:hover::after, .btn-frm-s2:hover::after, .btn-frm:active::after, .btn-frm-s2:active::after { transform: translate3d(130%, 0px, 0px) rotate(35deg); transition: transform 0.3s ease-in-out; }
.btn-frm::after, .btn-frm-s2::after { background-color: rgba(255, 255, 255, 0.2); bottom: -50%; content: ""; position: absolute; top: -110%; transform: translate3d(-400%, 0px, 0px) rotate(35deg); width: 50px; z-index: 1; }
.btn-frm svg, .btn-frm-s2 svg { margin-right: 8px; }
.btn-frm-s2 { background: rgb(242, 201, 76); color: rgb(22, 43, 73); }

:host, :root { --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Solid"; --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Regular"; --fa-font-light: normal 300 1em/1 "Font Awesome 6 Light"; --fa-font-thin: normal 100 1em/1 "Font Awesome 6 Thin"; --fa-font-duotone: normal 900 1em/1 "Font Awesome 6 Duotone"; --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands"; }
svg:not(:host).svg-inline--fa, svg:not(:root).svg-inline--fa { overflow: visible; box-sizing: content-box; }
.svg-inline--fa { display: var(--fa-display,inline-block); height: 1em; overflow: visible; vertical-align: -0.125em; }
.svg-inline--fa.fa-2xs { vertical-align: 0.1em; }
.svg-inline--fa.fa-xs { vertical-align: 0px; }
.svg-inline--fa.fa-sm { vertical-align: -0.0714286em; }
.svg-inline--fa.fa-lg { vertical-align: -0.2em; }
.svg-inline--fa.fa-xl { vertical-align: -0.25em; }
.svg-inline--fa.fa-2xl { vertical-align: -0.3125em; }
.svg-inline--fa.fa-pull-left { margin-right: var(--fa-pull-margin,.3em); width: auto; }
.svg-inline--fa.fa-pull-right { margin-left: var(--fa-pull-margin,.3em); width: auto; }
.svg-inline--fa.fa-li { width: var(--fa-li-width,2em); top: 0.25em; }
.svg-inline--fa.fa-fw { width: var(--fa-fw-width,1.25em); }

/*.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {*/
/*    --bs-gutter-x: 1.5rem;*/
/*    --bs-gutter-y: 0;*/
/*    width: 100%;*/
/*    padding-right: calc(var(--bs-gutter-x) * .5);*/
/*    padding-left: calc(var(--bs-gutter-x) * .5);*/
/*    margin-right: auto;*/
/*    margin-left: auto;*/
/*}*/

@media (min-width: 1400px) {
    .nice-select { -webkit-tap-highlight-color: transparent; background-color: rgb(255, 255, 255); border-radius: 5px; border: 1px solid rgb(232, 232, 232); box-sizing: border-box; clear: both; cursor: pointer; display: block; float: left; font-family: inherit; font-size: 14px; font-weight: normal; height: 42px; line-height: 40px; outline: none; padding-left: 18px; padding-right: 30px; position: relative; transition: 0.2s ease-in-out; user-select: none; white-space: nowrap; width: auto; text-align: left !important; }
    .nice-select:hover { border-color: rgb(219, 219, 219); }
    .nice-select:active, .nice-select.open, .nice-select:focus { border-color: rgb(153, 153, 153); }
    .nice-select::after { border-bottom: 2px solid rgb(153, 153, 153); border-right: 2px solid rgb(153, 153, 153); content: ""; display: block; height: 5px; margin-top: -4px; pointer-events: none; position: absolute; right: 12px; top: 50%; transform-origin: 66% 66%; transform: rotate(45deg); transition: 0.15s ease-in-out; width: 5px; }
    .nice-select.open::after { transform: rotate(-135deg); }
    .nice-select.open .list { opacity: 1; pointer-events: auto; transform: scale(1) translateY(0px); }
    .nice-select.disabled { border-color: rgb(237, 237, 237); color: rgb(153, 153, 153); pointer-events: none; }
    .nice-select.disabled::after { border-color: rgb(204, 204, 204); }
    .nice-select.wide { width: 100%; }
    .nice-select.wide .list { left: 0px !important; right: 0px !important; }
    .nice-select.right { float: right; }
    .nice-select.right .list { left: auto; right: 0px; }
    .nice-select.small { font-size: 12px; height: 36px; line-height: 34px; }
    .nice-select.small::after { height: 4px; width: 4px; }
    .nice-select.small .option { line-height: 34px; min-height: 34px; }
    .nice-select .list {min-width: 140px; background-color: rgb(255, 255, 255); border-radius: 5px; box-shadow: rgba(68, 68, 68, 0.11) 0px 0px 0px 1px; box-sizing: border-box; margin-top: 4px; opacity: 0; overflow: hidden; padding: 0px; pointer-events: none; position: absolute; top: 100%; left: 0px; transform-origin: 50% 0px; transform: scale(0.75) translateY(-21px); transition: 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; z-index: 9; }
    .nice-select .list:hover .option:not(:hover) { background-color: transparent !important; }
    .nice-select .option { cursor: pointer; font-weight: 400; line-height: 40px; list-style: none; min-height: 40px; outline: none; padding-left: 18px; padding-right: 29px; text-align: left; transition: 0.2s; }
    .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus { background-color: rgb(246, 246, 246); }
    .nice-select .option.selected { font-weight: bold; }
    .nice-select .option.disabled { background-color: transparent; color: rgb(153, 153, 153); cursor: default; }
}

@media (max-width: 1399px) {
    .hero-s1 { background-size: 400% 400%; animation: 10s ease 0s infinite normal none running gradient; }
}


@media (max-width: 991px) {
    .h-s1-inner .h-title { font-size: 42px; line-height: 56px; }
    .h-s1-inner .h-desc { font-size: 17px; line-height: 28px; width: 80%; }
    .s-bar-s1 .s-bar-inner { width: 100%; }
    .hero-s2__thumb { display: none; }
    .hero-s3__content .h-title { font-size: 42px; line-height: 56px; }
    .hero-s3 .p-bottom .c-container { grid-template-columns: repeat(2, 1fr); gap: 25px; justify-items: center; }
}

@media (max-width: 768px) {
    .col-custom-2 { flex: 0 0 25%; max-width: 25%; }
    .hero-s1 { padding-top: 50px; padding-bottom: 50px; }
}
@media (max-width: 767px) {
    .container-stretch { max-width: 540px; }
    .s-padding { padding-top: 40px; padding-bottom: 50px; }
    .s-padding-b { padding-bottom: 80px; }
    .s-padding-t { padding-top: 80px; }
    .pagination button { font-size: 14px; }
    .form .input-grp { flex-direction: column; gap: 0px; }
    .form .input-grp .input-grp { width: 100%; }
    .form .frm-header { font-size: 20px; padding: 15px; }
    .form .inner-wrap { padding: 20px 20px 30px; }
}

@media (max-width: 767px) {
    .s-bar-s1 .s-bar-inner { flex-direction: column; width: 100%; height: auto; background: transparent; }
    .s-bar-s1 .s-bar-inner .p-left { background: rgb(255, 255, 255); border-radius: 5px; }
    .s-bar-s1 .s-bar-inner .nice-select { height: 60px; }
    .s-bar-s1 .s-bar-inner .btn-frm, .s-bar-s1 .s-bar-inner .btn-frm-s2 { width: 100%; margin-top: 15px; background: rgb(22, 43, 73); color: rgb(255, 255, 255); }
    .s-bar-s1 .s-bar-inner .btn-frm::after, .s-bar-s1 .s-bar-inner .btn-frm-s2::after { display: none; }
}

@media (max-width: 575px) {
    .h-s1-inner .h-title { font-size: 36px; line-height: 46px; }
    .h-s1-inner .h-desc { width: 100%; }
}
.hero-s1 {
     background: linear-gradient(128.5deg,
     rgb(94, 42, 208) 0%,
     rgb(133, 28, 145) 34.94%,
     rgb(194, 21, 117) 76.73%,
     rgb(218, 18, 106) 96.65%);
     background-size: 150% 150%; /* 扩大背景尺寸以支持位移动画 */
     position: relative;
     z-index: 9;
     animation: gradientFlow 12s ease infinite;
 }
@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}