#header_inner .btn {border: none;}

/* #category {list-style: none; display: flex; margin-bottom: 10px;}
#category a {cursor: pointer; text-decoration: none; display: block; font-size: 0.9em !important;}
#category>li>a:hover {background-color: var(--maincolor); color: white;}
#category a img {width: 100%; position: relative; z-index: 1; display: block; margin-bottom: 10px;}
#category>li>a {padding: 5px 10px; border-right: none; background-color: white;}
#category>li.active>a {color: var(--maincolor); font-weight: 900; border-bottom: 2px solid var(--maincolor);}
#category>li.active>a:hover {color: white;}
#category>li:last-child>a {}
#category>li>div {display: none; position: absolute; background-color: white; border: 1px solid var(--line-light); padding: 10px; z-index: 1; width: 100%; max-width: 1200px; left: 50%; transform: translateX(-50%);flex-wrap: wrap; box-shadow: 0 10px 30px rgba(0,0,0,0.3);}
#category>li>div>a {padding: 5px 5px; border: 1px solid var(--line-light); border-radius: 5px; background-color: white; display: block; flex-wrap: wrap; flex-direction: row; width: 80px; position: relative; text-align: center; margin-bottom: 4px;}
#category>li>div>a .badge {position: absolute; right: 2px; top: 2px; background-color: white; z-index: 3;}
#category>li>div>a.active {background-color: var(--maincolor) !important; color: white;}
#category>li>div>a.active::before {content: ''; position: absolute; top: 5px; left: 5px; right: 5px; height: 75px; background-color: white; border-radius: 8px; z-index: 0;}
#category>li>div>a.active .badge {color: var(--textdark);} */


.mainlist {margin-top: -20px;}
.mainlist #category {position: relative;z-index: 2; max-width: 1600px; margin: 5px auto; flex-wrap: wrap; align-items: flex-start; background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(5px); padding: 5px 6px; box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.5); overflow: hidden; transition: height 0.4s; height: calc-size(max-content, size);}
.mainlist #category>a {display: inline-block; padding: 2px 4px; font-size: 0.85em; background-color: white; border-radius: 3px; margin-bottom: 5px; box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3);}
.mainlist #category>a.active {font-weight: bold; color:white; background-color: var(--maincolor);}
.mainlist #category>a>img {height: 1.2em; vertical-align: -0.2em;}
.mainlist #category>button {float: right; margin-top: -1px;}

#hash {max-width: 1600px; margin:auto; position: relative; z-index: 100; background-color: rgba(255,255,255,0.2); backdrop-filter: blur(5px); padding: 5px 6px; box-shadow: 2px 4px 4px rgba(0,0,0,0.5); overflow: hidden; transition: height 0.4s; height: calc-size(max-content, size);}
#hash>a {display: inline-block; padding: 2px 4px; font-size: 0.85em; background-color: white; border-radius: 3px; margin-right: 3px; margin-bottom: 4px; box-shadow: 1px 3px 3px rgba(0,0,0,0.3);}
#hash>a::before {content:"#";}
#hash>a.active {font-weight: bold; color:white; background-color: var(--maincolor);}
#hash>button {float: right; margin-top: -1px;}

.closed {height: 2.2em !important;}

#list {max-width: 1600px; margin: auto;}
#info .cate_title {font-weight: bold; font-size: 1.3em;}
#listbody {list-style: none; margin: 10px 0; display: flex; flex-direction: row; flex-wrap: wrap;align-items: stretch; gap:0;}
#listbody>li {width: calc(100%  / 4); position: relative;}
#listbody>li>.abs {position: absolute; top: 0; height: 100%; background-color: rgba(0,0,0,0.5); color: white; display: flex; justify-content: center; align-items: center; opacity: 0; transition:all 0.4s}
#listbody>li>a {text-decoration: none; width: 100%; display: block;}
#listbody>li>.tags {position: absolute; bottom: 0; width: 100%; padding: 5px 10px; opacity: 0; transition:all 0.4s;}
#listbody>li>.tags a {display:inline-block; margin-right:3px; border: 1px solid var(--line-light); border-radius: 5px; padding:1px 4px; font-size: 0.85em; background-color: white; margin-bottom: 4px;}
/* #listbody>li>.tags a::before {content:"#";} */
#listbody>li>.tags a img {height: 1.2em; vertical-align: -0.1em;}
#listbody>li .fitimg img {transition: transform 3s;}
#listbody>li:hover .fitimg img {transform: translate(-50%, -50%) scale(1.25);}
#listbody>li:hover>.tags,
#listbody>li:hover>.abs {opacity: 1;}
#listbody .fitimg {height: 100%; aspect-ratio: 1;}
#listbody .nodata {padding: 50px 10px;}
.title {font-weight: 500; font-size: 1.1em; margin: 10px 5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.postinfo {font-size: 0.85em; padding: 0 5px; display: none;}

.list_page {padding:20px 5px; text-align: center;}
.list_page a {display: inline-block; padding:2px 4px; font-size: 0.9em; margin: 0 0px; border: 1px solid var(--line-light); border-radius: 4px; color: var(--light-gray);}
.list_page a.active {color: var(--maincolor); font-weight: 600; pointer-events: none;}

#qestbox {
    position: absolute;
    z-index: 9999;
    top: 160px;
    right: 10px;
    width: calc(100% - 20px);
    max-width: 200px;
    background-color: rgba(255,255,255,0.4);
    backdrop-filter: blur(8px);
    border-radius: 8px;
    padding: 8px;
    transition: all 0.3s;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.3);
}
#qestbox #qclose {width: 34px; height: 34px;}
#qestbox h2 {margin-top: 0; background-color: rgba(255, 255, 255, 0.6); padding: 5px; text-align: center; border-radius: 6px;}
#qestbox h2 small {font-size: 2rem; margin-bottom: 0;}
#qestbox h2 a {display:block; font-size: 1.3rem; margin-bottom: 0;}
#qestbox select, 
#qestbox button, 
#qestbox input:not([type=checkbox]) {width: 100%; margin-bottom: 5px;}
#qestbox label:has(input[type=checkbox]) {display: block;;}
#qestbox .grecaptcha-badge {
  visibility: hidden;
}
#qestbox.close {
    position: fixed;
    padding: 0 !important;
    width: 34px !important;
    height: 34px;
    bottom: 90px !important;
    top: auto !important;
}






label.w-100 input, label.w-100 textarea {width: 100%;}
#write label>span {font-size: 0.9em; font-weight: 500;}
#write .category {margin: 5px 0 20px 0; border: 1px solid var(--line-light); background-color: white; border-radius: 8px; padding: 10px;}
#write .category label {margin: 2px 5px;}
#write .category>ul {list-style: none;}
#write .category>ul>li {margin-bottom: 8px;}
#write .category>ul>li>div {font-size: .9em; font-weight: 600;}

.rev {transform: rotate(180deg);}

.ck.ck-editor {
    width: 100% !important;
    max-width: 100%;
    all: unset;
}
.ck.ck-editor ul,
.ck.ck-editor ol {
    padding-inline-start: 40px;
}
.ck.ck-editor input[type=checkbox]:checked:before{
    transform: none;
    margin-left: auto;
    margin-top: auto;
}
.ck-editor__editable:not(figcaption) {
    min-height: 300px;
}

#view h3, #view>small {padding: 10px;}
#view .content {padding: 20px; background-color: white; border-radius: 15px; margin: 15px 0;}
#view .attach {padding: 10px 20px; background-color: white; border-radius: 15px; margin: 10px 0;}
#view .attach img {max-width: 100%; height: auto; margin: 10px auto; display: block;}
#view .content h1, #view .content h2, #view .content h3, #view .content h4, #view .content h5, #view .content h6 {font-weight: 500; margin: 20px 0 10px 0;}
#view .content p {margin: 10px 0;}
#view .content img {max-width: 100%; height: auto; margin: 10px auto; display: block;}
#view .content ul, #view .content ol {padding-inline-start: 20px;}
#view .content blockquote {border-left: 4px solid var(--maincolor); padding-left: 10px; margin: 10px 0;}
#view .content pre {background-color: var(--line-light); padding: 10px; border-radius: 5px; overflow: auto;}
#view .content table {width: 100%; border-collapse: collapse; margin: 10px 0;}
#view .content table th, #view .content table td {border: 1px solid var(--line-light); padding: 5px;}
#view .content table th {background-color: var(--line-light); font-weight: 500;}
#view .content iframe {width: 100%; height: 300px; margin: 10px 0;}
#view .btns {margin: 20px 0;}
#view .btns a {display: block; padding: 5px 10px; border: 1px solid var(--line-light); border-radius: 5px; font-size: 0.9em; color: var(--textdark); width: 50%;}
#view .btns a>div {font-weight: 600; font-size: 1.2em; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
#view .tags a {border: 1px solid var(--line-light); padding: 5px 10px; border-radius: 5px; margin: 3px 0; display: inline-block; text-align: center; font-size: 0.75em;}
#view .tags a img {display: block; height: 30px; margin: 0 auto 5px auto;}
#view #hashtag {padding: 10px;}
#view #hashtag span {padding: 3px 5px; background-color: var(--maincolor); color:white; border-radius: 4px; font-size: 0.8em;}
#view #hashtag span::before {content: "#"; margin-right: 3px;}


.mainbanner {
    position: relative;
}
.mainbanner>.container {
    overflow: auto;
}
.mainbanner>.container>div {
    width: 100%;
}
.mainbanner>.container>div:nth-of-type(1) {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}
.mainbanner>.container>div:nth-of-type(2) {
    backdrop-filter: blur(8px);
    text-align: center;
    position: relative;
    z-index: 2;
    color: white !important;
    width: 100%;
    max-width: 500px;
    border: 4px solid white;
    padding-bottom: 60px;
    float: right;
    margin-top: 75px;
    background-color: rgba(0,0,0,0.15);
}
.mainbanner>.container>div>h2 {font-size: 3.0rem; color: white !important; letter-spacing: -0.08em;}
.mainbanner>.container>div>h2>small {font-size: 1.5rem; color: white !important;}

.sort {margin-top: 30px; font-weight: bold; font-size: 0.9em;}

@media (max-width:1600px) {
    #listbody>li {width: calc(100%  / 4);}
}
@media (max-width:1200px) {
    #listbody>li {width: calc(100%  / 3);}
    #category a {font-size: 0.85em; letter-spacing: -0.15em;}
}
@media (max-width:992px) {
    #listbody>li {width: calc((100% - (15px * (2 - 1))) / 2);}
    /* #category {flex-wrap: nowrap;} */
    /* #category a {width: 80px; flex: 0 0 auto;} */
    /* #category>div>div {flex-wrap: nowrap; overflow: auto;} */
}
@media (max-width:768px){
    #listbody>li {width: 100%; margin-bottom: 30px;}
    #listbody>li>.abs,
    #listbody>li>.tags {opacity: 1;}
    #listbody>li>.abs {background-color: rgba(0, 0, 0, 0.3);}
    #qestbox {display: none;}
}
@media (max-width: 480px) {
}