@import url(http://fonts.googleapis.com/css?family=Lato:400,700,900);
body {
    font-family: Lato, Helvetica, Arial, sans-serif;
    color: #545454;
    margin: 0;
    min-height: 100vh;
}
.form {
    width: 100%;
    background: #fff;
    margin: 1em auto;
    padding-bottom: 1em;
    border-radius: 8px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.07);
}
.form header {
    border-bottom: 3px double #e9e9e9;
    padding: 1em 0;
    padding-bottom: 1em;
}
.form header h1 {
    text-align: center;
    font-size: 2.3em;
    color: #5f7796;
    font-weight: bolder;
}
.form header h2 {
    text-align: center;
    font-size: 1.2em;
    color: #94a9c3;
    font-weight: normal;
	margin: 0 10% 0 10%;
}
.form .button-submit {
    font-weight: regular;
    color: #fff;
    font-size: 1em;
    padding: 0.8em 2em;
    border-radius: 50em;
    border: none;
    background: #5f7796;
    margin: 1em auto 0.3em;
    display: block;
    transition: all 0.2s linear;
}
.form .button-submit:hover {
    background: #374558;
}
.form ul {
    list-style: none;
    margin: 0 10% 0 10%;
<!-- 	padding: 0 10% 0 10%; -->
    display: table;
	text-align: center;
}
.form ul h3 {
    font-weight: normal;
    font-size: 1.2em;
	
}
.form ul .question {
    padding: 1em 1.5em;
    border-bottom: 1px solid #e9e9e9;
}
.form ul .question .choice span {
    background: #70b48b;
    color: #fff;
    font-size: 0.8em;
    padding: 0.5em 1.5em 0.5em 2em;
    margin: 1em 1.2em 1em 0;
    border-radius: 100px;
    position: relative;
    min-width: 50px;
    text-align: center;
    display: inline-block;
    transition: all 0.2s linear;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0) inset, 0 0 0 2px rgba(0, 0, 0, 0);
}
.form ul .question .choice span:before {
    content: '';
    background: #fff;
    position: absolute;
    top: 9px;
    left: 7px;
    border-radius: 50%;
    width: 10px;
    height: 10px;
}
.form ul .question .choice span:after {
    content: '';
    position: absolute;
    z-index: 2;
    width: 6px;
    height: 6px;
    top: 11px;
    left: 9px;
    transform: scale(0);
    border-radius: 50%;
    transition: all 0.3s linear;
}

.form #fenlei{
	width: 100%;
    margin: 0 auto;
}
.form .fenlei_p{
	text-align: center;
}

.form #fenlei span {
    background: #70b48b;
    color: #fff;
    font-size: 0.8em;
    padding: 0.5em 1.5em 0.5em 2em;
    margin: 1em 1.2em 1em 0;
    border-radius: 100px;
    position: relative;
    min-width: 50px;
    text-align: center;
    display: inline-block;
    transition: all 0.2s linear;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0) inset, 0 0 0 2px rgba(0, 0, 0, 0);
}
.form #fenlei span:before {
    content: '';
    background: #fff;
    position: absolute;
    top: 9px;
    left: 7px;
    border-radius: 50%;
    width: 10px;
    height: 10px;
}
.form #fenlei span:after {
    content: '';
    position: absolute;
    z-index: 2;
    width: 6px;
    height: 6px;
    top: 11px;
    left: 9px;
    transform: scale(0);
    border-radius: 50%;
    transition: all 0.3s linear;
}



.form ul .question .choice span:hover,
.form ul .question .choice span:focus {
    background: #417d59;
}
.form ul .question .choice input {
    display: none;
}
.form ul .question .choice input:checked + span {
    box-shadow: 0 0 0 2px #5f7796 inset, 0 0 0 2px rgba(0, 0, 0, 0.1);
}
.form ul .question .choice input:checked + span:after {
    background: #5f7796;
    transform: scale(1);
}
.form #input_answer {
	margin: 0 10% 0 10%;
}
.form .answer {
	font-size: 24px;
	text-align: center;
    line-height: 1;
    color: #555;
    font-weight: 800;
    font-family: 'SimSun','宋体','微软雅黑','黑体','Microsoft YaHei',Arial;
}
.form hr {
	margin: 2% 0;
}