@charset "utf-8";
/* CSS Document */
*{ margin:0; padding:0;}
body { background:#000 url("../imgs/bg.jpg") no-repeat top center; padding:0; margin:0;}
.top-bar{ background-color:#333;width:100%; text-align:center;}
.top-bar a{ color:#fff; text-decoration:none;}
.top-bar a img{ height:30px; border-radius:5px; margin:4px;}
.main { height:714px; overflow:hidden;}
#show_area{ width:800px;height:320px;position:absolute;top:80px; left:200px;}
#show_area_bg{ background-color:rgba(0,0,0,.9); width:800px; height:360px; height:283px;position:absolute;top:0;left:0; z-index:-1; border:solid 5px rgba(0,0,0,.3); border-radius:10px; }
#show_area_content{ position:absolute; width:760px; padding:20px;top:0; left:0; color:#fff;}
#show_area_content table td{ padding:10px;}
#show_area_content table p{ font-size:13px; line-height:18px; text-indent:24px; margin-bottom:12px;}
#show_area_close_btn{width:32px;height:32px; background:url("../imgs/icon_close_alt.png"); background-size:100%;position:absolute;top:6px;right:0; z-index:999; cursor:pointer;}

.heros{width:1000px; margin:400px auto 0;margin:335px auto 0; border:solid 20px rgba(0,0,0,.2);border:solid 10px rgba(0,0,0,.2);height:149px; overflow:hidden; position:relative; background-color:rgba(0,0,0,.6); border-radius:5px;}
.heros #btns,.heros #btns1{position:absolute; right:0;}
.heros #btns span,.heros #btns1 span{display:block;width:30px;height:30px; background-image:url("../imgs/up.png"); background-size:100%; cursor:pointer; margin-bottom:20px;}
.heros #btns span#down,.heros #btns1 span#down1{ background-image:url("../imgs/down.png");}
.heros ul{ position:absolute; top:0; left:0;}
.heros ul li{ float:left; list-style:none; width:12%; text-align:center;cursor:pointer;}
.heros ul li h3{font-family:"\5FAE\8F6F\96C5\9ED1","\5B8B\4F53"; font-size:14px; background-color:#333;color:#fff; border-radius:6px; width:70px; height:26px; line-height:26px; margin:10px auto }
.heros ul li img{ border-radius: 50px;  -moz-border-radius: 50px;   -webkit-border-radius: 50px;    height: 100px !important;    width: 100px !important;}
.heros ul li .info{display:none;}
.gj_area { text-align:center;}
.gj_area ul{font-size:0}
.gj_area li {display:inline-block;zoom:1;*display:inline;font-size:22px; color:#999;font-family:"\5FAE\8F6F\96C5\9ED1","\5B8B\4F53"; height:81px; width:170px;padding:0 25px; cursor:pointer; position:relative}
.gj_area a{ color:#999; text-decoration:none;}
.gj_area li img{ }
.gj_area li:hover{ color:#fff}
.gj_area li:hover a{ color:#fff}
.gj_area li:hover img{ opacity:1}
.gj_area li.tp2 { border-left:1px solid #4d4d4d;border-right:1px solid #4d4d4d; margin:5px 0}
.gj_area li b { display:block; text-align:center;padding:10px 0 10px }
.gj_area li span { background:#464545; border-radius:5px; font-size:18px; font-weight:bold;padding:5px;}
.gj_area li:hover span{ background:#FFF; color:#333;}
.gj_area li img {float:left; margin-right:10px;}
.gj_area li .animation { position:absolute; top:0;left:57%;width:40px; text-align:center}
.footer p{ color:#eee; text-align:center; height:60px; line-height:60px; font-size:12px;}
.footer p a{ color:#eee; text-decoration:none;}


.herosLittle{margin:0 auto;border:solid 10px rgba(0,0,0,0);height:100px;}
.herosLittle ul li{ width:95%;text-align:left;margin-left:5px; color:#ddd;}