CSS 라디오 체크박스 디자인 변경

<style>
.__chk {position:relative;display:inline-block;margin-right:20px;color:#333;}
.__chk input {position:absolute;left:-9999px;top:0;}
.__chk:hover span,
.__chk input:focus + span {text-decoration:underline;}
.__chk span {}
.__chk span:before {content:"\e97e";display:inline-block;margin-right:5px;font-family:axicon;vertical-align:middle;}
.__chk input:checked + span:before {content:"\e97f";}
.__chk.type2 span:before {content:"\e97d";}
.__chk.type2 input:checked + span:before {content:"\e97c";}
</style>
<label class="__chk type1"><input type="radio" name="radio1"><span>라디오 버튼1</span></label>
<label class="__chk type1"><input type="radio" name="radio1"><span>라디오 버튼2</span></label>
<label class="__chk type2"><input type="checkbox" name=""><span>체크박스1</span></label>
<label class="__chk type2"><input type="checkbox" name=""><span>체크박스2</span></label>