*{ box-sizing: border-box; }
body,ul{ margin: 0; padding: 0; }
.clr:after{ content: ""; display: block; overflow: hidden; clear: both; }
#header span{ display: block; float: left; width: 50%; background: #ddd; color: #333; padding: 10px; text-align: center; }
#header .on{ background: #39f; color: #fff; }
#body{ padding: 10px; }
.main div,#body .part{ display: none; }
.main div.on,#body .on{ display: block; }
#body li{ float: left; list-style: none; }
#body li span{ display: block; width: 60px; height: 60px; margin: auto; background: url(ico.png) no-repeat; }
#mj li{ width: 20%; }
#bmj li{ width: calc(100% / 6);}
#mj .a{ background-position: 0 -243px; }
#mj .b{ background-position: -72px -243px; }
#mj .c{ background-position: -141px -243px; }
#mj .d{ background-position: -207px -243px; }
#mj .e{ background-position: -277px -243px; }
#mj .on .a{ background-position: 0 -170px; }
#mj .on .b{ background-position: -72px -170px; }
#mj .on .c{ background-position: -141px -170px; }
#mj .on .d{ background-position: -207px -170px; }
#mj .on .e{ background-position: -277px -170px; }
#bmj .a{ background-position: 0 -88px; }
#bmj .b{ background-position: -72px -88px; }
#bmj .c{ background-position: -141px -88px; }
#bmj .d{ background-position: -207px -88px; }
#bmj .e{ background-position: -277px -88px; }
#bmj .f{ background-position: -339px -88px; }
#bmj .on .a{ background-position: 0 -15px; }
#bmj .on .b{ background-position: -72px -15px; }
#bmj .on .c{ background-position: -141px -15px; }
#bmj .on .d{ background-position: -207px -15px; }
#bmj .on .e{ background-position: -277px -15px; }
#bmj .on .f{ background-position: -339px -15px; }
.main h3{ color: #39f; border-left: 3px solid #39f; padding-left: 10px; }
.main p b{ color: #c00; }
input{ border:1px solid #ddd; border-radius: 2px; padding: 10px; margin: 2px 0; }
.btn{ border:0; background: #39f; color: #fff; display: block; width: 100%; }
.rst{ display: block !important; padding: 20px; color: #999;}
.rst b{ font-size: 30px; color: #c00;}