/* 公用CSS */
* {padding: 0;margin:0;}
html {
    font-family: Arial, Helvetica, sans-serif, 'Microsoft Yahei';
    /* font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; */
}
body {
    background:url("../img/geometry2.png");
}
/* 背景图片 */
/* body{ 
    background:url("../img/bg.jpg") no-repeat;
    width:100%;
    height:100%;
    background-size:100% 100%;
} */
a {
    text-decoration: none;
}
ul,li {
    list-style: none;
}
img {
    border:0;
}

/* 关闭按钮定位 */

#close {
    position: absolute;
    right: 1em;
    top: 1em;
    width: 3em;
    height: 3em;
    line-height: 3.5em;
}

#close .fa {
    font-size: 2em;
}

#help {
    position: absolute;
    right: 4.5em;
    top: 1em;
    width: 3em;
    height: 3em;
    line-height: 3.5em;
}

#help .fa {
    font-size: 2em;
}

/* LOGo */

.logo {
    width: 30%;
    margin: 0em auto 0;
    padding-top: 3em;
}

.logo img {
    width: 100%;
}

/* daohang */

.menu {
    text-align: center;
}

.menu a {
    margin-top: 1em;
    font-size: 2em;
}

/* footer */

footer {
    position: absolute;
    bottom: 2em;
    /* line-height: 150%; */
    text-align: center;
    font-size: 1em;
    color: #999999;
    width: 100%;
}

.daohang {
    text-align: center;
    /* margin-top: 4em; */
    position: absolute;
    bottom:1em;
    width:100%;
    margin:0 auto;
}

.daohang a {
    width: 200px;
    height:83px;
    /* height: 83px; */
    display: inline-block;
    text-indent: -9999px;
    margin:10px;
}

.daohang a.menu-1 {
    background: URL("../img/menu-zou.png") no-repeat 0 0;
}

.daohang a.menu-1:hover {
    background: URL("../img/menu-zou.png") no-repeat 0 0;
}

.daohang a.menu-2 {
    background: URL("../img/menu-shuzi.png") no-repeat 0 0;
}

.daohang a.menu-2:hover {
    background: URL("../img/menu-shuzi.png") no-repeat 0 0;
}

.daohang a.menu-3 {
    background: URL("../img/menu-tu.png") no-repeat 0 0;
}

.daohang a.menu-3:hover {
    background: URL("../img/menu-tu.png") no-repeat 0 0;
}

.daohang a.menu-4 {
    background: URL("../img/menu-zimu.png") no-repeat 0 0;
}

.daohang a.menu-4:hover {
    background: URL("../img/menu-zimu.png") no-repeat 0 0;
}

.daohang a.menu-5 {
    background: URL("../img/menu-sanguo.png") no-repeat 0 0;
}

.daohang a.menu-5:hover {
    background: URL("../img/menu-sanguo.png") no-repeat 0 0;
}

.ico {
    position: absolute;
    top: 1em;
    right: 1em;
    width: 170px;
    height: 80px;
    z-index: 1000;
}

.ico a {
    display: inline-block;
    height: 80px;
    width: 80px;
}

.ico a.close {
    background: url("../img/ico-close.png") no-repeat 0 0;
}

.ico a.close:hover {
    background: url("../img/ico-close-hover.png") no-repeat 0 0;
}

.ico a.help {
    background: url("../img/ico-help.png") no-repeat 0 0;
}

.ico a.help:hover {
    background: url("../img/ico-help-hover.png") no-repeat 0 0;
}
.ico a.back {
    background: url("../img/ico-back.png") no-repeat 0 0;
}
.ico a.back:hover {
    background: url("../img/ico-back-hover.png") no-repeat 0 0;
}

.ico-right {
    position: absolute;
    bottom:1em; 
    right: 1em;
    z-index: 1000;
}
.ico-right a {
    display: inline-block;
    height: 80px;
    width: 80px;
}
.ico-right a.next {
    background: url("../img/ico-next.png") no-repeat 0 0;
}
.ico-right a.next:hover {
    background: url("../img/ico-next-hover.png") no-repeat 0 0;
}
/* 内容区 */
.main-content {
    margin:3em auto 0;
    /* width:100%; */
    min-width:720px;
    margin-left:18rem;
}
.main-text {
}
.main-text h1 {
    display:inline-block;
    line-height:50px;
    padding:0 20px;
    font-size:2em;
    color:#ffffff;
    background:rgb(240,148,150);
    box-shadow:5px 2px 20px 0 rgba(46, 61, 73, 0.5);
    text-shadow:rgb(46, 19, 0) 0px 1px 1px;
}
.main-text p {
    margin-top:2em;
    font-size:1.5em;
    line-height:180%;
    width:600px;
}
.main-text p b {
    font-size: 2em;
    color:rgb(240,148,150);
}

/* 视频 */
/* .movie {
    margin: 3em auto 0;
    width: 720px;
} */
/* 左侧 */
.left {
    position: absolute;
    padding:1em;
    left:0;
    top:0;
}
.header {
    width: 200px;
    height: 83px;
    /* position: absolute; */
    left: 1em;
    top: 1em;
}
.header a {
    display: block;
    width: 200px;
    height: 83px;
    text-indent: -9999px;
}

.header a.menu_zou {
    background: url("../img/menu-zou.png");
}
.header a.menu_shuzi {
    background:url("../img/menu-shuzi.png");
}
.header a.menu_sanguo {
    background:url("../img/menu-sanguo.png");
}
.header a.menu_tupian {
    background:url("../img/menu-tu.png");
}
.header a.menu_zimu {
    background:url("../img/menu-zimu.png");
}
.left-menu {

}
.left-menu li {
    line-height: 2em;
    font-size: 20px;
    color:#999999;
    width:200px;
    height:80px;
    line-height: 80px;
    margin-top:1em;
    background:url("../img/menu-bg.png") no-repeat center center;
    text-indent:1em;
}
.left-menu li a {
    /* color:#999999; */
    color:#ffffff;
}
.left-menu li a:hover {
    /* color:#cf1b24; */
    color:#ffff00;
}
.left-menu li a.on {
    /* color:#cf1b24; */
    color:#ffff00;
}

/* 底部导航 */
.footer-menu {
    position: absolute;
    bottom:1em;
    left:18rem;
    width:720px;
}
.footer-menu ul {
   
}
.footer-menu ul li {
    display: inline-block;
    color:#999999;
}
.footer-menu .ul4 li {
    width:24%;
}
.footer-menu li b {
    width:20px;
    height:20px;
    display: block;
    text-align: center;
    color:#ffffff;
    border-radius: 10px;
    float:left;
    margin-right:6px;
}
.footer-menu li {
    color:#999999;
}
.footer-menu li b {
    background:#999999;
}
.footer-menu li.on {
    color:rgb(240,148,150);
}
.footer-menu li.on b,.footer-menu li:hover b {
    background:rgb(240,148,150);
}
.footer-menu li a {
    color:#999999;
}
.footer-menu li.on a,.footer-menu li a:hover {
    color:rgb(240,148,150);
}
.footer-menu li span {
    float:right;
}
/* 图片华容道 */
#mygame div {
    /* padding:10px; */
    border:solid 20px #8b4f30;
    border-radius:5px;
    box-shadow:#2e3d4980 2px 2px 5px 0px;
	transition:transform 0.3s ease 0s;
}

#mygame #mygame_canvas {
    /* background:url("../images/no-bg.png"); */
}
/* 字母华容道 */
table.zimu {
    border:solid 20px #8b4f30; 
    border-radius:5px;
    box-shadow:#2e3d4980 2px 2px 5px 0px;
    transition:transform 0.3s ease 0s;
    width:400px;
    height:400px;
}
table.zimu td {
    border:none;
    width:25%;
    background:url("../img/shuzi-no-bg.png");
}
table.zimu td input {
    border:none;
    background:#FFF8E8;
    width:95%;
    height:95%;
    font-size:3em;
    color:#8e5834;
    text-shadow:#2e1300 0px 1px 1px;
	/* border-color:#000000; */
	border-radius:5px;
	box-shadow:#2e3d4980 2px 2px 5px 0px;
	transition:transform 0.3s ease 0s;
}
table.zimu td input:hover, table.zimu td input:focus {
    background:#ffff00;
}
table.zimu td.bushu-td {
    background:#8b4f30;
    font-size:1em;
    color:#ffffff;
}
table.zimu td input.bushu {
    background:#8b4f30;
    width:80%;
    border-radius:0px;
    box-shadow:0 0 0 0;
    color:#ffff00;
    display: inline;
}
table.zimu input.ipt {
    /* background:#8b4f30; */
}