@charset "UTF-8";
:root {
    --bs-border-radius-lg: 0.5rem;
    color: #060015;
    --bs-modal-color: #3D3D3D;
    font-size: 16px;
}

body {
    background-color: #060015;
    font-size: 16px;
}

.bg-nav {
    background-color: rgba(0, 0, 0, 0);
}

.bg-footer {
    background-color: #060015;
}

.bg-black {
    background-color: #060015;
}

.bg-1A1528 {
    background-color: #1A1528;
}

.bg-1A212A {
    background-color: #1A212A;
}

.bg-060015 {
    background-color: #060015;
}

.w-65 {
    width: 65% !important;
}

.w-35 {
    width: 35% !important;
}

.index-banner {
    height: calc(100vh - 65px);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.index-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    aspect-ratio: 835 / 352;
}

.index-box-content {
    width: 100%;
    aspect-ratio: 835 / 352;
    position: absolute;
}

/* 登录 start*/
.login-box {
    background-image: url('../img/login-bg.png');
    background-size: 100% auto;
    min-height: 500px;
    padding-top: 2rem;
    border-radius: .5rem;
}

.login-box .send-code-btn {
    width: 40%;
    color: #BB72FF;
    background-color: #060015;
    border: 0 solid #D8D8D8;
    border-radius: .375rem;
}

.login-box .form-control {
    color: #333;
}

.login-box .exec-login-btn {
    border: 0;
    color: #fff;
}

.login-box .register-tips {
    width: 100%;
    font-size: 12px;
    font-weight: bolder;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
    color: #fff;
}

.login-box .register-tips::before, .login-box .register-tips::after {
    content: '';
    position: absolute;
    width: calc((100% - 14em) / 2);
    height: 1px;
    background-color: #D8D8D8;
    left: 0;
    top: calc((100% - 1px) / 2);
    z-index: 1
}

.login-box .register-tips::after {
    left: auto;
    background-color: #D8D8D8;
    right: 0;
}

.login-box .cover {
    width: 179px;
    position: absolute;
    height: 179px;
    border-radius: .7em;
    overflow: hidden;
    background-color: rgba(0, 0, 0, .8);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-box .qrcode-box {
    width: 179px;
    border-radius: .7em;
    overflow: hidden;
}

.login-box .tel-login-btn, .login-box .wechat-login-btn, .login-box .tel-login {
    display: none;
    cursor: pointer;
}

.login-box .tel-login-btn > div, .login-box .wechat-login-btn > div {
    border: 1px solid #575B66;
    width: 90%;
    margin-left: 5%;
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-border-radius: 0.375rem;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    line-height: var(--bs-btn-line-height);
    border-radius: var(--bs-btn-border-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    margin-top: .75rem;
    margin-bottom: .75rem;
}

.login-box .tel-login-btn.active, .login-box .wechat-login-btn.active {
    display: flex;
}

.login-box .tel-login .text-danger, .login-box .wechat-login .text-danger {
    font-size: 12px;
    min-height: 1.5em;
}

.login-box .tel-login input::placeholder {
    color: #B3B3B3;
}

.login-box .tel-login input {
    outline: none;
    color: #575B66;
    padding-top: .75rem;
    padding-bottom: .75rem;
    border: 0 solid #D8D8D8;
    background-color: #060015;
}

.login-box .tel-login input[name=register-code] {
    width: 60%;
}

.login-box .tel-login label {
    color: #000000;
}

.login-box .tel-login-btn .avatar-text {
    background: #ffa938;
    font-size: 2rem;
    cursor: pointer;
}

.login-box .wechat-login-btn .avatar-text {
    background: #50d562;
    font-size: 2rem;
    cursor: pointer;
}

.login-box .user-protocol {
    font-size: 12px;
    color: #666;
}

/* 登录 end*/
/* 重写公共 checkbox start */
.checkbox {
    display: inline-block;
    cursor: pointer;
}

.checkbox img:nth-child(2), .checkbox.check img:nth-child(1) {
    display: inline;
}

.checkbox img:nth-child(1), .checkbox.check img:nth-child(2) {
    display: none;
}

.checkbox img {
    width: 1.5em;
    margin-top: -.2em;
}

/* 重写公共 checkbox end */
.text-indent {
    text-indent: 2em;
}

svg.icon {
    width: 1em;
    height: 1em;
}

.text-333 {
    color: #333;
}

.text-3D3D3D {
    color: #3D3D3D;
}

.text-575B66 {
    color: #575B66;
}

.text-violet {
    color: #BB72FF;
}

.text-9E9E9E {
    color: #9E9E9E !important;
}

.text-5ED2FF {
    color: #5ED2FF;
}

.text-666 {
    color: #666;
}

.text-999 {
    color: #999;
}

.text-wechat-green {
    color: #fff;
}

/*#39b239*/
.text-alipay-blue {
    color: #fff;
}

/*1777ff*/
.text-blue {
    color: #315CEC;
}

.text-yellow {
    color: #FDC03A;
}

.text-red {
    color: #FF3838;
}

.text-gold {
    color: #c28748;
}

.text-white {
    color: #fff;
}

.text-grey {
    color: #575B66;
}

.text-black {
    color: #060015;
}

.cursor-pointer {
    cursor: pointer;
}

.border-radius {
    border-radius: var(--bs-border-radius-lg);
}

.border-left-radius {
    border-radius: var(--bs-border-radius-lg) 0 0 var(--bs-border-radius-lg);
}

.border-top-radius {
    border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0;
}

.border-bottom-radius {
    border-radius: 0 0 var(--bs-border-radius-lg) var(--bs-border-radius-lg);
}

.border-right-radius {
    border-radius: 0 var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0;
}

.header-placeholder {
    height: 65px;
}

img {
    max-width: 100%;
}

/* 付费列表 start */
.buy-box-border {
    padding: 0;
    border-radius: var(--bs-border-radius);
}

.buy-box {
    border-radius: var(--bs-border-radius);
    background-image: url("../img/buy-bg.png");
    background-size: cover;
}

/*.buy-box .buy-banner{height: 13rem;overflow: hidden;}*/
.buy-box .buy-text {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.buy-box .nav-tabs {
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row nowrap;
    white-space: nowrap;
}

.buy-box .nav-item button, .buy-box .nav-item button:hover, .buy-box .nav-item button:visited {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #DEDEDE;
    color: #666666;
    border-radius: var(--bs-nav-tabs-border-radius);
    padding: .2rem .3rem !important;
    line-height: 1.85em;
}

.buy-box .nav-item button.active {
    border: 1px solid #1777FF;
    border-radius: var(--bs-nav-tabs-border-radius);
    color: #333333;
}

.buy-box .nav-item button i {
    margin-right: .5rem;
}

.buy-box .pay-price-group {
    border-radius: .3rem;
}

.buy-box .pay-price-group .row {
    padding: 1rem 0;
    margin: 0;
    border-radius: .3rem;
}

.buy-box .countdown {
    color: #fff;
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.175rem;
    --bs-btn-border-radius: 0.375rem;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    background-image: linear-gradient(to left, #FF6426, #FFAE57);
    margin-bottom: .375rem;
    border-radius: .3rem;
}

.buy-box .pay-group {
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative;
}

.buy-box .pay-group .pay-item {
    width: calc(100% / 4);
    background-image: linear-gradient(-133deg, #FCA087, #F23DD9, #8835ED);
    border-radius: .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    padding: 0;
    position: relative;
    cursor: pointer;
}

.buy-box .pay-group .pay-item > div {
    width: 100%;
    border-radius: .5rem;
    border: 1px solid #575B66;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    position: relative;
    background: #060015;
    padding: 1rem 0;
}

.buy-box .pay-group .pay-item .pay-item-title {
    display: flex;
    color: #fff;
}

.buy-box .pay-group .pay-item .pay-item-unit-price {
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
}

.buy-box .pay-group .pay-item .pay-item-unit-price span {
    font-size: 2rem;
}

.buy-box .pay-group .pay-item .pay-item-price {
    color: #fff;
}

.buy-box .pay-group .pay-item .pay-item-original-price {
    text-decoration: line-through;
    color: #7C7E88;
}

.buy-box .pay-group .pay-item .pay-item-tips {
    background-image: linear-gradient(to left, #FFC144, #FF6937);
    position: absolute;
    left: -2px;
    top: calc(-1.5em / 2);
    padding: 0 .5rem;
    color: #fff;
    font-size: 10px;
    line-height: 1.85em;
    border-radius: .5rem 0 .5rem 0;
}

.buy-box .pay-group .pay-item.active > div {
    background: none;
}

.buy-box .pay-group .pay-item.active .pay-item-price, .buy-box .pay-group .pay-item.active .pay-item-unit-price, .buy-box .pay-group .pay-item.active .pay-item-original-price, .buy-box .pay-group .pay-item.active .pay-item-title {
    color: #fff;
}

.buy-box .pay-qrcode-1 {
    background: #fff;
    width: 100%;
}

.buy-box .tab-content {
    display: flex;
    justify-content: center;
    padding: 1rem 0 0 0;
}

.buy-box .wechat-qrcode, .buy-box .alipay-qrcode {
    width: 130px;
    height: 130px; /*padding: 3px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff url(../img/loading24.gif) center center no-repeat;
    border-radius: .2rem;
    overflow: hidden;
}

.buy-box .alipay-qrcode {
    border-color: #1777FF;
}

.buy-box .wechat-qrcode canvas, .buy-box .alipay-qrcode iframe {
    width: 120px;
    height: 120px;
}

.buy-box .alipay-qrcode iframe {
    margin-left: 5px;
    margin-top: 5px;
    width: 125px;
    height: 125px;
}

.buy-box .wechat-title, .alipay-title {
    margin-top: .3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.buy-box .wechat-title i, .alipay-title i {
    margin-right: .3rem;
    font-size: 2em;
}

.buy-box .wechat-qrcode img, .alipay-qrcode img {
    width: 100%;
}

.buy-box .pay-price-tips + .fs-7 {
    white-space: nowrap;
}

.buy-box .pay-price-tips {
    background-image: linear-gradient(to left, #FF6426, #FFAE57);
    color: #fff;
    padding: .3rem;
    border-radius: .3rem;
    position: relative;
    font-size: 12px;
    white-space: nowrap;
}

.buy-box .pay-price-tips::before {
    position: absolute;
    content: '';
    top: -.85rem;
    left: 2rem;
    border-style: solid;
    border-width: .45rem;
    border-color: transparent transparent #ffa048 transparent;
}

/* 付费列表 end */
/* 挽留 开始 */
.retain-box {
    background-image: linear-gradient(133deg, #1C2938, #18292E);
    border-radius: .5rem;
}

.retain-box .retain-tips {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.retain-box .retain-tips img {
    width: 80%;
}

.retain-box .retain-frame, .retain-box .qrcode {
    position: relative;
    width: 100%;
    background-image: linear-gradient(to left, #060015, #060015);
}

.retain-box .retain-frame {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.retain-box .qrcode {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.retain-box .retain-frame > img {
    width: 100%;
}

.retain-box .retain-frame .retain-content {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.retain-box .retain-frame .retain-content .top, .retain-box .retain-frame .retain-content .center-1, .retain-box .retain-frame .retain-content .center-2, .retain-box .retain-frame .retain-content .bottom {
    position: absolute;
    font-size: 9px;
    width: 100%;
    color: #BB72FF;
    line-height: 1.8em;
}

.retain-box .retain-frame .retain-content .bottom > div > .fs-2 {
    white-space: nowrap;
}

.retain-box .retain-frame .retain-content .top {
    left: 5%;
    top: 20%;
    width: 89%;
    display: flex;
    justify-content: space-between;
    align-items: center; /*padding: 0 .2rem;*/
    line-height: 1em;
    font-weight: 500;
}

.retain-box .retain-frame .retain-content .center-1 {
    left: 5%;
    top: 42%;
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1em;
    font-size: 20px;
    color: #fff;
    font-weight: bolder;
}

.retain-box .retain-frame .retain-content .center-2 {
    left: 5%;
    top: 65.23%;
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1em;
    font-size: 18px;
    color: #bb72ff;
    font-weight: bolder;
}

.retain-box .retain-frame .retain-content .center-2 span {
    font-weight: 400;
}

.retain-box .retain-frame .retain-content .top > div {
    text-align: center;
}

.retain-box .retain-frame .retain-content .top .shrink {
    display: inline-block;
    transform: scale(.5);
}

.retain-box .retain-frame .retain-content .bottom {
    bottom: 8%;
    left: 10%;
    width: 80%;
    height: 14.63%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #060015;
}

.retain-box .wechat-qrcode, .retain-box .alipay-qrcode {
    width: 130px;
    height: 130px;
    padding: 3px;
    background: #fff url(../img/loading24.gif) center center no-repeat;
    border-radius: .2rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.retain-box .alipay-qrcode {
    border-color: #1777FF;
}

.retain-box .wechat-qrcode canvas {
    width: 120px;
    height: 120px;
}

.retain-box .alipay-qrcode iframe {
    margin-left: 5px;
    margin-top: 5px;
    width: 125px;
    height: 125px;
}

.retain-box .wechat-title, .alipay-title {
    margin-top: .3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.retain-box .wechat-title i, .alipay-title i {
    margin-right: .3rem;
    font-size: 2em;
}

.retain-box .wechat-qrcode img, .alipay-qrcode img {
    width: 100%;
}

/* 挽留 结束 */

/* 二次付费 开始 */
.second-box {
    border-radius: .5rem;
    box-shadow: none;
}

.second-box .second-tips {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.second-box .second-tips img {
    width: 80%;
}

.second-box .second-frame {
    position: relative;
    width: 100%;
    margin-top: -3.5rem;
}

.second-box .second-frame {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.second-box .qrcode {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.second-box .second-frame > img {
    width: 100%;
}

.second-box .second-frame .second-content {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 2rem;
}

.second-box .second-frame .second-content .top, .second-box .second-frame .second-content .center-1, .second-box .second-frame .second-content .center-2, .second-box .second-frame .second-content .bottom {
    position: absolute;
    font-size: 9px;
    width: 100%;
    color: #BB72FF;
    line-height: 1.8em;
}

.second-box .second-frame .second-content .bottom > div > .fs-2 {
    white-space: nowrap;
}

.second-box .second-frame .second-content .top {
    left: 5%;
    top: 20%;
    width: 89%;
    display: flex;
    justify-content: space-between;
    align-items: center; /*padding: 0 .2rem;*/
    line-height: 1em;
    font-weight: 500;
}

.second-box .second-frame .second-content .center-1 {
    left: 5%;
    top: 42%;
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1em;
    font-size: 20px;
    color: #fff;
    font-weight: bolder;
}

.second-box .second-frame .second-content .center-2 {
    left: 5%;
    top: 65.23%;
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1em;
    font-size: 18px;
    color: #bb72ff;
    font-weight: bolder;
}

.second-box .second-frame .second-content .center-2 span {
    font-weight: 400;
}

.second-box .second-frame .second-content .top > div {
    text-align: center;
}

.second-box .second-frame .second-content .top .shrink {
    display: inline-block;
    transform: scale(.5);
}

.second-box .second-frame .second-content .bottom {
    bottom: 8%;
    left: 10%;
    width: 80%;
    height: 14.63%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #060015;
}

.second-box .wechat-qrcode, .second-box .alipay-qrcode {
    width: 130px;
    height: 130px;
    padding: 3px;
    background: #fff url(../img/loading24.gif) center center no-repeat;
    border-radius: .2rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.second-box .alipay-qrcode {
    border-color: #1777FF;
}

.second-box .wechat-qrcode canvas {
    width: 120px;
    height: 120px;
}

.second-box .alipay-qrcode iframe {
    margin-left: 5px;
    margin-top: 5px;
    width: 125px;
    height: 125px;
}

.second-box .wechat-title, .alipay-title {
    margin-top: .3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.second-box .wechat-title i, .alipay-title i {
    margin-right: .3rem;
    font-size: 2em;
}

.second-box .wechat-qrcode img, .alipay-qrcode img {
    width: 100%;
}

/* 二次付费 结束 */
.link-dark {
    color: #212529 !important;
}

.fs-7 {
    font-size: .75rem !important
}

.fs-8 {
    font-size: .625rem !important
}

.fs-9 {
    font-size: .5rem !important
}

.fs-10 {
    font-size: .375rem !important
}

.w-1em {
    width: 1em;
}

.w-2em {
    width: 1.5em;
}

.w-3em {
    width: 2em;
}

.w-4em {
    width: 2.5em;
}

.icon-img-xs {
    width: .8em;
}

.icon-img-sm {
    width: 1em;
}

.icon-img {
    width: 1.2em;
}

.icon-img-md {
    width: 1.5em;
}

.icon-img-lg {
    width: 1.8em;
}

.icon-img-xl {
    width: 2em;
}

.icon-img-xxl {
    width: 2.3em;
}

.icon-img-xxxl {
    width: 2.5em;
}

.icon-img-xxxxl {
    width: 2.8em;
}

.icon-img-xxxxl {
    width: 3em;
}

.border-radius-0 {
    border-radius: 0;
}

.text-overflow-2, .text-overflow-3, .text-overflow-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-overflow-1 {
    width: 100%;
    word-break: keep-all; /* 不换行 */
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow: ellipsis;
}

.text-overflow-2 {
    -webkit-line-clamp: 2;
}

.text-overflow-3 {
    -webkit-line-clamp: 3;
}

.text-overflow-4 {
    -webkit-line-clamp: 4;
}

.single-line {
    width: 100%;
    word-break: keep-all; /* 不换行 */
    white-space: nowrap; /* 不换行 */
    overflow: auto;
}

.single-line::-webkit-scrollbar {
    display: none;
}

.dropdown-toggle::after {
    display: none;
}

@media (min-width: 576px) {
    .modal-sm {
        --bs-modal-width: 400px;
    }
}

/*修改bootstrap 原生内容 start*/
.modal-content {
    background: none;
}

.btn-close {
    font-size: 200%;
    --bs-btn-close-bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="white" class="bi bi-x" viewBox="0 0 16 16"> <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/> </svg>');
}

#modal-retain .btn-close, #modal-retain .btn-close, #modal-buy .btn-close {
    font-size: 200%;
    --bs-btn-close-bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="white" class="bi bi-x" viewBox="0 0 16 16"> <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/> </svg>');
}

.w-e-modal .btn-close {
    --bs-btn-close-bg: none;
}

.form-check-label {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
}

.breadcrumb-item {
    font-size: 20px;
}

.btn-primary {
    background-image: linear-gradient(to right, #FF55D2, #7835FF);
    border: 0;
}

.btn-secondary, .btn-secondary:hover, .btn-secondary:link, .btn-secondary:active {
    background: #060015;
    border: none;
    color: #fff;
}

.btn-third, .btn-third:hover, .btn-third:link, .btn-third:active, .btn-third:focus, .btn-third:visited {
    background-image: linear-gradient(to left, #D4E0FF, #F7F9FF);
    color: #2A4BFF;
}

.modal-header, .modal-footer {
    border: none;
}

.dropdown-menu .dropdown-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: .2rem;
    padding-bottom: .2rem;
}

.dropdown-menu .dropdown-item i {
    margin-right: .3rem;
}

.file-grid2-body .dropdown-menu .dropdown-item {
    padding-top: .6rem;
    padding-bottom: .6rem;
}

.content-nav-top .dropdown-menu .dropdown-item {
    padding-top: .6rem;
    padding-bottom: .6rem;
}

.search-cloud .dropdown-menu .dropdown-item {
    padding-top: .6rem;
    padding-bottom: .6rem;
}

.search-cloud .dropdown-menu .dropdown-item i {
    margin-right: 14px;
    font-size: 2rem !important;
}

.btn-check:checked + .btn, .btn.active, .btn:focus, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
    border-color: transparent;
}

.btn-close:focus {
    box-shadow: none !important;
}

.dropdown-item:focus, .dropdown-item:hover {
    color: #3D3D3D;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: #FFFFFF;
}

input, input:hover, input:focus {
    background: #fff;
    color: #3D3D3D;
    outline: none;
}

a {
    text-decoration: none;
}

header .nav-link, header .nav-link:hover {
    color: #575B66;
    font-weight: 400;
}

header .nav-link.active {
    color: #BB72FF !important;
    position: relative;
    font-weight: 700;
}

.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets {
    position: absolute !important;
    top: calc(100% + 25px) !important;
    left: 50% !important;
}

.carousel-caption {
    height: 100%;
    margin-bottom: -1.25rem; /*left: 0;*/
    right: 50%; /*background: rgba(0, 0, 0, .2);*/
    display: flex;
    justify-content: center;
    align-items: center;
}

/*修改bootstrap 原生内容 end */
header ._dropdown {
}

header ._dropdown:hover ~ ._dropdown-menu, header ._dropdown-menu:hover {
    display: block;
}

header ._dropdown-menu {
    position: absolute;
    z-index: 2;
}

header .dropdown-item {
    line-height: 2.5em;
}

/* 付费角标弹窗 start */
.tips-buy {
    position: fixed;
    right: 35px;
    bottom: 10vh;
    width: 200px;
}

.tips-buy-content {
    position: relative;
}

.tips-buy-content > div {
    position: absolute;
    width: 100%;
    height: 1em;
    color: #EE4947;
    left: 10px;
    top: 28%;
    display: flex;
    justify-content: center;
    align-items: baseline;
    transform: rotate(8deg);
}

.tips-buy img {
    cursor: pointer;
}

.tips-buy .tips-buy-close {
    position: absolute;
    right: 0;
    top: -10px;
    cursor: pointer;
}

/* 付费角标弹窗 end */
.btn-radius {
    border-radius: 2em;
}

.btn-length-1 {
    padding-left: 1em !important;
    padding-right: 1em !important;
}

.btn-length-2 {
    padding-left: 1.5em !important;
    padding-right: 1.5em !important;
}

.btn-length-3 {
    padding-left: 2em !important;
    padding-right: 2em !important;
}

.btn-length-4 {
    padding-left: 2.5em;
    padding-right: 2.5em;
}

.btn-length-5 {
    padding-left: 3em;
    padding-right: 3em;
}

.btn-length-6 {
    padding-left: 3.5em;
    padding-right: 3.5em;
}

/* 导航条用户信息 start */
.userinfo {
    cursor: pointer;
}

/* 导航条用户信息 end */
/* 主程序内容 start */
main {
    flex-shrink: 1;
    width: 100%;
    height: var(--_height);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    color: #3D3D3D;
}

/*main header{width: 100%;flex-shrink: 0;padding-left: 1rem;padding-right: 1rem;}*/
main .content {
    width: 100%;
    height: calc(100% - 3rem);
    flex-shrink: 1;
    display: flex;
    justify-content: flex-start;
    flex-flow: row nowrap;
    align-items: flex-start;
}

main .content .content-nav {
    flex-shrink: 0;
    padding: 1rem;
    border-right: 1px solid #ccc;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: column nowrap;
}

main .content .content-nav .menu {
    color: #3D3D3D;
    line-height: 2.5em;
    width: 100%;
}

main .content .content-nav .menu .menu-item {
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    line-height: 2.8em;
}

main .content .content-nav .content-nav-bottom {
    margin-bottom: 1rem;
}

main .content .content-nav .menu .menu-item i {
    margin: .3rem .5rem .3rem 1rem;
}

main .content .content-nav .menu .menu-item.active {
    background: #f3f3f3;
    border-radius: var(--bs-border-radius);
}

main .content .content-nav .menu .menu-item.active i {
    color: #2E5EEE;
}

main .content .content-body {
    flex-shrink: 1;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-flow: column nowrap;
    height: 100%;
    background: #F6F6F6;
}

main .content .content-body .content-body-header {
    width: 100%;
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
    flex-shrink: 0;
}

main .content .content-body .content-body-header .batch-deletion {
    border-right: 1px solid #ccc;
}

main .content .content-body .content-body-header .operating-area {
    margin-left: 1rem;
}

main .content .content-body .content-body-header .operating-area > div {
    padding: 0 .5rem;
    cursor: pointer;
}

main .content .content-body .content-body-header .operating-area > div.active {
    background: #f3f3f3;
    border-radius: var(--bs-border-radius);
}

main .content .content-body .content-body-body {
    width: 100%;
    height: 100%;
    flex-shrink: 1;
    overflow: auto;
}

main ._table {
    width: 100%;
    padding: 1.5rem;
    color: #666666;
}

main ._table .tr {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 3.5rem;
}

main ._table .tr .td {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

main ._table .tr .td span {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

main ._table .tr .td:nth-child(1) {
    width: 2em;
}

main ._table .tr .td:nth-child(2) {
    width: calc(50% - 4em);
}

main ._table .tr .td:nth-child(3) {
    width: 10%;
    text-align: center;
}

main ._table .tr .td:nth-child(4) {
    width: 20%;
}

main ._table .tr .td:nth-child(5) {
    width: 20%;
}

main ._table .tr .td:nth-child(6) {
    width: 2em;
    cursor: pointer;
}

main .file-grid {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-flow: column nowrap;
    padding: 1.5rem;
    color: #666666;
}

main .file-grid .date {
    width: 100%;
}

main .file-grid .active {
    background: #F9F9F9;
    border-radius: var(--bs-border-radius);
}

main .file-grid .row > div {
    position: relative;
}

main .file-grid .row > div .dropdown {
    display: none;
    position: absolute;
    right: .3rem;
    top: .1rem;
}

main .file-grid .row > div .checkbox {
    display: none;
    position: absolute;
    top: .3rem;
    left: .3rem;
}

main .file-grid .row > div:hover .checkbox, main .file-grid .row > div:hover .dropdown {
    display: flex;
}

main .file-grid2 {
    padding: 1.5rem;
}

main .file-grid2 .file-grid2-left {
    flex-shrink: 0;
    padding: 0 .3rem;
}

main .file-grid2 .file-grid2-left i {
    font-size: 3rem !important;
    line-height: 1em;
}

main .file-grid2 .file-grid2-center {
    flex-shrink: 1;
    width: 100%;
}

main .file-grid2 .file-grid2-right {
    flex-shrink: 0;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-between;
}

main .file-grid2 .file-grid2-right > div {
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

main .nickname .avatar {
    width: 5.5em;
    border-radius: 50%;
}

/* 主程序内容 end */
/* 产品核心优势 start */
.box-hexinyoushi {
    display: grid;
    grid-template-areas: "zhiyoujialian zhenxuanjingpin yuanchuangzuopin"
                        "zhiyoujialian gaoxiaozhizuo gaoxiaozhizuo";
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 2fr 1fr 1fr;
    grid-gap: 1rem;
}

.box-zhiyoujialian {
    display: grid;
    grid-area: zhiyoujialian;
}

.box-zhiyoujialian img {
    height: 100%;
}

.box-zhenxuanjingpin {
    display: grid;
    grid-area: zhenxuanjingpin;
}

.box-yuanchuangzuopin {
    display: grid;
    grid-area: yuanchuangzuopin;
}

.box-gaoxiaozhizuo {
    display: grid;
    grid-area: gaoxiaozhizuo;
}

.video-progress {
    display: none;
    left: .5rem;
    bottom: .5rem;
    z-index: 3;
    color: #060015;
    background-color: rgba(255, 255, 255, .3);
    border-radius: .5rem;
    padding: .1rem .3rem;
    /*cursor: pointer;*/
}

.video-enlarge {
    display: flex;
    right: .5rem;
    bottom: .5rem;
    z-index: 3;
    color: #060015;
    background-color: rgba(255, 255, 255, .3);
    border-radius: .5rem;
    padding: .2rem .3rem;
    cursor: pointer;
}

.video-enlarge img {
    height: 1.4em;
}

/* 产品核心优势 end */

/* 首页 start */
.-tag {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-border-radius: 0.25rem;
    /*--bs-btn-font-size: 1rem;*/
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-border-radius: 0.375rem;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    background-color: #060015;
    border-radius: var(--bs-btn-border-radius);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #909299;
}

.-tag.active {
    background-image: linear-gradient(to right, #FF55D2, #7835FF);
    color: #fff;
}

.form-control:focus {
    background-color: initial;
    color: inherit;
    box-shadow: none;
}

.zhutimiaoshu textarea, .zhutimiaoshu textarea:focus, .zhutimiaoshu textarea::placeholder,
.-huamianmiaoshu textarea, .-huamianmiaoshu textarea:focus, .-huamianmiaoshu textarea::placeholder {
    outline: none;
    color: #909299;
}

/* 首页 end */
.card-img-top {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.-icon-delete, .-icon-download {
    padding: .35rem;
    position: absolute;
    z-index: 3;
    top: .75rem;
    right: .75rem;
    border-radius: var(--bs-border-radius);
    background-color: #060015;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.-icon-download {
    right: 2rem;
}

.-icon-delete img, .-icon-download img {
    width: 1em;
}

.-upload-image, .-upload-video {
    width: 50%;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #060015;
    font-size: 12px;
    border-radius: 15px;
    margin-bottom: 1rem;
    padding: 1rem 0;
    cursor: pointer;
}

.-upload-image > svg, .-upload-video > svg {
    color: #fff;
    height: 1.5em;
    width: 1.5em;
}

.-upload-image > div, .-upload-video > div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.-upload-image-2, .-upload-video-2 {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 2;
    border: 1px dashed #5B5B5B;
}

.-upload-image-2:after, .-upload-video-2:after {
    position: absolute;
    content: '上传视频';
    left: -1px;
    top: -1px;
    color: #fff;
    border-radius: 10px 0 10px 0;
    background-image: linear-gradient(to right, #FF55D2, #7835FF);
    padding: .2rem .4rem;
}

.-upload-image-2:after {
    content: '上传图片';
}

.reset-video {
    color: #fff !important;
    border: 0;
    padding: 0;
}

.reset-video > div {
    background: #1A1528;
    border-radius: 5px;
    color: #fff;
    margin: 1px;
    padding: calc(.375rem - 1px) calc(.75rem - 1px);
}

.-select-template {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #060015;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    border-radius: 1rem;
    overflow: hidden;
}

.-select-template > div {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    color: #fff;
}

.-select-template > div img {
    width: 100%;
    margin-bottom: 1rem;
}

.hidden {
    display: none !important;
}

.-nav {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
    color: #fff;
}

.-nav-item {
    cursor: pointer;
}

.-nav-item.active {
    position: relative;
}

.-nav-item.active:before {
    position: absolute;
    content: '';
    background-image: linear-gradient(to right, rgba(247, 38, 255, 0.5), rgba(248, 49, 255, 0));
    bottom: -8px;
    left: 25%;
    width: 50%;
    height: 5px;
}

.-new-text {
    position: relative;
}

.-new-text:before {
    position: absolute;
    content: 'NEW';
    background-image: linear-gradient(to right, #FF55D2, #7835FF);
    right: -150%;
    top: 0;
    border-radius: 2em;
    font-size: 10px;
    padding: .1rem .3rem;
}

.-hot-text {
    position: relative;
}

.-hot-text:before {
    position: absolute;
    content: 'Hot';
    background-image: linear-gradient(to right, #FF55D2, #7835FF);
    left: calc(100% + 5px);
    top: 0;
    border-radius: 0 7px 0 7px;
    font-size: 10px;
    padding: .1rem .3rem;
}

.-nav-2 {
    font-size: 14px;
    background: #312D3E;
    margin: 0;
    border-radius: 5px;
    padding: .3rem;
}

.-nav-2 .-nav-item {
    width: 50%;
    padding: .3rem 0 .3rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: .5rem;
}

.-nav-2 .-nav-item.active {
    background: #1A1A1A;
}

.-nav-2 .-nav-item.active:before {
    background-image: none;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
}

.-material {
    display: flex;
    width: 100%;
    justify-content: center;
    align-content: center;
}

.-cankaoshipin, .-cankaotu, .-shengchengjieguo, .-jianxi {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    width: 20%;
    min-height: 300px;
    height: 220px;
    flex-shrink: 0;
}

.-jianxi {
    width: 5%;
}

.-shengchengjieguo {
    width: 50%;
}

.-cankaoshipin, .-cankaotu {
    aspect-ratio: 16 / 9;
}

.-cankaoshipin video, .-cankaotu img, .-shengchengjieguo video {
    height: 100%;
    width: auto;
    max-width: inherit;
}

.-cankaoshipin:before, .-cankaotu:before, .-shengchengjieguo:before {
    position: absolute;
    content: '参考图';
    left: 10px;
    top: 10px;
    border-radius: 5px;
    background-color: #000;
    font-size: 10px;
    color: #fff;
    padding: .3rem .5rem;
}

.-cankaoshipin:before {
    content: '参考视频'
}

.-shengchengjieguo:before {
    content: '生成结果';
}

.--max-width-100 video, .--max-width-100 img {
    width: 100%;
}

@media (max-width: 1200px) {
    .container-fluid {
        min-width: 1200px;
    }

    .modal-dialog {
        width: 1000px;
        min-width: 700px;
    }
}

.icon-spin {
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes scale12 {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}

.scale12 {
    animation: scale12 1s linear infinite;
}

.modal-my-task-info {
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
}

.modal-my-task-info video {
    max-width: 100%;
    max-height: 56vh;
}

.modal-my-task-info img {
    max-width: 400px;
    max-height: 22vh;
}

/* 加载中 start*/
.uio-load {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999999;
    color: #fff;
}

.uio-load-cover {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.uio-icon-load {
    width: 3rem;
}

.uio-load-text {
    font-size: .4rem;
    margin-top: .2rem;
}

.uio-icon-load svg {
    width: 100%;
    height: auto;
    animation: icon-rotate 1s linear infinite;
}

@keyframes icon-rotate {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 加载中 end*/
.container {
    min-width: 1200px;
}