body{
    --swiper-button: #EAD050;
    --type-selecter-bgcolor: rgb(255, 255, 255);
    --type-selecter-hover-bgcolor: rgb(240, 240, 240);
    --type-selecter: rgb(17, 17, 17);
    --scalePercent: 0.96;
    --bottombar-bgcolor: rgb(250, 250, 250);
    --bottombar-button-hover-bgcolor: rgb(236, 236, 236);
    --bottombar-button-active-bgcolor: rgb(236, 236, 236);
    --bottombar-icon: rgb(56, 56, 56);
    --bottombar-icon-active: rgb(218, 185, 0);
    --bottombar-text: rgb(44, 44, 44);
    --real-bg: rgb(161, 161, 161);
    --iframe-bgcolor: #FAFCFD;
}
body[theme=dark]{
    --swiper-button: #EAD050;
    --type-selecter-bgcolor: rgb(28, 28, 29);
    --type-selecter-hover-bgcolor: rgb(58, 58, 58);
    --type-selecter: rgb(224, 224, 224);
    --bottombar-bgcolor: rgb(43, 43, 43);
    --bottombar-button-hover-bgcolor: rgb(80, 80, 80);
    --bottombar-button-active-bgcolor: rgb(73, 73, 73);
    --bottombar-icon: rgb(231, 231, 231);
    --bottombar-icon-active: rgb(218, 185, 0);
    --bottombar-text: rgb(197, 197, 197);
    --real-bg: #000;
    --iframe-bgcolor: #010101;
}
:root{
    --fontSize: 1.11px!important;
}
body .scaleArea{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: all 0.4s;
    overflow: hidden;
}
body[scale=true] .scaleArea{
    transform: scale(var(--scalePercent));
    border-radius: 17px;
}
@keyframes brts{
    0%{
        transition: all 0.4s;
    }
    100%{
        transition: all 0.4s;
    }
}
.bodyMain{
    position: relative;
}
html{
    background: var(--real-bg);
}
body{
    background: var(--page-bgcolor);
    overflow: hidden!important;
    transition: all 0.4s;
}
.box[data-hidden=true]{
    display: none!important;
}
.pageLeft, .pageRight{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.pageLeft{
    z-index: 1;
}
.pageRight{
    z-index: 899;
}
.pageRight, .pageLeft{
    visibility: hidden;
    transition: visibility 0.5s;
}
.pageRight[show], .pageLeft[show]{
    visibility: visible;
    transition: visibility 0s 0.5s;
}
.pageLeft[show]{
    z-index: 102;
}
.bottomBar{
    display: none;
}
@media (max-width: 800px) {
    .showBottomBar .pageLeft{
        bottom: 50rem;
    }
    .showBottomBar .bottomBar{
        display: flex;
        justify-content: space-around;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 50rem;
        z-index: 105;
        box-shadow: #11111177 0rem 3rem 4rem;
        background: var(--bottombar-bgcolor);
    }
    [data-mobile=true] .showBottomBar .bottomBar{
        padding-bottom: 10rem;
    }
    .showBottomBar .bottomBar .item{
        position: relative;
        width: 48rem;
        height: 48rem;
        margin: 1rem 0rem;
        border-radius: 50%;
        transition: all 0.5s;
        overflow: hidden;
        background: none;
    }
    .showBottomBar .bottomBar .item:hover{
        background: var(--bottombar-button-hover-bgcolor);
    }
    .showBottomBar .bottomBar .item i{
        position: absolute;
        width: 20rem;
        height: 20rem;
        top: 5rem;
        left: 14rem;
        font-size: 20rem;
        color: var(--bottombar-icon);
    }
    .showBottomBar .bottomBar .item[data-active=true] i{
        color: var(--bottombar-icon-active);
    }
    .showBottomBar .bottomBar .item span{
        position: absolute;
        top: 27rem;
        left: 10rem;
        right: 10rem;
        font-size: 11.5rem;
        color: var(--bottombar-text);
    }
    .showBottomBar .bottomBar .item[data-active=true] span{
        color: var(--bottombar-icon-active);
    }
    .showBottomBar .bottomBarTarget, .showBottomBar .bottomBarTarget.box.leftBox[con=none]{
        animation: none!important;
        transition: none!important;
    }
    .showBottomBar .bottomBarTarget.box.leftBox:not([con=on]){
        display: none!important;
    }
    .showBottomBar .bottomBarTarget .backButton{
        display: none;
    }
    .pageLeft[behind=true]{
        visibility: hidden;
        animation: toLeft 0.4s!important;
        transform: translate(0,0);    
    }
    .pageLeft[behind=false]{  
        visibility: visible;
        animation: returnRight 0.4s!important;   
        transform: translate(0,0);
    }
}
.widthChanger{
    width: 6rem;
    margin: 0 -3rem;
    position: relative;
    z-index: 22;
    cursor: e-resize;
}
.leftBox, .rightBox{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    visibility: hidden;
    transform: translate(calc(100% + 20rem), 0);
}
.rightBox[con=on], .leftBox[con=on]{
    visibility: visible;
    transform: none;
    animation: rightCome 0.5s cubic-bezier(0.28, 0.97, 0.54, 0.99) 1 forwards;
}
.rightBox[con=gone], .leftBox[con=gone]{
    visibility: hidden;
    animation: rightGo 0.5s cubic-bezier(0.28, 0.97, 0.54, 0.99) 1 forwards;
    transform: translate(calc(100% + 20rem),0);
}
.rightBox[con=none], .leftBox[con=none]{
    visibility: hidden;
    animation: toLeft 0.4s!important;
    transform: translate(0,0);
}
.rightBox[con=on][from=none]:not(*[noani]), .leftBox[con=on][from=none]:not(*[noani]){
    visibility: visible;
    animation: returnRight 0.4s!important;    transform: translate(0,0);
    transform: translate(0,0);
}
.box .main:not(.main .main){
    position: absolute;
    top: 45rem;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--page-bgcolor);
    overflow-x: hidden;
    overflow-y: auto;
    overflow-y: overlay;
}
*[noani], *[nownoani], *[childnoani] *{
    animation: none!important;
    transition: none!important;
}
.developing{
    color: grey;
    font-size: 21rem;
    position: absolute;
    top: 50%;
    left: 50%;
    font-weight: 600;
    transform: translate(-50%,-50%);
}
.searchFrame header input{
    display: block;
    flex-grow: 1;
    border-radius: 7rem;
    padding: 8rem 7rem;
    font-size: 15rem;
    line-height: 1.4;
    color: var(--card);
    background-color: var(--header-bgcolor);
}
@media (max-width: 800px) {
    .searchFrame header input{
        margin-left: 15rem;
    }    
}
.popFrame{
    top: 27rem;
    background-color: var(--page-bgcolor);
    visibility: hidden;
    position: fixed;
    bottom: 0;
    left: 50%;
    width: min(100%, 800px);
    z-index: 902;
    transform: translate(-50%, 100vh);
    overflow: hidden;
    border-radius: 10rem 10rem 0 0;
}
@media (min-width: 800px) {
    .popFrame{
        width: 600px;
        top: 40rem;
        bottom: 0;
        height: calc(100vh - 70rem);
        border-radius: 6rem;
    }
}
.popFrame[open=true][data-behind=true]{
    transform: translate(-50%, 0) scale(0.92);
    filter: brightness(0.6);
    transition: all 0.5s;
}
body[data-loadover=true] .popFrame{
    transition: all 0.14s cubic-bezier(0.37, 0.37, 1, 0.91);
}
.popFrame[open=true]{
    visibility: visible;
    transform: translate(-50%, 0);
    transition: all 0.5s;
    animation: popCome 0.5s cubic-bezier(0.28, 0.97, 0.54, 0.99);
}
@keyframes popCome {
    0%{
        transform: translate(-50%, 100vh);        
    }
    100%{
        transform: translate(-50%, 0);
    }
}
.popFrame .content{
    position: absolute;
    top: 45rem;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: overlay;
    background-color: var(--page-bgcolor);
}
@media (min-width: 800px) {
    .bodyMain{
        position: fixed;
        display: flex;
        top: 50rem;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .bodyMain[thinable]{
        transition: all 0.4s;
    }
    .pageLeft, .pageRight{
        position: relative;
        height: 100%;
        overflow: hidden;
    }
    .pageLeft{
        min-width: 400rem;
        width: calc(26vw + 106rem);
        visibility: visible;
        border-right: 1rem solid var(--middle-line);
    }
    .pageRight{
        flex-grow: 1;
        visibility: visible;
    }
    .leftBox[pcnoani][con=on]:not([from=none]), .rightBox[pcnoani][con=on]:not([from=none]){
        animation: none!important;
    }
    .pageRight .box[back=no] .backButton,.pageRight .rightBox[noother=true] .backButton{
        display: none;
    }
}
@keyframes startHover {
    0%{
        opacity: 1;
        visibility: visible;
    }
    100%{
        opacity: 0;
        visibility: hidden;
    }
}
@keyframes rightCome {
    0%{
        transform: translate(calc(100% + 20rem),0);
        box-shadow: var(--animation-box-shadow-0);
    }
    80%{
        box-shadow: var(--animation-box-shadow-1);
    }
    100%{
        transform: translate(0,0);
    }
}
@keyframes rightGo {
    100%{
        transform: translate(calc(100% + 20rem),0);
        box-shadow: var(--animation-box-shadow-0);
        visibility: hidden;
    }
    20%{
        box-shadow: var(--animation-box-shadow-1);
        visibility: visible;
    }
    0%{
        transform: translate(0,0);
        visibility: visible;
    }
}
@keyframes simpleGo {
    100%{
        transform: translate(calc(100% + 20rem),0);
        visibility: hidden;
    }
    99%{
        visibility: initial;
        transform: initial;
    }
    0%{
        visibility: initial;
        transform: initial;
    }
}
@keyframes myContextMenu{
    0%{
        opacity: 0;
        width: 0;
        max-height: 0vh;
        overflow: hidden;
    }
    46%{
        opacity: 1;
    }
    99%{
        overflow: hidden;
    }
    100%{
        opacity: 1;
        width: 200rem;
        max-height: 40vh;
        overflow: overlay;
    }
}
@keyframes toLeft {
    0%{
        transform: unset;
        visibility: visible;
        display: block;
    }
    100%{
        transform: translate(-25%, 0);
        filter: brightness(0.8);
        visibility: visible;
        display: block;
    }
}
@keyframes returnRight {
    100%{
        transform: translate(0,0);
    }
    0%{
        transform: translate(-25%, 0);
        filter: brightness(0.8);
    }
}
@media (min-width: 800px) {
    .bodyMain{
        justify-content: center;
        max-width: 100vw;
        margin-left: auto;
        margin-right: auto;
    }
    .bodyMain[trans=true]{
        transition: all 0.5s;
    }
    .bodyMain[thinable][thin] #pageRight{
        width: 0;
        flex-grow: 0;
    }
    .bodyMain[thinable][thin] #pageLeft{
        flex-grow: 1;
        max-width: 800px;
        border-right: none;
    }
    .bodyMain[thinable][thin] #widthChanger{
        visibility: hidden;
    }
    .bodyMain[thinable][thin]{
        max-width: 800px;
    }
    .bodyMain[trans=true] #pageLeft , #pageLeft #listFrame, .bodyMain[trans=true] #pageRight{
        transition: all 0.3s, border-right 0s 0s;
    }
}
.browserFrame{
    background-image: url('../img/loading.gif');
    background-position: 50%, 50%;
    background-size: 25rem;
    background-repeat: no-repeat;
}
.browserFrame iframe{
    position: absolute;
    top: 45rem;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: calc(100% - 45rem);
    background-color: var(--iframe-bgcolor);
    opacity: 1;
    animation: iframe 3s;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}
.browserFrame iframe[loaded]{
    opacity: 1;
    animation: none;
    visibility: visible;
}
.legacyBrowserFrame .main{
    position: absolute;
    top: 45rem;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: var(--iframe-bgcolor);
    background-image: url('../img/loading.gif');
    background-position: 50%, 50%;
    background-size: 25rem;
    background-repeat: no-repeat;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.legacyBrowserFrame iframe{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    background-color: var(--iframe-bgcolor);
    animation: iframe 3s;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}
.legacyBrowserFrame iframe[loaded]{
    opacity: 1;
    visibility: visible;
    animation: none;
}
@keyframes iframe {
    0%{
        opacity: 0;
        visibility: hidden;
    }
    99.9%{
        opacity: 0;
        visibility: hidden;
    }
    100%{
        opacity: 1;
        visibility: visible
    }
}