.checkbox {position: relative;padding: 2px 0;display: inline-block;font-weight: 300;line-height: 1;}
.checkbox span {position: relative;width: 80px;height: 23px;border: 2px solid #777;display: inline-block;border-radius: 20px;}
.checkbox span:after { content: ""; position: absolute; width: 50px; height: 50px; border-radius: 100%; left: 0; top: -5px; z-index: 2; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); }
.checkbox input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; opacity: 0; cursor: pointer; }
.checkbox input:hover + span:after { box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.15); }
.checkbox input:checked + span:after { left: 40px; }

/* style13 */
.checkbox:after { content: '不啟用'; position: absolute; display: inline-block; line-height: 1; font-size: 14px; top: 6px; right: 11px; }
.checkbox span:after { content: '啟用'; overflow: hidden; width: 16px; height: 16px; background: #777; box-shadow: none; border-radius: 14px; text-indent: 100px; line-height: 1; font-size: 14px; color: #fff; -ms-transform: translateX(-50px); -webkit-transform: translateX(-50px); transform: translateX(-50px); -moz-transition: all 0.4s 0.2s, width 0.2s linear, text-indent 0.4s linear; -o-transition: all 0.4s 0.2s, width 0.2s linear, text-indent 0.4s linear; -webkit-transition: all 0.4s, width 0.2s linear, text-indent 0.4s linear; -webkit-transition-delay: 0.2s, 0s, 0s; -webkit-transition: all 0.4s 0.2s, width 0.2s linear, text-indent 0.4s linear; transition: all 0.4s 0.2s, width 0.2s linear, text-indent 0.4s linear; top: 2px; left: auto; right: 7px; }

.IsIndex .checkbox:after { content: '不顯示'; }
.IsIndex .checkbox span:after { content: '顯示'; }

.open .checkbox:after { content: '關'; }
.open .checkbox span:after { content: '開'; }

.yorn .checkbox:after { content: '否'; }
.yorn .checkbox span:after { content: '是'; }

.cycle .checkbox:after { content: '不重複'; }
.cycle .checkbox span:after { content: '重複'; }

.checkbox input:checked + span { border-color: #329043; }
.checkbox input:checked + span:after {background: #3eb454;left: auto;-ms-transform: translateX(0px);-webkit-transform: translateX(0px);transform: translateX(0px);-moz-transition: all 0.4s, width 0.2s linear 0.4s, text-indent 0.3s linear 0.4s;-o-transition: all 0.4s, width 0.2s linear 0.4s, text-indent 0.3s linear 0.4s;-webkit-transition: all 0.4s, width 0.2s linear, text-indent 0.3s linear;-webkit-transition-delay: 0s, 0.4s, 0.4s;-webkit-transition: all 0.4s, width 0.2s linear 0.4s, text-indent 0.3s linear 0.4s;transition: all 0.4s, width 0.2s linear 0.4s, text-indent 0.3s linear 0.4s;width: calc(100% - 10px);text-indent: 0;right: 5px;text-align: center;}

.checkbox input[disabled] { opacity: 0; }
.checkbox input[disabled] + span { background: rgb(255 255 255 / 50%); opacity: .7; z-index: 5; }

/* checkbox */
.el-radio , .el-checkbox , .my_checkbox , .my_radio { position: relative; overflow: hidden; font-size: 100%; }
label.el-radio , label.el-checkbox { display: block; cursor: pointer; }
.el-radio > input[type="radio"] ,
.el-checkbox > input[type="checkbox"] ,
form .el-radio > input[type="radio"] ,
form .el-checkbox > input[type="checkbox"] ,
.my_checkbox >input[type="checkbox"]  ,
.my_radio >input[type="radio"] { position: absolute; opacity: 0; z-index: 1; width: 100%; height: 100%; top: 0; cursor: pointer; }

.el-radio > input[type="radio"] + .el-radio-style ,
.el-checkbox > input[type="checkbox"] + .el-checkbox-style { position: relative; margin-right: 5px; display: inline-block; width: 12px; height: 12px; vertical-align: middle; cursor: pointer; }

.el-radio > input[type="radio"] + .el-radio-style:hover:before ,
.el-checkbox > input[type="checkbox"] + .el-checkbox-style:hover:before { border-color: #20a0ff; }
.el-radio > input[type="radio"] + .el-radio-style:before ,
.el-checkbox > input[type="checkbox"] + .el-checkbox-style:before { position: absolute; top: 0; left: 0; display: inline-block; width: 100%; height: 100%; content: ''; border: 1px solid #b7b7b7; }
.el-radio > input[type="radio"] + .el-radio-style:after ,
.el-checkbox > input[type="checkbox"] + .el-checkbox-style:after { position: absolute; display: none; content: ''; }
.el-radio > input[type="radio"][disabled] + .el-radio-style ,
.el-checkbox > input[type="checkbox"][disabled] + .el-checkbox-style { cursor: not-allowed; color: #D3DCE6; }
.el-radio > input[type="radio"][disabled] + .el-radio-style:hover ,
.el-radio > input[type="radio"][disabled] + .el-radio-style:before ,
.el-radio > input[type="radio"][disabled] + .el-radio-style:after ,
.el-checkbox > input[type="checkbox"][disabled] + .el-checkbox-style:hover ,
.el-checkbox > input[type="checkbox"][disabled] + .el-checkbox-style:before ,
.el-checkbox > input[type="checkbox"][disabled] + .el-checkbox-style:after { cursor: not-allowed; }
.el-radio > input[type="radio"][disabled] + .el-radio-style:hover:before,
.el-checkbox > input[type="checkbox"][disabled] + .el-checkbox-style:hover:before { border: 1px solid #D3DCE6; animation-name: none; }
.el-radio > input[type="radio"][disabled] + .el-radio-style:before ,
.el-checkbox > input[type="checkbox"][disabled] + .el-checkbox-style:before { border-color: #D3DCE6; }
.el-radio > input[type="radio"]:checked + .el-radio-style:before ,
.el-checkbox > input[type="checkbox"]:checked + .el-checkbox-style:before { animation-name: none; }
.el-radio > input[type="radio"]:checked + .el-radio-style:after ,
.el-checkbox > input[type="checkbox"]:checked + .el-checkbox-style:after { display: block; }
.el-radio > input[type="radio"] + .el-radio-style:before { border-radius: 50%; }
.el-radio > input[type="radio"] + .el-radio-style:after { top: 25%; left: 25%; width: 50%; height: 50%; border-radius: 50%; background: #20a0ff; }
.el-radio > input[type="radio"]:checked[disabled] + .el-radio-style:before { border: 1px solid #b0d7f5; }
.el-radio > input[type="radio"]:checked[disabled] + .el-radio-style:after { background: #b0d7f5; }
.el-checkbox > input[type="checkbox"] + .el-checkbox-style:before { border-radius: 3px; }
.el-checkbox > input[type="checkbox"] + .el-checkbox-style:after { top: 1px; left: 4px; box-sizing: border-box; width: 4px; height: 10px; transform: rotate(45deg); border-right: 2px solid #fff; border-bottom: 2px solid #fff; }
.el-checkbox > input[type="checkbox"]:checked + .el-checkbox-style:before { border: #20a0ff; background: #20a0ff; }
.el-checkbox > input[type="checkbox"]:checked[disabled] + .el-checkbox-style:before { border: #b0d7f5; background: #b0d7f5; }

/* el-checkbox */
b[class^="el-"] { margin: 5px 10px; display: inline-block; font-weight: 400; }
b[class^="el-"] span { display: inline-block; }

/* my_checkbox */
.my_checkbox , .my_radio { display: inline-block; }
.my_checkbox span , .my_radio span { padding: .8rem 3rem; display: inline-block; border-width: 3px; border-color: transparent; color: #535353; }
.my_checkbox input[type="checkbox"]:checked + span  , .my_radio > input[type="radio"]:checked + span { border-color: var(--primary); color: var(--primary); }