body {
    width:100%;
    height:100%;
    margin:0px auto;
    background-color:#333333;
    background-image:url('../images/d40d_pattern_normal.jpg');
    background-attachment:fixed;
  }
  *{
    box-sizing:border-box;
    padding:0px;
    margin:0 auto;
    font-size:16px;
    font-family: "メイリオ", Meiryo, "Helvetica", "Arial", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  }
  #site{
    width:100%;
    height:100%;
    /*min-height: 100%;*/
    /*background-color: #eee;*/
    /*background-image:url('./images/canvas.jpg');*/
  }
  body > #site {
    height: auto;
}

  .word_table{
    box-sizing:border-box;
    border-collapse: sepearate;
    border-spacing: 2px;
    /*border:1px solid #aaa;*/
    /*border-radius:3px;*/
    /*table-layout: fixed;*/
    height:100%;
    width:100%;
  }
  .word_table th{
    /*background-color:#eee;*/
    /*opacity: 0.5;*/
    font-size:12px;
    color:#999;
    width:40px;
    text-align: right;
    /*padding-right:10px;*/
    vertical-align: top;
    /*padding-top:10px;*/
    min-height:70px;
    height:70px;
    /*border:1px solid #999;*/
  }
  .word_table th span{
    text-align:center;
    display:inline-block;
    padding:2px;
    background-color:#222;
    font-size:12px;
    font-weight:normal;
    color:#999;
    border:1px dashed #444;
    border-radius:2px;
    width:35px;
  }

  .word_table td{
    text-align:left;
    vertical-align: top;
    padding:10px;
    font-size:16px;
    color:#ccc;
    line-height: 200%;
    border-top:1px dashed #444;
  }
.word_table tr:nth-child(1) td {
  /*font-family: simsun;*/
font-family: simsun,"メイリオ", Meiryo, "Helvetica", "Arial", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight:bold;
  color: #53c4f4;
  font-size:42px;
  padding-top:2px;
  vertical-align: top;
}
.word_table tr:nth-child(2) td {
font-family: simsun,"メイリオ", Meiryo, "Helvetica", "Arial", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight:bold;
  /*color: #ccc;*/
  color: #53c4f4;
  font-size:36px;
  padding-top:2px;
  vertical-align: top;
}
 .lev_select_list{
    width:100%;
    list-style: none;
    padding:0px;
    margin:0px auto;
    text-align:center;
 }
.lev_select_list li{
  display:inline-block;
    color:#ccc;
    font-size:16px;
    padding:10px 20px;
    /*width:80px;*/
  }
.lev_select_list li label:hover{
    cursor:pointer;
    color:#F7B803;
  }
.lev_select_list li a{
    cursor:pointer;
    color:#ccc;
    padding:10px 20px;
    text-decoration: none;
  }
.lev_select_list li a:hover{
    cursor:pointer;
    color:#75aaff;
  }
/* .lev_select_list{
    width:100%;
    list-style: none;
    padding:0px;
    margin:0px;
 }
.lev_select_list li{
    float:left;
    color:#eee;
    padding:10px;
    font-size:20px;
    width:80px;
  }
.lev_select_list li label{
    font-size:20px;
  }*/
.frame_for_less_word li {
    text-align:ceter;
    width:120px;
    padding:10px 5px;
  }
.frame_for_less_word li a{
    width:100%;
    height:100%;
    font-weight:bold;
  }

.lev_select_for_hanzi li {
    text-align:left;
    width:200px;
    padding:10px 5px;
  }
.lev_select_for_hanzi li a{
    width:100%;
    height:100%;
    font-size:14px;
  }


  .ul_progress{
    width:100%;
    list-style: none;
    padding:0px;
    margin:0px;
    /*position:absolute;*/
    position:fixed;
    bottom:2px;
  }
  .ul_progress li{
    box-sizing:border-box;
    float:left;
    width:33%;
    color:#eee;
    padding:0px;
    /*height:35px;*/
  }
  .ul_progress li:last-child{
    float:left;
    width:34%;
    color:#eee;
    padding:0px;
    /*margin:1px;*/
  }

    .ul_progress li a{
    text-align:center;
    display:block;
    padding:10px 0px;
    width:100%;
    height:35px;
    font-size:12px;
    background-color:#444;
  }

.button {
   border: 1px solid #0a3c59;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #7ea4bd 0 1px 0;
   color: #06426c;
   font-size: 12px;
   font-family: "Meiryo",helvetica, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border: 1px solid #0a3c59;
   text-shadow: #1e4158 0 1px 0;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   color: #fff;
   }
.button:active {
   text-shadow: #1e4158 0 1px 0;
   border: 1px solid #0a3c59;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#3e779d));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   background-image: -ms-linear-gradient(top, #3e779d 0%, #65a9d7 100%);
   color: #fff;
   }

  @media screen and (max-width: 640px){
  .word_table{
    width:98%;
  }
  }

.newest:after{
  position:relative;
  top:-15px;
  content:"new!";
  font-style:italic;
  color:yellow;
  background-color: #ff0000;
  padding:1px 5px;
  border:1px solid yellow;
  border-radius:3px;
  font-weight: bold;
  font-size:14px;
  margin-left:10px;
}
.text_select_title {
  color:#FDFDFD;
  font-size:24px;
  text-align:center;
  text-shadow:3px 3px 3px rgba(5,19,27,0.3);
}
 .text_sel_explai{
    width:100%;
    padding:0px;
    margin:0px;
 }
.text_sel_explai li{
  list-style: none;
    color:#ccc;
    padding:5px;
    font-size:10px;
  }


 .text_select_list{
    width:100%;
    padding:0px;
    margin:0px;
 }
.text_select_list li{
    list-style: none;
    float:left;
    color:#eee;
    padding:10px;
    font-size:16px;
    text-align: left;
    width:200px;
  }
.text_select_list li a{
  display:block;
    padding:10px;
    font-size:16px;
    width:100%;
  }
  .main_menu{
  width:100%;
  padding:10px 0px 10px 30px;
  position: relative;
  /*border-bottom:1px dotted gray;*/
  line-height:150%;
  font-size:13px;
}
.main_menu a{
  font-size:14px;
  text-decoration:none;
  color:#eee;
}
.main_menu:hover{
  width:100%;
  position:relative;
  padding:10px 0px 10px 30px;
  /*background-color:#FAFAFA;*/
}
.main_menu:hover a{
  font-size:14px;
    text-decoration:none;
    /*color:#444;*/
}
.main_menu:hover:before{
    display: block;
    content:"";
    position:absolute;
    left:3px;
    top:10px;
    background: url('../images/menu_arrow.png') 0px 0px;
    background-size:16px 16px;
    width:16px;
    height:16px;
    background-repeat:no-repeat;
}

.main_menu:after{
    display: block;
    content:"";
    position:absolute;
    left:3px;
    top:10px;
    background: url('../images/favorite_icon.png') 0px 0px;
    background-size:20px 20px;
    width:20px;
    height:20px;
    background-repeat:no-repeat;
}

.main_menu:hover:after{
    display: none;
    content:"";
    position:absolute;
    left:3px;
    top:10px;
    background: url('../images/favorite_icon.png') 0px 0px;
    background-size:16px 16px;
    width:16px;
    height:16px;
    background-repeat:no-repeat;
}
  .pinyin_table{
    border-collapse: separate;
    border-spacing: 2px;
    border-radius:3px;
    table-layout: fixed;
    height:100%;
    width:90%;

  }
  .pinyin_table th{
/*    opacity: 0.3;
    font-size:18px;
    color:#999;
    width:70px;
    text-align: right;
    padding-right:0px;
    vertical-align: top;
    padding-top:20px;*/

    font-size:18px;
    color:#999;
    width:70px;
    text-align: right;
    padding-right:10px;
    vertical-align: top;
    padding-top:10px;
    min-height:70px;
    height:70px;
  }
  .pinyin_table th span{
/*    display:inline-block;
    width:60px;
    text-align:center;
    padding:5px;
    background-color:#eee;
    font-size:12px;
    color:#333;
    border-radius:3px;*/
    text-align:center;
    display:inline-block;
    padding:5px;
    background-color:#444;
    font-size:12px;
    font-weight:normal;
    color:#eee;
    border:1px solid #999;
    border-radius:3px;
    width:60px;
  }
  .pinyin_table td{
    text-align:left;
    padding:20px;
    font-size:24px;
    color:#fff;
    border-radius:3px;
  }
  .pinyin_table tr:nth-child(1) td span{
  text-align:center;
  font-size:32px;
  font-family:"Consolas";
  color:#EF7E01;
  border-radius:3px;
  border:1px solid #aaa;
  padding:5px 15px;
  }

.pinyin_box{
  width:100%;
}

a.pinyin_exp{
  font-family:"Consolas";
  font-size:20px;
  background-color:#ccc;
  color:#444;
  text-decoration: none;
  border-radius:3px;
  padding:5px;
}
a.pinyin_exp:hover{
  background-color:#eee;
}
  .hanzi_table{
    border-collapse: separate;
    border-spacing: 2px;
    /*border:1px solid #aaa;*/
    border-radius:3px;
    table-layout: fixed;
    height:100%;
    width:100%;

  }
  .hanzi_table th{
    /*opacity: 0.3;*/
    font-size:18px;
    color:#999;
    width:70px;
    text-align: right;
    padding-right:0px;
    vertical-align: top;
    padding-top:20px;
    /*border:1px solid #eee;*/
  }
  .hanzi_table th span{
/*    display:inline-block;
    padding:5px;
    background-color:#eee;
    font-size:12px;
    color:#333;
    border-radius:3px;
    width:60px;
    text-align:center;*/

    text-align:center;
    display:inline-block;
    padding:5px;
    background-color:#444;
    font-size:12px;
    font-weight:normal;
    color:#eee;
    border:1px solid #999;
    border-radius:3px;
    width:60px;
  }
  .hanzi_table td{
    text-align:left;
    padding:20px;
    font-size:18px;
    color:#fff;
    border-radius:3px;
    /*border:1px solid #eee;*/
   /*text-shadow:1px 1px 1px rgba(1,1,1,0.3);*/

  }
  .hanzi_table tr:nth-child(1) td{
    /*text-align:center;*/
    font-family: simsun;
    font-size:6em;
    color:#EF7E01;
    text-shadow:
    1px 1px 0px rgba(250,250,250,0.9),
    10px 10px 10px rgba(1,1,1,0.3);
  }
.hanzi_table tr:nth-child(2) td {
  font-family: simsun;
  color: #eee;
  font-size:1.5em;
}
  .hanzi_table tr:nth-child(2) td span{
    display:block;
    padding:10px;
    background-color:#ccc;
    font-family: simsun;
    font-size:1.5em;
    border-radius:3px;
       text-shadow:1px 1px 1px rgba(1,1,1,0.0);
    box-shadow:2px 2px 2px 2px rgba(1,48,75,0.3);
  }
.hanzi_table tr:nth-child(2):hover td {
  color:#EF7E01;
  text-shadow:1px 1px 1px rgba(1,1,1,0.3);
}
.hanzi_box{
  width:100%;
}

a.fayin_exp{
font-size:16px;
background-color:#ccc;
color:#444;
text-decoration: none;
border-radius:3px;
padding:5px;
}
a.fayin_exp:hover{
font-size:16px;
background-color:#eee;
/*color:#222;*/
text-decoration: none;
border-radius:3px;
padding:5px;
}

a.hanzi_exp{
font-size:14px;
/*background-color:#ccc;*/
color:#eee;
text-decoration: none;
border-radius:3px;
padding:5px;
}
a.hanzi_exp:hover{
font-size:14px;
background-color:#444;
color:#fff;
text-decoration: none;
border-radius:3px;
padding:5px;
}
.word_card_title {  width:100%;color:#bbb;font-size:14px;text-align:center;padding:10px 5px;}