Scheme Theme

Link to article: Scheme Theme.

@import url('https://scp-wiki.wdfiles.com/local--code/theme:scheme/2');

float:right;width:45%;font-size:90%;padding:5px;

float:right;width:45%;font-size:90%;padding:5px;

```
code
```

[[module CSS]]
@import url('https://scp-wiki.wdfiles.com/local--code/theme:scheme/2');
[[/module]]

[[include :scp-wiki:component:interwiki-style
| priority=1
| theme=https://scp-wiki.wdfiles.com/local--code/theme:scheme/2
]]


[[iftags +theme]]

[[>]]

**Rating: @@     @@**

[[module rate]]
[[/>]]

[[>]]
**Rating w/ Credit Module: @@     @@**
[[/>]]

[[include :scp-wiki:info:start]]
hello
[[include :scp-wiki:info:end]]


This is [[*user shaftmetal]], [[*user thd-glasses]], [[*user Denevola]], [[*user Fluxman]]'s **Scheme Theme**.

To use it, put the following at the top of your article.

[[div class="code"]]
@@[[include :scp-wiki:theme:scheme]]@@
[[/div]]

This theme is designed for [[[church-of-the-broken-god-hub|Cogwork Orthodox Church]]] related articles.

Following is the format of Cogwork Orthodox Church's GoI formats, //Schema of the Patriarchs//
----
++ Schema of the Patriarchs

[[div style="float:right;width:45%;font-size:90%;padding:5px;"]]
##red|a.## A design devoid of intent satisfies peripheral beauty, and cannot contain standardization, hence, Saint Baffle mentioned Lorem Ipsum as truly unworthy.

##red|b.## In designing a machine, beauty cannot be obtained by pursuing it alone. True beauty naturally derives from the improvement of ample efficiency and clarity.

##red|c.## Witness the interlocking gears and blowing steam. Who can deny its beauty? - Saint Lathe, seeing the Cathedral of Industry

##red|d.## Plain colours lift the burden of the eye. Simple characters lift the burden of reading. - Saint Schemeplacer Platon, 《The printing of design》
[[/div]]


**Volume 99.99.ζ9-99**
**1.** Lorem ipsum##red|^^a^^## dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
**2.** Ut enim ad minim##red|^^b^^## veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
**3.** Duis aute irure dolor in reprehenderit in voluptate velit esse##red|^^c^^## cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id##red|^^d^^## est laborum.

~~~~
----

code :

[[code]]
[[div style="float:right;width:45%;font-size:90%;padding:5px;"]]
##red|a.## you can change marginal note div's width and font size.

##red|b.## marginal note 2
[[/div]]

**Volume XX.XX.XX-XX**
**1.** content 1
**2.** content 2
~~~~
[[/code]]

----

[[collapsible show="+ show code" hide="- hide code" hideLocation="both"]]
[[code type="css"]]
/*
    Scheme Theme
    [2021 Wikidot Theme]
    Created by shaftmetal, thd-glasses and Denevola
    Inspired by team Rapid Nomenclature Shift's Cogwork Orthodox Church
    Logo originally from SunnyClockwork

    CC BY-SA 3.0

    https://pixabay.com/images/id-1711946/
    https://pixabay.com/images/id-282404/
    https://pixabay.com/images/id-201499/
    https://pixabay.com/images/id-70893/

    sidebar code from theme:dustjacket-sigma by DrMacro
    animation code from theme:pataphysics by Lt Flops
*/

@import url('https://fonts.googleapis.com/css2?family=Song+Myung&display=swap');
@font-face {
    font-family: ELAND_Nice_M;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts-20-12@1.0/ELAND_Nice_M.woff') format('woff');
    font-weight: 700;
    font-style: normal
}

:root {
    /*
    한글 대용 - FOR KOREAN
    --title: "총대주교들의 도식";
    --short_title: "도식";
    --subtitle: "충실한 우리, 신의 주물을 뜬다";
    --short_subtitle: "신의 주물을 뜬다";
    */
    
    --title: "Schema of the Patriarchs";
    --short_title: "Schema";
    --subtitle: "Cast in the Design of God, We Faithful";
    --short_subtitle: "Cast in the Design of God";

    --dark-accent: 185, 150, 17
}

div#container-wrap {
    z-index :-5;
    background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ascheme/line.png'), url('https://scp-wiki.wdfiles.com/local--files/theme%3Ascheme/header_cogs.jpg');
    background-repeat: repeat-x, repeat-x;
    background-position: top 11.25rem right, top;
    background-size: auto 14em, auto 11.25rem
}

/* ---- 헤더 - HEADER ---- */

#header {
    background: 0 0;
    height: 180px
}

#header h1 {
    padding-left: 2.5em
}

#header h1 a {
    padding: 100px 0 25px;
    font-family: ELAND_Nice_M, BauhausLTDemi, sans-serif
}

#header h1 a span {
    font-size: 0
}

#header h1 a:before {
    content: var(--title);
    color: #eee;
    text-shadow: 2px 2px 2px #000
}

#header h2 {
    padding-left: 4.5em;
    font-family: ELAND_Nice_M, BauhausLTDemi, sans-serif;
    -webkit-transform: translateY(5px);
    -ms-transform: translateY(5px);
    transform: translateY(5px)
}

#header h2 span {
    font-size: 0;
    padding: 14px
}

#header h2:after {
    content: var(--subtitle);
    font-weight: 700;
    color: #f0f0c0;
    padding: 19px 0;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
    white-space: pre
}

/* ---- 검색창 - SEARCH-BOX ---- */

#search-top-box {
    top: 99px
}

#search-top-box-input, #search-top-box-input:hover {
    padding: 2px 5px;
    border: 2px solid;
    -o-border-image: -o-linear-gradient(left, #e9df95, #917b3c);
    border-image: -webkit-gradient(linear, left top, right top, from(#e9df95), to(#917b3c));
    border-image: linear-gradient(to right, #e9df95, #917b3c);
    border-image-slice: 1;
    border-radius: 0
}

#search-top-box-input {
    background-color: #7b6a33
}

#search-top-box-input:focus, #search-top-box-input:hover {
    background-color: #554920
}

#search-top-box-form input[type=submit], #search-top-box-form input[type=submit]:hover {
    border: none;
    border-radius: 0;
    padding: 4px;
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #d9ca88), color-stop(50%, #63521c), color-stop(80%, #7b6a33), to(#d9ca88));
    background: -o-linear-gradient(left, #d9ca88 0, #63521c 50%, #7b6a33 80%, #d9ca88 100%);
    background: linear-gradient(to right, #d9ca88 0, #63521c 50%, #7b6a33 80%, #d9ca88 100%);
    -webkit-box-shadow: inset -2px -2px 5px #63521c;
    box-shadow: inset -2px -2px 5px #63521c
}

#search-top-box-form input[type=submit] {
    color: #e3dfd4
}

#search-top-box-form input[type=submit]:hover {
    -webkit-filter: brightness(.8);
    filter: brightness(.8)
}

/* ---- 상단 메뉴 - TOP-NAVIGATION ---- */

#top-bar {
    top: 179px
}

#top-bar ul li ul li ul {
    left: 159px
}

/* ---- 사이드바 - SIDE-BAR ---- */
/* partially copied from Sigma-9 Wanderers' DustJacket Theme by DrMacro */

#side-bar .side-block,
#interwiki .side-block {
    border-color: rgb(var(--dark-accent));
    background-color: #fff;
    -webkit-box-shadow: 0 2px 6px rgba(var(--dark-accent), .5);
    box-shadow: 0 2px 6px rgba(var(--dark-accent), .5)
}

#side-bar .side-block.media {
    background-color: #f8f1da !important
}

#side-bar .side-block.resources {
    background-color: #f6eac4 !important
}

#side-bar .heading,
#interwiki .heading {
    font-size: 1rem;
    color: rgb(126, 103, 44,80%);
    background: linear-gradient(to right, rgb(206, 193, 133,70%), transparent);
    border-bottom-color: rgb(126, 103, 44);
    font-family: 'Song Myung', 'Nanum Gothic', serif;
}

/* ---- 평가 모듈 - RATE-MODULE ---- */

.page-rate-widget-box {
    background: -webkit-gradient(linear, left top, right top, color-stop(5%, #bc9744), color-stop(25%, #fbd076), color-stop(50%, #fff6aa), color-stop(75%, #f0c86d), color-stop(80%, #eac068), to(#bb9645));
    background: -o-linear-gradient(left, #bc9744 5%, #fbd076 25%, #fff6aa 50%, #f0c86d 75%, #eac068 80%, #bb9645 100%);
    background: linear-gradient(to right, #bc9744 5%, #fbd076 25%, #fff6aa 50%, #f0c86d 75%, #eac068 80%, #bb9645 100%);
    border: 1px solid #bdaa79;
    border-radius: 0;
    -webkit-box-shadow: 1px 1px 0 rgb(12 12 12 / 15%);
    box-shadow: 1px 1px 0 rgb(12 12 12 / 15%);
    color: #6b5829;
    font-size: .9rem;
}
 
div.page-rate-widget-box .rate-points {
    background-color: transparent;
    border: none;
    color: #6b5829;
}
 
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
    background-color: transparent;
    border: none;
    font-weight: normal;
}
 
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
    color: inherit;
}
 
.page-rate-widget-box .cancel {
    background-color: transparent;
    border: none;
}
 
.page-rate-widget-box .cancel a {
    color: inherit;
}
 
.page-rate-widget-box .cancel a:hover {
    border-radius: 0;
}

/* ---- 정보 모듈 - INFO-MODULE ---- */

.rate-box-with-credit-button {
    background: -o-linear-gradient(left, #bc9744 5%, #fbd076 25%, #fff6aa 50%, #f0c86d 75%, #eac068 80%, #bb9645 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(5%, #bc9744), color-stop(25%, #fbd076), color-stop(50%, #fff6aa), color-stop(75%, #f0c86d), color-stop(80%, #eac068), to(#bb9645));
    background: linear-gradient(to right, #bc9744 5%, #fbd076 25%, #fff6aa 50%, #f0c86d 75%, #eac068 80%, #bb9645 100%);
    border: 1px solid #bdaa79 !important;
    border-radius: 0 !important;
    -webkit-box-shadow: 1px 1px 0 rgb(12 12 12 / 15%) !important;
    box-shadow: 1px 1px 0 rgb(12 12 12 / 15%) !important;
    color: #6b5829;
    font-size: .9rem;
}

.rate-box-with-credit-button .page-rate-widget-box {
    background: none;
    border: none;
}

.rate-box-with-credit-button .fa-info {
    border-color: #6b5829;
    color: #6b5829;
}

.rate-box-with-credit-button .fa-info:hover {
     color: #fff;
}

#u-credit-view:target,
#u-credit-otherwise:target {
    z-index: 31;
}

.modalbox {
    border: 1px solid #af9a1c !important;
    box-shadow: 0 2px 6px rgb(173 162 31 / 50%) !important;
}

/* ---- 인터위키 - INTERWIKI ---- */

iframe.scpnet-interwiki-frame {
    filter: drop-shadow(0 2px 1 rgba(var(--dark-accent), 0.5));
    -webkit-filter: drop-shadow(0 2px 1 rgba(var(--dark-accent), 0.5));
}

/* ----  로고 - LOGO ---- */

/* LOGO-BASE */
div#extra-div-2 {
    display: block;
    z-index: 20;
    background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ascheme/base.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    top: 48px;
    left: 50%;
    -webkit-transform: translateX(-485px);
    -ms-transform: translateX(-485px);
    transform: translateX(-485px);
    width: 130px;
    height: 130px
}

/* GEAR-SMALL */
div#extra-div-3 {
    z-index: 10;
    width: 13px;
    height: 13px;
    display: block;
    position: absolute;
    top: 78px;
    left: 50%;
    -webkit-transform: translateX(-431px);
    -ms-transform: translateX(-431px);
    transform: translateX(-431px)
}

div#extra-div-3::before {
    content: "";
    width: 22px;
    height: 22px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

div#extra-div-3::before {
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ascheme/cogS.png');
    -webkit-animation: spin 5s linear infinite;
    -webkit-animation-direction: reverse;
    animation: spin 5s linear infinite
    animation-direction: reverse;
}

/* GEAR-MEDIUM */
div#extra-div-4 {
    z-index: 30;
    width: 13px;
    height: 13px;
    display: block;
    position: absolute;
    top: 125px;
    left: 50%;
    -webkit-transform: translateX(-395px);
    -ms-transform: translateX(-395px);
    transform: translateX(-395px)
}

div#extra-div-4::before {
    content: "";
    width: 40px;
    height: 40px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

div#extra-div-4::before {
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ascheme/cogM.png');
    -webkit-animation: spin 8s linear infinite;
    animation: spin 8s linear infinite;
    animation-direction: reverse
}

/* GEAR-LARGE */
div#extra-div-5 {
    z-index: 10;
    width: 13px;
    height: 13px;
    display: block;
    position: absolute;
    top: 48px;
    left: 50%;
    -webkit-transform: translateX(-485px);
    -ms-transform: translateX(-485px);
    transform: translateX(-485px)
}

div#extra-div-5::before {
    content: "";
    width: 130px;
    height: 130px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

div#extra-div-5::before {
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ascheme/cogL.png');
    -webkit-animation: spin 24s linear infinite;
    animation: spin 24s linear infinite
}

/* RACK-GEAR */
/*
::-webkit-scrollbar {
  display: none;
}
*/
html {
  scrollbar-width: thin !important;  /* Firefox */
}

div#extra-div-6 {
    z-index: 10;
    width: 4px;
    height: 4px;
    display: block;
    position: absolute;
    top: 173.5px;
    left: 0;
    -webkit-transform: translateX(-18px);
    -ms-transform: translateX(-18px);
    transform: translateX(-18px);
}

div#extra-div-6::before {
    content: "";
    width: calc( 100vw + 18px );
    height: 270%;
    position: absolute;
    background-repeat: repeat-x;
    background-position: center center;
    background-size: 18px 10px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
}

div#extra-div-6::before {
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ascheme/rack.png');
    -webkit-animation: line 1s linear infinite;
    animation: line 1s linear infinite;
    -webkit-animation-delay: -.25s;
    animation-delay: -.25s
}

/* LEVER & STICK ANIMATION */
#header #header-extra-div-2::before {
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}

#header #header-extra-div-1::before, #header #header-extra-div-3::before {
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}

/* LEVER */
#header #header-extra-div-1 {
    z-index: -1;
    width: 13px;
    height: 13px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    top: 47px;
    left: 57px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

#header #header-extra-div-1::before {
    z-index: -1;
    content: "";
    width: 85px;
    height: 85px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

#header #header-extra-div-1::before {
    z-index: -1;
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ascheme/lever.png');
    -webkit-animation-name: cont-spin;
    animation-name: cont-spin
}

/* STICK */
#header #header-extra-div-2 {
    z-index: -2;
    width: 13px;
    height: 13px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    left: 53px;
    top: 105px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    margin-top: 0
}

#header #header-extra-div-2::before {
    z-index: -2;
    content: "";
    width: 20px;
    height: 35px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

#header #header-extra-div-2::before {
    z-index: -1;
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ascheme/stick.png');
    -webkit-animation-name: dir;
    animation-name: dir;
    animation-direction: reverse
}

/* STICK-2 */
#header #header-extra-div-3 {
    z-index: -2;
    width: 13px;
    height: 13px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    left: 128px;
    top: 105px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    margin-top: 0
}

#header #header-extra-div-3::before {
    z-index: -1;
    content: "";
    width: 15px;
    height: 40px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 15px 40px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

#header #header-extra-div-3::before {
    z-index: -1;
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ascheme/stick.png');
    -webkit-animation-name: dir;
    animation-name: dir
}

body {
    overflow-x: hidden
}

/* STEAM */
div#extrac-div-1::before, div#extrac-div-2::before, div#extrac-div-3::before {
    -webkit-filter: blur(4px);
    filter: blur(4px);
    -webkit-animation-name: dir2;
    animation-name: dir2;
    -webkit-animation-duration: 5s;
    animation-duration: 5s
}

div#extrac-div-1::before {
    -webkit-animation-delay: .3s;
    animation-delay: .3s
}

div#extrac-div-2::before {
    -webkit-animation-delay: -.5s;
    animation-delay: -.5s
}

div#extrac-div-3::before {
    -webkit-animation-delay: -1s;
    animation-delay: -1s
}

div#extrac-div-1 {
    z-index: 10;
    width: 140px;
    height: 15px;
    display: block;
    position: absolute;
    top: -60px;
    left: calc(50% + 10px);
    -webkit-transform: translateX(-525px);
    -ms-transform: translateX(-525px);
    transform: translateX(-525px)
}

div#extrac-div-1::before {
    content: "";
    width: 100px;
    height: 200px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

div#extrac-div-1::before {
    z-index: -1;
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ascheme/steam1.png');
    background-size: 70px;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

div#extrac-div-2 {
    z-index: 10;
    width: 140px;
    height: 15px;
    display: block;
    position: absolute;
    top: -80px;
    left: calc(50% + 10px);
    -webkit-transform: translateX(-545px);
    -ms-transform: translateX(-545px);
    transform: translateX(-545px)
}

div#extrac-div-2::before {
    content: "";
    width: 100px;
    height: 200px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

div#extrac-div-2::before {
    z-index: -1;
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ascheme/steam2.png');
    background-size: 70px;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}

div#extrac-div-3 {
    z-index: 10;
    width: 140px;
    height: 15px;
    display: block;
    position: absolute;
    top: -60px;
    left: calc(50% + 10px);
    -webkit-transform: translateX(-545px);
    -ms-transform: translateX(-545px);
    transform: translateX(-545px)
}

div#extrac-div-3::before {
    content: "";
    width: 100px;
    height: 200px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

div#extrac-div-3::before {
    z-index: -1;
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ascheme/steam3.png');
    background-size: 70px;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}

/* ANIMATION */
@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes spin {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes cont-spin {
    0% {
        -webkit-transform: rotate(195deg);
        transform: rotate(195deg)
    }

    80% {
        -webkit-transform: rotate(165deg);
        transform: rotate(165deg)
    }

    100% {
        -webkit-transform: rotate(195deg);
        transform: rotate(195deg)
    }
}

@keyframes cont-spin {
    0% {
        -webkit-transform: rotate(195deg);
        transform: rotate(195deg)
    }

    80% {
        -webkit-transform: rotate(165deg);
        transform: rotate(165deg)
    }

    100% {
        -webkit-transform: rotate(195deg);
        transform: rotate(195deg)
    }
}

@-webkit-keyframes dir {
    0% {
        -webkit-transform: translateY(18px);
        transform: translateY(18px)
    }

    80% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        -webkit-transform: translateY(18px);
        transform: translateY(18px)
    }
}

@keyframes dir {
    0% {
        -webkit-transform: translateY(18px);
        transform: translateY(18px)
    }

    80% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        -webkit-transform: translateY(18px);
        transform: translateY(18px)
    }
}

@-webkit-keyframes dir2 {
    0% {
        -webkit-transform: translateY(60px);
        transform: translateY(60px);
        opacity: 0;
        -webkit-transform: scale(.4);
        transform: scale(.4)
    }

    20% {
        opacity: .6;
        -webkit-transform: scale(.7);
        transform: scale(.7)
    }

    40% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: .7;
        -webkit-transform: scale(.8);
        transform: scale(.8)
    }

    100% {
        -webkit-transform: translateY(-80px);
        transform: translateY(-80px);
        opacity: .5
    }
}

@keyframes dir2 {
    0% {
        -webkit-transform: translateY(60px);
        transform: translateY(60px);
        opacity: 0;
        -webkit-transform: scale(.4);
        transform: scale(.4)
    }

    20% {
        opacity: .6;
        -webkit-transform: scale(.7);
        transform: scale(.7)
    }

    40% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: .7;
        -webkit-transform: scale(.8);
        transform: scale(.8)
    }

    100% {
        -webkit-transform: translateY(-80px);
        transform: translateY(-80px);
        opacity: .5
    }
}

@-webkit-keyframes line {
    from {
        -webkit-transform: translateX(18px);
        transform: translateX(18px)
    }

    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes line {
    from {
        -webkit-transform: translateX(18px);
        transform: translateX(18px)
    }

    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

/* ---- 반응형 - RESPONSIVE-DESIGN ---- */
@media (min-width: 1104px){
    #header h1 {
        padding-left: 1.5em
    }
    #header h2 {
        padding-left: 3em
    }
}

@media (min-width: 1104px) and (min-height: 2079px) {
    div#extra-div-6::before {
        -webkit-animation-delay:-.05s;
        animation-delay: -.05s;
    }
}

@media (max-width: 1149px) {
    #header h1, #header h2 {
        margin-left:120px
    }

    #header h1 a:before {
        content: var(--short_title)
    }

    div#extra-div-2, div#extra-div-5 {
        left: calc(51px + 5px);
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }

    div#extra-div-3 {
        left: calc(51px + 59px);
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }

    div#extra-div-4 {
        left: calc(51px + 95px);
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }

    div#extra-div-6::before {
        background-position: left center;
        -webkit-animation-delay:-.97s;
        animation-delay: -.97s;
    }

    #header #header-extra-div-1 {
        left: calc(-4.9vw + 51px + 27.5px);
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }

    #header #header-extra-div-2 {
        left: calc(-4.9vw + 51px + 24.5px);
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }

    #header #header-extra-div-3 {
        left: calc(-4.9vw + 51px + 97.5px);
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }

    div#extrac-div-1 {
        left: calc(51px - 25px);
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }

    div#extrac-div-2 {
        left: calc(51px - 45px);
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }

    div#extrac-div-3 {
        left: calc(51px - 45px);
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

@media (max-width: 767px) {

    #top-bar .open-menu a {
        border: .2em solid #ba9e57;
        color: #ba9e57
        position: fixed;
        bottom: 0.6em;
        top : auto;
        left: 0.5em;
    }

    #side-bar, #side-bar:target {
        z-index: 50;
    }
    #side-bar {
  background: linear-gradient(to bottom, #726969 0%, #d3cdcd 30%, #ececec 50%, #898383 100%);
    }
}

@media (max-width: 385px) {
    #header h1, #header h2 {
        margin-left:80px
    }

    #header h2:after {
        content: var(--short_subtitle)
    }

    div#extra-div-2, div#extra-div-5 {
        left: 5px;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }

    div#extra-div-3 {
        left: 59px;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }

    div#extra-div-4 {
        left: 95px;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }

    #header #header-extra-div-1 {
        left: calc(27.5px);
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }

    #header #header-extra-div-2 {
        left: calc(24.5px);
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }

    #header #header-extra-div-3 {
        left: calc(97.5px);
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }

    div#extrac-div-1 {
        left: -25px
    }

    div#extrac-div-2 {
        left: -45px
    }

    div#extrac-div-3 {
        left: -45px
    }

    div#extra-div-6::before {
        -webkit-animation-delay: -.81s;
        animation-delay: -.81s;
    }
}

 
/* ---- REDUCED MOTION ACCESSIBILITY ----
 * By SMLT
**/
 @media (prefers-reduced-motion: reduce){
     *, *::before, *::after{
         animation-duration: .001s !important;
         animation-iteration-count: 1 !important;
         transition-duration: .001s !important;
    }
}
[[/code]]
[[/collapsible]]

[[/iftags]]

Scheme Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source