/* 页面通用样式 */
* {margin: 0;padding: 0;}
 *,*::after,*::before{box-sizing: border-box} 
html{box-sizing: border-box;}

/* 通用CSS3 FLEX 横向*/
.XXXX_container{display:flex;/*设置为弹性盒子*/
    display:-webkit-flex;
    flex-flow:row nowrap;/*子元素不换行*/
    -webkit-flex-flow:row nowrap;
    justify-content:space-between;/*子元素主轴上的对齐方式居中*/
    -webkit-justify-content:space-between;
    align-content:flex-start;/*子元素与交叉轴的起点对齐 */
    -webkit-align-content:flex-start;
}
/* html,body{ height: 99%; min-width: 1200px;} */
/* body{font-family: "微软雅黑,Microsoft YaHei";background:#2a3b4c; } */
/* 头部 */
#header{height:60px;width:100%;background-color:#2a3b4c;}

/* 标题 */
#Title{float:left;text-align:center;font-size:20px;color:rgb(255, 255, 255);margin:15px 0px 0px 10px;}

/* 导航条 */
.topnav{float:right;margin:20px 0px 0px 0px;/*width: 550px;*/}
/* 头像 */
#Headportrait{float:left;width: 32px;height: 32px;}
#Headportrait img{border-radius:50%;width: 100%;height: 100%;}

/* 导航条链接 */
.topnav a{float:left;display:block;color:#f2f2f2;text-align:center;padding:5px 16px;text-decoration:none;}
#news{float:right;display:block;color:#f2f2f2;text-align:center;padding:1px 5px;min-width: 10px; border-radius:15%;background-color:#ff0000;text-decoration:none;}

/* 链接颜色修改 */
.topnav a:hover{color:rgb(250, 135, 4);}
.topnav span{float:left;display:block;color:#f2f2f2;text-align:center;padding:10px 16px;text-decoration:none;}

#mainContent{width:100%;height: calc(100% - 50px);}

/* 主体左侧菜单栏 */
#mian_left{width:200px;float:left;height:100%;margin:0px;}
#mian_left #span_h{font-size:18px;color:rgb(255,255,255);}
/* 菜单栏 */
#MENU_M{padding:5px;margin:0px;background:#33485c;height:calc(100% - 44px);overflow-x: hidden; overflow-y: auto;}
#MENU_M::-webkit-scrollbar { /*滚动条整体样式*/ width: 3px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; }
#MENU_M::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 5px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #535353; }
#MENU_M::-webkit-scrollbar-track { /*滚动条里面轨道*/ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 5px; background: #ededed; }
.menu_1{color:rgb(255,255,255);margin:5px 2px;padding:10px 2px;border-radius:5px;cursor:pointer;}
.menu_1 .Rank1:hover{border-style: solid;border-width: 0px;border-right-width: 5px;}
.menu_1 .Rank1>span{font-size: 16px;padding: 0px 8px;vertical-align:middle;display: inline-block;width: 130px;}
.menu_1 .Rank1 .imgico{width: 16px;height: 16px;vertical-align:middle;}
.menu_1 .Rank1 .imgpd{ width: 12px;height: 12px;vertical-align:middle;transform:rotate(180deg);content:url("../IMG/downward.png");}
.menu_1:hover{color:rgb(248, 83, 7);}

.menu_2{display:none;color:rgb(192, 192, 192);margin:5px 1px;padding:5px 2px;border-radius:5px;cursor:pointer;}
.menu_2 .Rank2:hover{border-style: solid;border-width: 0px;border-left-width: 5px;}
.menu_2 .Rank2>span{font-size: 16px;padding-left: 10px;vertical-align:middle;display: inline-block;width: 140px;}
.menu_2 .Rank2 .imgpd{ width: 12px;height: 12px;vertical-align:middle;transform:rotate(180deg);content:url("../IMG/downward.png");}
.menu_2:hover{color:rgb(248, 97, 10);background-color:#4a657e7c;}

.menu_3{display:none;color:rgb(192, 192, 192);margin:5px 2px;padding:3px 2px;border-radius:5px;cursor:pointer;}
.menu_3 .Rank3:hover{background-color: rgba(62, 113, 143, 0.897);}
.menu_3 .Rank3>span{font-size: 16px;padding: 3px 0px 3px 15px;vertical-align:middle;display: inline-block;width: 150px;}
.menu_3:hover{color:rgb(248, 97, 10);}

/* 主体右侧栏 */
.mian_right_open{width:calc(100% - 200px);height: auto;min-height: 100%; float:left;background:#fff;} /* 菜单打开*/
.mian_right_close{width:calc(100%);height: auto;min-height: 100%; float:left;background:#fff;} /* 菜单收起*/
#mian_t{padding:5px;background-color: #e9ecef;}
#mian_t p{display: inline-block;padding:2px 0px 3px 10px ; font-size:16px;color:#333;/*border-left:5px solid #F64747;*/}

/*内容*/
#content{background:#fff;padding:2px;min-height:600px;}

/* 尾部栏 */
#footer{float:left;width:100%;background:#2a3b4c;margin:0px;padding: 10px 0px ;text-align:center}
#footer span{text-align:center; margin:0px;color: #ddd;}

#snackbar{visibility:hidden;min-width:250px;margin-left:-125px;background-color:RGBA(9, 163, 143,0.3);color:#fff;text-align:center;border-radius:2px;padding:16px;position:fixed;z-index:1;left:92%;top:30px;font-size:17px;}
#snackbar.show{visibility:visible;-webkit-animation:fadein 0.5s,fadeout 0.5s 2.5s;animation:fadein 0.5s,fadeout 0.5s 2.5s;}

/* 拖放实例样式 */
.drop_div{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}


/* 表单样式 (经典黑)*/
.basic-grey{margin-left:auto;margin-right:auto;max-width:800px;background:#F8F8F8;padding:30px 30px 20px 30px;font:12px Arial,Helvetica,sans-serif;color:#666;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;    width: 800px;margin-top: 218px;}
.basic-grey h1{font-size:24px ;padding:20px 0px 20px 40px;display:block;margin:-30px -30px 10px -30px;color:#FFF;background:#9DC45F;text-shadow:1px 1px 1px #949494;border-radius:5px 5px 0px 0px;-webkit-border-radius:5px 5px 0px 0px;-moz-border-radius:5px 5px 0px 0px;border-bottom:1px solid #89AF4C;}
.basic-grey h1>span{display:block;font-size:14px;padding-top: 8px}
.basic-grey h2{font-size:18px ;text-align:center; padding:10px 0px 10px 0px;margin:20px,0px,20px,0px;display:block;color:rgb(3, 3, 3);}
.basic-grey label{display:block;margin:0px;}
.basic-grey label>span{float:left;width:20%;text-align:right;padding-right:10px;margin-top:10px;color:#888;font-size:14px;}
.basic-grey label>a{text-align:left;padding-right:10px;margin-top:10px;color:#888;font-size:12px;}
.basic-grey input[type="text"],.basic-grey input[type="password"],.basic-grey input[type="file"],.basic-grey input[type="date"],.basic-grey input[type="datetime-local"],
.basic-grey input[type="email"],.basic-grey textarea,.basic-grey select{border:1px solid #DADADA;color:#888;height:30px;margin:2px 6px 16px 0px;outline:0 none;padding:3px 3px 3px 5px;width:60%;font-size:12px;line-height:15px;box-shadow:inset 0px 1px 4px #ECECEC;-moz-box-shadow:inset 0px 1px 4px #ECECEC;-webkit-box-shadow:inset 0px 1px 4px #ECECEC;font-size:14px;}
.basic-grey select{background:#FFF url('../IMG/down-arrow.png') no-repeat right;appearance:none;-webkit-appearance:none;-moz-appearance:none;text-indent:0.01px;/*width:80%*/;height:35px;line-height:25px;font-size:14px;}
.basic-grey #s1,#s2,#s3{background:#FFF url('../IMG/down-arrow.png') no-repeat right;appearance:none;-webkit-appearance:none;-moz-appearance:none;text-indent:0.01px;width:19%;height:35px;line-height:25px;font-size:14px;}
.basic-grey textarea{height:100px;padding:5px 3px 3px 5px;}
.basic-grey .button{background:#9DC45F;border:none;padding:10px 25px 10px 25px;margin-left:100px;color:#FFF;box-shadow:1px 1px 5px #B6B6B6;border-radius:3px;text-shadow:1px 1px 1px #9E3F3F;cursor:pointer;font-size:15px;}
.basic-grey .button:hover{background:#80A24A}
#file_div{ width:700px;}

/* 卡片绑定表单样式 */  
#load_div{width:500px;margin: 30px 10px; float: left;}
.card {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);transition: 0.3s;width: 230px;height: 310px;border-radius: 5px;margin: 30px 5px;float: left;background: azure;}
.card:hover {box-shadow: 0 8px 16px 0 rgba(102, 197, 252, 0.5);}
.card img { border-radius: 5px 5px 0 0;width: 230px;height: 240px;}
.card #c_name {text-align: center;padding: 5px 0px 5px 0px;font-size: 18px;font-weight: bold;display: block;}
.card p {padding: 0px 0px 5px 0px;text-align: center;font-size: 18px;display: block;}
.basic-card{margin-left:auto;margin-right:auto;max-width:820px;height: 450px; background:rgba(212, 239, 255, 0.534);padding:30px 30px 20px 30px;font:12px Arial,Helvetica,sans-serif;color:#666;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;}
.basic-card h1{font-size:24px ;padding:20px 0px 20px 40px;display:block;margin:-30px -30px 10px -30px;color:#FFF;background:#9DC45F;text-shadow:1px 1px 1px #949494;border-radius:5px 5px 0px 0px;-webkit-border-radius:5px 5px 0px 0px;-moz-border-radius:5px 5px 0px 0px;border-bottom:1px solid #89AF4C;}
.basic-card h1>span{display:block;font-size:14px;padding-top: 8px}
.basic-card h2{font-size:18px ;text-align:center; padding:10px 0px 10px 0px;margin:20px,0px,20px,0px;display:block;color:rgb(3, 3, 3);}
.basic-card label{display:block;margin:20px 0px;}
.basic-card label>span{float:left;width:20%;text-align:right;padding-right:10px;margin-top:10px;color:#888;font-size:14px;}
.basic-card input[type="text"]{border:1px solid #DADADA;color:#888;height:30px;margin:2px 6px 16px 0px;outline:0 none;padding:3px 3px 3px 5px;width:60%;font-size:12px;line-height:15px;box-shadow:inset 0px 1px 4px #ECECEC;-moz-box-shadow:inset 0px 1px 4px #ECECEC;-webkit-box-shadow:inset 0px 1px 4px #ECECEC;font-size:14px;}
.basic-card textarea{height:100px;padding:5px 3px 3px 5px;}
.basic-card .button{background:#9DC45F;border:none;padding:10px 25px 10px 25px;margin:30px 80px;color:#FFF;box-shadow:1px 1px 5px #B6B6B6;border-radius:3px;text-shadow:1px 1px 1px #9E3F3F;cursor:pointer;font-size:15px;}
.basic-card .button:hover{background:#80A24A}

/* 文件管理表单样式 (经典黑)*/
.basic-filemg{position: fixed;top:350px;left: 650px;display: none;border:1px solid rgb(177, 177, 177);z-index: 999;}  /*选择文件浮动弹窗 */
.basic-filemg{margin-left:auto;margin-right:auto;max-width:670px; background:rgb(245, 251, 255);padding:30px 30px 20px 30px;font:12px Arial,Helvetica,sans-serif;color:#666;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;}
.basic-filemg h1{font-size:24px ;padding:20px 0px 20px 40px;display:block;margin:-30px -30px 10px -30px;color:#FFF;background:#9DC45F;text-shadow:1px 1px 1px #949494;border-radius:5px 5px 0px 0px;-webkit-border-radius:5px 5px 0px 0px;-moz-border-radius:5px 5px 0px 0px;border-bottom:1px solid #89AF4C;}
.basic-filemg h1>span{display:block;font-size:14px;padding-top: 10px;width: 500px;}
.basic-filemg h2{font-size:18px ;text-align:center; padding:10px 0px 10px 0px;margin:20px,0px,20px,0px;display:block;color:rgb(3, 3, 3);}
.basic-filemg label{display:block;margin:0px;padding:10px 0px;}
.basic-filemg label>span{float:left;width:100px;text-align:right;padding-right:10px;margin-top:10px;color:#888;font-size:14px;}
.basic-filemg label>a{display:block;margin-left: 150px;}
.basic-filemg input[type="text"],.basic-filemg input[type="file"]{border:1px solid #DADADA;color:#888;height:30px;margin-bottom:16px;margin-right:6px;margin-top:2px;outline:0 none;padding:3px 3px 3px 5px;width:480px;font-size:12px;line-height:15px;box-shadow:inset 0px 1px 4px #ECECEC;-moz-box-shadow:inset 0px 1px 4px #ECECEC;-webkit-box-shadow:inset 0px 1px 4px #ECECEC;font-size:14px;}
.basic-filemg select{background:#FFF url('../IMG/down-arrow.png') no-repeat right;appearance:none;-webkit-appearance:none;-moz-appearance:none;text-indent:0.01px;text-overflow:'';width:480px;height:35px;line-height:25px;font-size:14px;}
.basic-filemg .button{float: left; background:#9DC45F;border:none;margin:20px 100px;height: 40px;width: 100px; color:#FFF;box-shadow:1px 1px 5px #B6B6B6;border-radius:3px;text-shadow:1px 1px 1px #9E3F3F;cursor:pointer;font-size:15px;}
.basic-filemg .button:hover{background:#80A24A}

/*工具栏样式*/
.file_tool{display: block;background-color: rgb(236, 236, 236);}
.file_tool input[type="button"]{ background:#9DC45F;border:none;margin:10px 30px;padding: 2px 10px; height: 30px; color:#FFF;box-shadow:1px 1px 5px #B6B6B6;border-radius:3px;text-shadow:1px 1px 1px #9E3F3F;cursor:pointer;font-size:15px;}
.file_tool input[type="button"]:hover{background:#80A24A}
.file_tool input[type="text"]{border:1px solid #DADADA;color:#888;height:30px;margin:10px 0px 10px 30px;outline:0 none;padding:3px 3px 3px 5px;width:200px;font-size:12px;line-height:15px;box-shadow:inset 0px 1px 4px #ECECEC;-moz-box-shadow:inset 0px 1px 4px #ECECEC;-webkit-box-shadow:inset 0px 1px 4px #ECECEC;font-size:14px;}

/*文件列表样式*/
#file_list{display: flex;-webkit-flex-flow:row wrap;flex-flow:row wrap; align-items : flex-start;-webkit-align-items : flex-start;padding: 10px; }
/*多媒体文件显示样式*/
.file_item {
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    background-color: rgb(255, 255, 255);
    transition: 0.3s;
    width: 256px;border-radius: 5px;
    margin: 5px 5px;float: left;
    position: relative;
}
.file_item:hover { 
    /* box-shadow: 0 8px 16px 0 rgba(102, 197, 252, 0.5); */
    box-shadow: 0px 0px 5px 5px rgb(159, 217, 255);
    cursor: pointer;
}
.file_item:hover .file-item-overwindow{visibility: visible;}
.file-item-overwindow{
    visibility: hidden;
    width: 256px;
    border-radius: 5px;
    background-color: rgb(227, 244, 255);
    position: absolute;
    z-index: 99;
    top:190px;
    padding: 10px;
}
.file-item-none{display: none;}

.file_item img {border-radius: 5px 5px 0 0;width: 100%;height: 144px; }
.file_item h2 {
    text-align: center;
    padding: 10px 5px 10px 5px;
    font-size: 12px;font-weight: bold;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file_item label{display:block;}
.file_item input[type="button"]{ background:#9DC45F;border:none;margin:5px 35px;padding: 2px 10px; height: 25px; color:#FFF;box-shadow:1px 1px 5px #B6B6B6;border-radius:3px;text-shadow:1px 1px 1px #9E3F3F;cursor:pointer;font-size:15px;}
.file_item input[type="button"]:hover{background:#80A24A}     
.file-item-title{
    width: 100%;
    display: flex;    
    justify-content: center;
    align-items: center;
    word-break: break-all;
    text-align: center;
}
.file_item > .file_del_btn{
    width: 100%;
}
.file_item > .file_del_btn > img{
    float: right;
}

/* 登录切换样式 */
.login-part-method{margin-top: 10px;  height: 30px; line-height: 30px;font:15px bolder "Microsoft Yahei"; color:rgb(106, 153, 113); border-top: 1px lightgray solid; display: flex;justify-content: space-between;}
.login-part-method > span{cursor: pointer;}

/*关于页面样式 */
.about-container{ background-color: lightgray; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.about-container a{ text-decoration: none; }

/*弹出背景层样式*/
.popLayer {
    display: none;
    background-color: #B3B3B3;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    -moz-opacity: 0.5;
    opacity: .50;
    filter: alpha(opacity=60);
    /* 只支持IE6、7、8、9 */
}