/*checkbox & radio style*/
@keyframes hover-color { from {
border-color: #c0c0c0;
}
to { border-color: #3e97eb; }
}
.magic-radio, .magic-checkbox { position: absolute; display: none; }
.magic-radio[disabled], .magic-checkbox[disabled] { cursor: not-allowed; }
.magic-radio + label, .magic-checkbox + label { position: relative; display: inline-block; padding-left: 25px; cursor: pointer; vertical-align: middle; }
.magic-radio + label:hover:before, .magic-checkbox + label:hover:before { animation-duration: 0.4s; animation-fill-mode: both; animation-name: hover-color; }
.magic-radio + label:before, .magic-checkbox + label:before { position: absolute; top: 0; left: 0; display: inline-block; width: 15px; height: 15px; content: ''; border: 1px solid #c0c0c0; background-color:#fff; }
.magic-radio + label:after, .magic-checkbox + label:after { position: absolute; display: none; content: ''; }
.magic-radio[disabled] + label, .magic-checkbox[disabled] + label { cursor: not-allowed; color: #e4e4e4; }
.magic-radio[disabled] + label:hover, .magic-radio[disabled] + label:before, .magic-radio[disabled] + label:after, .magic-checkbox[disabled] + label:hover, .magic-checkbox[disabled] + label:before, .magic-checkbox[disabled] + label:after { cursor: not-allowed; }
.magic-radio[disabled] + label:hover:before, .magic-checkbox[disabled] + label:hover:before { border: 1px solid #e4e4e4; animation-name: none; }
.magic-radio[disabled] + label:before, .magic-checkbox[disabled] + label:before { border-color: #e4e4e4; }
.magic-radio:checked + label:before, .magic-checkbox:checked + label:before { animation-name: none; }
.magic-radio:checked + label:after, .magic-checkbox:checked + label:after { display: block; }
.magic-radio + label:before { border-radius: 50%; }
.magic-radio + label:after { top: 7px; left: 7px; width: 5px; height: 5px; border-radius: 50%; background: #3e97eb; }
.magic-radio:checked + label:before { border: 1px solid #3e97eb; }
.magic-radio:checked[disabled] + label:before { border: 1px solid #c9e2f9; }
.magic-radio:checked[disabled] + label:after { background: #c9e2f9; }
.magic-checkbox + label:before { border-radius: 3px; }
.magic-checkbox + label:after { top: 3px; left: 5px; box-sizing: border-box; width: 5px; height: 7px; transform: rotate(45deg); border-width: 2px; border-style: solid; border-color: #fff; border-top: 0; border-left: 0; }
.magic-checkbox:checked + label:before { border: #3e97eb; background: #3e97eb; }
.magic-checkbox:checked[disabled] + label:before { border: #c9e2f9; background: #c9e2f9; }
.box_base, .box_small, .btn_base_s, .orderTable table .detail_link a, .btn_base, .quickArea ul li a, .searchArea form .listBox ul.sreach_list .box_r ul li .btn_base, .checkBar li a, .checkBar .checkbox_bar, .dropdown, .dp_detail .pageList a { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; border: 1px solid #dcdcdc; padding: 0.67em 1em; text-align: center; }
.fullbox, .topArea, .LockArea, .topList .member_info, .topList p:last-child span, .mdTab .mwt_border ul, .mdTab .mwt_border ul li a, .quickArea ul, .searchTab ul, .searchArea form .md_button, .checkBar ul { display: block; overflow: hidden; }
.w1100, .path, .topArea, .topList .member_info, .mdTab .mwt_border, .mdTab .mwt_border ul { width: 1100px; margin: 0 auto; }
.LockArea { width: 1100px; margin: 5px auto; }
.table_base th, .table_base td { padding: 0.7em; }
/* switch */
.switchBtn { /* Other styles */ }
.switchBtn input[type="checkbox"] { display: none; }
.switchBtn label { display: block; width: 38px; height: 18px; background: #2ab9f9; padding: 1px; border-radius: 25px; cursor: pointer; transition: 0.4s; border: 1px solid #2ab9f9; }
.switchBtn label::after { content: ''; display: block; width: 50%; height: 100%; background: url('../images/switch_btn.jpg') #ffffff; border-radius: 50%; position: relative; top: 0; left: 0; transition: 0.2s; }
.switchBtn input[type="checkbox"]:checked + label { background: #2ab9f9; border: 1px solid #2ab9f9; }
.switchBtn input[type="checkbox"]:checked + label::after { left: 50%; }
.switchBtn body { display: flex; justify-content: center; }
.switchBtn.clearfix div { margin-left: 30px; }

/*path*/
.path { margin-top: 15px; }
.path a { margin: 0 5px; }
.path a:first-child { margin-left: 0; }
i img { width: 1.3em; height: auto; vertical-align: middle; margin-left: 0.3em; }
/*btn*/
.btn_base { background: #eeeeee; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; border: 1px solid #dcdcdc; padding: 0.6em 1em; text-align: center; }
.btn_base:hover+.active { background: #eeeeee; }
.btn_base_s { background: #ffffff; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; border: 1px solid #dcdcdc; padding: 0.2em 0.5em; font-size: 0.9em; }

.btn_base_yellow { background: #ffe98f; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; border: 1px solid #ffcd45; padding: 0.6em 1em; text-align: center; }
.btn_base_yellow:hover+.active { background: #ffe98f; }
/*input basic+date+search*/
input.basic { padding: 8px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; margin-top: 1px; border: 1px solid #dcdcdc; font-size: 1em; color: #999999; }
input.form_date { background: url(../images/calendar.svg) no-repeat 120px center; background-size: 13%; }
input.form_search { padding-left: 30px; background: transparent url(../images/glass_gary.svg) no-repeat 8px 8px; background-size: 5%; }
a.form_search { margin-top: 1px; margin-left: -2px; display: inline-block; border-top-left-radius: 0; border-bottom-left-radius: 0; vertical-align: top; }

/*select*/
.selbg { display: inline-block; overflow: hidden; background: #FFFFFF url("../images/expand-button.svg") no-repeat right center; background-size: auto 25%; border-radius: 3px; vertical-align: middle; margin-top: -2px; }
.selbg_border { display: inline-block; overflow: hidden; background: #FFFFFF url("../images/expand-button.svg") no-repeat right center; background-size: auto 25%; border-radius: 3px; vertical-align: middle; margin-top: -2px; border: 1px solid #dcdcdc; }
select.basic { appearance: none; -moz-appearance: none; -webkit-appearance: none; width: 100%; font-size: 1em; color: #8f8f8f; padding: 0 8px; border: 1px solid #c7c7c7; border-radius: 3px; height: 31px; background: none; border: none; /* Chrome */
-webkit-appearance: none; /* Firefox */
-moz-appearance: none; text-indent: 0.01px; text-overflow: ' '; /* space */
outline-color: #c7c7c7; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; color: #333333; }
select.basic option { width: 100%; background: #fff; margin: 10px; }
select.basic:focus option:checked, select.basic:focus option:hover { color: #333; background-image: linear-gradient( #c7c7c7, #c7c7c7); }
/*IE隱藏箭頭樣式*/
select.basic::-ms-expand {display: none; }
.selbg_check { display: inline-block; overflow: hidden; background: #FFFFFF url("../images/expand-button.svg") no-repeat right center; background-size: auto 25%; border-radius: 3px; vertical-align: middle; margin-top: -2px; border: 1px solid #dcdcdc; }
.selbg_check .magic-radio + label, .selbg_check .magic-checkbox + label { top: 8px; left: 8px; }
.selbg_check select.basic { width: 100%; outline-color: #fff; }
.selbg_check select.basic option { width: 100%; background: #fff; outline: none; }