[[mOdUlE cSs]]
:root {
    --all-width: calc(792.8px - 12rem);
    --all-height: calc(var(--all-width) * 0.24);
    --all-border: 0.3rem;
}
@media (max-width: 991px) {
    :root {
        --all-width: calc(80vw - 12rem);
    }
}
@media (max-width: 767px) {
    :root {
        --all-width: calc(100vw - 6rem);
    }
}
.cs-container {
    width: var(--all-width);
    height: var(--all-height);
    padding-bottom: calc(var(--all-border) * 2);
    margin: 0 auto;
    position: relative;
    top: 0;
    left: 0;
/* background-color:rgba(0,255,255,0.2); */
}
.left-content {
    width: var(--all-height);
    height: var(--all-height);
    border: solid var(--all-border) #000;
    border-radius: calc(var(--all-border) * 3);
    overflow: hidden;
/* background-color:rgba(255,0,255,0.2); */
}
.right-content {
    width: calc(var(--all-width) - (var(--all-height) * 5/4) - (var(--all-border) * 4));
    height: var(--all-height);
    border: solid var(--all-border) #000;
    border-radius: calc(var(--all-border) * 3);
    overflow: hidden;
    position: absolute;
    top: 0;
    left: calc((var(--all-height) * 5/4) + (var(--all-border) * 2));
}
.right-content::before {
    content: '';
    width: calc(var(--all-width) - (var(--all-height) * 5/4) - (var(--all-border) * 6));
    height: var(--all-border);
    background-color: #000;
    position: absolute;
    top: calc(var(--all-height) / 3);
    left: var(--all-border);
/* opacity:0.2; */
}
.right-content::after {
    content: '';
    width: var(--all-border);
    height: calc((var(--all-height) * 2/3) - (var(--all-border) * 3));
    background-color: #000;
    position: absolute;
    left: calc((var(--all-height) * 2/3) - var(--all-border));
    bottom: var(--all-border);
/* opacity:0.2; */
}
.cs-logo {
    width: var(--all-height);
    height: var(--all-height);
    background-image: url(//images.weserv.nl/?url=https://scpsandboxcn.wikidot.com/local--files/collab:mayca/csc边框);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0 calc(var(--all-height) / 40);
}
.cs-logo > div {
    width: var(--all-height);
    height: var(--all-height);
    background-size: contain;
    background-repeat: no-repeat;
}
.cs-logo-cognito-hazard {
    background-image: url(https://scpsandboxcn.wdfiles.com/local--files/collab:mayca/csc认知危害);
    background-position: 0 calc(var(--all-height) / 17);
}
.cs-logo-memetics-division-hazard {
    background-image: url(https://scpsandboxcn.wdfiles.com/local--files/collab:mayca/csc模因危害);
    background-position: 0 calc(var(--all-height) / 30);
}
.cs-logo-antimemetics-division-hazard {
    background-image: url(https://scpsandboxcn.wikidot.com/local--files/collab:mayca/csc逆模因危害);
    background-position: 0 calc(var(--all-height) / 20);
    opacity: 0;
    transition: opacity 1s;
}
.cs-logo-antimemetics-division-hazard:hover {
    opacity: 1;
}
.cs-logo-biology-hazard {
    background-image: url(https://scpsandboxcn.wikidot.com/local--files/collab:mayca/csc生物危害);
    background-position: 0 0;
}
.cs-number {
    width: calc(var(--all-width) - (var(--all-height) * 5/4) - (var(--all-border) * 4));
    height: calc((var(--all-height) / 3) - (var(--all-height) / 60));
    color: #000;
    font-size: calc(var(--all-height) / 4);
    font-weight: 600;
    text-align: center;
    padding-top: calc(var(--all-height) / 60);
/* background-color:rgba(255,0,0,0.2); */
}
.right-logo {
    width: calc((var(--all-height) * 2/3) - var(--all-border));
    height: calc((var(--all-height) * 2/3) - var(--all-border));
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0 0;
    margin-top: var(--all-border);
/* background-color:rgba(0,255,0,0.2); */
}
.right-logo:hover ~ .right-text {
    opacity: 0;
    transition: opacity 0.5s, top 0.5s;
    top: calc((var(--all-height) / 3) - (var(--all-height) / 15));
}
.right-logo-safe {
    background-image: url(https://scpsandboxcn.wikidot.com/local--files/collab:mayca/cscsafe);
}
.right-logo-euclid {
    background-image: url(https://scpsandboxcn.wikidot.com/local--files/collab:mayca/csceuclid);
}
.right-logo-keter {
    background-image: url(https://scpsandboxcn.wikidot.com/local--files/collab:mayca/cscketer);
}
.right-logo-双子神 {
    background-image: url(https://scpsandboxcn.wikidot.com/local--files/collab:mayca/csc双子神);
}
.right-logo-无效化 {
    background-image: url(https://scpsandboxcn.wikidot.com/local--files/collab:mayca/csc无效化);
}
.right-logo-已解明 {
    background-image: url(https://scpsandboxcn.wikidot.com/local--files/collab:mayca/csc已解明);
}
.right-text {
    width: calc(var(--all-width) - (var(--all-height) * 5/4) - (var(--all-height) * 2/3) - (var(--all-height) / 12) - (var(--all-border) * 4));
    height: calc((var(--all-height) * 2/3) - (var(--all-height) / 17) - var(--all-border));
    color: #000;
    font-size: calc(var(--all-height) / 4);
    padding-top: calc(var(--all-height) / 17);
    padding-left: calc(var(--all-height) / 12);
    opacity: 1;
    transition: opacity 0.5s, top 0.5s;
    transition-delay: 0.4s;
    position: absolute;
    top: calc((var(--all-height) / 3) + var(--all-border));
    right: 0;
/* background-color:rgba(0,0,255,0.2); */
}
.right-text-safe::after {
    content: 'SAFE';
}
.right-text-euclid::after {
    content: 'EUCLID';
}
.right-text-keter::after {
    content: 'KETER';
}
.right-text-双子神::after {
    content: 'THAUMIEL';
}
.right-text-无效化::after {
    content: 'NEUTRALIZED';
    font-size: calc(var(--all-height) / 4.8);
}
.right-text-已解明::after {
    content: 'EXPLAINED';
}
.right-text-hide {
    width: calc(var(--all-width) - (var(--all-height) * 5/4) - (var(--all-height) * 2/3) - (var(--all-border) * 4));
    height: calc((var(--all-height) * 2/3) - (var(--all-height) / 10) - var(--all-border));
    color: #000;
    font-size: calc(var(--all-height) / 3.45);
    text-align: center;
    padding-top: calc(var(--all-height) / 12);
    opacity: 0;
    transition: opacity 0.5s, top 0.5s;
    position: absolute;
    top: calc((var(--all-height) / 3) + (var(--all-height) / 4));
    right: 0;
/* background-color:rgba(255,255,0,0.2); */
}
.right-logo:hover ~ .right-text-hide {
    opacity: 1;
    transition: opacity 0.5s, top 0.5s;
    transition-delay: 0.4s;
    top: calc((var(--all-height) / 3) + var(--all-border));
}
.right-text-hide-cognito-hazard::before {
    content: '认知危害';
}
.right-text-hide-memetics-division-hazard::before {
    content: '模因危害';
}
.right-text-hide-antimemetics-division-hazard::before {
    content: '逆模因危害';
}
.right-text-hide-biology-hazard::before {
    content: '生物危害';
}
.right-text-hide-en {
    font-size: calc(var(--all-height) / 4);
    padding-top: calc(var(--all-height) / 6.5);
}
.right-text-hide-en-cognito-hazard::before {
    content: 'Cognito hazard';
}
.right-text-hide-en-memetics-division-hazard {
    font-size: calc(var(--all-height) / 4.5);
    padding-top: calc(var(--all-height) / 25);
}
.right-text-hide-en-memetics-division-hazard::before {
    content: 'Memetics\A division hazard';
    white-space: pre;
}
.right-text-hide-en-antimemetics-division-hazard {
    font-size: calc(var(--all-height) / 4.5);
    padding-top: calc(var(--all-height) / 25);
}
.right-text-hide-en-antimemetics-division-hazard::before {
    content: 'Antimemetics\A division hazard';
    white-space: pre;
}
.right-text-hide-en-biology-hazard::before {
    content: 'Biology hazard';
}
.text-content {
    font-size: calc((var(--all-height) / 7));
    font-weight: 800;
}
.text-content:before {
    content: '收容等级：';
}
.text-content-en:before {
    content: 'Object Class: ';
}
.c-color {
    background-color: {$bg-color};
}
[[/mOdUlE]]

[[div_ class="cs-container"]]
    [[div_ class="left-content c-color"]]
        [[div_ class="cs-logo"]]
            [[div_ class="cs-logo-{$item-category}"]]
            [[/div]]
        [[/div]]
    [[/div]]
    [[div_ class="right-content c-color"]]
        [[div_ class="cs-number"]]
            {$item-number}
        [[/div]]
        [[div_ class="right-logo right-logo-{$container-class}"]]
        [[/div]]
        [[div_ class="right-text right-text-{$container-class}"]]
            [[span class="text-content text-content-{$lang}"]]　[[/span]]
            @@@@
        [[/div]]
        [[div_ class="right-text-hide right-text-hide-{$lang} right-text-hide-{$item-category} right-text-hide-{$lang}-{$item-category}"]]

        [[/div]]
    [[/div]]
[[/div]]