/* 諸行無常 是生滅法 生滅滅已 寂滅爲樂 */

/* ### global ### */

input[type="text"],input[type="password"],textarea {
border-radius:5px;
padding:4px;
}
textarea {
padding:8px;
resize:none;
}

#cont_doc {
padding:25px;
background-color:#F4F4F4;
}
#cont_doc_inner {
background-color:#FFF;
padding:25px;
border-radius:20px;
max-width:800px;
margin:0 auto;
}
@media screen and (max-width:800px) {
#cont_doc {
padding:20px;
}
#cont_doc_inner {
padding:20px;
border-radius:15px;
}
}
@media screen and (max-width:500px) {
#cont_doc {
padding:10px;
}
#cont_doc_inner {
padding:15px 10px;
border-radius:10px;
}
}
@media screen and (max-width:400px) {
#cont_doc {
padding:8px;
}
#cont_doc_inner {
padding:14px 8px;
}
}

#mobile_menu {
background-color:#000;
color:#FFF;
padding:20px;
width:100%;
max-width:320px;
position:absolute;
top:0;
right:0;
box-sizing:border-box;
z-index:100000;
}
#mobile_menu button.closebtn {
width:26px;
height:26px;
cursor:pointer;
position:absolute;
top:0;
right:0;
padding:10px;
z-index:10;
}
#mobile_menu button.closebtn:hover {
background-color:#D33;
}
#mobile_menu button.closebtn svg {
width:26px;
height:26px;
fill:#FFF;
}
#mobile_menu a {
display:block;
line-height:3;
font-size:15px;
color:#FFF;
padding:0 1em;
}
#mobile_menu a:hover {
background-color:rgba(255,255,255,0.1);
}
#mobile_menu span.closebtn {
display:block;
font-size:30px;
float:right;
cursor:pointer;
}
#mobile_menu hr {
border-style:none;
border-top:1px solid #888;
}
#mobile_menu input {
background-color:#000;
border:1px solid #555;
font-size:14px;
outline:none;
color:#CCC;
width:calc(100% - 20px);
box-sizing:border-box;
height:40px;
padding:6px 6px 6px 30px;
margin:3px 0;
}
#mobile_menu input:focus {
background-color:#111;
border-color:#888;
color:#FFF;
}
#mobile_menu form {
position:relative;
}
#mobile_menu i.searchicon {
width:14px;
height:14px;
position:absolute;
left:10px;
top:16px;
}
#mobile_menu i.searchicon svg {
width:14px;
height:14px;
fill:#999;
}






#HEADBAR {
background-color:#1D8AF1;
height:42px;
display:flex;
flex-wrap:nowrap;
align-content:flex-start;
align-items:center;
justify-content:start;
wdith:100%;
}

#HEADBAR div.leftspace {
flex:1;
}

#HEADBAR a.ic {
padding:0 8px;
height:42px;
line-height:42px;
color:rgba(255,255,255,0.95);
cursor:pointer;
}
#HEADBAR a.ic:hover {
background-color:rgba(255,255,255,0.15);
color:#FFF;
text-decoration:none;
}
#HEADBAR a.uname {
display:inline-flex;
flex-wrap:nowrap;
align-content:flex-start;
align-items:center;
justify-content:start;
padding:0 6px;
height:42px;
color:rgba(255,255,255,0.95);
cursor:pointer;
}
#HEADBAR a.uname span.uname {
display:inline-block;
max-width:120px;
overflow:hidden;
-webkit-line-clamp:1;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
}
#HEADBAR a.uname:hover {
background-color:rgba(255,255,255,0.15);
color:#FFF;
text-decoration:none;
}
#HEADBAR a.uname img.up {
width:26px;
height:26px;
vertical-align:-9px;
border-radius:50%;
margin-right:4px;
object-fit:cover;
}
#HEADBAR a.uname i.private {
width:12px;
height:12px;
margin-left:3px;
}
#HEADBAR a.uname i.private svg {
width:12px;
height:12px;
fill:rgba(255,255,255,0.9);
}

#HEADBAR a.logo {
display:inline-flex;
flex-wrap:nowrap;
align-content:flex-start;
align-items:center;
justify-content:start;
padding:2px 5px;
height:40px;
color:rgba(255,255,255,0.95);
cursor:pointer;
font-size:16px;
}
#HEADBAR a.logo:hover {
background-color:rgba(255,255,255,0.15);
color:#FFF;
text-decoration:none;
}
#HEADBAR a.logo img {
width:30px;
height:30px;
border:0;
margin-right:5px;
}
#mobile_menu_btn {
display:inline-block;
height:42px;
width:42px;
cursor:pointer;
}
#mobile_menu_btn:hover {
background-color:rgba(255,255,255,0.15);
}
#mobile_menu_btn i {
width:20px;
height:20px;
margin:11px;
}
#mobile_menu_btn i svg {
width:20px;
height:20px;
fill:#FFF;
}
#dm_open_btn {
display:inline-block;
height:42px;
width:42px;
position:relative;
}
#dm_open_btn:hover {
background-color:rgba(255,255,255,0.15);
}
#dm_open_btn i {
width:18px;
height:18px;
margin:12px;
}
#dm_open_btn i svg {
width:18px;
height:18px;
fill:#FFF;
}
#dm_open_btn a {
display:inline-block;
height:42px;
width:42px;
}
#dm_open_btn #newnum_unread_dm {
display:inline-block;
margin-left:3px;
padding:0 3px;
background-color:#C00;
border-radius:6px;
color:#FFF;
height:15px;
line-height:15px;
font-size:11px;
vertical-align:1px;
position:absolute;
top:2px;
right:2px;
cursor:pointer;
}

@media screen and (max-width:400px) {
#HEADBAR a.logo {
font-size:14px;
}
}
@media screen and (max-width:450px) {
#HEADBAR .sitename {
display:none;
}
#HEADBAR a.logo img {
margin-right:unset;
}
}





#FOOT {
background-color:#FFF;
border-top:1px solid #CCC;
padding:10px 0 30px 0;
text-align:center;
color:#999;
line-height:2;
}
#FOOT a {
margin:0 8px;
display:inline-block;
color:#666;
}
#FOOT em {
color:#333;
}
p.sitemenu {
padding:0 15px;
max-width:900px;
margin:0 auto;
}

#copyrights {
color:#888;
}
#copyrights a {
margin:0 3px;
color:#666;
}
#copyrights a:hover {
color:#333;
}
#copyrights a:visited {
color:#666;
}