@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&display=swap');

@font-face {
    font-family: 'FFFlauta';
    src: url('FFFlauta-Regular.eot');
    src: local('FFFlauta Regular'), local('FFFlauta-Regular'),
        url('FFFlauta-Regular.eot?#iefix') format('embedded-opentype'),
        url('FFFlauta-Regular.woff2') format('woff2'),
        url('FFFlauta-Regular.woff') format('woff'),
        url('FFFlauta-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face{
    font-family: 'sfprodisplay';
    src: url('SFProDisplay-Medium.woff2') format('woff2'),
        url('SFProDisplay-Medium.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
}

@font-face{
    font-family: 'sfprodisplayb';
    src: url('SFProDisplay-Bold.woff2') format('woff2'),
        url('SFProDisplay-Bold.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
}

@font-face{
    font-family: 'tinymce';
    src:url('tinymce.woff2') format('woff2'),
    url('tinymce.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
}

*{
    font-family: 'sfprodisplay', 'tinymce', 'Noto Sans TC', sans-serif!important;
    font-family: 500;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

:root{
    --lighting-size: 120px;
    --lighting-color: #0071ef;
    --lighting-highlight-color: #002855;
    --plighting-color:rgb(0, 0, 0);
    --plighting-highlight-color: #747474;
}

body{
    min-width: 320px;
}

span{
    border-radius: 8px;
    padding: 2px;
}

.head{
    position: fixed;
    padding: 10px;
    width: 100%;
    background-color: #FFCC00;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 100000000000000000000000000000000000000000000000000000000000;
}
.head li{
    list-style-type: none;
    margin-right: 5px;
    padding: 5px 15px;
    border: 1px solid #000;
    border-radius: 20px;
    cursor: pointer;
    background-color: #ffcc00;
    transition: all .2s cubic-bezier(0.66,0,0.2,1);
    max-height: 36px;
}

.head li a{
    color: #000;
    font-weight: 600;
    white-space: nowrap;
}

.head li a:hover{
    text-decoration: none!important;
}

.head li:hover{
    background-color: #fff;
}

.head .logo{
    white-space: nowrap;
    font-size: 20px;
    display: flex;
}

.head .logo .logo-image{
    background-image: url(/image/puff-wiki-logo.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 30px;
    width: 163.18px;
    cursor: pointer;
    margin-top: 2px;
}

.page-control{
    padding: 10px;
    margin-top: 70px;
    max-width: 800px;
    margin: auto;
    padding-top: 70px;
    width: 100%;
}

a{
    text-decoration: none;
}

.link.b{
    color: #000;
}

.link.b:hover{
    text-decoration: underline;
}

.box-container li{
    position: relative;
}

.page-control img,
.control-history img{
    max-width: 500px;
    border: 1px solid #000;
    margin-top: 15px;
    border-radius: 15px;
}

.page-control .page-name:nth-child(3){
    font-family: 'FFFlauta', 'Noto Sans TC', sans-serif!important;
    padding-bottom: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid #d2d2d7;
}


.search-form{
    max-width: 800px;
    margin: auto;
}

.box-container{
    display: block!important;
}

li.article-box{
    overflow-x: hidden;
    font-weight: 700;
    font-size: 20px;
    list-style: none;
    counter-increment: item-counter; 
    display: flex;
    width: 100%;
    max-width: 800px;
    margin: auto;
    margin-top: 20px;
    cursor: pointer;
}

li.article-box:before {
    color: #AFAFAF;
    overflow-x: hidden;
    font-weight: 600;
    font-size: 35px;
    list-style: none;
    content: counter(item-counter);
    margin-right: 10px;
    transform: translateY(-15px);
    width: 40px!important;
}

a.link.b{
    color: #000;
}

.search-form form .btn{
    border-radius: 0px!important;
    border: 5px solid #000;
    background-color: #FFDA45!important;
    cursor: pointer;
    height: 55px!important;
    color: #000;
}

.search-form form .btn:hover{
    background-color: #ffe789!important;
}

.search-form form .box{
    border-radius: 0px!important;
    border: 5px solid #000!important;
    color: #000;
    height: 55px!important;
}

.search-form form .box::placeholder{
    color: #000;
}

.edit-product-form{
    background-color: #fff;
    border: 5px solid #000;
    border-radius: 0px;
    margin: auto;
    left: 10px;
    top: 10px;
    width: calc(100% - 20px);
    max-width: none!important;
    height: calc(100vh - 20px);
    overflow: auto;
    /* z-index: 1000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000; */
}

.edit-product-form .select-box{
    border: 5px solid #000;
    background-color: #FFDA45;
    width: 129px;
}

.edit-product-form .sele::before{
    content: '';
    border: 5px solid #000;
    background-color: #FFDA45;
    width: 80px;
    padding: 10px;
}

.edit-product-form form{
    display: block!important;
    width: 100%;
    max-width: 800px;
    margin: auto;
}

a{
    cursor: pointer;
}

.edit-product-form form input,
.edit-product-form form textarea{
    max-width: calc(100%)!important;
    width: 100%;
    border: 5px solid #000;
    height: 55px;
    padding: 10px;
    cursor: pointer;
}

.edit-product-form form textarea{
    height: 100px;
}

.edit-product-form form input[type = text],
.edit-product-form form textarea{
    font-size: 20px;
}

.edit-product-form form input[type = submit]{
    background-color: #FFDA45!important;
    font-size: auto;
    margin-top: 10px;
    color: #000;
    
}

.edit-product-form form input[type = reset]{
    background-color: #ffffff!important;
    font-size: auto;
    margin-top: 10px;
    color: #000;
    
}

.btn-sflex input{
    border-radius: 15px!important;
    border: 1px solid #000!important;
}

.edit-product-form form input[type = submit]:hover{
    background-color: #ffe789!important;
    
}

.build.edit-product-form{
    display: none;
}

.build.edit-product-form.active{
    display: block;
}

.sflex{
    display: flex;
}

.gp10{
    gap: 10px;
}

.footer{
    background-color: #fc0!important;
    border: 1px solid #000;
    width: calc(100% - 20px);
    margin: 10px;
    border-radius: 15px;
}

.add-taskimg{
    margin-top: 10px;
}

.add-taskimg h1{
    margin-bottom: 10px;
}

.footer h3{
    font-family: 'FFFlauta' , 'Noto Sans TC', sans-serif!important;
}

.edit-product-form form{
    display: none!important;
}

.edit-product-form.title1 form.chtitle-1,
.edit-product-form.title2 form.title-2,
.edit-product-form.title3 form.title-3,
.edit-product-form.title4 form.title-4,
.edit-product-form.title0 form.title-0,
.edit-product-form.title5 form.title-5{
    display: block!important;
}

.none{
    display: none!important;
}

.builder{
    max-width: 800px;
    margin: auto;
    margin-top: 80px;
}

.builder h2{
    font-size: 25px;
    padding-bottom: 10px;
    margin-bottom: 15px;
    border-bottom: 1px solid #000;
}

.builder input{
    border: 5px solid #000;
    border-radius: 0px!important;
    color: #000;
    padding: 10px;
    width: 100%;
    margin-bottom: 20px;
}

.builder input[type = submit]{
    background-color: #FFDA45!important;
}

.builder input[type = submit]:hover{
    background-color: #ffe789!important;
}

.select-box div{
    cursor: pointer;
}

.flex.hurf .left-box{
    display: none;
}

.flex.hurf.fixed-edit .left-box{
    display: block;
}

@media (max-width: 786px){
.flex.hurf .left-box {
    display: none!important;
}
}

.fixed-edit{
    position: fixed;
    top: 52px;
    width: calc(100% - 20px)!important;
    left: 0;
}

.fixed-edit .left-box{
background-color: #00000000;
}

.setting-box{
    max-width: 800px!important;
}

.update_label{
    border: 1px solid #000;
    background-color: #ffcc00;
border-radius: 40px;
padding: 5px 15px;
cursor: pointer;
white-space: nowrap;
max-height: 32px;
}

.jir .update_label:nth-child(2){
    background-color: #000;
    color: #ffcc00;
}

.jir{
    display: flex;
    justify-content: space-between;
    width: 127px;
}

.delete-btn{
    padding: 10px;
    border: 5px solid #000000;
    background-color: #fff;
    color: #000!important;
    text-decoration: none;
    text-align: center;
    margin-top: 10px;
}

.btn-sflex{
    position: fixed;
    top: -10px;
    display: flex;
    justify-content: space-between;
    z-index: 10000000000000000;
}

.btn-sflex input{
    cursor: pointer;
    width: 120px!important;
}

.btn-sflex input:nth-child(2){
    margin-left: 10px;
}

.btn-sflex div{
    display: flex;
}

.fhogdi {
    margin-top: 0 !important;
    padding-top: 46px;
}
.content {
    max-width: 1000px !important;
    margin: auto;
    display: block;
    width: 100% !important;
    margin-top: 74px;
    padding: 0 15px;
    overflow: hidden;
}

line, .location, .group4893g {
    max-width: none !important;
}
.location {
    display: flex !important;
    height: 44px !important;
}
.content span {
    font-size: 10px;
    font-weight: normal;
    color: #000000;
}
.group4893g {
    display: flex !important;
    margin-top: 72px !important;
    justify-content: space-between !important;
    width: 100% !important;
}.groupfhgoid {
    width: 100% !important;
    display: flex;
    justify-content: space-between;
    max-width: none !important;
}.first-pagelink {
    display: flex !important;
    cursor: pointer !important;
}.links {
    display: flex;
}
.copyright {
    font-size: 10px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}.background-setting {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.help {
    height: 15px !important;
    margin-top: 10px !important;
    cursor: pointer;
    width: 15px !important;
    background-image: url(/css/icon/question-circle.svg);
}.qlink .title {
    font-size: 17px !important;
    margin-bottom: 10px !important;
}.qlink a {
    color: #000000 !important;
    font-size: 13px !important;
}

@media (max-width: 1193px){
    .edit-product-form form{
        margin-top: 10px;
    }
}

@media (max-width: 443px){
    .btn-sflex{
        display: block!important;
        width: 100%;
    }
    .btn-sflex div{
        width: 100%;
        margin-top: 15px;
    }
    .btn-sflex div input{
        width: 100%!important;
    }
    .delete-btn{
        padding: 10px;
        border: 5px solid #000000;
        background-color: #fff;
        color: #000!important;
        text-decoration: none;
        text-align: center;
        margin-top: 10px;
        display: block;
    }
}

.search-form form{
    width: 100%;
    max-width: 800px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.search-form input.box{
    width: calc(100%);
}

li.article-box {
    display: block;
    font-size: 11px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #989898;
}

li.article-box a{
    overflow: hidden;
    white-space: nowrap!important;
    text-overflow: ellipsis;
}

li.article-box a.nonone{
    font-size: 21px;
}

.title-3{
    font-size: 17px;
}

.link:hover{
    text-decoration:underline ;
}

.copyright{
    font-family: 'Noto Sans TC'!important;
}


body{
    --x: 0px;
    --y: 0px;
}

/* a.link{
    display: inline-block;
    text-decoration: none;
    background-image: radial-gradient(var(--lighting-highlight-color), var(--lighting-color), var(--lighting-color));
    background-size: var(--lighting-size) var(--lighting-size);
    background-repeat: no-repeat;
    background-position-x: calc(var(--x) - var(--positionX) - calc(var(--lighting-size) / 2));
    background-position-y: calc(var(--y) - var(--positionY) - calc(var(--lighting-size) / 2));
    background-color: var(--lighting-color);
    color: #00000000;
    -webkit-background-clip: text;
    background-clip: text;

}

p.title-3{
    display: inline-block;
    text-decoration: none;
    background-image: radial-gradient(var(--plighting-highlight-color), var(--plighting-color), var(--plighting-color));
    background-size: var(--lighting-size) var(--lighting-size);
    background-repeat: no-repeat;
    background-position-x: calc(var(--x) - var(--positionX) - calc(var(--lighting-size) / 2));
    background-position-y: calc(var(--y) - var(--positionY) - calc(var(--lighting-size) / 2));
    background-color: var(--plighting-color);
    color: #00000000;
    -webkit-background-clip: text;
    background-clip: text;

} */
  input[type = text]{
    cursor: text;
  }

  .wiki-logo{
  background-repeat: no-repeat;
  background-image: url(/image/wiki\ lock.png);
  background-size: 464px 480px;
  width: 58px;
  height: 80px;
  animation: apple-logo-lock-large 1.6s steps(1) forwards;
  background-position: 0px 0px;
  
}

@keyframes apple-logo-lock-large{
  0% {
    background-position: 0px 0px;
}
2.08333% {
    background-position: -58px 0px;
}
4.16667% {
    background-position: -116px 0px;
}
6.25% {
    background-position: -174px 0px;
}
8.33333% {
    background-position: -232px 0px;
}
10.4167% {
    background-position: -290px 0px;
}
12.5% {
    background-position: -348px 0px;
}
14.5833% {
    background-position: -406px 0px;
}
16.6667% {
    background-position: 0px -80px;
}
18.75% {
    background-position: -58px -80px;
}
20.8333% {
    background-position: -116px -80px;
}
22.9167% {
    background-position: -174px -80px;
}
25% {
    background-position: -232px -80px;
}
27.0833% {
    background-position: -290px -80px;
}
29.1667% {
    background-position: -348px -80px;
}
31.25% {
    background-position: -406px -80px;
}
33.3333% {
    background-position: 0px -160px;
}
35.4167% {
    background-position: -58px -160px;
}
37.5% {
    background-position: -116px -160px;
}
39.5833% {
    background-position: -174px -160px;
}
41.6667% {
    background-position: -232px -160px;
}
43.75% {
    background-position: -290px -160px;
}
45.8333% {
    background-position: -348px -160px;
}
47.9167% {
    background-position: -406px -160px;
}
50% {
    background-position: 0px -240px;
}
52.0833% {
    background-position: -58px -240px;
}
54.1667% {
    background-position: -116px -240px;
}
56.25% {
    background-position: -174px -240px;
}
58.3333% {
    background-position: -232px -240px;
}
60.4167% {
    background-position: -290px -240px;
}
62.5% {
    background-position: -348px -240px;
}
64.5833% {
    background-position: -406px -240px;
}
66.6667% {
    background-position: 0px -320px;
}
68.75% {
    background-position: -58px -320px;
}
70.8333% {
    background-position: -116px -320px;
}
72.9167% {
    background-position: -174px -320px;
}
75% {
    background-position: -232px -320px;
}
77.0833% {
    background-position: -290px -320px;
}
79.1667% {
    background-position: -348px -320px;
}
81.25% {
    background-position: -406px -320px;
}
83.3333% {
    background-position: 0px -400px;
}
85.4167% {
    background-position: -58px -400px;
}
87.5% {
    background-position: -116px -400px;
}
89.5833% {
    background-position: -174px -400px;
}
91.6667% {
    background-position: -232px -400px;
}
93.75% {
    background-position: -290px -400px;
}
95.8333% {
    background-position: -348px -400px;
}
97.9167% {
    background-position: -406px -400px;
}
100% {
    background-position: -406px -400px;
}
}

.flex{
    display: flex;
}

.likk{
    cursor: pointer;
}

.jcs{
    justify-content: space-between;
}

.edit-box{
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 1px solid #d2d2d7;
    margin-bottom: 30px;
}

input.ndo,
input.do{
    margin-top: 10px;
    border: 5px solid #000;
    padding: 5px;
    background-color: #ffffff;
    cursor: pointer;
    color: #000;
    border-radius: 0px!important;
    height: 39px;
    width: 99.98px;
}

.code pre{
    max-width: 800px;
    overflow: auto;
    border-radius: 10px;
    background-color: #e7e7e7;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px;
}

.code .cl{
    display: flex;
}

.history{
    position: fixed;
    height: calc(100vh - 10px);
    left: 10px;
    border-radius: 0px 0px 15px 15px;
    border: 1px solid #000;
    width: calc(100% - 20px);
    overflow: auto;
    padding: 10px;
    background-color: #fff;
    border-top: 5px solid #ffffff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000;
}

.history.active{
    animation: ghyr 1s cubic-bezier(0.66,0,0.2,1);
}

@keyframes ghyr {
    0%{
        top: calc(-20%);
        opacity: 0;
    }
    100%{
        top: 0;
        opacity: 1;
    }
}

.control-history{
    max-width: 800px;
    margin: auto;
    margin-bottom: 70px;
}

.cancel.mdr,
.cancel.ooo{
    position: sticky;
    top: 0px;
    color: #000000;
    padding: 10px;
    width: 65px;
    cursor: pointer;
}

.cancel.ooo svg,
.cancel.mdr svg{
    width: 30px;
    height: 30px;
}

.historyy{
    cursor: pointer;
    margin-top: 10px;
    border: 5px solid #000;
    padding: 5px;
    background-color: #ffffff;
    font-size: 13px;
    white-space: nowrap;
    max-height: 39px;
}

.history li.tyty,
.likk{
    overflow-x: hidden;
    font-size: 20px;
    list-style: none;
    counter-increment: item-counter;
    width: 100%;
    max-width: 800px;
    margin: auto;
    padding: 20px 0px;
    background-color: #FFCC00;
    border: 1px solid #000;
    padding: 15px;
    border-radius: 15px;
    margin-top: 20px;
    transition: all .2s cubic-bezier(0.66,0,0.2,1);
}

.history li.tyty a{
    color: #000;
}

.history li.tyty::before{
        overflow-x: hidden;
        font-size: 35px;
        font-weight: 600;
        list-style: none;
        content: counter(item-counter);
        margin-right: 10px;
        transform: translateY(-15px);
        min-width: 40px!important;
        color: #000000;
}

.likk:hover{
    background-color: #ffdb4d!important;
}

.titlepp{
    position: sticky;
    background: #fff;
    border-bottom: 1px solid #d2d2d7;
    height: calc(auto + 20px);
    padding-bottom:10px;
    padding-top: 10px;
    top: -10px;
    z-index: 100;
}

section.control-history .code a{
    color: #0071ef;
}

.cancel.mdr{
    display: none;
}

@media (max-width: 980px){
    .cancel.ooo{
       display: none;
    }

    .cancel.mdr{
        display: block;
        padding: 5px;
    }
    .titlepp{
        display: flex;
    }
}

@media (max-width: 670px){
    .flex.jcs.edit-box{
        display: block;
    }
}

.edit-product-form textarea{
    cursor: text!important;
}

input.ndo{
    min-height:39px;
    min-width:39px;
    max-width:39px;
    max-height:39px;
    background-image: url(/image/unpen-icon.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.do{
    min-height:39px;
    min-width:39px;
    max-width:39px;
    max-height:39px;
    background-image: url(/image/pen-icon.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid #000;
    margin-top: 10px;
    cursor: pointer;
}

.historyy{
    min-height:39px;
    min-width:39px;
    max-width:39px;
    max-height:39px;
    background-image: url(/image/history-icon.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.editifi{
    height: 28px;
    width: 28px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(/image/pen.svg);
}

.plusiu{
    height: 28px;
    width: 28px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(/image/plus.svg);
}

.box.task.active{
    position: fixed;
    left: 10px;
    top: 10px;
    height: calc(100vh - 20px);
    width: calc(100% - 20px);
    overflow-y: auto;
    background-color: #fff;
    border:1px solid #000;
    border-radius: 15px;
    overflow-x: hidden;
    z-index: 10000000000;
    padding: 10px;
}

.box.task.active img{
    max-width: 900px;
    width: 100%;
    margin: auto;
    display: block;
}

.box.task.active .copy-box{
    max-width: 900px;
    margin: auto;
    margin-top: 10px;
    position: fixed;
    top: calc(100% - 70px);
    background-color: #FFDA45;
    border: 1px solid #000;
    padding: 10px;
    border-radius: 15px;
}

.box.task .copy-box{
    display: flex;
    overflow-x: auto;
}

.box.task .copy-box .c{
    display: flex;
    margin-right: 5px;
}

.bi.bi-clipboard{
    background-image: url(/image/clip.svg);
    height: 24px;
    width:24px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
}

.page-bars{
    position: fixed;
    top: calc(100% - 110px);
    height: 100px;
    left: calc(calc(100% - 337.92) / 2);
    max-width: 800px;
    padding: 10px;
    background-color: #FFDA45;
    border: 1px solid #000;
    border-radius: 15px;
}

.page-bars div{
    margin-top: 10px;
}

.page-bars a{
    color: #0071ef;
}

.disabled {
    pointer-events: none;
    opacity: .5!important;
    user-select: none;
}

.page-bars a{
    margin-right: 10px;
}

.lastpp{
    padding-left: 20px!important;
    padding-right: 20px!important;
    background-image: url(/image/chevron-double-left.svg);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
}

.lastp {
    padding-left: 20px!important;
    padding-right: 20px!important;
    background-image: url(/image/chevron-left.svg);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
}

.nextp {
    padding-left: 20px!important;
    padding-right: 20px!important;
    background-image: url(/image/chevron-right.svg);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
}

.nextpp {
    padding-left: 20px!important;
    padding-right: 20px!important;
    background-image: url(/image/chevron-double-right.svg);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
}

table{
    border-color: #000;
    border-style: solid;
    caption-side: bottom;
    border-collapse: collapse;
    width: 100%;
    border: 1px;
    --blue-bg-color: #d4e8ff;
    --blue-active-bg-color: #0071ef;
    --blue-active-text-color: #fff;
    --blue-text-color: #000;
    --primary-bg-color: #ffffff;
    --primary-active-bg-color: #dedede;
    --primary-text-color: #000;
    --primary-active-text-color: #000;
}

thead,
tr,
th,
td,
tbody{
    border-width: 1px;
    border-color: #e7e7e7;
    border-style: solid;
    padding: 5px;
    background-color: #fefefe;
}

.table.primary thead,
.table.primary tr,
.table.primary th,
.table.primary td,
.table.primary tbody{
    background-color: var(--primary-bg-color);
    color: var(--primary-text-color);
}

table.primary .table-active,
table.primary .table-active thead,
table.primary .table-active tr,
table.primary .table-active th,
table.primary .table-active td,
table.primary .table-active tbody{
    background-color: var(--primary-active-bg-color)!important;
    color: var(--primary-text-color)!important;
}

.table.blue thead,
.table.blue tr,
.table.blue th,
.table.blue td,
.table.blue tbody{
    background-color: var(--blue-bg-color);
    color: var(--blue-text-color);
}

table.blue .table-active,
table.blue .table-active thead,
table.blue .table-active tr,
table.blue .table-active th,
table.blue .table-active td,
table.blue .table-active tbody{
    background-color: var(--blue-active-bg-color)!important;
    color: var(--blue-active-text-color)!important;
}

.table.blue.nactive tr:nth-child(2n) th,
.table.blue.nactive tr:nth-child(2n) td{
    background-color: var(--blue-active-bg-color);
    color: var(--blue-active-text-color);
}

.table.primary.nactive tr:nth-child(2n) th,
.table.primary.nactive tr:nth-child(2n) td{
    background-color: var(--primary-active-bg-color);
    color: var(--primary-active-text-color);
}
.page-control{
    background-color: #fff;
}

.page-control.open{
    max-width: calc(100% - 20px);
    margin-left: 10px;

}

.history img{
    max-width: 500px;
}

@media (max-width: 840px){
    .page-control{
        width: calc(100% - 20px);
        margin-left: 10px;
    }
}

.page-namee{
    font-size: 35px;
}

code[class*="language-"],
pre[class*="language-"] {
  color: #C86B55;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;

  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
  text-shadow: none;
  background: #1F1F1F;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
  text-shadow: none;
  background: #1F1F1F;
}

@media print {
  code[class*="language-"],
  pre[class*="language-"] {
    text-shadow: none;
  }
}

/* Code blocks */
pre[class*="language-"] {
  padding: 1em;
  margin: .5em 0;
  overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background: #1f1f1f;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: slategray;
}

.token.punctuation {
  color: #C86B55;
}

.namespace {
  opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: #2D7AD6;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #5DB2EC;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: #a67f59;
  background: #53535380;
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #C86B55;
}

.token.function {
  color: #dcdcaa;
}

.token.regex,
.token.important,
.token.variable {
  color: #e90;
}

.token.important,
.token.bold {
  font-weight: bold;
}
.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

.conrol{
    display: none;
}

.mce-floatpanel.mce-fixed,
.mce-menu{
    z-index: 100000000000000!important;
}

body{
    overflow-y: auto!important;
}

.edit-product-form{
    border: none;
    overflow-x: hidden;
    padding: 10px;
}

.page-control{
    overflow-x: hidden;
}
.edit-product-form{
    background-color:#fff;
}
@media (max-width: 820px){
    .edit-product-form{
        width: calc(100% + 20px);
        left: 0;
        padding: 0;
        overflow-x: hidden;
    }
    .ui.grid{
    width: 100%;
}
}

a:hover{
    text-decoration: underline!important;
}

.preview-link {
    display: inline-block;
    margin-right: 10px;
}

#preview-box {
    position: absolute;
    display: none;
    background-color: white;
    border: 1px solid #0071ef;
    padding: -110px -200px;
    z-index: 100000000000000000000000000000000000000000000000000000000001;
    max-width: 300px;
    max-height: 200px;
    overflow: hidden;
    opacity: 0;
    transition: all .2s cubic-bezier(0.66, 0, 0.24, 1.71);
    transform: translateY(20px) scale(0.5);
    border-radius: 10px;
    width: 300px;
}

#preview-box.inin{
    opacity: 1;
    transform: translateY(0px) scale(1);
}

#preview-box .head,
#preview-box .footer,
#preview-box .slf.jcs.edit-box div,
#preview-box .page-control-l{
    display: none!important;
}

#preview-box .flex{
    display: block;
}

#preview-box img{
    max-width: 280px;
    margin: auto;
    height: auto;
}

#preview-box h1{
    font-size: 22px;
}

#preview-box h1.page-name{
    font-size: 22px!important;
    margin-bottom: 0!important;
    margin-top: 0px!important;
}

#preview-box p,
#preview-box span,
#preview-box a,
#preview-box h2,
#preview-box h3,
#preview-box h4,
#preview-box h5,
#preview-box h6{
    font-size: 15px!important;
}

@media (max-width: 752px){
    img{
        max-width: 100%!important;
        height: auto;
    }
}

a.link{
    color: #0071ef;
}

.a.link.b{
    color: #000;
}

li.article-box a,
li.article-box p,
li.article-box h1,
li.article-box h2,
li.article-box h3,
li.article-box h4,
li.article-box h5,
li.article-box h6,
li.article-box span,
li.article-box li,
li.article-box div{
    font-size: 13px!important;
    pointer-events: none!important;
    color: #a6a6a6!important;
}

li.article-box .nonone.lili:nth-child(2){
    pointer-events: all!important;
    font-size: 21px!important;
    opacity: 1;
    color: #000!important;
}

li.article-box img{
    display: none;
}

li.article-box{
    height: 150px!important;
    overflow: hidden;
    border-top: 1px solid #d2d2d7;
}

.editor-sjk{
    width: 100%;
    background-image: url(/image/editor-large.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 310px;
    margin-top: 10px;
    border-radius: 15px;
    border: 1px solid #d2d2d7;
}

.grid{
    display: grid;
}

.gallery{
        grid-template-columns: repeat(4,minmax(0,1fr));
        row-gap: 10px;
        -webkit-column-gap: 12px;
        -moz-column-gap: 12px;
        column-gap: 12px;
        gap: 30px;
        max-width: 600px;
}

@media (max-width: 514px){
    .editor-sjk{
        background-image: url(/image/editor-medium.png);
    }
}
@media (max-width: 443px){
    .editor-sjk{
        background-image: url(/image/editor-small.png);
    }
}

.page-control-l{
    background-color: #fff;
    width: 100%;
    /* border: 1px solid #d2d2d7; */
    border-top: none;
    border-bottom: none;
    margin: 0px 10px;
    padding: 10px;
    padding-top: 90px;
}

.page-control-l a{
    color: #474747;
}

.page-control-l li{
    list-style: none;
}

.page-control-l h2{
    margin-bottom: 5px;
    margin-top: 10px;
}

@media (max-width: 840px){
    .page-control{
        width: calc(100% - 20px) ;
        min-width: 320px;
    }
    
}

.ew{
    max-width: 145px;
}

.ew li{

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    counter-increment: item-counter;
}

.ew li:before {
    color: #AFAFAF;
    overflow-x: hidden;
    font-weight: 600;
    font-size: 10px;
    list-style: none;
    content: counter(item-counter);
    margin-right: 10px;
    transform: translateY(-15px);
    width: 40px!important;
}
.list{
    height: 30px;
    width: 30px;
    background-image: url(/image/list-nested.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    display: none;
}

@media (max-width: 1342px){
    .page-control-l,
    .page-control{
        transition: all .5s cubic-bezier(0.66,0,0.2,1);
    }
    .page-control-l.n{
        display: none!important;   
    }
    .page-control-l.a{
        margin-left: -100%;
    }
    .page-control-l.b{
        
        margin-right: -100%;
    }
    .page-control-l.b.active,
    .page-control-l.a.active{
        margin: 0;
        /* display: block!important;    */
    }
    .page-control-l.active h2,
    .page-control-l.active li{
        text-align: center;
    }
    .page-control-l.active .ew{
        margin: auto;
    }
    .page-control.active{
        min-width: 0px!important;
        max-width: 0px!important;
        overflow: hidden;
        opacity: 0;
    }
    .page-control.n{
        display: none;
    }
    body{
        overflow-x: hidden;
    }
    .list{
        display: block;
    }
}

.page-control-l .wikilogo{
    height: 70px;
    width: 70px;
    margin: auto;
    background-image: url(/image/bitlogo.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* animation: uuh .1s linear infinite; */
}

@keyframes uuh{
    0%{
        transform: rotate(0deg) translateY(0px);
    }
    50%{
        transform: rotate(180deg) translateY(10px);
    }
    100%{
        transform: rotate(360deg) translateY(0px);
    }
}

.page-control-l.b p{
    text-align: center;
    margin-top: 15px;
}

.block{
    display: block!important;
}

@media (max-width: 653px){
    .rrt.hbbb{
        display: block!important;
    }
    .page-control-l.b,
    .page-control-l.a{
        opacity: 0;
    }
    .page-control-l.b.active,
    .page-control-l.a.active{
        opacity: 1;
        max-height: none;
    }
}

#preview-box .page-control{
    transform: translateY(-110px);
    max-width: 300px;
    min-width: 300px!important;
    overflow: hidden;
}

.page-control{
    min-height: 100vh;
    height: auto!important;
}

table{
    font-size:15px;
}

.page-control{
    align-items: start;
}

.title-wiki{
    width: calc(100% + 20px);
    height: 421px;
    background-image: url(/image/title-wiki.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: -10px;
}

@media (max-width: 726px){
    .title-wiki{
        width: calc(100% + 20px);
        height: 421px;
        background-image: url(/image/title-wiki-2.png);
    }
}

@media (max-width: 450px){
    .title-wiki{
        width: calc(100% + 20px);
        height: 421px;
        background-image: url(/image/title-wiki-3.png);
    }
}

@media (max-width: 381px){
    .title-wiki{
        width: calc(100% + 20px);
        height: 421px;
        background-image: url(/image/title-wiki-4.png);
    }
}

.page-control-l.b,
.page-control-l.a{
    background-image: url(/image/title-background.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.mce-content-body *[contentEditable=false] {
    cursor: default;
}
.mce-toc {
    border: 1px solid gray;
    padding: 10px;
    border-radius: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.mce-toc li{
list-style-type: none;
}

li ul li{
    margin-left: 25px;
}

.first-ppp{
    width: 100%;
    background-image: url(/image/backstyle.png);
    background-size:auto;
    background-position: center;
    padding-top: 56px;
}

.first-ppp .background{
    background-image: url(/image/re-background.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 319.18px;
    width: 700.48px;
}

.first-ppp .hot-box{
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 20px;
    height: 354px;
    width: 400px;
    margin: 20px auto;
    padding: 20px 25px;
}

li.hot{
    list-style-type: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: unset!important;
    list-style: none;
    counter-increment: item-counter;
    margin-top: 10px;
}

li.hot:before {
    color: #000;
    background-color: #FFCC00;
    border-radius: 50%;
    border: 1px solid #000;
    font-weight: 600;
    font-size: 25px;
    padding: 3px;
    list-style: none;
    content: counter(item-counter);
    display: inline-block;
    text-align: center;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    margin-right: 5px;
}

.first-ppp .hot-box li a{
    color: #000;
}

.first-ppp h1.title{
    font-size: 30px;
}

.control-width{
    margin: auto;
    display: flex;
    max-width: 100%;
    justify-content: space-between;
}

.join-vote-btn{
    padding: 10px;
    border: 1px solid #000;
    display: flex;
    box-sizing: border-box;
    border-radius: 100px;
    background-color: #FFCC00;
    font-weight: 600;
    cursor: pointer;
    margin-top: 50px;
    width: 120px;
    overflow: hidden;
    transition: all .2s cubic-bezier(0.66,0,0.2,1);
}

.join-vote-btn span{
    white-space: nowrap;
    text-align: center;
    margin: auto;
}

.in-icon{
    background-image: url(/image/in-icon.svg);
    height: 21px;
    width: 15px;
    margin-top: 1.5px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: all .5s cubic-bezier(1,-2.22, 0.29, 4.14);
}

.join-vote-btn:hover{
    background-color: #ffd83e;
}

.join-vote-btn.active{
    width: 100%;
}

.join-vote-btn:hover .in-icon.ml{
    transform: translate(5px);
}

.ml{
    margin-left: 5px;
}.mr{
    margin-right: 5px;
}.mt{
    margin-top: 5px;
}.mb{
    margin-bottom: 5px;
}

body{
    transition: all 2s cubic-bezier(0.66,0,0.2,1);
}

body.move{
    background-color: #FFCC00;
    transform: translateX(-100%);
}

body.move div{
    opacity: 0;
}

.mi{
    height: 56px;
    width: 100%;
}

.vote-box{
    border: 1px solid #000;
    border-radius: 20px;
    max-width: 1000px;
    margin: auto;
    margin-top: 20px;
    background-color: #fff;
    padding:15px;
}

.in-icon.d{
    transform: rotate(90deg);
    height: 21px;
}

.in-icon.l{
    transform: rotate(180deg);
    height: 21px;
}

.open-btn{
    margin-top: 50px;
    font-size: 15px;
    cursor: pointer;
}

.open-btn svg{
    height: 15px;
    margin-top: 3.5px;
    transform: rotate(90deg);
    margin-left: 5px;
}

.open-btn.active svg{
    transform: rotate(-90deg);
}

.choice{
    border-radius: 15px;
    border: 1px solid #000;
    padding: 15px;
    transition: all .5s cubic-bezier(0.66,0,0.2,1);
    margin-top: 25px;
}

.boxt{
    margin: auto 0;
}

.boxt .voteit-btn{
    margin: auto;
    padding: 10px;
    border-radius: 20px;
    background-color: #FFCC00;
    border: 1px solid #000;
    width: 70px;
    text-align: center;
    cursor: pointer;
    transition: all .2s cubic-bezier(0.66,0,0.2,1);
    white-space: nowrap;
}

.boxt .voteit-btn:hover{
    background-color: #ffd83e;
}

.dir.none{
    display: block!important;
    opacity: .5;
    pointer-events: none;
}

.choice.voted{
    background-color: #FFCC00;
}

.tilmu-content{
    max-height: 800px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #000;
    border-radius: 10px;
    padding: 15px;
    opacity: 0;
    transform: translateY(100px);
    transition: all .5s cubic-bezier(0.66,0,0.2,1);
    height: 0;
    overflow-x: hidden;
    margin-right: 5px!important;
    text-align: justify;
}

.tilmu-content.active{
    opacity: 1;
    max-height: 800px;
    height: 100%;
    transform: translateY(0);
}

.in-icon.rod{
    transform: rotate(90deg);
}

.in-icon.rou{
    transform: rotate(-90deg);
}

.in-icon.rol{
    transform: rotate(-180deg);
}

.pgc{
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
}

.choice .title{
    white-space: nowrap;
}

@media (max-width:583px){
    .choice{
        display: block!important;
    }
    .voteit-btn{
        display: block;
        margin: 0!important;
        margin-top: 40px!important;
    }
}

.tilmu-content .open-btn{
    margin-top: 10px;
    margin-bottom: 15px;
}

.backvote:hover .in-icon.rol{
    transform: translateX(-2px) rotate(-180deg);
}


body {
    transition: all 2s cubic-bezier(0.66,0,0.2,1);
}

body.back{
    background-color: #ffffff;
    transform: translateX(100%);
}

body.backf{
    animation: backf 1s cubic-bezier(0.66,0,0.2,1) forwards;
}

.first-ppp .control-width{
    padding-right:10px;
}

@media (max-width:836px){
    .control-width{
        display: block;
        padding-right: 0px!important;
        padding-top: 50px;
    }
    .background{
        width: 100%!important;
        height: 442px!important;
        transform: translateY(90px);
    }
    .hot-box{
        margin: auto!important;
    }
    .first-ppp{
        background-size: cover;
        transform: translateY(-70px);
    }
    .round{
        z-index: 100;
        top:481px!important;
    }
}
@media (max-width:660px){
    .first-ppp .background{
        background-image: url(/image/re-background-2.png);
    }
}

.ltitle{
    font-weight: 600;
    font-size: 17px;
}

.lastest-tilmu .box{
    border: 1px solid #000;
    padding: 20px;
    border-radius: 25px;
    background-color: #FFCC00;
    background-image: url(/image/lastest-tilmu-back.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

li.hot{
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

li.hot a{
    overflow: hidden;
    white-space: nowrap!important;
    text-overflow: ellipsis;
    transform: translateY(10px);
}

.lastest-tilmu li.hot::before{
    background-color: #fff!important;
    margin-right: 10px;
}

.lastest-tilmu a{
    color: #000;
}

.link-g{
    margin-top: -10px;
}

.link-g li{
    list-style-type: none;
    transform: translateY(20px);
}

.link-g li a:hover{
    text-decoration: none!important;
}

.link-g li:hover{
    background-color: #ffd83e;
}

.link-g li{
    padding: 10px 15px;
    background-color: #FFCC00;
    border-radius: 30px;
    border: 1px solid #000;
    position: relative;
}

.quicklinkl{
    margin-top: 40px;
    margin-bottom: 40px;
}

li.hot.y::before{
    background-color: #FFCC00!important;
}

.title-of-function{
    margin-bottom: 10px;
}

.title-of-function .logo{
    height: 40px;
    width: 40px;
    background-image: url(/image/puffwiki-logo.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 10px;
}

@media (max-width: 420px){
.first-ppp .hot-box{
    width: calc(100% - 20px);
    margin: 0 10px!important;
}}

.head .callout{
    min-height: 30px;
    min-width: 30px;
    background-image: url(/image/list-nested.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: none;
    cursor: pointer;
    transform: translateY(2px);
}

.head .loading{
    display: none;
}

.mobile{
    display: none;
}

.choice{
    overflow: hidden;
}

.choice .parto{
    transition: all .5s cubic-bezier(0.66,0,0.2,1);
}

.choice.active .parto{
    height: 956px;
}

.left-box{
    width: 350px;
    padding-top: 54px;
    border-right: 1px solid #000;
    background-color: #fff1ba;
    padding: 10px;
    padding-top: 70px;
    border-bottom: 1px solid #000;
    border-radius: 0 0 15px 0;
}

.sticky{
position: sticky;
    top: 60px;
}

.historyy,
.do{
    border: 1px solid #000;
    border-radius: 10px;
    background-color: #FFCC00;
    padding: 10px;
}

.left-box li{
    list-style-type: none;
}
.left-box li a{
    color: #000;
}

.left-box .logo{
    height: 55.16px;
    width: 223.3px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/image/logo-puffwikiword.svg);
}

#preview-box .left-box{
    display: none;
}

#preview-box .page-control{
    margin: auto!important;
}

@media (max-width:1040px){
    .left-box{
        width: 250px;
    }
}

@media (max-width:786px){
    .left-box{
        display: none;
    }
    .page-control{
        margin: auto!important;
    }
}

.page-name{
    display: none;
    transition: all .2s cubic-bezier(0.66,0,0.2,1);
    transform: scale(0);
    opacity: 0;
}

.head .loading,
.head .loading svg{
    height: 0px!important;
        width: 35px!important;
        opacity: 0;
        transform: scale(0);
        display: block;
        
        transition: all .2s cubic-bezier(0.66,0,0.2,1);
}

.head.loading .loading,
.head .loading svg{
    opacity: 1;
    transform: scale(1);
    height: 35px!important;
    width: 35px!important;
}

.head{
    height: 56px;
    transition: all 500ms cubic-bezier(.666, 0, .4, 1.2);
    overflow: hidden;
}

.head.dynamic{
    height: 200px;
}


.head.dynamic .page-name{
    display: block;
    transform: scale(1) translateY(0px) translateX(-25px)!important;
    opacity: 1;
transition-delay: .5s;
    
}
.head .page-name{
position: absolute;
font-size: 20px;
min-width: 60px;
display: block;text-align: center;
width: 100%;
height: 50px;
transform: scale(1) translateY(10px) translateX(-25px)!important;
margin-right: 5px;
    top: 100px;
    opacity: 0;
font-weight: 600;
color: #000000;
transition: all .2s cubic-bezier(0.66,0,0.2,1);

}

@media (max-width:802px){
    .head .flex{
        display: none!important;
    }
    .head .callout{
        transition: all .2s cubic-bezier(0.66,0,0.2,1);
        opacity: .8;
        display: block;
        max-width: 30px;
        max-height: 30px;
        transform: scale(1);
        transition-delay: .2s;
    }
    .head .loading,
    .head svg{
        height: 0px;
        width: 35px;
        opacity: 0;
        transform: scale(0);
        display: block;
        
        transition: all .2s cubic-bezier(0.66,0,0.2,1);
    }
    .head.loading .loading,
    .head.loading svg{
        opacity: 1;
        transform: scale(1);
        height: 35px!important;
        width: 35px!important;
    }
    .head.loading .loading,
    .head.loading svg{
        display: block;
    }
    .head.loading .callout,
    .head.loading.dynamic .callout{
        opacity: 0;
        transform: scale(0);
    }

.fixed-edit{
    top: 64px;
}

    @keyframes opds{
        0%{
            opacity: 0;
        }
        100%{
            opacity: 1;
        }
    }
    .head.active .page-name{
        /* display: none; */
        opacity: 0;
        width: 0px;
        white-space: nowrap;
        transition-delay: .3s;
    }
    .head.dynamic .callout{
        transform: scale(.8);
        opacity: .9;
        animation: trnas .5s cubic-bezier(0.66,0,0.2,1);
    }
    @keyframes trnas{
        0%{
            opacity: 1;
            transform: scale(1);
        }
        50%{
            opacity: 0;
            transform: scale(0);
        }
        100%{
            opacity: 1;
            transform: scale(.8);
        }
    }
    .head.dynamic{
        width: calc(320px);
        left: calc(50% - 160px);
        height: 200px;
    }
    .head{
        overflow: hidden;
        height: 54px;
        top: 10px;
        transition: all 500ms cubic-bezier(.666, 0, .4, 1.2);
        left: calc(10px);
        transition-delay: 0s!important;
        min-width: 300px;
        width: calc(100% - 20px);
        border-radius: 27px;
        padding: 10px 25px;
        border: 1px solid #fff;
    }
    .left-box.active{
        display: block;
        width: 100%;
    }
    .eeeefff
    .head.active{
        height: calc(100vh - 20px);
        background-color: #ffffff;
        width: calc(100% - 20px);
        left:10px;
        border: 1px solid #ffcc00;
        padding: 15px;
        transition-delay: .5s!important;
    }
    .head.active .callout{
        transform: scale(1.05) translateX(-15px);
    }
    .head .mobile{
        position: absolute;
        top: -300%;
        opacity: 0;
        display: block!important;
        left: calc(50% - 58.5px);
        transition: all .5s cubic-bezier(0.66,0,.2,1);
        transition-delay: 0s;
        pointer-events: none;
    }
    .head.active .mobile{
        top: calc(50% - 150px);
        opacity: 1;transition-delay: .5s;
        pointer-events: all;
    }
    .head .mobile li{
        margin-top: 10px;
        text-align: center;
        transition: all .2s cubic-bezier(0.66,0,0.2,1);
        background-color: #fff;
        transform: scale(.7);
        transition-delay: 0s;
    }
    .head.active .mobile li{
        background-color: #FFCC00;
        transform: scale(1);
    }
    .head.active .mobile li:nth-child(1){
        transition-delay: .9s;
    }
    .head.active .mobile li:nth-child(2){
        transition-delay: .95s;
    }
    .head.active .mobile li:nth-child(3){
        transition-delay: 1s;
    }
    .head.active .mobile li:nth-child(4){
        transition-delay: 1.05s;
    }
    .head.active .mobile li:nth-child(5){
        transition-delay: 1.1s;
    }
    .head .mobile li:hover{
        transform: scale(1.05);
    }
}

@media (max-width: 753px){
    body{
        /* margin-top: -20px; */
    }
}

/* .overlay{
    background-color: #ffffffab;
    position: fixed;
    height: 100vh;
    width: 100%;
    top: 0;
    z-index: 10000000000;
} */

iframe{
    border: 1px solid #000;
    border-radius: 15px;
}

.styleinptu input,
.styleinptu select{
    width: 100%;
    border: 1px solid #000;
    border-radius: 15px;
    margin-top: 10px;
    padding: 15px!important;
    outline: none!important;
}

select option {
    height: 100px;
}

.styleinptu input[type=submit]{
    border: 1px solid #000!important;
    background-color: #ffcc00;
    cursor: pointer;
}

.styleinptu input[type=submit]:hover{
    background-color: #ffd83e;
}

.hot-box .hot{
    border-radius: 100px;
    /* border: 1px solid #000; */
}

.hot-box .hot::before{
    transform: translateX(-1px);
}
/* 
.hot-box .hot:nth-child(2){
    border-radius: 100px;
background-image: linear-gradient(to left,#ffcc00 0%, #ffcc00 62%,#fff 62%, #fff 100%);
}

.hot-box .hot:nth-child(3){
    border-radius: 100px;
background-image: linear-gradient(to left,#ffcc00 0%, #ffcc00 17%,#fff 17%, #fff 100%);
}

.hot-box .hot:nth-child(4){
    border-radius: 100px;
background-image: linear-gradient(to left,#ffcc00 0%, #ffcc00 11%,#fff 11%, #fff 100%);
} */

@media (max-width: 435px){
    .head .logo .logo-image{
        background-image: url(/image/W.svg);
        width: 30px;
        background-size:30px;
    }
}

.slide-container{
    width: 696px;
    height: auto;
    justify-content: space-between;
    transition: all 2.5s cubic-bezier(0.66,0,0.2,1);
    transform: translateX(0%);
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
}

.slide-container .slideone,
.slide-container .slidetwo{
    width: 100%;
    transition: all 1.5s cubic-bezier(0.66,0,0.2,1);
}

.slide-container .slidetwo{
    transform: translateX(30px);
  }
.hot-box.next{
    transition: all .5s cubic-bezier(0.66,0,0.2,1);
    background-color: #ffcc00;
    /* background-image: url(/image/jinshan.png); */
    background-image: url(/image/benji.png);
}

.hot-box{
    background-image: url(/image/transparent-box.png);
    transition: all .5s cubic-bezier(0.66,0,0.2,1);
      background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hot-box.next .slide-container{
    transform: translateX(calc(-50% - 30px));
}

.first-ppp .hot-box{
    overflow: hidden;
}

.slidetwo .title{
    color: #ffcc00;
}

.jico h1{
    font-size: 30px;
    background-color: #ffcc00;
    padding: 10px;
    border-radius: 15px;
    border: 1px solid #000;
    white-space: nowrap;
    margin-top: 10px;
    text-align: center;
    transition: all .2s cubic-bezier(0.66,0,0.2,1);
}

.hot-box .slidetwo .detail-slide{
    color: #fff;
    background: linear-gradient(180deg, #000000 22.40%, rgba(255, 255, 255, 0) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    font-weight: 600;
    -webkit-text-fill-color: #00000000;
    transform: translateY(10px);
    display: block;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    text-align: justify;
    height: 200px;}

.hot-box.next .slidetwo .detail-slide{
color: #fff;
background: linear-gradient(180deg, #ffffff 22.40%, rgba(255, 255, 255, 0) 100%);
background-clip: text;
-webkit-background-clip: text;
font-weight: 600;
-webkit-text-fill-color: #00000000;
transform: translateY(10px);
display: block;
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
text-align: justify;
height: 200px;
}

.button-flex{
    position: absolute;
    width: 450px;
    transform: translateX(-55px) translateY(119px);
pointer-events: none;
z-index: 100;
}

.hot-box .button-flex .btn:nth-child(1),
.hot-box.next .button-flex .btn:nth-child(2){
    transform: scale(0);
    opacity: 0;
}

.hot-box.next .button-flex .btn:nth-child(1),
.hot-box .button-flex .btn:nth-child(2){
    transform: scale(1);
    opacity: 1;
}

.button-flex .btn{
    padding: 10px;
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 50%;
    height: 45px;
    width: 45px;
    min-width: 45px;
    max-width: 45px;
    min-height: 45px;
    max-height: 45px;
    pointer-events: all;
    transition: all .3s cubic-bezier(0.66,0,0.2,1);
}

@media  (max-width:  1164px){
    .button-flex{
        width: 100px;
        transform: translateY(310px) translateX(129px);
        /* left: calc(50% - 50px); */
    }
    .slide-container{
        width: 200%;
    }
    .hot-box .button-flex .btn:nth-child(1),
.hot-box.next .button-flex .btn:nth-child(2){
    transform: scale(.6);
    opacity: 1;
}

.hot-box.next .button-flex .btn:nth-child(1),
.hot-box .button-flex .btn:nth-child(2){
    transform: scale(1);
    opacity: 1;
}
.jico h1{
    /* font-size: 20px!important; */
}
}


@media  (max-width:  429px){
    .button-flex{
        width: 100px;
        transform: translateY(310px);
        left: calc(50% - 50px);
    }
    .hot-box .button-flex .btn:nth-child(1),
.hot-box.next .button-flex .btn:nth-child(2){
    transform: scale(.6);
    opacity: 1;
}

.hot-box.next .button-flex .btn:nth-child(1),
.hot-box .button-flex .btn:nth-child(2){
    transform: scale(1);
    opacity: 1;
}
.jico h1{
    font-size: 20px!important;
}
}

.jico h1:hover{
    background-color: #fff;
}

.jico a:hover{
    text-decoration: none!important;
}

.round .round-back{
    height: 100px;
    width: 100px;
    background-image: url(/image/round-back.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    animation: go-round 3s linear infinite;
    position: absolute;
    top: 0;
    left: 0;
transition: all .5s cubic-bezier(0.66,0,0.2,1);
}

.first-ppp .round{
    left: calc(50% - 50px);
    top: 200px;
    position: absolute;
    transition: all .5s cubic-bezier(0.66,0,0.2,1);
    background-image: url(/image/transparent-box.png);
    height: 100px;
    width: 100px;
    border-radius: 50%;
}

@keyframes go-round{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

.round .w-round,
.round .line-round{
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.round .w-round{
    background-image: url(/image/w-round.png);
    height: 60px;
    width: 60px;
transition: all .4s cubic-bezier(0.66,0,0.2,1);
top: 20px;
left: 20px;
}

.round:hover .line-round{
    transform: scale(1) rotate(10deg);
 opacity: 1;
 top: 60px;
 left: 60px;
}

.round:hover .w-round{
    top: 15px;
    left: 15px;
}

.round .line-round{
    height: 20px;
    width: 20px;
    opacity: 0;
    top: 65px;
    left: 65px;
    transition: all .4s cubic-bezier(0.66,0,0.2,1);
    transform: scale(0.6) rotate(20deg);
    background-image: url(/image/line-round.svg);
}

.round.active{
   background-image: url(/image/round-image-back.jpg);
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   height: 200px;
   width: 200px;
   border-radius: 15px;
   background-color: #ffcc00;
   border: 1px solid #000;
   left: calc(50% - 100px);
}

.round.active .round-back{
    left: calc(50% - 50px);
    top: -40px;
}

.round.active .w-round{
    top: -20px;
    left: calc(50% - 30px);
}

.round.active .line-round{
    top: 20px;
    left: 114px;
}


.round.active:hover .w-round{
    top: -25px;
    left: calc(50% - 35px);
}

.round.active:hover .line-round{
    top: 20px;
    left: 109px;
}

.wait{
    position: fixed;
    left: 10px;
    top: 66px;
    width: calc(100% - 20px);
    height: calc(100vh - 56px - 20px);
    z-index: 1000;
    background-color: #ffcc00;
    border: 5px solid #000;
    border-radius: 20px;
}

.wait .cover-box{
    max-width: 900px;
    padding: 10px;
    display: flex;
    margin: auto;
    justify-content: space-between;
    margin-top: calc(50vh - 66px - 160px);
}

.wait .cover-box span{
    padding: 0;
}

.wait .cover-box div{
    width: 100%;
    margin: auto;
    margin-left: 30px;
}

.wait .cover-box .logoround{
    height: 300px;
    width: 300px;
    min-width: 300px;
    max-width: 300px;
    background-image: url(/image/logoround.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.cover-box span.content{
    margin-top: 20px;
    background: linear-gradient(180deg, #000000 22.40%, rgba(255, 255, 255, 0) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    font-weight: 600;
    -webkit-text-fill-color: #00000000;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
}

.choice.voted label{
    width: 97px;
}

.hot-box .slidetwo,
.hot-box.next .slideone{
    transform:scale(.9);
    opacity: 0;
}

.hot-box .slideone,
.hot-box.next .slidetwo{
    transform: scale(1);
    opacity: 1;
}

.hot-box .slidetwo{
    transform: scale(.9) translateX(30px);
}

.hot-box.next .slidetwo{
    transform: scale(1) translateX(30px);
}

.hot-box .title{
    transition: all .5s cubic-bezier(0.66,0,0.2,1);
}

.hot-box.next .slideone .title{
    color: #fff;
}

li::before{
    font-family: 'Noto Sans TC'!important;
}

#preview-box{
    padding-top: 10px;
}

#preview-box .slf{
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.puffwiki::before{
    content: '\e037';
}

.puffwiki-app::before{
    content: '\e036';
}

.code p{
    margin: 10px 0;
}

.slidetwo h1{
    font-size: 50px;
}

.slidetwo h1 span{
    font-size: 120px;
    color: #fff;
    text-shadow: 0 0 40px #00000069;
    font-family: 'sfprodisplayb'!important;
}

@media(max-width: 351px){
    .slidetwo h1{
        font-size: 47px;
    }
}

.goupd{
    position: fixed;
    left: calc(100% - 40px);
    top: calc(100% - 110px);
}

.gotop{
    border-radius: 50%;
    height: 30px;
    width: 30px;
    background-color: #fff;
    background-image: url(/image/arrow-up-circle.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transition: all .3s cubic-bezier(0.66,0,0.2,1);
    cursor: pointer;
}

.gotop:nth-child(2){
    margin-top: 10px;
    transform: rotate(180deg);
}

.gotop:hover{
    background-color: #ffcc00;
}

#preview-box .goupd{
    display: none;
}

#preview-box .mce-toc{
    display: none;
}

body{
    overflow-x: hidden;
}

.tonzi{
    position: fixed;
    top: 66px;
    padding: 10px;
    background-color: #fc0;
    border: 1px solid #000;
    border-left: 1px solid #00000000;
    border-radius: 0px 15px 15px 0;
    display: flex;
    z-index: 10000000;
    animation: euitonzi 1s cubic-bezier(1, 0, 0, 0.99) forwards;
}

@keyframes euitonzi{
    0%{
        opacity: 0;
        transform: translateX(-100%);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

.tonzi .cancel-btn{
    height: 25px;
    width: 25px;
    border-radius: 50%;
    margin-left: 10px;
    background-color: #000;
    color: #fc0;
    text-align: center;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #000;
    transition: all .3s cubic-bezier(0.66,0,0.2,1);
}

.tonzi .cancel-btn:hover{
    border: 1px solid #000;
    background-color: #fc0;
    color: #000;
}

#preview-box .tonzi{
    display: none;
}

.internet .ig{
    font-size: 25px;
    display: flex;
    cursor: pointer;
}

.internet .ig .icon{
    height: 30px;
    width: 30px;
    background-image: url(/image/instagram.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 10px;
}

.footer .line{
    width: 100%;
    margin: 20px 0 0 0;
    border-top: 1px solid #000;
}

.page-boxname{
    position: fixed;
    top: calc(100vh - 55px);
    height: 45px;
    border-radius: 22.5px;
    overflow: hidden;
    /* background-color: rgba(255, 204, 0, 0.267); */
    background: linear-gradient(93deg, rgba(142, 142, 142, 0.15) 0%, rgba(142, 142, 142, 0.15) 0.01%, rgba(0, 0, 0, 0.12) 51.04%, rgba(217, 217, 217, 0.10) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid #d2d2d7;
    animation: bjein 1s cubic-bezier(0.66, 0, 0.09, 1.83);
    width: 200px;
    left: calc(50% - 100px);
    padding: 10px;
    transition: all .5s cubic-bezier(0.66, 0, 0.09, 1.83);
}

.ansu{
    height: 45px;
    width: 45px;
    position: fixed;
    background-color: #0071ef;
    top: calc(100% - 55px);
    border-radius: 50%;
    left: calc(50% - 22.5px);
    animation: bjeins 1s cubic-bezier(0.66, 0, 0.09, 1.83) forwards;
}

@keyframes bjeins{
    0%{
        transform: translateY(60px) scale(.5);
    }
    50%{
        transform: translateY(-10px) scale(0);
    }
    82%{
        transform: translateY(-30px) scale(1.5);
        opacity: 1;
    }
    87%{
        transform: translateY(-30px) scale(1.5);
        opacity: 1;
    }
    99%{
        transform: translateY(0) scale(1);
    }
    100%{
        opacity: 0;
    }
}

body{
    min-width: 320px;
}

.page-boxname .loading{
    transition: all .5s cubic-bezier(0.66,0,0.2,1);
    transition-delay: 3s;
    width: calc(100% - 20px);
    margin-left: 10px;
}

.page-boxname .loading .proh{
    overflow: hidden;
    border-radius: 10px;
    height: 10px;
    width: 100%;
    background-color: rgb(155, 155, 155);
    margin-top: calc(7.5px);
}

.page-boxname .loading .proh .libe{
    width: 55%;
    background-color: #fc0;
    height: 10px;
    border-radius: 10px;
    animation: efjhi 2s cubic-bezier(0.66,0,0.2,1);
    transition: all .5s cubic-bezier(0.66,0,0.2,1);
    animation-delay: 1s;
}

@keyframes efjhi{
    0%{
        width: 0;
    }
    50%{
        width: 50%;
    }
    100%{
        width: 55%;
    }
}

body.loaded .page-boxname .loading .proh .libe{
    width: 100%;
}

body.loaded .page-boxname .loading{
    opacity: 0;
    margin-top: -19px;
}

@keyframes bjein{
    0%{
        transform: translateY(60px) scale(.5);
        opacity: 0;
        width: 20px;
        left: calc(50% - 10px);
    }
    82%{
        transform: translateY(-30px) scale(.8);
        opacity: 1;
        width: 45px;
        left: calc(50% - 22.5px);
        background-color: #fff;
    }
    87%{
        transform: translateY(-30px) scale(1);
        opacity: 1;
        width: 45px;
        left: calc(50% - 22.5px);
    }
    100%{
        transform: translateY(0) scale(1);
        opacity: 1;
        left: calc(50% - 100px);
    }
}

.selection{
    display: flex;
    justify-content: space-between;
    opacity: 0;
    height: 25px;
    transition: all .5s cubic-bezier(0.66,0,0.2,1);
    transition-delay: 3.5s;
    -webkit-column-gap: 10px;
    gap: 10px;
}

.selection .ci{
    height:25px;
    transition: all .3s cubic-bezier(0.66, 0, 0.09, 1.83);
    border-radius: calc(25px / 2);
    width: 100%;
    transform: translateY(10px) scale(.5);
        opacity: 0;
        cursor: pointer;
    background-color: rgba(255, 255, 255, 0.747);
    text-align: center;
    border: 1px solid #000;
    padding-top:3px;
}

body.loaded .selection .ci{
    animation: sdhio .2s cubic-bezier(0.66, 0, 0.09, 1.83) forwards;
}

@keyframes sdhio{
    0%{
        transform: translateY(10px) scale(.5);
        opacity: 0;
    }
    100%{
        transform: translateY(0px) scale(1);
        opacity: 1;
    }
}

.selection .ci:hover{
    background-color: #fc0;
    width: calc(150%);
}

body.loaded .selection{
opacity: 1;
width: 100%;
height: 25px;
transition-delay: 0s;
}

body.loaded .selection .ci:nth-child(1){
    animation-delay: 3.6s;
}

body.loaded .selection .ci:nth-child(2){
    animation-delay: 3.65s;
    background-color: #fc0;
}

body.loaded .selection .ci:nth-child(3){
    animation-delay: 3.70s;
}

body.loaded .selection .ci:nth-child(4){
    animation-delay: 3.75s;
}

.page-boxname.funone{
    height: calc(50vh - 85px);
    width: calc(320px);
    left: calc(50% - 160px);
    top: calc(100% - 50vh + 75px);
    min-height: 45px;
}

.page-boxname.funone .selection{
transform: translateY(calc(50vh - 130px));
transition-delay: 0s;
}

.head .eeeefff{
    display: none;
}