.fl{float:left;}
.fr{float:right;}
.game{background: url(../images/game_bjpc.jpg) no-repeat; -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; }
.game .game_site{ line-height: 55px; text-align: right;border-bottom: 1px solid #d4c9bc; color: #9e9e9e;}
.game .game_site span{color: #3d3d3d;}
.game  .game_con{ margin:100px 0 70px; width:91%;}
.game  .game_con .left{ float: left;}
.left .showWord{ background: url(../images/game_zi.png) no-repeat; width: 495px; height: 495px; line-height: 495px;text-align: center;font-size: 400px;background-size:cover;}
.left .fontname{width:496px; text-align:center; margin-top:20px; font-size:18px;}
.game  .game_con .right{ float: right; width: 600px}
.right .userinput{height:35px; width:450px; border:1px solid #ccc; padding-left:20px; outline:none; }
.right	#btn{width:100px; text-align:center; height:35px; line-height:35px; background:#0087cd; color:#fff;cursor:pointer;}
.right .input_zi{zoom:1;margin:20px 0; }
.right h1{color: #282828;font-size: 18px}

.devo_tab{ }
.devo_conbox{ padding:30px 0 20px;}


.devo_con{ position:relative; margin:20px 0;}
.tab-titd{  height:112px; width: 100%; margin:0 auto;}
.tab-titd li{ float:left; width:25%; *+margin-left:-1px; height:114px; text-align:center; cursor:pointer; font-size:16px; color:#979797;}
.tab-titd li p{height:30px; line-height:30px; color: #fff}
.tab-titd li.on p{ color:#000;}
.tab-titd li.on,.tab-titd li:hover{opacity: 0.7}
.tab-titd ._1{ background: #bfc37b;}
.tab-titd ._2{ background: #457dd3;}
.tab-titd ._3{ background: #f86c81;}
.tab-titd ._4{ background: #70c3d3;}
.tab-titd li img{ margin-top: 20px}

.devo_conbox .inner{ height: 60px; background: #6e94ce;position: relative;;}
.devo_conbox .inner ul li{ float: left; color: #fff;padding:0 20px;cursor:pointer;}
.devo_conbox .inner ul li.on{background: #457dd2;font-weight: bold;}
.devo_conbox .inner em{ display: block;background: url(../images/game_ico.png) no-repeat; position: absolute;top: -10px; left:63px; width: 21px; height: 11px}
.devo_conbox ._1 em{ left:63px;}
.devo_conbox ._2 em{ left:213px;}
.devo_conbox ._3 em{ left:365px;}
.devo_conbox ._4 em{ left:517px;}
.devo_conbox .inner .text{ height:30px; line-height: 30px; padding-top: 15px;padding-left: 40px }
.devo_conbox ._1 .text{ padding-left: 40px }
.devo_conbox ._2 .text{ padding-left: 193px }
.devo_conbox ._3 .text{ padding-left: 270px }
.devo_conbox ._4 .text{ padding-left: 313px }


.right .produce{ font-size: 24px; color: #282828; border:1px solid #7d7d7d; line-height: 50px; text-align: center; width: 150px; cursor: pointer; display: block;}
.right .produce:hover{background:#0087CD;color:#fff;border:1px solid #0087CD;}
.change_menu ul,.change_menu li{ display:none;}
.change_menu ul.on,.change_menu li.on{ display:block;}



@media only screen and (max-width: 1520px) {
.game .game_con{width:100%;}
.right .userinput{width:400px; }
.devo_conbox ._1 em{ left:60px;}
.devo_conbox ._2 em{ left:197px;}
.devo_conbox ._3 em{ left:335px;}
.devo_conbox ._4 em{ left:473px;}
.devo_conbox ._1 .text{ padding-left: 35px }
.devo_conbox ._2 .text{ padding-left: 165px }
.devo_conbox ._3 .text{ padding-left: 220px }
.devo_conbox ._4 .text{ padding-left: 247px }
}

@media only screen and (max-width: 1300px){
.left .showWord {width: 455px;height: 455px;line-height: 455px;font-size: 350px;  }
.left .fontname{width:auto; }
.game  .game_con .right{  width: 550px;}
.right .userinput{width:350px; }
.devo_conbox ._1 em{ left:50px;}
.devo_conbox ._2 em{ left:178px;}
.devo_conbox ._3 em{ left:302px;}
.devo_conbox ._4 em{ left:428px;}
.devo_conbox ._1 .text{ padding-left: 27px }
.devo_conbox ._2 .text{ padding-left: 148px }
.devo_conbox ._3 .text{ padding-left: 150px }
.devo_conbox ._4 .text{ padding-left: 201px }
}

@media only screen and (max-width: 1279px){
.game  .game_con .right{  width: 500px;}
}



@media only screen and (max-width: 1023px){
.game {background: url(../images/game_bj.jpg) no-repeat;background-size: 100% auto;}
.game .game_con {margin: 50px auto;}
.game  .game_con .right {float:none;margin:0 auto 30px;}
.game .game_con .left{float:none;}
.left .showWord,.right .produce{margin:0 auto;}

}

@media only screen and (max-width: 767px){
.game {background: #e9dac5 url(../images/game_bj.jpg) no-repeat;background-size: 100% auto;}
.game .game_con {margin: 20px auto;}
.game  .game_con .right{  width:auto; margin:0 auto 20px;}
.right .input_zi,.devo_con{margin:10px 0;}
.tab-titd,.tab-titd li,.devo_conbox .inner{height:auto;}
.tab-titd li img{display:none;}
.devo_conbox{padding:10px 0;}
.devo_conbox .inner .text{padding:8px 27px;height:20px;line-height:20px;}
.right .produce{line-height:30px;font-size:18px; width:120px;}
.right .userinput{width:68%;}
.right #btn{width:25%;}
.devo_conbox .inner em{display:none;}

.left .showWord {width: 300px;height: 300px;line-height: 300px;font-size: 220px;}

}

@media only screen and (max-width: 375px){
.left .showWord{width: 255px;height: 255px;line-height: 255px;font-size: 150px;}
.right .userinput{width:65%;}
.devo_conbox .inner .text{padding:8px 10px;}
}