@charset "UTF-8";
/* CSS Document */
*,html,body {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
a{ text-decoration: none; color: #4c8dee;}

html,body{background: #000; position:absolute; width: 100%; height: 100%; left: 0px;}

body{ margin: 0px; padding: 0px; font-size: 14px; font-family: "Microsoft YaHei", "微软雅黑";}

#header{ height: 50px; border-bottom: solid 1px #ddd; background: rgba(255,255,255,1);}

#logo{ height: 50px; background-image: url("../images/logo_mcsp.png"); background-repeat: no-repeat; background-position: left center; width: 40%; float: left;}
#usertools{ width: 60%; text-align: right; line-height: 50px; float: right;}
#usertools a{ margin-left: 10px;}
#usertools a:last-child{ margin-right: 10px;}
#footer{ border-top: solid 1px #ddd; text-align: center; width: 100%; height: 40px; line-height: 40px; background: rgba(255,255,255,0.70); position:absolute; bottom: 0px;}
#footer span{ padding: 0px 10px; }

#contents{ width: 100%; margin: 0px; padding: 0px; background-color: #000; height: 100%; position:relative; float: left; overflow: hidden;}

#container{ width: 100%; min-height: 600px;  position:absolute;}
#boxes{ width: 1200px; margin: 0px auto;}

#left-box{ width: 50%; float: left;}

#left-ad{ margin: 35% 10% auto 30%; width: 60%; height: 35%; color: white;}
#left-ad h1{ margin: 50px 0px 40px; padding: 0px; font-size: 30px;}


#right-box{ width: 50%; float: left; padding: 100px 0px 50px 0px;}
#right-box h1{font-size:26px; margin: 0px; padding: 0px;}

#list-box{ margin: 20px 0px 20px 0px; border-radius: 7px; background-color: rgba(255,255,255,0.3); float: left; height: 495px; overflow-y: auto;}

#list-box ul{ list-style: none; padding: 0px; margin: 0px; line-height: 20px;}
#list-box ul li{ padding: 2%; margin: 2% 2% 0px 2%; width: 96%; position: relative; float: left; background:rgba(255,255,255,0.70); border-radius: 7px; }
#list-box ul li:last-child{ margin-bottom: 2%;}


.li-info{height: 60px; width: 100%;}
.li-info span.face{ width: 60px; height: 60px; display: block; color: #fff; background-color: aqua; border-radius: 7px; font-size: 34px; text-align: center; line-height: 60px; float: left;}
.li-info span.face.r{ background-color: #4C0001;}
.li-info span.face.o{ background-color: #904E00;}
.li-info span.face.b{ background-color: #000368;}
.li-info span.face.g{ background-color: #063A00;}

.li-info span.name,span.role{ width: 370px; float: left; font-size: 20px; padding-left: 10px; line-height: 30px; overflow: hidden;}
.li-info span.role{ font-size: 14px; color: #444;}
.li-info span.link{ display: block; width: 80px; height: 60px; top: 0px; right: 20px; position:absolute; line-height: 50px; text-align: right; font-size: 14px; font-weight: bold;}
.li-info span.sw{ display:inline-block; width: 30px; top:50px; right: 20px; position:absolute; text-align: right; vertical-align:baseline; font-size: 20px; height: 20px; line-height: 20px; cursor:pointer; color: #444;}
.li-info span.sw:hover{ color: #4c8dee;}

.li-products{ line-height: 20px;}
#list-box .li-products ul li{ margin-left: 0px; margin-right: 0px; width: 100%;}
#list-box .li-products ul li:last-child{ margin-bottom: 0px;}
.li-products ul li span{ display: inline-block;}
.li-products ul li span.c1{ width: 25%; display: none;}
.li-products ul li span.c2{ width: 20%;}
.li-products ul li span.c3{ width: 80%;}

.fr{ float: right;}
.fl{ float: left;}
.m10px{ margin: 10px;}
.p20px{ padding: 20px;}
.button{ background: #4c8dee; color: #fff; height: 30px; width: 120px; line-height: 30px; text-align: center; border-radius: 5px; display:inline-block;}
.wt{color: #fff;}