.subject {display: flex;height: 100%;}

.sider {width: 260px;background: var(--f7);height: 100%;display: flex;flex-direction: column;}
.sider x {position: absolute;top: 0;display: none;cursor: pointer;background: var(--sapphire);color: var(--fff);}

.logo {display: flex;align-items: center;justify-content: center;padding: 20px 0;}
.logo em {width: 20%;margin-right: 10px;}
.logo span {font-family: 'montserrat' !important;text-transform: uppercase;font-size: 34px;font-weight: 500;}

dd {font-size: 12px;color: var(--999);font-weight: normal;}

fold {height: 100%;flex: 1;overflow: auto;}
fold::-webkit-scrollbar {width: 5px;}
fold::-webkit-scrollbar-thumb {background: var(--eee);}
fold-cont a {display: block;text-transform: capitalize;line-height: 35px;padding: 0 20px;}
fold-cont a:hover,
fold-cont a.active {background-color: var(--eee);}
fold-cont a dd {display: inline-block;padding-left: 10px;}

.contant {flex: 1;min-width: 0;height: 100%;overflow: auto;padding: 30px;}
.contant h2 {padding: 20px 0;font-size: 40px;font-weight: normal;display: flex;align-items: center;}
.contant h2 i {font-size: 48px;float: left;margin: 0 10px 0 0;}

.absolute-logic {width: 300px;display: grid;grid-template-columns: repeat(3,1fr);grid-gap: 10px;}
.absolute-logic a {height: 100px;background-color: var(--f7);display: flex;align-items: center;justify-content: center;font-size: 40px;color: var(--ddd);}

.wide-logic a {display: block;background-color: var(--f7);padding: 10px;margin: 10px 0;}

.cont iframe {width: 100%;border: 1px var(--eee) solid;margin: 5px 0;}
.cont xmp {color: var(--tomato);white-space: pre-wrap;word-break: break-all;cursor: pointer;background-color: var(--f7);padding: 0 20px 20px;margin: 5px 0;}
.cont h3 {padding: 20px 0;margin-bottom: 10px;border-bottom-width: 1px;}
.cont h5 {padding: 10px 0;}
.cont p {padding: 10px 0;}
.cont p a,
.cont p span {color: var(--sapphire);background-color: var(--f7);padding: 5px 10px;border-radius: 2px;margin: 0 5px;}
.cont p span.warning {background-color: var(--red);color: white;}
.cont p a:hover {background-color: var(--sapphire);color: white;}
.cont .btn {width: 200px;margin: 10px 0;font-weight: bold;}
.cont .table table th,
.cont .table table td {padding: 0;}
.cont .table table tbody tr:hover {background: none;}
.cont .table table xmp {padding: 0;line-height: 50px;}



@media(max-width:640px){
    .sider {width: 60%;z-index: 3;transform: translateX(-100%);position: fixed;}
    .sider x {right: -.6rem;width: .6rem;height: .6rem;line-height: .6rem;display: block;}
    .sider.active {transform: translateX(0);}

    .logo {padding: .2rem 0;}
    .logo em {margin-right: .1rem;}
    .logo span {font-size: .42rem;}

    fold {height: calc(100% - 3rem);overflow: auto;}
    fold a {padding: 0 .1rem;height: .5rem;line-height: .5rem;font-size: .2rem;}

    .contant {padding: .2rem;}
    .contant h2 {padding: .2rem 0;font-size: .5rem;}
    .contant h2 i {font-size: .48rem;margin: 0 .1rem 0 0;}

    .absolute-logic {width: 3rem;grid-gap: .1rem;}
    .absolute-logic a {height: 1rem;font-size: .4rem;}

    .wide-logic a {padding: .1rem;margin: .1rem 0;}

    .cont iframe {margin: .1rem 0;}
    .cont xmp {padding: 0 .2rem .25rem;margin: .1rem 0;border-radius: .1rem;}
    .cont h3 {padding: .1rem 0;}
    .cont h5,
    .cont p {padding: .1rem 0;}
    .cont p a,
    .cont p span {padding: .05rem .1rem;margin: 0 .05rem;}
    .cont .btn {width:2.5rem;border-radius: .05rem;margin: .1rem 0;}
    .cont table xmp {line-height: .7rem;}
}