/* basic */
body,
load {background-color: var(--111);}
body,a {color: var(--999);}
b {color: var(--orange);}
h1,h2,h3,h4,h5,h6 {color: white;}
empty.default {color: var(--666);font-size: 14px;}

/* color */
:root {
    --color: #DA3BFF;
    --lg: linear-gradient(120deg,#DA3BFF,#5F00AF);
}

/* ico */
.ico- {background-image: url(../images/ico/)}

/* frame */
.group {}
.contant {}
.item {}
.clause {}

/* btn */
.btn {border-radius: 100px;background-image: var(--lg);}
.btn-file input {width: 100%;position: absolute;top: 0;left: 0;opacity: 0;}

/* head */
.head {position: relative;z-index: 3;background-color: var(--222);}
.head-cont {padding: 5px 10px;position: absolute;right: 0;top: 0;}
.head-cont a.btn {width: 100px;height: 40px;margin: 5px;}
.head-cont .ico {color: var(--color);font-size: 32px;}
.head-cont .avatar {width: 50px;height: 50px;}
.head-cont .belance {white-space: nowrap;color: white;padding: 0 10px;}
.head-cont .belance b {padding-left: 10px;}

.logo {width: 50px;height: 50px;background-image: url(../images/ico.svg);margin: 5px;position: absolute;left: 5px;;top: 0;}

/* menu */
menu {flex: 1;}
menu x {color: white;}
menu-cont {}
menu-cont li {padding: 0 20px;}
menu-cont li a {color: white;font-size: 16px;height: 60px;line-height: 60px;}
menu-cont li.active a {border-bottom: 3px var(--color) solid;}

/*home*/
.home {height: calc(100vh - 60px);}
.home-cont {position: absolute;left: 0;bottom: 0;width: 100%;text-align: center;overflow: hidden;}
.home-list {padding: 30px;max-width: 2560px;margin: auto;animation-delay: .5s;}
.home-list img {border-radius: 10px;}
.home-title {display: inline-block;margin-bottom: 100px;animation-delay: 1s;}
.home-title h3 {font-size: 90px;display: flex;align-items: center;justify-content: center;margin: -70px 0 -30px;letter-spacing: 5px;}
.home-title h3 span {color: var(--color);background-image: url(../images/titile.svg);width: 446px;height: 240px;display: flex;align-items: center;justify-content: center;font-size: 70px;line-height: 0;margin-left: 30px;}
.home-title h5 {text-align: left;font-size: 30px;letter-spacing: 5px;}
.home-title a {height: 60px;padding: 0 50px;font-size: 18px;}

/*hop*/
hop {}
hop-cont {top: calc(100% + 5px);z-index: 3;}
hop-cont a {background-color: var(--333);border: 0;}
hop-cont a:hover {background-color: var(--666);}

/* crumb */
crumb {height: 50px;width: auto;margin-right: 50px;}
crumb li {}
crumb li i {color: var(--color);}
crumb li a {}

/* subject */
.subject {padding: 0 20px;}
.subject .btn:hover {transform: translateY(0);}
.subject-nav {height: 60px;display: flex;align-items: center;}
.subject-nav-cont {display: flex;align-items: center;}
.subject-nav-cont input {background-color: var(--222);width: 300px;border-radius: 100px;padding: 0 20px;height: 40px;color: white;}
.subject-nav-cont a {white-space: nowrap;height: 40px;margin-left: 5px;}

.subject-main {display: grid;grid-template-columns: repeat(8,1fr);grid-gap: 10px;grid-template-rows: 30% 30% auto 12%;height: calc(100vh - 60px - 60px);padding-bottom: 20px;}
.subject-cont {background-color: var(--222);border-radius: 5px;border: 1px var(--333) solid;padding: 0 10px 10px;}
.subject-cont .ico-add {color: var(--666);width: 100%;height: 100%;display: flex;align-items: center;}
.subject-cont .ico-add:hover {color: white;}
.subject-cont .swiper {padding-top: 40px;margin-top: -40px;}
.subject-cont .swiper-slide {display: flex;flex-direction: column;border-radius: 10px;border: 2px var(--333) solid;padding: 0 10px;}
.subject-cont .swiper-pagination {top: 10px;height: 20px;}

.subject-title {height: 40px;display: flex;align-items: center;}
.subject-title i.ico {color: var(--color);margin: 0 5px 0 0;}
.subject-title h6 {font-weight: normal;}
.subject-title .btn {height: 24px;padding: 0 10px;margin: 0 2px;border-width: 1px;color: var(--999);position: relative;z-index: 2;}
.subject-title .btn:hover {transform: translateY(0);}
.subject-title a:hover {color: white;}

.subject-view {grid-column: span 3;grid-row: span 2;}
.subject-view-cont {overflow: hidden;height: calc(100% - 40px);border-radius: 5px;}

.subject-role {grid-column: span 2;}
.subject-role .subject-list {grid-template-columns: repeat(4,1fr);}

.subject-scene {grid-column: span 2;}

.subject-prop .subject-list {grid-template-columns: repeat(2,1fr);}

.subject-plot {grid-column: span 5;}
.subject-plot-cont {display: grid;grid-template-columns: repeat(3,1fr);height: calc(100% - 40px);}
.subject-plot-cont textarea {flex: 1;background-color: var(--111);border: 1px var(--333) solid;border-radius: 10px;min-height: inherit;grid-column: span 2;color: var(--999);}
.subject-plot-list {overflow: auto;height: 100%;}
.subject-plot-list p {padding-bottom: 10px;}
.subject-plot-list a {padding: 5px 10px;background-color: var(--333);display: inline-block;border-radius: 5px;margin: 2px 0;}
/*
.subject-team-list {height: calc(100% - 40px);overflow: auto;}
.subject-team-list li {display: flex;align-items: center;padding: 8px;}
.subject-team-list li:hover {background-color: var(--333);}
.subject-team-list li a:hover {color: white;}
*/
.subject-storyboard {grid-column: span 8;}
.subject-storyboard-cont {height: calc(100% - 50px);border-radius: 5px;overflow: hidden;position: relative;}
.subject-storyboard-cont img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

.subject-episode {grid-column: span 8;}
.subject-episode-cont {display: grid;grid-template-columns: 1fr;height: 100%;}
.subject-episode-cont * {display: flex;justify-content: center;}
.subject-episode-cont h6 {color: var(--color);align-items: flex-end;}
.subject-episode-cont span {color: white;align-items: flex-start;}

.subject-list {height: calc(100% - 40px);overflow: auto;display: grid;grid-gap: 0 10px;grid-template-columns: repeat(3,1fr);}
.subject-list li {text-align: center;min-width: 0;position: relative;}
.subject-list em {display: flex;height: 70px;border-radius: 10px;overflow: hidden;border: 1px var(--333) solid;}
.subject-list span {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: block;padding: 5px 0;}

.subject-group {display: grid;grid-template-columns: repeat(8,1fr);grid-gap: 20px;}
@media(max-width:2800px){.subject-group {grid-template-columns: repeat(7,1fr);}}
@media(max-width:2400px){.subject-group {grid-template-columns: repeat(6,1fr);}}
@media(max-width:2000px){.subject-group {grid-template-columns: repeat(5,1fr);}}
@media(max-width:1500px){.subject-group {grid-template-columns: repeat(4,1fr);}}

.subject-blcok {background-color: var(--222);border: 1px var(--333) solid;border-radius: 10px;position: relative;min-width: 0;}
.subject-blcok .subject-title {position: absolute;top: 0;left: 0;width: 100%;padding: 0 10px;}
.subject-blcok .subject-title .btn {color: white;}
.subject-blcok em {height: 170px;width: 100%;display: block;border-radius: 10px 10px 0 0;overflow: hidden;}
.subject-info {padding: 10px;}
.subject-info h5 {font-weight: normal;}
.subject-info p {padding: 5px 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.subject-info ul {display: flex;background-color: var(--111);padding: 5px 0;border-radius: 5px;}
.subject-info ul li {flex: 1;text-align: center;}
.subject-info ul li span {display: block;}
.subject-info ul li t {color: white;}
.subject-info .btn {width: 100%;}
.subject-author {padding: 10px 0;}

.subject-manage {display: flex;height: calc(100vh - 60px - 60px);padding-bottom: 20px;}
.subject-sider {width: 420px;margin-right: 10px;}
.subject-sider .subject-list {height: auto;}
.subject-sider .subject-list em {height: 100px;}
.subject-sider-title {display: flex;align-items: center;padding: 10px 0;}
.subject-sider-title h5 {font-weight: normal;}
.subject-content {flex: 1;min-width: 0;}
.subject-sider .subject-cont,
.subject-content .subject-cont {height: 100%;padding: 10px;overflow: auto;}
.subject-content .subject-cont {display: flex;flex-direction: column;}
.subject-content .table {flex: 1;overflow: auto;}
.subject-control {height: 50px;background-color: var(--111);padding: 5px;}
.subject-control a {height: 30px;margin: 5px 3px;}

/* clue */
[clue]:hover::after {background-color: var(--666);}

/* pop */
pop {}
pop .flex > *:last-child {margin-left: 20px;}
pop .title {padding: 10px 0 20px;}
pop-main {}
pop-main > *:last-child {border-radius: 0 0 10px 10px;}
pop-title {background-color: var(--333);border: 0;border-radius: 10px 10px 0 0;}
pop-title h3 {font-size: 16px;}
pop-title a {}
pop-title a:hover {color: white;}
pop-cont {background-color: var(--222);}
pop-solve {overflow: hidden;}

.pop-wide pop-main {max-width: 1200px;}
.pop-wide .form {width: 700px;}

.pop-petty pop-main {max-width: 480px;}

.pop-add-role-timbre {display: none;}

.pop-additional {flex: 1;}
.pop-additional-tool {margin-bottom: 20px;}

/* form */
textarea {background-color: var(--333);color: white;border-radius: 10px;}

.form {}
.form li {}
.form li choice,
.form li input,
.form li select,
.form li textarea {background-color: var(--333);color: white;border-radius: 10px;}
.form li input::placeholder,
.form li textarea::placeholder {color: var(--666);}
.form li .code {}
.form li .btn {border-radius: 10px;}
.form li .avatar {position: relative;width: 70px;height: 70px;}
.form li .avatar input {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;}

.form .upload {}
.form .upload-add,
.form .upload-group {background-color: var(--333);color: var(--666);border-radius: 10px;overflow: hidden;font-size: 24px;}

scaler .btn {background: none;border: 2px var(--333) solid;color: var(--666);font-size: 20px;}
scaler .btn:hover {color: white;transform: translateY(0);}

choice-list {background-color: var(--333);border-radius: 10px;overflow: hidden;}
choice-list a:not(:last-child) {border: 0;}
choice-list a:hover {background-color: var(--666);}

/* page */
page {margin: 20px 0;}
page a {background-color: var(--333);}
page a.active,
page a:hover {background-color: var(--666);}
page input {border-color: var(--333);color: white;}
page span {font-size: 14px;}

/* notice */
notice {}
notice marquee {}
notice .ico {}

/* tab */
tab {}
tab-list {margin-bottom: 20px;}
tab-list li {margin: 0 5px 5px 0;}
tab-list li a {height: 50px;display: flex;align-items: center;background-color: var(--333);border-radius: 100px;color: white;font-weight: normal;}
tab-list li.active {}
tab-list li.active a {background-image: var(--lg);}
tab-cont {}
tab-group {}

/* table */
.table {}
.table table thead th, .table table thead td {font-weight: normal;color: white;background-color: var(--333);}
.table table th, .table table td {background-color: var(--222);}
.table table tbody tr:hover {background-color: transparent;}
.table table tbody tr:nth-child(2n) th, .table table tbody tr:nth-child(2n) td {background-color: var(--333);}
.table table thead {white-space: nowrap;}
.table table td {}
.table table td em {width: 40px;height: 40px;display: block;margin: auto;border-radius: 5px;overflow: hidden;}
.table table td a.ico:hover {color: white;}
.table table th .btn,
.table table td .btn {height: 26px;margin: 2px 0;padding: 0 10px;font-weight: normal;border-width: 1px;color: var(--999);white-space: nowrap;}
.table table th .btn:hover,
.table table td .btn:hover {color: white;}
.table table td .checkbox {color: var(--999);}

/* cpt */
.cpt {padding: 5px;background-color: var(--111);border-radius: 5px;margin: 5px;}
.cpt-img,
.cpt-control {display: flex;justify-content: center;}
.cpt-img aside {width: 100px;height: 100px;display: block;position: relative;border-radius: 10px;overflow: hidden;margin: 3px;}
.cpt-control a {margin: 3px !important;overflow: hidden;}
.cpt-control a input {position: absolute;top: 0;left: 0;opacity: 0;}

/* sound */
.sound {display: grid;grid-template-columns: repeat(4,1fr);grid-gap: 10px;}
.sound li {position: relative;}
.sound li a {padding: 10px 40px 10px 10px;border: 2px var(--333) solid;border-radius: 10px;cursor: pointer;display: grid;grid-template-columns: 1fr;height: 62px;}
.sound li a.active {border-color: var(--color);}
.sound li a cite,
.sound li a span {grid-column: span 3;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.sound li a span {color: white;}

.sound-control {position: absolute;right: 0;top: 0;bottom: 0;width: 40px;display: flex;flex-direction: column;padding: 5px 0;}
.sound li i:hover {color: white;}

/* title */
.title {text-align: left;padding: 30px 0;}
.title h3 {}
.title em {}
.title span {}

/* chronicle */
.chronicle {display: grid;grid-template-columns: repeat(2,1fr);grid-gap: 10px;}
.chronicle li {height: 200px;position: relative;}
.chronicle li img,
.chronicle li video {border-radius: 10px;}
.chronicle li .subject-title {position: absolute;top: 0;left: 0;width: 100%;padding: 0 10px;background-image: linear-gradient(var(--000-5),transparent);border-radius: 10px 10px 0 0;}
.chronicle li .subject-title .btn {color: white;}
.chronicle li aside {position: absolute;bottom: 0;left: 0;padding: 5px 20px;background-color: var(--000-9);border-radius: 0 20px 0 10px;}
.chronicle li aside p {display: none;}
.chronicle li aside:hover {width: 100%;height: calc(100% - 40px); top: 40px;border-radius: 10px;overflow: auto;padding: 10px;}
.chronicle li aside:hover span {color: white;}
.chronicle li aside:hover p {display: block;}
.chronicle li.active .subject-title h6::after {content: '主演';}

/* recharge */
.recharge {}
.recharge-select {display: grid;grid-template-columns: repeat(4,1fr);grid-gap: 10px;}
.recharge-select a {text-align: center;border: 2px var(--333) solid;border-radius: 10px;padding: 10px;}
.recharge-select a span,
.recharge-select a b {line-height: normal;display: block;}
.recharge-select a i {font-size: 32px;}
.recharge-select a i.ico-alipay {color: var(--blue);}
.recharge-select a i.ico-wechat {color: var(--green);}
.recharge-select a:hover {background-color: var(--333);}
.recharge-select a.active {border-color: var(--color);}

/* reminder */
reminder {background-color: transparent;border-color: var(--333);}

/* enroll */
.enroll {display: flex;}
.enroll .form {flex: 1;}
.enroll .form li {position: relative;}
.enroll .form li i {position: absolute;left: 0;top: 0;z-index: 1;margin: auto 10px;height: 60px;width: 40px;display: flex;align-items: center;}
.enroll .form .btn-submit {width: 100%;margin-top: 20px;}
.enroll-switch {width: 240px;}
.enroll-switch .btn {padding: 0 30px;}
.enroll-other {padding: 20px 5px 0;}
.enroll-other a {color: white;}
.enroll-other a:hover {color: var(--color);}

/* tone */
.tone {display: grid;grid-template-columns: repeat(5,1fr);grid-gap: 10px;}
.tone li {min-width: 0;}
.tone li a {border: 2px var(--333) solid;padding: 5px;border-radius: 10px;display: block;}
.tone li a em {height: 80px;display: block;overflow: hidden;border-radius: 5px;margin-bottom: 5px;}
.tone li a span {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: block;text-align: center;}
.tone li a.active {border-color: var(--color);}

/* sider */
.sider {width: 220px;margin-right: 20px;}

/* user */
.user {padding: 20px;}

/* foot */
.foot {}
.foot-cont {}
.foot-copy {}

/* list */
.list {}
.list li {}
.list li a {}
.list li i {}

/* step */
step {}
step ul {}
step ul li {}
step ul li i {}
step ul li span {}
step.column {}