/* RWD UI + reset */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    background: transparent;
    border: 0;
    font-size: 100%;
    margin: 0;
    outline-style: none;
    padding: 0;
    vertical-align:baseline;
}
body {
    line-height: 1;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,q:before, q:after { content:''; content:none; }
a {	background:transparent;font-size:100%;margin:0;padding:0;text-decoration:none;vertical-align:baseline;/*tc*/ }
/* change colours to suit your needs */
ins { background-color:#ff9; color:#000; text-decoration:none; }
/* change colours to suit your needs */
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
/* change border colour to suit your needs */
hr { border:0;border-top:1px solid #cccccc;box-sizing:border-box;display:block;height:1px;margin:1em 0;padding:0; }
input, select {	vertical-align:middle; }
/* tc style reset  */
input[type="radio"] { border-style:none; } 
input[type="checkbox"] { border-style:none; }
fieldset, img { border:0; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal; }
ol, ul { list-style:none; }
caption, th { text-align:left; }
q:before, q:after { content:''; }
abbr, acronym { border:0; }
strong { font-weight:bold; }
input[type="text"] { background:#fff; border:1px solid #e6e6e6; }
input[type="password"] { background:#fff; border:1px solid #e6e6e6; }
textarea { background:#fff; border:1px solid #e6e6e6; }
table { border-collapse:collapse; border-spacing: 0; }
/* ui */
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary { display: block; }
.pure img, embed, object, video { height:auto;max-width:100%; }
/* desk */
.desk-10-1,.desk-10-2,.desk-10-3,.desk-10-4,.desk-10-5,.desk-10-6,.desk-10-7,.desk-10-8,.desk-10-9,.desk-10-10,.desk-24-1,.desk-24-2,.desk-24-3,.desk-24-4,.desk-24-5,.desk-24-6,.desk-24-7,.desk-24-8,.desk-24-9,.desk-24-10,.desk-24-11,.desk-24-12,.desk-24-13,.desk-24-14,.desk-24-15,.desk-24-16,.desk-24-17,
.desk-24-18,.desk-24-19,.desk-24-20,.desk-24-21,.desk-24-22,.desk-24-23,.desk-24-24{ *display:inline;display:block;float:left;height:auto;min-height:30px;position:relative;zoom: 1; }
.desk-10-1 { width: 10%; *width: 9.9690%; }
.desk-10-2 { width: 20%; *width: 19.9690%; }
.desk-10-3 { width: 30%; *width: 29.9690%; }
.desk-10-4 { width: 40%; *width: 39.9690%; }
.desk-10-5 { width: 50%; *width: 49.9690%; }
.desk-10-6 { width: 60%; *width: 59.9690%; }
.desk-10-7 { width: 70%; *width: 69.9690%; }
.desk-10-8 { width: 80%; *width: 79.9690%; }
.desk-10-9 { width: 90%; *width: 89.9690%; }
.desk-10-10 { width: 100%; }
.desk-24-1 { width: 4.1667%; *width: 4.1357%; }
.desk-24-2 { width: 8.3333%; *width: 8.3023%; }
.desk-24-3 { width: 12.5000%; *width: 12.4690%; }
.desk-24-4 { width: 16.6667%;*width: 16.6357%; }
.desk-24-5 { width: 20.8333%; *width: 20.8023%; }
.desk-24-6 { width: 25%; *width: 24.9690%; }
.desk-24-7 { width: 29.1667%; *width: 29.1357%; }
.desk-24-8 { width: 33.33333333%; *width: 33.3023%; }
.desk-24-9 { width: 37.5000%; *width: 37.4690%; }
.desk-24-10 { width: 41.6667%; *width: 41.6357%; }
.desk-24-11 { width: 45.8333%; *width: 45.8023%; }
.desk-24-12 { width:50%; *width: 49.9690%; }
.desk-24-13 { width: 54.1667%; *width: 54.1357%; }
.desk-24-14 { width: 58.33333333%; *width: 58.3023%; }
.desk-24-15 { width: 62.5000%; *width: 62.4690%; }
.desk-24-16 { width: 66.66666667%; *width: 66.6357%;}
.desk-24-17 { width: 70.83333333%; *width: 70.8023%;}
.desk-24-18 { width: 75%; *width: 74.9690%; }
.desk-24-19 { width: 79.1667%; *width: 79.1357%; }
.desk-24-20 { width: 83.33333333%; *width: 83.3023%;}
.desk-24-21 { width: 87.5000%; *width: 87.4690%; }
.desk-24-22 { width: 91.6667%; *width: 91.6357%; }
.desk-24-23 { width: 95.8333%; *width: 95.8023%; }
.desk-24-24 { width: 100%; }
.desk-hide { display:none; }
/* pad */
@media(max-width: 992px){
.pad-10-1,.pad-10-2,.pad-10-3,.pad-10-4,.pad-10-5,.pad-10-6,.pad-10-7,.pad-10-8,.pad-10-9,.pad-10-10,.pad-24-1,.pad-24-2,.pad-24-3,.pad-24-4,.pad-24-5,.pad-24-6,.pad-24-7,.pad-24-8,.pad-24-9,.pad-24-10,.pad-24-11,.pad-24-12,.pad-24-13,.pad-24-14,.pad-24-15,.pad-24-16,.pad-24-17,.pad-24-18,.pad-24-19,.pad-24-20,.pad-24-21,.pad-24-22,.pad-24-23,.pad-24-24{ float:left;height:auto;min-height:30px;position:relative; }
.pad-10-1 { width: 10%; *width: 9.9690%; }
.pad-10-2 { width: 20%; *width: 19.9690%; }
.pad-10-3 { width: 30%; *width: 29.9690%; }
.pad-10-4 { width: 40%; *width: 39.9690%; }
.pad-10-5 { width: 50%; *width: 49.9690%; }
.pad-10-6 { width: 60%; *width: 59.9690%; }
.pad-10-7 { width: 70%; *width: 69.9690%; }
.pad-10-8 { width: 80%; *width: 79.9690%; }
.pad-10-9 { width: 90%; *width: 89.9690%; }
.pad-10-10 { width: 100%; }
.pad-24-1 { width: 4.1667%; *width: 4.1357%; }
.pad-24-2 { width: 8.3333%; *width: 8.3023%; }
.pad-24-3 { width: 12.5000%; *width: 12.4690%; }
.pad-24-4 { width: 16.6667%;*width: 16.6357%; }
.pad-24-5 { width: 20.8333%; *width: 20.8023%; }
.pad-24-6 { width: 25%; *width: 24.9690%; }
.pad-24-7 { width: 29.1667%; *width: 29.1357%; }
.pad-24-8 { width: 33.33333333%; *width: 33.3023%; }
.pad-24-9 { width: 37.5000%; *width: 37.4690%; }
.pad-24-10 { width: 41.6667%; *width: 41.6357%; }
.pad-24-11 { width: 45.8333%; *width: 45.8023%; }
.pad-24-12 { width:50%; *width: 49.9690%; }
.pad-24-13 { width: 54.1667%; *width: 54.1357%; }
.pad-24-14 { width: 58.33333333%; *width: 58.3023%; }
.pad-24-15 { width: 62.5000%; *width: 62.4690%; }
.pad-24-16 { width: 66.66666667%; *width: 66.6357%;}
.pad-24-17 { width: 70.83333333%; *width: 70.8023%;}
.pad-24-18 { width: 75%; *width: 74.9690%; }
.pad-24-19 { width: 79.1667%; *width: 79.1357%; }
.pad-24-20 { width: 83.33333333%; *width: 83.3023%;}
.pad-24-21 { width: 87.5000%; *width: 87.4690%; }
.pad-24-22 { width: 91.6667%; *width: 91.6357%; }
.pad-24-23 { width: 95.8333%; *width: 95.8023%; }
.pad-24-24 { width: 100%; }
.pad-hide { display:none; }
}
/*phone*/
@media(max-width: 768px){
.phone-10-1,.phone-10-2,.phone-10-3,.phone-10-4,.phone-10-5,.phone-10-6,.phone-10-7,.phone-10-8,.phone-10-9,.phone-10-10,.phone-12-1,.phone-12-2,.phone-12-3,.phone-12-4,.phone-12-5,.phone-12-6,.phone-12-7,.phone-12-8,.phone-12-9,.phone-12-10,.phone-12-11,.phone-12-12{
*display:inline;display:block;float:left;height:auto;min-height:30px;position:relative;zoom:1;/*letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto;*/ }
.phoned-10-1 { width: 10%; *width: 9.9690%; }
.phone-10-2 { width: 20%; *width: 19.9690%; }
.phone-10-3 { width: 30%; *width: 29.9690%; }
.phone-10-4 { width: 40%; *width: 39.9690%; }
.phone-10-5 { width: 50%; *width: 49.9690%; }
.phone-10-6 { width: 60%; *width: 59.9690%; }
.phone-10-7 { width: 70%; *width: 69.9690%; }
.phone-10-8 { width: 80%; *width: 79.9690%; }
.phone-10-9 { width: 90%; *width: 89.9690%; }
.phone-10-10 { width: 100%; }
.phone-12-1 { width: 8.33333333%; }
.phone-12-2 { width: 16.66666667%; }
.phone-12-3 { width: 25%; }
.phone-12-4 { width: 33.33333333%; }
.phone-12-5 { width: 41.66666667%; }
.phone-12-6 { width: 50%; }
.phone-12-7 { width: 58.33333333%; }
.phone-12-8 { width: 66.66666667%; }
.phone-12-9 { width: 75%; }
.phone-12-10 { width: 83.33333333%; }
.phone-12-11 { width: 91.66666667%; }
.phone-12-12 { width: 100%; }
.phone-hide { display:none; }
}
body::-webkit-scrollbar { width:5px; }
body::-webkit-scrollbar-track { background-color:#ededed; }
body::-webkit-scrollbar-thumb { background-color:#b5b5b5;outline-style:none; }
button[data-balloon] {
  overflow: visible;
}
[data-balloon] {
  position: relative;
}
[data-balloon]:before,
[data-balloon]:after {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  pointer-events: none;

  bottom: 100%;
  left: 50%;
  position: absolute;
  z-index: 10;
  -webkit-transform: translate(-50%, 10px);
  -ms-transform: translate(-50%, 10px);
  transform: translate(-50%, 10px);
  -webkit-transform-origin: top;
  -ms-transform-origin: top;
  transform-origin: top;
}
[data-balloon]:after {
  background: rgba(17, 17, 17, 0.9);
  color: #fff;
  content: attr(data-balloon);
  font-size: 14px;
  text-align:left;
  padding: 7px 8px;
  white-space: pre;
  margin-bottom: 11px;
}
[data-balloon]:before {
  background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E') no-repeat;
  background-size: 100% auto;
  height: 6px;
  width: 18px;
  content: "";
  margin-bottom: 5px;
}
[data-balloon]:hover:before,
[data-balloon][data-balloon-visible]:before,
[data-balloon]:hover:after,
[data-balloon][data-balloon-visible]:after {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -khtml-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
[data-balloon].font-awesome:after {
  font-family: FontAwesome;
}
[data-balloon][data-balloon-break]:after {
  white-space: pre;
}
[data-balloon-pos="down"]:before,
[data-balloon-pos="down"]:after {
  bottom: auto;
  left: 50%;
  top: 100%;
  -webkit-transform: translate(-50%, -10px);
  -ms-transform: translate(-50%, -10px);
  transform: translate(-50%, -10px);
}
[data-balloon-pos="down"]:after {
  margin-top: 11px;
}
[data-balloon-pos="down"]:before {
  background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E') no-repeat;
  background-size: 100% auto;
  height: 6px;
  width: 18px;
  margin-top: 5px;
  margin-bottom: 0;
}
[data-balloon-pos="down"]:hover:before,
[data-balloon-pos="down"][data-balloon-visible]:before,
[data-balloon-pos="down"]:hover:after,
[data-balloon-pos="down"][data-balloon-visible]:after {
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
[data-balloon-pos="left"]:before,
[data-balloon-pos="left"]:after {
  bottom: auto;
  left: auto;
  right: 100%;
  top: 50%;
  -webkit-transform: translate(10px, -50%);
  -ms-transform: translate(10px, -50%);
  transform: translate(10px, -50%);
}
[data-balloon-pos="left"]:after {
  margin-right: 11px;
}
[data-balloon-pos="left"]:before {
  background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E') no-repeat;
  background-size: 100% auto;
  height: 18px;
  width: 6px;
  margin-right: 5px;
  margin-bottom: 0;
}
[data-balloon-pos="left"]:hover:before,
[data-balloon-pos="left"][data-balloon-visible]:before,
[data-balloon-pos="left"]:hover:after,
[data-balloon-pos="left"][data-balloon-visible]:after {
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
[data-balloon-pos="right"]:before,
[data-balloon-pos="right"]:after {
  bottom: auto;
  left: 100%;
  top: 50%;
  -webkit-transform: translate(-10px, -50%);
  -ms-transform: translate(-10px, -50%);
  transform: translate(-10px, -50%);
}
[data-balloon-pos="right"]:after {
  margin-left: 11px;
}
[data-balloon-pos="right"]:before {
  background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E') no-repeat;
  background-size: 100% auto;
  height: 18px;
  width: 6px;
  margin-bottom: 0;
  margin-left: 5px;
}
[data-balloon-pos="right"]:hover:before,
[data-balloon-pos="right"][data-balloon-visible]:before,
[data-balloon-pos="right"]:hover:after,
[data-balloon-pos="right"][data-balloon-visible]:after {
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
[data-balloon-length]:after {
  white-space: normal;
}
[data-balloon-length="small"]:after {
  width: 80px;
}
[data-balloon-length="medium"]:after {
  width: 150px;
}
[data-balloon-length="large"]:after {
  width: 260px;
}
[data-balloon-length="xlarge"]:after {
  width: 90vw;
}
@media screen and (min-width: 768px) {
  [data-balloon-length="xlarge"]:after {
    width: 380px;
  }
}
[data-balloon-length="fit"]:after {
  width: 100%;
}
.button9 {
    background-color: #4CAF50; /* Green */
    border: none;
    color: #fff;
    cursor:pointer;
    font-family: Arial,微軟正黑體;
    padding: 3px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
}
.button9:hover {
    background-color: #46a049;
}
.button8 {
    background-color: #f44336; /* Green */
    border: none;
    color: #fff;
    cursor:pointer;
    font-family: Arial,微軟正黑體;
    padding: 3px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
}
.button8:hover {
    background-color: #da190b;
}