/* basic */
body {background: var(--flash);}
.shadow {box-shadow: var(--shadow);}
.ico {color: var(--basic);}
::-webkit-scrollbar-thumb {background: var(--light);}

@media(max-width:640px){
    body {font-size: .18rem;}
}

/* color */
:root {
    --flash:#f9f9fd;
    --light:#ebeaf5;
    --bright:#a49fff;
    --basic:#6c62f9;
    --deep:#4a41c4;
    --shadow: 0 5px 5px rgb(108, 98, 249,.05);
}

@media(max-width:640px){
    :root {
        --shadow: 0 .05rem .05rem rgb(108, 98, 249,.05);
    }
}

/* btn */
.btn {background-color: var(--basic);box-shadow: 0 3px 5px var(--bright);float: left;border-radius: 100px;}
.btn-med {height: 40px;font-size: 14px;}
.btn-empty {background-color: white;color: var(--basic);box-shadow: none;}

@media(max-width:640px){
    .btn {box-shadow: 0 .05rem .05rem var(--bright);}
    .btn-med {height: .5rem;line-height: .5rem;font-size: .18rem;}
    .btn-empty {box-shadow: none;}
}

/* frame */
.admin {width: 100vw;height: 100vh;overflow: hidden;}
.head {height: 80px;background: white;box-shadow: var(--shadow);position: relative;z-index: 1;}
.subject {width: 100%;height: 100%;flex: 1;animation-delay: .3s;overflow: hidden;display: flex;position: relative;}
.clause {width: 100%;height: 100%;flex: 1;overflow: auto;padding: 20px;}
.contant {background: white;box-shadow: var(--shadow);margin: 0 0 20px;border-radius: 5px;}
.item {padding: 20px;}

@media(max-width:640px){
    .head {height: .8rem;}
    .subject {display: block;}
    .clause {padding: .1rem;}
    .contant {margin: 0 0 .1rem;border-radius: .1rem;}
    .item {padding: .2rem;}
}

/* head */
.logo {height: 80px;line-height: 60px;padding: 10px;animation-delay: .5s;text-transform: uppercase;}
.logo i {width: 60px;height: 60px;display: block;background-image: url(../../images/logo11.png);background-size: 85%;margin-right: 10px;}
.logo em {font-weight: normal;}
.head-cont {animation-delay: .3s;padding: 20px;}
.head-cont .ico-menu {color: white;}
.head-info {margin: 0 0 0 20px;}
.head-info span {line-height: 40px;text-transform: capitalize;}
.head-info em {padding: 0 10px;color: var(--basic);}
.head-info a {width: 30px;height: 40px;line-height: 40px;display: block;}
.head-info a:hover {transform: rotate(360deg);}

.mailbox {background: var(--flash);line-height: 40px;padding: 0 10px;border-radius: 100px;display: flex;}
.mailbox i.ico {line-height: 40px;margin: 0 10px;}
.mailbox span {min-width: 20px;height: 20px;line-height: 20px;background: var(--red);color: white;padding: 0 5px;border-radius: 100px;display: inline-block;margin: 10px;text-align: center;}
.mailbox:hover {background: var(--basic);color: white;}
.mailbox:hover i {color: white;}

drop {width: 160px;background: var(--flash);height: 40px;line-height: 40px;border-radius: 100px;}
drop i.ico {line-height: 40px;width: 40px;}
drop-list {top: 40px;}
drop-list a:hover {background-color: var(--basic);}

@media(max-width:640px){
    .logo {height: .8rem;line-height: .7rem;padding: .05rem;font-size: .28rem;}
    .logo i {width: .7rem;height: .7rem;background-size: 75%;margin-right: .05rem;}
    .head-cont {padding: .15rem .1rem;}
    .head-info {margin: 0;padding: .05rem 0;}
    .head-info span {display: none;}
    .head-info a {width: .4rem;height: .4rem;line-height: .4rem;}
    .head-info a.fullscreen,
    .mailbox {display: none;}

    drop {width: 1.6rem;height: .5rem;line-height: .5rem;}
    drop i.ico {line-height: .5rem;width: .5rem;}
    drop-list {top: .5rem;}
}

/* sider */
.sider {width: 240px;overflow: auto;background: repeating-radial-gradient(circle at 110% 80%, transparent 0, var(--000-1) 3px 3px, transparent 5px 10px) var(--basic);}
.sider::-webkit-scrollbar {width: 0;}
.sider h6 {color: var(--deep);text-transform: uppercase;padding: 10px 15px;}
.sider a {display: block;height: 50px;line-height: 50px;color: white;text-transform: capitalize;}
.sider a i {color: white;margin: 0 5px;}
.sider fold-title {padding: 0;border: 0;display: block;}
.sider fold-title a horn {background: var(--red);position: static;display: inline-block;padding: 10px;border-radius: 100px;line-height: 0;margin: 0 5px;}
.sider fold-cont {background: var(--deep);display: none;padding: 0;}
.sider fold-cont a {padding-left: 50px;}
.sider a:hover {background: var(--bright);}
.sider fold-group.active fold-title a {background: var(--flash);}
.sider fold-group.active fold-title a,
.sider fold-group.active fold-title .ico {color: var(--333);}
.sider-search {position: relative;margin: 10px;overflow: hidden;}
.sider-search input {height: 40px;padding: 0 40px 0 20px;border-radius: 100px;background: var(--deep);color: white;border: 0;}
.sider-search button {width: 40px;height: 40px;position: absolute;top: 0;right: 0;}
.sider-toggle {width: 40px;margin: 0 20px;padding: 0;}

@media(max-width:640px){
    .sider {width: 100%;height: 100%;position: absolute;left: 0;top: 0;display: none;z-index: 3;}
    .sider h6 {padding: .1rem .2rem;}
    .sider a {height: .7rem;line-height: .7rem;}
    .sider a i {margin: 0 .1rem;}
    .sider fold-title a horn {padding: .1rem;margin: 0 .1rem;}
    .sider fold-cont a {padding-left: .7rem;}
    .sider-search {margin: .15rem;}
    .sider-search input {height: .7rem;padding: 0 .7rem 0 .3rem;}
    .sider-search button {width: .7rem;height: .7rem;}
    .sider-toggle {width: .5rem;margin: 0 .1rem;}
    .sider-toggle i {font-size: .32rem;}
}

/* title */
.title {height: 50px;display: flex;align-items: center;}
.title u {flex: 1;}
.title .ico {margin: inherit;padding: 0 10px;}
.title cite {font-weight: normal;color: var(--ccc);padding: 0 20px;}
.title .return {border-right: 1px var(--light) solid;margin-right: 20px;}
.title a {margin-left: 5px;}

.contant .title {border-bottom: 1px var(--light) solid;padding: 0 20px;}

@media(max-width:640px){
    .title {height: .7rem;}
    .title .ico {padding: 0 .1rem;}
    .title cite {padding: 0 .2rem;}
    .title .return {margin-right: .2rem;}
    .contant .title {padding: 0 .2rem;}
    .title a {margin-left: .1rem;}
}

/* page */
page {padding:10px 0;}
page .ico,
page * {height: 40px;line-height: 40px;}
page a,
page button {background-color: var(--flash);width: 40px;}
page button:hover,
page a:hover,
page a.active {background-color: var(--basic);box-shadow: 0 3px 5px var(--bright);}

@media(max-width:640px){
    page {padding: .1rem 0;}
    page a,
    page .ico,
    page button {width: .6rem;height: .6rem;line-height: .6rem;font-size: .22rem;}
    page .ico {font-size: .3rem;}
    page input {height: .6rem;border: 1px var(--light) solid;}
    page a:hover,
    page a.active {box-shadow: 0 .05rem .05rem var(--bright);}

}

/* statistics */
.statistics {display: flex;padding: 10px;}
.statistics li {width: 100%;text-align: center;border-right: 1px var(--light) solid;}
.statistics li:last-child {border: 0;}
.statistics li span {padding: 0 0 10px;display: block;text-transform: capitalize;}
.statistics li h3 {color: var(--basic);}
.statistics li em {font-weight: normal;font-size: 12px;vertical-align: top;text-transform: uppercase;padding: 0 0 0 5px;opacity: .5;}
.statistics li a {margin: 10px auto 0;float: none;width: 60%;}

@media(max-width:640px){
    .statistics {padding: .1rem;}
    .statistics li span {padding: 0 0 .1rem;}
    .statistics li em {font-size: .16rem;padding: 0 0 0 .05rem;}
    .statistics li a {width: 90%;margin: .1rem auto 0;}
}

/* article */
.article {padding:10px;line-height: 200%;overflow: hidden;}
.article p {line-height: 200%;padding: 5px 0;}
.article ul {padding: 5px 0;}
.article li {list-style:inside;}
.article .btn {margin: 5px;}

@media(max-width:640px){
    .article {padding:.1rem;}
    .article p {padding: .05rem 0;}
    .article ul {padding: .05rem 0;}
    .article .btn {margin: .05rem;}
}

/* table */
.table {}
.table table td,
.table table th {background: none;}
.table table thead tr,
.table table tfoot tr {background: var(--flash);}
.table table thead td,
.table table thead th {border-bottom: 1px var(--basic) solid;}
.table table tbody tr:nth-child(2n),
.table table tbody tr:hover {background-color: var(--flash);}
.table table td input {height: 30px;width: auto;border:1px var(--light) solid;text-align: center;}
.table table td .btn {width: auto;display: inline-block;padding: 0 20px;height: 30px;line-height: 28px;float: none;font-size: 14px;}
.table table td label {padding: 0 5px;}
.table table tfoot tr:first-child td,
.table table tfoot tr:first-child th {border-top-color: var(--basic);}

@media(max-width:640px){
    .table table {min-width: 200vw;overflow: auto;}
    .table table td input {height: .4rem;}
    .table table td .btn {padding: 0 .2rem;height: .4rem;line-height: .38rem;font-size: .16rem;}
    .table table td label {padding: 0 .05rem;}
}

/* form */
input, select, textarea {border: 1px var(--light) solid;}
input, .form .input, .form select, .form textarea {background-color: transparent;}
input:not([readonly]):focus,
textarea:not([readonly]):focus {box-shadow: var(--shadow);}
o {color: var(--basic);}
input[type="file"]::-webkit-file-upload-button,
input[type="color"]::-webkit-color-swatch {border-radius: 100px;}

.form {padding: 10px;overflow: hidden;}
.form li {margin: 0;}
.form li input {background: none;}
.form li input[readonly] {background: var(--flash);}
.form li .code {font-size: 14px;}
.form .btn.ico,
.form .btn .ico {color: white;}
.form .btn.code {border-radius: 100px;}
.upload-group,
.upload-add {background-color: var(--flash);color: var(--light);}

.control li {float: left;width: 20%;display: flex;}
.control li input,
.control li .input,
.control li .select {width: 100%;flex: 1;}
.control span,
.control input,
.control .input,
.control .input i,
.control .select,
.control .select::after,
.control select {height: 40px;}
.control li,
.control span,
.control .select::after,
.control .input i {line-height: 40px;}
.control .input i {width: 40px;}
.control li span {width: auto !important;}

@media(max-width:640px){
    input, select, textarea {border: 0;}
    input:not([readonly]):focus,
    textarea:not([readonly]):focus {box-shadow: 0 0 0;}
    .form li {border-bottom-color: var(--light);}
    .form li input[readonly] {background: none;}
    .form li .code {font-size: .18rem;}

    .control {padding:.1rem .1rem 0;}
    .control li {width: 100%;}
    .control span,
    .control input,
    .control .input,
    .control .input i,
    .control .select,
    .control .select::after,
    .control select {height: .6rem;}
    .control span,
    .control .select::after,
    .control .input i {line-height: .6rem;}
    .control .input i {width: .5rem;}
    .control li span {width: 1.4rem !important;}
}

/* tab */
tab-list {border-bottom: 1px var(--light) solid;}
tab-list li a {line-height: 50px;text-transform: capitalize;font-size: 16px;border-bottom: 3px white solid;}
tab-list li.active a {border-color: var(--basic);color: var(--basic);}

@media(max-width:640px){
    .tab-list li a {line-height: .6rem;font-size: .2rem;border-bottom: .03rem white solid;}
}

/* list */
.list li {padding: 10px;border-bottom-color: var(--light);}
.list li:hover {background-color: var(--flash);}
.list li em {width: 140px;height: 140px;background-size: cover;margin: 0 20px 0 0;border-radius: 100%;display: block;transition-duration: .3s;}
.list li em:hover {border-radius: 0;}
.list-cont {width: 100%;flex: 1;}
.list-cont h6 {height: 30px;line-height: 30px;overflow: hidden;}
.list-cont h6 a:hover {color: var(--basic);}
.list-cont p {height: 75px;line-height: 25px;overflow: hidden;}
.list-info {padding: 10px 0;}
.list-info span {padding: 0 10px 0 0;}
.list-info i {margin: 0 10px 0 0;font-size: 22px;color: var(--333);}
.list-control {margin: 0 0 0 20px;display: flex;}
.list-control a {margin: 5px;line-height: 40px;}

@media(max-width:640px){
    .list li {padding: .1rem;border-bottom: 1px var(--light) solid;}
    .list li em {width: 1.4rem;height: 1.4rem;margin: 0 .2rem 0 0;float: left;}
    .list-cont {width: calc(100% - 1.4rem - .2rem);float: right;}
    .list-cont h6 {height: .4rem;line-height: .4rem;}
    .list-cont p {height: .9rem;line-height: .3rem;}
    .list-info {padding: .1rem 0;}
    .list-info span {padding: 0 .1rem 0 0;}
    .list-info i {margin: 0 .1rem 0 0;font-size: .26rem;}
    .list-control {margin: 0;padding: 0 0 0 .1rem;display: block;}
    .list-control a {width: 1rem;margin: .05rem auto;display: block;text-align: center;line-height: .5rem;}
}

/* pop */
pop-title {border-bottom-color: var(--light);}
pop-cont {padding: 20px 0;}

@media(max-width:640px){
    pop-cont {padding: .2rem 0;}
}

/* login */
.login {width: 100%;height: 100%;background: repeating-radial-gradient(circle at 50% 50%, transparent 0, var(--000-1) 3px 3px, transparent 5px 10px) var(--basic);}
.login-main {background-color: white;padding: 30px;animation-duration: .5s;position: relative;border-radius: 10px;}
.login-main cite {position: absolute;right: 0;top: -50px;font-size: 70px;text-transform: uppercase;color: var(--fff-2);line-height: 100%;}
.login-title {padding: 10px 0 20px;overflow: hidden;}
.login-title h1 {margin: auto;transform: scale(1.3);}
.login-cont {display: flex;align-items: center;}
.login-form {width: 500px;}
.login-form li {position: relative;display: flex;}
.login-form li:last-child {border-bottom: 0;}
.login-form li i {width: 50px;position: absolute;line-height: 50px;}
.login-form li input {padding: 0 10px 0 50px;flex: 1;}
.login-form li .btn {width: 100%;margin: 20px 5px 10px;font-weight: bold;}
.login-info {padding: 0 15px;overflow: hidden;}
.login-info a:hover {color: var(--basic);}
.login-other {overflow: hidden;}
.login-other a {padding: 5px;display: block;float: left;border-radius: 5px;}
.login-other a:hover {background-color: var(--light);}
.login-tip {line-height: 40px;color: white;text-align: center;clear: both;display: none;margin: 5px;border-radius: 3px;}
.login-status {width: 360px;}
.login-status a:hover {color: var(--basic);}

@media(max-width:640px){
    .login-main {padding: .1rem;border-radius: .1rem;width: 95%;}
    .login-main cite {top: -.5rem;font-size: .7rem;}
    .login-title {padding: .1rem 0;}
    .login-cont {display: block;}
    .login-form {width: 100%;}
    .login-form li i {width: .7rem;line-height: .7rem;}
    .login-form li input {padding: 0 .1rem 0 .7rem;}
    .login-form li .btn {margin: .2rem 0 0;font-size: .24rem;}
    .login-info {padding: 0 .15rem;}
    .login-other a {padding: .1rem;border-radius: .1rem;}
    .login-tip {line-height: .5rem;margin: 0;}
    .login-status {width: 100%;border-top-width: 1px;margin-top: .2rem;}
}

/* reminder */
reminder {background-color: var(--flash);border-color: var(--light);}