@charset "UTF-8";

/*
BASIC RESET FROM MAYER
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  font-family: verdana, arial, SFUIText-Semibold, "微軟正黑體", Helvetica, PingFangTC-Semibold, "Microsoft JhengHei";
  font-weight: 400;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

section {
  display: block;
}


/*
RESET ALL CONTENTE FOR BLANK
*/


/* HTML5 DECLARATIONS */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
dialog {
  display: block
}

audio[controls],
canvas,
video {
  display: inline-block;
  zoom: 1
}

a {
  cursor: pointer;
}

a:focus,
li:focus {
  outline: 0;
  border: none;
}

#msgbox {
  position: fixed;
  top: 0px;
  right: 50px;
  width: 240px;
  height: 180px;
  display: none;
  overflow: auto;
  background: #ccc;
  border: 2px dotted #333;
  color: red;
  font-size: 11px;
  line-height: 18px;
}

#title2 {
  position: relative;
  top: 0px;
  left: 0px;
}

.controlbox {
  position: absolute;
  top: 20px;
  left: 0px;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 40px;
}

.object {
  border: solid #244872 2px;
  border-radius: 3px;
  text-align: center;
  background: #99CCFF;
  padding: 2px 2px 2px 2px;
  cursor: move;
}

img.desaturate {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}


/*==========================================================================================*/


/* BASE */


/* Force scrollbar in non-IE and Remove iOS text size adjust without disabling user zoom */

html {
  height: 100%;
  font-size: 100%;
  /*overflow-y: scroll;*/
  -webkit-text-size-adjust: 100%
}


/* Improve default text rendering, handling of kerning pairs and ligatures */

body {
  margin: 0;
  background-color: #f4f4f6;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  height: 100%;
  width: 100%;
}


/* DEFAULT FONT SETTINGS */


/* 16px base font size with 150% (24px) friendly, unitless line height and margin for vertical rhythm */


/* Font-size percentage is based on 16px browser default size */


/* IE7 and older can't resize px based text */

@font-face {
  /*font-family:DINPro0; src: url(DINPro-Light.otf);*/
}


/*
@font-face { font-family:DINPro1; src: url(http://www.minimax.com.tw/_font/DINPro-Regular.otf); }
@font-face { font-family:DINPro2; src: url(http://www.minimax.com.tw/_font/DINPro-Medium.otf); }*/

p,
blockquote,
q,
pre,
address,
hr,
code,
samp,
dl,
ol,
ul,
form,
table,
fieldset,
menu,
img {
  /*margin: 0 0 1.5em;*/
  padding: 0;
  font-family: DINPro1;
}

img {
  margin: 0 !important;
  padding: 0 !important;
}


/* TYPOGRAPHY */


/* Composed to a scale of 12px, 14px, 16px, 18px, 21px, 24px, 36px, 48px, 60px and 72px */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Arial, sans-serif;
  color: #333;
  text-shadow: 0px 0px 0px rgba(0, 0, 0, .10)
}

h1 {
  margin: 0;
  font-size: 3.75em;
  line-height: 1.2em;
  margin-bottom: 0.4em
}


/* 60px / 72px */

h2 {
  margin: 0;
  font-size: 3em;
  line-height: 1em;
  margin-bottom: 0.5em
}


/* 48px / 48px */

h3 {
  margin: 0;
  font-size: 2.25em;
  line-height: 1.3em;
  margin-bottom: 0.6667em
}


/* 36px / 48px */

h4 {
  margin: 0;
  font-size: 1.5em;
  line-height: 1em;
  margin-bottom: 1em
}


/* 24px / 24px */

h5 {
  margin: 0;
  font-size: 1.3125em;
  line-height: 1.1428571428571428571428571428571em;
  margin-bottom: 1.1428571428571428571428571428571em
}


/* 21px / 24px */

h6 {
  margin: 0;
  font-size: 1.125em;
  line-height: 1.3em;
  margin-bottom: 1.3em
}


/* 18px / 24px */

p,
ul,
blockquote,
pre,
td,
th,
label {
  margin: 0;
  font-size: 1em;
  line-height: 1.5em;
  margin-bottom: 1.5em
}


/* 16px / 24px */

small,
p.small {
  margin: 0;
  font-size: 0.875em;
  line-height: 1.7142857142857142857142857142857em;
  margin-bottom: 1.7142857142857142857142857142857em
}


/* 14px / 24px */


/*==========================================================================================*/


/* CODE */

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word
}


/* Allow line wrapping of 'pre' */

pre,
code,
kbd,
samp {
  font-size: 1em;
  line-height: 1.5em;
  margin-bottom: 1.5em;
  /*font-family: Menlo, Consolas, 'DejaVu Sans Mono', Monaco, monospace*/
}


/* TABLES */

table {
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 1.5em
}

th {
  text-align: left
}

tr,
th,
td {
  /*padding-right: 1.5em;*/
  border-bottom: 0 solid #333
}


/* FORMS */

form {
  margin: 0
}

fieldset {
  border: 0;
  padding: 0
}

textarea {
  overflow: auto;
  vertical-align: top
}

legend {
  *margin-left: -.75em
}

button,
input,
select,
textarea {
  vertical-align: baseline;
  *vertical-align: middle
}


/* IE7 and older */

button,
input {
  line-height: normal;
  *overflow: visible
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box
}

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box
}

input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0
}


/* QUOTES */

blockquote,
q {
  quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none
}

blockquote,
q,
cite {
  font-style: italic
}

blockquote {
  padding-left: 1.5em;
  border-left: 3px solid #ccc
}

blockquote>p {
  padding: 0
}


/* LISTS */

ul,
ol {
  padding: 0
}

li ul,
li ol {
  margin: 0 1.5em
}

dl dd {
  margin-left: 1.5em
}

dt {
  font-family: Futura, "Century Gothic", AppleGothic, sans-serif
}


/* HYPERLINKS */

a {
  text-decoration: none;
  color: #444;
}

a:hover {
  text-decoration: underline
}

a:focus {
  outline: thin dotted
}

a:hover,
a:active {
  outline: none
}


/* Better CSS Outline Suppression */


/* MEDIA */

figure {
  margin: 0
}

img,
object,
embed,
video {
  /*max-width: 100%;*/
  _width: 100%
}


/* Fluid images */

img {
  border: 0;
  -ms-interpolation-mode: bicubic
}


/* Improve IE's resizing of images */

svg:not(:root) {
  overflow: hidden
}


/* Correct IE9 overflow */


/* ABBREVIATION */

abbr[title],
dfn[title] {
  border-bottom: 1px dotted #333;
  cursor: help
}


/* MARKED/INSERTED/DELETED AND SELECTED TEXT */

ins,
mark {
  text-decoration: none
}

mark {
  background: #c47529
}

ins {
  background: #d49855
}

del {
  text-decoration: line-through
}

::-moz-selection {
  background: #c47529;
  color: #fff;
  text-shadow: none
}


/* selected text */

::selection {
  background: #c47529;
  color: #fff;
  text-shadow: none
}


/* selected text */


/* OTHERS */

strong,
b,
dt {
  font-weight: bold
}

dfn {
  font-style: italic
}

var,
address {
  font-style: normal
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}


/* Position 'sub' and 'sup' without affecting line-height */

sup {
  top: -0.5em
}


/* Move superscripted text up */

sub {
  bottom: -0.25em
}


/* Move subscripted text down */

span {
  font-size: 100%;
  position: relative;
  vertical-align: baseline
}


/* Best available ampersand */


/* MICRO CLEARFIX HACK */

.cf:before,
.cf:after {
  content: "";
  display: table
}


/* For modern browsers */

.cf:after {
  clear: both
}

.cf {
  zoom: 1
}


/* For IE 6/7 (trigger hasLayout) */


/*
::-webkit-scrollbar { width:12px; background-color:transparent; } 
::-webkit-scrollbar-track { -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius:10px; border-radius:10px; background-color:transparent;  } 
::-webkit-scrollbar-thumb { -webkit-border-radius:10px; border-radius:10px; background:rgba(50,50,50,0.8); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } 
::-webkit-scrollbar-thumb:window-inactive { background: rgba(50,50,50,0.4); }
*/