html { font-size: 16px; }
body { margin: 0; padding: 0; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; color:#666; font-family: PingFangSC-Regular, sans-serif; }
div { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; font-size:1.2rem; }
h1, h2, h3, h4, h5, h6 { font-size:1.2rem; }
dl, dt, dd, ol, li { margin: 0; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.clear { clear:both; }
/*.undline { text-decoration: underline; }*/
.undline { border-bottom: 1px solid #333; padding: 0 10px; }




form { max-width:500px; width: 95%; margin:50px auto; }
legend { font-size: 1rem; }
fieldset { border-radius:8px; margin:10px auto; }
.btn { width: 100px; height:2.1rem; margin:5px 10px; cursor:pointer; border:1px solid #767676; border-radius:3px; background-color:#EFEFEF; font-size:1rem; }
.btn:hover { background-color:#E5E5E5; }
.btn_large { width:120px; }
.btn_red { color:#FFF; background-color:#D84A38; border: 1px solid #A92B1B; }
.btn_red:hover { background-color: #A92B1B; }
.btn_yellow { color:#FFF; background-color:#FFB848; border: 1px solid #C1882E; }
.btn_yellow:hover { background-color: #C1882E; }
.btn_blue { color:#FFF; background-color:#4D90FE; border: 1px solid #005CC8; }
.btn_blue:hover { background-color: #005CC8; }
.btn_green { color:#FFF; background-color:#35AA47; border: 1px solid #138124; }
.btn_green:hover { background-color: #138124; }




.tabl { }
.tabl .tr { width: 25%; margin: 5px 0; float:left; }
.tabl .tr input	{ cursor:pointer; }
.tabl .tr label { width: 80px; display:inline-block; cursor:pointer; }
.tabl .tr select { width:75px; cursor:pointer; font-size:1rem; border-radius:5px; }

.html5 .tr { width: 50%; margin: 10px 0; }
.html5 .tr select { height:30px; }

.box_btn { text-align:center; height:100px; padding:20px; }

.layer_opt2,
.layer_opt { height:40px; margin:50px; text-align:center; }

h3 { width:100%; line-height: 30px; clear:both; margin: 10px 0; letter-spacing:5px; text-align:center; }
.exercises { color:#000; }
.exercises .title { width:100%; line-height: 30px; font-size:14px; }
.exercises .title .item { float:left; margin-right:60px; font-size:14px; }
.exercises .cont { font-size:18px; }
.exercises .cont .item { float:left; width:25%; line-height:38px; font-size:18px; }
.exercises2 .cont .item { width: 33%; font-size:17px; }

.html5 .title .item { margin-right:40px; }
.html5 .cont .item { line-height:33px; }

.readme { color:#888; }
.readme ul { margin:5px 0; padding-left:20px; }
.readme li { font-size:.8rem; line-height:1.4rem; }

.uplog {  }
.uplog dt { color:#0075FF; font-size:1rem; }
.uplog dd { font-size:12px; color:#888; line-height:1.5em; }
.uplog a { color: #999; width:100%; display: block; text-align:center; margin:10px 0; font-size:1rem; }
.uplog a:hover { color: #0075FF; }



.debug,
.debug .item { font-size:14px; }
.debug { padding: 5px 10px; background: #282C34; color: #ABB; }
.debug .item { margin: 5px auto; }
.debug .blue { color:#37E; }
.debug .purple { color:#C7D; }
.debug .green { color:#790; }
.debug .red { color:#E33; }
.debug .imp { color:#EEE; }
.debug .sec { color:#567; }