﻿/****************************************
* COMMON
*****************************************/
body[data-forder="index"] {margin:0; padding:0; width:100%; overflow: hidden;}
body {margin:0; padding:0; width:100%;font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/  font-family:Arial,FreeSans,Arimo,"微軟正黑體","Microsoft JhengHei","Droid Sans",Helvetica,sans-serif; position:relative;}
ul{list-style:none; padding:0; margin:0;}
li{list-style:none; padding:0; margin:0;}
p {text-indent: 2em; }
a{outline: none; /* for Firefox Google Chrome  */ behavior:expression(this.onFocus=this.blur()); /* for IE */}


/**************************
input[type=]  Effect 
**************************/
select{font-size:1.5rem; width:100%; padding:1rem 0.5rem; margin:0;background:#fff;color:#888;border:none;cursor:pointer;border:1px solid #ddd;}
input{width:100%; padding:1rem; margin:0;background:#fff;color:#888;border:none;cursor:pointer;border:1px solid #ddd;}
input[type=text],input[type=password]{font-size:1.5rem;}
input[type=radio].css-checkbox {position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;}
input[type=radio].css-checkbox + label.css-label, input[type=radio].css-checkbox + label.css-label.clr {padding-left:27px; height:22px; display:inline-block; line-height:22px; background-repeat:no-repeat; background-position: 0 0; font-size:1.7rem; vertical-align:middle; cursor:pointer;}
input[type=radio].css-checkbox:checked + label.css-label, input[type=radio].css-checkbox + label.css-label.chk {background-position: 0 -23px;}
label.css-label {background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_f8fb10e9af3e4151920a440ba2b6b1dc.png); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

input[type=checkbox].css-checkbox {
position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
}

input[type=checkbox].css-checkbox + label.css-checkboxlabel {
padding-left:21px;
height:16px; 
display:inline-block;
line-height:16px;
background-repeat:no-repeat;
background-position: 0 0;
font-size:16px;
vertical-align:middle;
cursor:pointer;

}

input[type=checkbox].css-checkbox:checked + label.css-checkboxlabel {
background-position: 0 -16px;
}
label.css-checkboxlabel {
background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_e805d54948fce7e67467e416fc9336b7.png);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

input[type=radio].css-checkbox {
position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
}

input[type=radio].css-checkbox + label.css-radiolabel {
padding-left:24px;
height:19px; 
display:inline-block;
line-height:19px;
background-repeat:no-repeat;
background-position: 0 0;
font-size:19px;
vertical-align:middle;
cursor:pointer;

}

input[type=radio].css-checkbox:checked + label.css-radiolabel {
background-position: 0 -19px;
}
label.css-radiolabel {
background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_d8b9d414c6065914e5e864bb2cd67a2b.png);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

/**************************
Custom  
**************************/
.txtrt{text-align:right;  }
.txtlt{text-align:left;}
.txtct{text-align:center;}
.pull-center{margin:0px auto;}
.pull-right{float:right}
.pull-left{float:left}
.nopadding{padding:0;}
.nomargin{margin:0;}
.noflaot{float:none;}
.clearfix{width:100%; height:1px; display:block; float:none; clear:both; padding:0; margin:0; border:none; background:none;}
.hide{display:none}
.show{display:block}
.invisible{visibility:hidden}
.affix{position:fixed;}
.bline{border-bottom:1px solid #ccc; padding:1rem;}

.offsetL070{margin-left:70%;}
.offsetL060{margin-left:60%;}
.offsetL050{margin-left:50%;}
.offsetL045{margin-left:45%;}
.offsetL040{margin-left:40%;}
.offsetL035{margin-left:35%;}
.offsetL030{margin-left:30%;}
.offsetL025{margin-left:25%;}
.offsetL020{margin-left:20%;}
.offsetL015{margin-left:15%;}
.offsetL010{margin-left:10%;}
.offsetL005{margin-left:5%;}

.offsetR070{margin-right:70%;}
.offsetR060{margin-right:60%;}
.offsetR050{margin-right:50%;}
.offsetR045{margin-right:45%;}
.offsetR040{margin-right:40%;}
.offsetR035{margin-right:35%;}
.offsetR030{margin-right:30%;}
.offsetR025{margin-right:25%;}
.offsetR020{margin-right:20%;}
.offsetR015{margin-right:15%;}
.offsetR010{margin-right:10%;}
.offsetR005{margin-right:5%;}

.offsetT070{margin-top:70%;}
.offsetT060{margin-top:60%;}
.offsetT050{margin-top:50%;}
.offsetT045{margin-top:45%;}
.offsetT040{margin-top:40%;}
.offsetT035{margin-top:35%;}
.offsetT030{margin-top:30%;}
.offsetT025{margin-top:25%;}
.offsetT020{margin-top:20%;}
.offsetT015{margin-top:15%;}
.offsetT010{margin-top:10%;}
.offsetT005{margin-top:5%;}
.offsetT002{margin-top:2%;}

.offsetB002{margin-bottom:2%;}

.offsetTB070{margin-top:70%; margin-bottom:70%;}
.offsetTB060{margin-top:60%; margin-bottom:60%;}
.offsetTB050{margin-top:50%; margin-bottom:50%;}
.offsetTB045{margin-top:45%; margin-bottom:45%;}
.offsetTB040{margin-top:40%; margin-bottom:40%;}
.offsetTB035{margin-top:35%; margin-bottom:35%;}
.offsetTB030{margin-top:30%; margin-bottom:30%;}
.offsetTB025{margin-top:25%; margin-bottom:25%;}
.offsetTB020{margin-top:20%; margin-bottom:20%;}
.offsetTB015{margin-top:15%; margin-bottom:15%;}
.offsetTB010{margin-top:10%; margin-bottom:10%;}
.offsetTB005{margin-top:5%; margin-bottom:5%;}
.offsetTB002{margin-top:2%; margin-bottom:2%;}

.paddingL005{padding-left:5px;}
.paddingR000{padding-right:0px;}