@font-face {
    font-family: Dosis;
    font-style: normal;
    font-weight: 500;
    src: url(../fonts/dosis.woff2) format("woff2");
}

.layout-min-full-height {
    min-height: calc(100vh - 178px) !important;
}

.text-start {
    text-align:left!important;
}

.text-danger {
    color: #ff4954 !important;
}

.p-0 {
    padding: 0!important
}

.pt-0,.py-0 {
    padding-top: 0!important
}

.pr-0,.px-0 {
    padding-right: 0!important
}

.pb-0,.py-0 {
    padding-bottom: 0!important
}

.pl-0,.px-0 {
    padding-left: 0!important
}

.p-1 {
    padding: .25rem!important
}

.pt-1,.py-1 {
    padding-top: .25rem!important
}

.pr-1,.px-1 {
    padding-right: .25rem!important
}

.pb-1,.py-1 {
    padding-bottom: .25rem!important
}

.pl-1,.px-1 {
    padding-left: .25rem!important
}

.p-2 {
    padding: .5rem!important
}

.pt-2,.py-2 {
    padding-top: .5rem!important
}

.pr-2,.px-2 {
    padding-right: .5rem!important
}

.pb-2,.py-2 {
    padding-bottom: .5rem!important
}

.pl-2,.px-2 {
    padding-left: .5rem!important
}

.p-3 {
    padding: .75rem!important
}

.pt-3,.py-3 {
    padding-top: .75rem!important
}

.pr-3,.px-3 {
    padding-right: .75rem!important
}

.pb-3,.py-3 {
    padding-bottom: .75rem!important
}

.pl-3,.px-3 {
    padding-left: .75rem!important
}

.p-4 {
    padding: 1rem!important
}

.pt-4,.py-4 {
    padding-top: 1rem!important
}

.pr-4,.px-4 {
    padding-right: 1rem!important
}

.pb-4,.py-4 {
    padding-bottom: 1rem!important
}

.pl-4,.px-4 {
    padding-left: 1rem!important
}

.p-5 {
    padding: 1.5rem!important
}

.pt-5,.py-5 {
    padding-top: 1.5rem!important
}

.pr-5,.px-5 {
    padding-right: 1.5rem!important
}

.pb-5,.py-5 {
    padding-bottom: 1.5rem!important
}

.pl-5,.px-5 {
    padding-left: 1.5rem!important
}

.p-6 {
    padding: 2rem!important
}

.pt-6,.py-6 {
    padding-top: 2rem!important
}

.pr-6,.px-6 {
    padding-right: 2rem!important
}

.pb-6,.py-6 {
    padding-bottom: 2rem!important
}

.pl-6,.px-6 {
    padding-left: 2rem!important
}

.p-7 {
    padding: 3rem!important
}

.pt-7,.py-7 {
    padding-top: 3rem!important
}

.pr-7,.px-7 {
    padding-right: 3rem!important
}

.pb-7,.py-7 {
    padding-bottom: 3rem!important
}

.pl-7,.px-7 {
    padding-left: 3rem!important
}

.p-8 {
    padding: 5rem!important
}

.pt-8,.py-8 {
    padding-top: 5rem!important
}

.pr-8,.px-8 {
    padding-right: 5rem!important
}

.pb-8,.py-8 {
    padding-bottom: 5rem!important
}

.pl-8,.px-8 {
    padding-left: 5rem!important
}

.p-9 {
    padding: 7rem!important
}

.pt-9,.py-9 {
    padding-top: 7rem!important
}

.pr-9,.px-9 {
    padding-right: 7rem!important
}

.pb-9,.py-9 {
    padding-bottom: 7rem!important
}

.pl-9,.px-9 {
    padding-left: 7rem!important
}

.p-10 {
    padding: 9rem!important
}

.pt-10,.py-10 {
    padding-top: 9rem!important
}

.pr-10,.px-10 {
    padding-right: 9rem!important
}

.pb-10,.py-10 {
    padding-bottom: 9rem!important
}

.pl-10,.px-10 {
    padding-left: 9rem!important
}

.p-11 {
    padding: 11rem!important
}

.pt-11,.py-11 {
    padding-top: 11rem!important
}

.pr-11,.px-11 {
    padding-right: 11rem!important
}

.pb-11,.py-11 {
    padding-bottom: 11rem!important
}

.pl-11,.px-11 {
    padding-left: 11rem!important
}

.p-12 {
    padding: 13rem!important
}

.pt-12,.py-12 {
    padding-top: 13rem!important
}

.pr-12,.px-12 {
    padding-right: 13rem!important
}

.pb-12,.py-12 {
    padding-bottom: 13rem!important
}

.pl-12,.px-12 {
    padding-left: 13rem!important
}

.p-13 {
    padding: 16rem!important
}

.pt-13,.py-13 {
    padding-top: 16rem!important
}

.pr-13,.px-13 {
    padding-right: 16rem!important
}

.pb-13,.py-13 {
    padding-bottom: 16rem!important
}

.pl-13,.px-13 {
    padding-left: 16rem!important
}

.mb-3, .my-3 {
    margin-bottom: .75rem !important;
}

.mb-5, .my-5 {
    margin-bottom: 1.5rem !important;
}

.mt-6, .my-6 {
    margin-top: 2rem !important;
}

.ml-3, .mx-3 {
    margin-left: .75rem !important;
}

.w-0 {
    width: 0!important
}

.w-1 {
    width: .25rem!important
}

.w-2 {
    width: .5rem!important
}

.w-3 {
    width: .75rem!important
}

.w-4 {
    width: 1rem!important
}

.w-5 {
    width: 1.25rem!important
}

.w-6 {
    width: 1.5rem!important
}

.w-7 {
    width: 1.75rem!important
}

.w-8 {
    width: 2rem!important
}

.w-9 {
    width: 2.25rem!important
}

.w-10 {
    width: 2.5rem!important
}

.w-11 {
    width: 3rem!important
}

.w-12 {
    width: 3.5rem!important
}

.w-13 {
    width: 4rem!important
}

.w-14 {
    width: 4.5rem!important
}

.w-15 {
    width: 5rem!important
}

.w-16 {
    width: 6rem!important
}

.w-17 {
    width: 7rem!important
}

.w-18 {
    width: 8rem!important
}

.w-19 {
    width: 9rem!important
}

.w-20 {
    width: 10rem!important
}

.w-21 {
    width: 12.5rem!important
}

.w-22 {
    width: 15rem!important
}

.w-23 {
    width: 17.5rem!important
}

.w-24 {
    width: 20rem!important
}

.btn {
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: .25rem;
    color: #757575;
    display: inline-block;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.9;
    padding: .375rem .75rem;
    text-align: center;
    text-indent: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    vertical-align: middle;
}

.btn, button {
    outline: none;
}

.btn {
    border-radius: 2px;
    letter-spacing: 1.7px;
    text-transform: uppercase;
    transition: .15s linear;
}

.btn-circle, .btn-round {
    border-radius: 10rem;
}

.section_state {
    overflow: hidden;
    position: relative;
}

section {
    display: block;
}

.section_state .bb_qgency_state {
    text-align: center;
}

.position-relative {
    position: relative !important;
}

.text-muted {
    color: #979b9e !important;
    opacity: .7;
}

.section_state .bb_qgency_state .number_state .txt {
    font-size: 150px;
    font-weight: 700;
    line-height: 150px;
}

.state_recommend .bb_qgency_state .number_state .txt {
    background: linear-gradient(270deg, #fd6b3b, #ffce53);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: Dosis, Open Sans, pingfang SC, helvetica neue, arial, hiragino sans gb, microsoft yahei ui, microsoft yahei, simsun, sans-serif;
}

.section_state .bb_qgency_state {
    text-align: center;
}

.section_state .bb_qgency_state .content_state {
    margin-top: 2.8rem;
}

.section_state .bb_qgency_state .link_state {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
}

.fw-400 {
    font-weight: 400 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.font-weight-600, .fw-600 {
    font-weight: 600 !important;
}

.auto-light h1, .auto-light h2, .auto-light h3, .auto-light h4, .auto-light h5, .auto-light h6 {
    color: #3c4248;
}

.h1, h1 {
    font-size: 2.57812rem;
}

.h4, h4 {
    font-size: 1.52344rem;
}

.h5, h5 {
    font-size: 1.23047rem;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: #3c4248;
    font-family: Dosis, Open Sans, pingfang SC, -apple-system, Helvetica Neue, Helvetica, Arial, PingFang SC, PingFang TC, Hiragino Sans GB, Microsoft Yahei, Microsoft Jhenghei, sans-serif;
    line-height: 1.5;
    margin-bottom: .5rem;
}

.font-size-12, .fs-12 {
    font-size: 12px !important;
}

.font-size-14, .fs-14 {
    font-size: 14px !important;
}

.font-size-16, .fs-16 {
    font-size: 16px !important;
}

.font-size-18, .fs-18 {
    font-size: 18px !important;
}

p {
    margin-bottom: 1rem;
    margin-top: 0;
}

.section_state .bb_qgency_state .app-random div {
    height: 80px;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    width: 80px;
}

.section_state .bb_qgency_state .link_state {
    margin-top: 1.5rem
}

.section_state .bb_qgency_state .link_state .btn {
    margin: 0 .5rem
}

.section_state .bb_qgency_state .link_state .btn-recommend {
    transform: scale(1) translateZ(0);
    transition: .3s
}

.section_state .bb_qgency_state .link_state .btn-recommend:before {
    animation: ripple 1.3s cubic-bezier(.29,-.01,.17,.95) infinite;
    background: #50a1ff;
    border-radius: 50px;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    opacity: .25;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1
}

.section_state .bb_qgency_state .link_state .btn_touch {
    border: 1px solid #aaaaaa70;
    color: #8f99a8;
}

.section_state .bb_qgency_state .link_state .btn_touch img {
    margin-right: .2rem;
    width: 20px
}

.section_state.animetext .bb_qgency_state .blur_item {
    height: 60px;
    top: 40%
}

.auto-light .btn-primary, .auto-light .btn-theme {
    background-color: #2196f3;
    color: #fff;
}

.w-r:after, .w-r:before {
    content: "";
    display: table;
}

.w-r:after {
    clear: both;
}

[class*=w-c-] {
    box-sizing: border-box;
    float: left;
}

.w-c-12 {
    width: 50%;
}

.el-pagination {
    height: 46px;
    margin-bottom: 20px;
    position: relative;
    --el-pagination-text-color: #757575;
}

/* 动画元素样式 */
.fe-container-1 { 
    transform: rotate(20deg); 
    left: 7%;
    top: 0;
}
.fe-container-2 { 
    transform: rotate(-5deg); 
    left: -3%;
    top: 60%;
}
.fe-container-3 { 
    transform: rotate(0deg); 
    left: 22%;
    top: 25%
}
.fe-container-4 { 
    transform: rotate(355deg); 
    left: 12%;
    top: 50%;
}
.fe-container-5 { 
    transform: rotate(350deg); 
    right: 13%;
    top: 27%;
}
.fe-container-6 { 
    transform: rotate(15deg); 
    right: 0;
    top: 60%;
}
.fe-container-7 { 
    transform: rotate(10deg); 
    right: 1%;
    top: 2%;
}

.floating-elements1 {
  opacity: 0;
  animation: 
    Blur .5s ease-in .5s forwards,
    float 6s ease-in-out 1.5s infinite;
}

.floating-elements2 {
  opacity: 0;
  animation: 
    Blur .5s ease-in .5s forwards,
    float 9s ease-in-out 1.5s infinite;
}

.floating-elements3 {
  opacity: 0;
  animation: 
    Blur .5s ease-in .5s forwards,
    float 8s ease-in-out 1.5s infinite;
}

.floating-elements4 {
  opacity: 0;
  animation: 
    Blur .5s ease-in .5s forwards,
    float 7.5s ease-in-out 1.5s infinite;
}

.floating-elements5 {
  opacity: 0;
  animation: 
    Blur .5s ease-in .5s forwards,
    float 8.5s ease-in-out 1.5s infinite;
}

.floating-elements6 {
  opacity: 0;
  animation: 
    Blur .5s ease-in .5s forwards,
    float 6.5s ease-in-out 1.5s infinite;
}

.floating-elements7 {
  opacity: 0;
  animation: 
    Blur .5s ease-in .5s forwards,
    float 7s ease-in-out 1.5s infinite;
}

.blurIn {
  opacity: 0;
  animation: BlurIn .5s ease-in .5s forwards;
}

.el-pagination button.btn-next, .el-pagination button.btn-prev {
    background: transparent;
    color: light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3));
    position: absolute;
    border: 0;
}

.el-pagination button:disabled {
    background-color: transparent;
    color: inherit;
    opacity: .3;
}

.el-pagination button.btn-prev {
    left: 0;
}

.el-pagination button.btn-next {
    right: 0;
}

.el-pagination button.btn-next:after, .el-pagination button.btn-prev:after {
    font-family: Dosis, sans-serif;
    font-size: 20px;
    position: absolute;
    color: light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3));
    font-weight:500;
}

.el-pagination button.btn-prev:after {
    content: "Previous";
    left: 40px;
    top: 0;
}

.el-pagination button.btn-next:after {
    content: "Next";
    position: absolute;
    right: 40px;
    top: 0;
}

.el-loading-parent--relative {
    position: relative !important;
}

.form-add-recommend .form-group {
    margin-bottom: 1rem;
}

.form-add-recommend label {
    display: inline-block;
    margin-bottom: .5rem;
}

.form-add-recommend .form-group label {
    color: #0b2238;
    font-size: 14px;
    font-weight: 400;
}

.form-control {
    background-clip: padding-box;
    background-color: #fff;
    border: 1px solid hsla(210, 8%, 51%, .09);
    border-radius: 2px;
    color: #999;
    display: block;
    font-size: .9375rem;
    height: calc(1.9em + .75rem + 2px);
    line-height: 1.9;
    padding: .375rem .75rem;
    transition: all .3s ease-out;
    width: 100%;
}

.form-add-recommend .form-control {
    background-clip: padding-box;
    background-color: #fff;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    padding: .375rem .75rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    font-family: Dosis, sans-serif;
}

.form-add-recommend .form-group input, .form-add-recommend .form-group select {
    height: 50px;
}

.form-add-recommend .form-group input, .form-add-recommend .form-group select, .form-add-recommend .form-group textarea {
    border-color: #edeef1;
    border-radius: 8px;
    color: #0b2238;
    font-size: 16px;
    font-weight: 500;
    padding-left: 1.25rem;
    transition: .3s;
}

textarea.form-control {
    height: auto;
}

textarea {
    overflow-y: hidden;
    min-height: 140px;
    resize: vertical;
    scrollbar-width: none;
}

textarea::-webkit-scrollbar {
  display: none;
}

.form-add-recommend .form-group textarea {
    border-color: #edeef1;
    border-radius: 8px;
    color: #0b2238;
    font-size: 16px;
    font-weight: 500;
    padding-left: 1.25rem;
    transition: .3s;
}

.form-add-recommend .form-group textarea {
    padding: 1.25rem;
}

.btn-theme {
    background-color: #2196f3;
    color: #fff;
}

.section_state .bb_qgency_state .blur_item {
    -webkit-backdrop-filter: saturate(1) blur(20px);
    -o-backdrop-filter: saturate(1) blur(20px);
    backdrop-filter: saturate(1) blur(20px);
    -webkit-background: hsla(0,0%,100%,.2);
    -moz-background: hsla(0,0%,100%,.2);
    -o-background: hsla(0,0%,100%,.2);
    -ms-background: hsla(0,0%,100%,.2);
    background: #fff3;
    height: 350px;
    position: absolute;
    top: 0;
    width: 100%;
}

.section_state.animetext .bb_qgency_state .blur_item {
    height: 60px;
    top: 39%;
}

.swal2-close:hover {
    color: #2196f3 !important;
}

.modal-content {
    border-radius:25px;
}

div:where(.swal2-container) h2:where(.swal2-title) {
    padding: .8em 1em .5em;
}

.list-group-flush {
    list-style: none;
    margin: 20px 0;
    padding: 0 20px;
    font-family: dosis, sans-serif;
}

.list-group-item {
    display: flex;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid #DEDEDE;
}

.list-group-item p {
    text-transform: capitalize;
}

.list-group-success .list-group-item {
    justify-content: flex-start;
}

.list-group-flush .list-group-item .badge,
.list-group-success .list-group-item .badge {
    margin-left: auto;
    margin-right: 10px;
}

.list-group-flush .list-group-item .badge-warning {
    margin-left: 5px;
}

.list-group-success .list-group-item .badge-warning {
    margin-right: 5px;
}

.list-group-success .list-group-item .badge-info {
    margin-left: 0;
}

.list-group .badge {
    margin:0;
    position: relative;
}

.list-group .badge.badge-secondary {
    margin-left:auto;
    background-color: #999;
}

.list-group .badge.badge-warning {
    background-color: #fab758;
}

.list-group .badge.badge-success {
    background-color: #198754;
}

.list-group .badge.badge-info {
    background-color: #a07cc5;
}

.ripro-dark .list-group-item {
    border-bottom: 1px solid #404040;
}

.ripro-dark #swal2-html-container {
    color: #dfdfdf;
}

.ripro-dark .section_state .bb_qgency_state .blur_item {
    background: #17171733;
}

.ripro-dark .content_state h1,
.ripro-dark .w-c.w-c-12 h4,
.ripro-dark .modal-content h1 {
    color: #d4d4d5;
}

.ripro-dark .text-muted {
    color: #d4d4d5 !important;
    opacity: .7;
}

.ripro-dark .el-pagination button.btn-next:after,.ripro-dark .el-pagination button.btn-prev:after {
    color: #757575;
}

.ripro-dark .el-pagination button.btn-next,.ripro-dark .el-pagination button.btn-prev {
    color: #757575;
}

.ripro-dark .form-add-recommend .form-group label, .ripro-dark .post-item h3, .ripro-dark .post-item:visited h3, .ripro-dark .text-darken {
    color: #d4d4d5;
}

.ripro-dark .modal-content {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: #171717e3;
    border-radius: 25px;
    box-shadow: 0 0 45px #000c;
}

.ripro-dark .form-add-recommend .form-group input, .ripro-dark .form-add-recommend .form-group select, .ripro-dark .form-add-recommend .form-group textarea {
    border-color: #d3d3d480;
    color: #d4d4d5;
}

.ripro-dark .form-add-recommend .form-control {
    background-color: #171717;
}

@keyframes ripple {
    to {
        opacity: 0;
        transform: scaleX(1.3) scaleY(1.6)
    }
}

@keyframes Blur {
  from {
    opacity: 0.5;
    filter: blur(10px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes BlurIn {
  from {
    opacity: 0.6;
    filter: blur(10px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
}

@media (max-width: 768px) {
    .fs-md-14 {
        font-size: 14px !important;
    }
    .px-md-5 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    .py-md-6 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    .app-random,
    .list-group .badge.badge-info {
        display:none;
    }
    .w-c-12 {
        width: 100%;
    }
    .list-group-flush {
        padding:0;
    }
    .section_state.animetext .bb_qgency_state .blur_item {
        display:none;
    }
}