html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, button, 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 { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

body { line-height: 1; }

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

ul, ol { list-style: none; }

blockquote, q { quotes: none; }

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

a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration: none; }

ins { background-color: #ff9; color: #000; text-decoration: none; }

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; }

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

hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; }

input, select { vertical-align: middle; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; }

body { color: #333; font: 13px "Segoe UI", Arial, sans-serif; background: #fff; overflow-x: hidden; overflow-y: auto; }

a { color: #0068b6; text-decoration: none; cursor: pointer; }
a:hover { color: #ee0000; }

input[type="text"], input[type="file"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], textarea, select { color: #666; font-size: 12px; font-family: "Segoe UI", Arial, sans-serif; vertical-align: middle; padding: 1px 2px; border: #ccc 1px solid; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; background: #fff; }

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

input[type="number"] { -moz-appearance: textfield; }

.ui-widget input { font-size: 12px !important; font-family: "Segoe UI", Arial, sans-serif !important; }

.ui-datepicker { z-index: 99 !important; }

::-webkit-input-placeholder { color: #aaa; opacity: 1; }

:-moz-placeholder { color: #aaa; opacity: 1; }

::-moz-placeholder { color: #aaa; opacity: 1; }

:-ms-input-placeholder { color: #aaa; opacity: 1; }

input[type="radio"], input[type="checkbox"] { margin-right: 5px; cursor: pointer; }

button { cursor: pointer; }
button[class*="btn-"] { color: #fff; font-size: 1.15em; font-family: "微軟正黑體", "Microsoft Jhenghei", "Heiti TC", "LiHei Pro", sans-serif; padding: 5px 20px; background: #0068b6; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-transition: background, 0.3s, box-shadow, 0.2s; -moz-transition: background, 0.3s, box-shadow, 0.2s; -o-transition: background, 0.3s, box-shadow, 0.2s; transition: background, 0.3s, box-shadow, 0.2s; display: inline-block; }
button[class*="btn-"]:hover { background: #004b83; }
button[class*="btn-"] i { font-size: 1.1em; margin-right: 5px; }
button[class*="btn-"]:hover { -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 -5px 0 inset; -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 -5px 0 inset; box-shadow: rgba(0, 0, 0, 0.4) 0 -5px 0 inset; }

*:focus { outline: 0; }

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

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

#wrapper { height: auto; margin: 70px 40px 0 60px; }

#container { width: 96%; height: auto; margin: 10px auto 0; color: #333; }

#global-footer { margin: 20px; padding: 15px; color: #999; font-size: 0.95em; text-align: center; }
#global-footer a { color: #999; }
#global-footer a:hover { color: #0068b6; }

.clearfix { zoom: 1; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }

.title { color: #0068b6; font-size: 1.333em; font-family: "微軟正黑體", "Microsoft Jhenghei", "Heiti TC", "LiHei Pro", sans-serif; }
.title i { font-size: 1.2em; margin-right: 8px; }
.title .comment { font-size: 0.7em; }

.quantity { color: #fff; background: #ee0000; margin-left: 3px; padding: 1px 3px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; }
.quantity.quantity-zero { color: #666; background: #eee; background: rgba(255, 255, 255, 0.6); padding: 1px 6px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; }

.comment { color: #999; font-size: 0.85em; font-family: "Segoe UI", Arial, sans-serif; margin: 0 5px; }
.comment .fa { margin-right: 3px; }

.highlight { color: #ee0000; }

.t-grey { color: #999; }

.t-crossline { text-decoration: line-through; }

.t-bold { font-weight: bold; }

.cover { top: 0; left: 0; right: 0; bottom: 0; padding: 50px; background: #222; background: rgba(0, 0, 0, 0.7); position: absolute; z-index: 1; }
.cover .title { color: #fff; margin-left: 15px; }
.cover .plateforms { top: 50%; left: 50%; margin: -65px 0 0 -400px; border-spacing: 15px; border-collapse: separate; position: absolute; }
.cover .plateforms dd { width: 200px; padding: 20px 30px; text-align: center; vertical-align: middle; background: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 3px 5px 5px; -moz-box-shadow: rgba(0, 0, 0, 0.2) 3px 5px 5px; box-shadow: rgba(0, 0, 0, 0.2) 3px 5px 5px; cursor: pointer; position: relative; display: table-cell; }
.cover .plateforms dd:hover { color: #0068b6; background: #cce0f0; -webkit-box-shadow: rgba(0, 0, 0, 0.5) 1px 3px 3px; -moz-box-shadow: rgba(0, 0, 0, 0.5) 1px 3px 3px; box-shadow: rgba(0, 0, 0, 0.5) 1px 3px 3px; }
.cover .plateforms dd img { width: 200px; }
.cover .plateforms dd h2 { font-weight: normal; }

.select-site { top: 75px; right: 60px; position: absolute; display: none; }
.select-site button { font-size: 1.1em; }

.double-scroll-top { width: 100%; height: 20px; margin-top: 20px; overflow: auto; overflow-y: hidden !important; }
.double-scroll-top .scroll-content-width { height: 20px; }

.double-scroll-bottom { width: 100%; overflow-x: auto; overflow-y: visible; }

.double-scroll-head { margin-top: 40px; }

.fraction { margin: 3px 5px; vertical-align: middle; display: inline-block; }
.fraction .numerator, .fraction .denominator { padding: 2px 3px; display: block; }
.fraction .numerator { border-bottom: #333 1px solid; }

.related-searches { width: 150px; padding: 5px; background: #fff; border: #ccc 1px solid; border-top-width: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px; -moz-box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px; box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px; position: absolute; z-index: 99; display: none; }
.related-searches dd { padding: 5px; cursor: pointer; }
.related-searches dd:hover { background: #d4dbdf; }

@-moz-document url-prefix() { .modify-menu .modify-menu-content > dd .menu-content-button button[class*="btn-"] { padding: 1px 3px !important; }
  .orders-table .btn-edit, .orders-table .btn-detail, .orders-table .btn-delete { padding-left: 3px !important; }
  .orders-table .btn-edit i, .orders-table .btn-detail i, .orders-table .btn-delete i { margin-right: 3px; }
  .user-table .btn-edit, .user-table .btn-detail, .user-table .btn-helper, .user-table .btn-permission, .user-table .btn-delete { padding-left: 3px !important; }
  .user-table .btn-edit i, .user-table .btn-detail i, .user-table .btn-helper i, .user-table .btn-permission i, .user-table .btn-delete i { margin-right: 3px; }
  .additional-purchase > dd { height: 470px !important; } }

#header { width: 100%; height: 50px; top: 0; left: 0; right: 0; background: #0094c9; -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 5px; -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 5px; box-shadow: rgba(0, 0, 0, 0.3) 0 2px 5px; position: fixed; z-index: 999; }
#header .logo { margin-left: 50px; padding-top: 12px; color: #fff; font-size: 1.5em; font-family: "微軟正黑體", "Microsoft Jhenghei", "Heiti TC", "LiHei Pro", sans-serif; float: left; }
#header .logo a { color: #fff; }
#header .logo a img { vertical-align: bottom; }

.dropdown-toggle { *margin-bottom: -3px; }

.dropdown-toggle:active, .open .dropdown-toggle { outline: 0; }

.user { width: 50%; margin-right: 10px; line-height: 3px; text-align: right; letter-spacing: -0.32em; float: right; }
.user .btn-group { text-align: left; letter-spacing: normal; display: inline-block; border: #4cb4d9 0 solid; border-color: rgba(255, 255, 255, 0.3); border-left-width: 1px; position: relative; }
.user .btn-group:last-child { border-right-width: 1px; }
.user .btn-group:hover { background: #0081b0; background: rgba(0, 0, 0, 0.1); }
.user .btn-group.open { *z-index: 1000; }
.user .btn-group.open > .dropdown-menu { display: block; }
.user .btn-group-user { color: #fff; font-size: 13px; text-shadow: none; height: 50px; padding: 15px 10px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; }
.user .btn-group-user .fa { margin: 0 5px; font-size: 1.2em; }
.user .caret { display: inline-block; width: 0; height: 0; margin: 8px 0 0 8px; vertical-align: top; border-top: 4px solid #fff; border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; }

.dropdown-menu { position: absolute; top: 100%; right: 0; z-index: 1000; display: none; min-width: 150px; list-style: none; background-color: #ffffff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); border-top: none; *border-right-width: 2px; *border-bottom-width: 2px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; }
.dropdown-menu > li + li { border-top: #ddd 1px solid; }
.dropdown-menu > li > a, .dropdown-menu > li > span { display: block; padding: 10px 20px; clear: both; font-weight: normal; line-height: 20px; color: #333; white-space: nowrap; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-menu > li > span:hover, .dropdown-menu > li > span:focus { color: #fff; background-color: #004b83; }
.dropdown-menu .notification-summary i { margin-right: 5px; }
.dropdown-menu .notification-summary, .dropdown-menu .notification-summary:hover { color: #bb0000; background: #fde5e5; }
.dropdown-menu .more-notification { color: #999; text-align: center; background: #eee; }
.dropdown-menu .more-notification i { margin-left: 5px; }
.dropdown-menu .more-notification:hover { background: #666; }

.nav-bg { width: 35px; top: 0; left: 0; bottom: 0; background: #efefef; -webkit-box-shadow: rgba(0, 0, 0, 0.2) -3px 0 7px inset; -moz-box-shadow: rgba(0, 0, 0, 0.2) -3px 0 7px inset; box-shadow: rgba(0, 0, 0, 0.2) -3px 0 7px inset; position: fixed; z-index: 98; }

#nav { width: 45px; height: 100%; min-height: 100%; top: 50px; left: -10px; bottom: 0; overflow: hidden; position: fixed; z-index: 99; }
#nav > ul { top: 0; margin-bottom: 100px; border-bottom: rgba(255, 255, 255, 0.7) 1px solid; position: absolute; }
#nav > ul > li { width: auto; min-width: 200px; border-top: #fff 1px solid; border-top-color: rgba(255, 255, 255, 0.8); border-bottom: rgba(0, 0, 0, 0.1) 1px solid; }
#nav > ul > li:first-child { border-top: none; }
#nav > ul > li > a, #nav > ul > li > span { color: #000; padding: 5px 10px; -webkit-transition: background 0.2s; -moz-transition: background 0.2s; -o-transition: background 0.2s; transition: background 0.2s; cursor: pointer; display: block; position: relative; }
#nav > ul > li > a.active, #nav > ul > li > span.active { color: #333; background: #fff; -webkit-box-shadow: rgba(0, 0, 0, 0.3) -5px 5px 10px -5px; -moz-box-shadow: rgba(0, 0, 0, 0.3) -5px 5px 10px -5px; box-shadow: rgba(0, 0, 0, 0.3) -5px 5px 10px -5px; }
#nav > ul > li > a.active i, #nav > ul > li > span.active i { color: #666; }
#nav > ul > li > a i, #nav > ul > li > span i { width: 35px; margin-right: 10px; color: #666; font-size: 1.8em; text-align: center; vertical-align: middle; text-shadow: rgba(255, 255, 255, 0.8) 1px 1px 0; }
#nav > ul > li > a i.active, #nav > ul > li > span i.active { width: 20px; }
#nav > ul > li > a:after, #nav > ul > li > span:after { content: "\f0da"; color: #999999; font-size: 1em; line-height: 1em; font-family: FontAwesome; left: -0; margin-top: 2px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: middle; display: inline-block; position: absolute; content: "\f0d7"; top: 7px; left: auto; right: 15px; }
#nav > ul > li > a:hover, #nav > ul > li > span:hover { color: #fff; background: #336600; }
#nav > ul > li > a:hover:after, #nav > ul > li > span:hover:after { color: #fff; }
#nav > ul > li > a:hover i, #nav > ul > li > span:hover i { color: #fff; text-shadow: none; }
#nav > ul > li:first-child > a:after { content: "\0020"; }
#nav > ul > li ul { border-color: #aaa; border-top: rgba(255, 255, 255, 0.3) 1px solid; background: #ddd; background: rgba(0, 0, 0, 0.1); display: none; }
#nav > ul > li ul a { padding: 5px 15px; color: #333; -webkit-transition: background 0.2s; -moz-transition: background 0.2s; -o-transition: background 0.2s; transition: background 0.2s; display: block; position: relative; }
#nav > ul > li ul a:before { content: "\f0da"; color: #999999; font-size: 1.05em; line-height: 1em; font-family: FontAwesome; left: -5px; margin-top: 2px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: middle; display: inline-block; position: absolute; margin: 0 5px 0 0; position: static; }
#nav > ul > li ul a:hover { color: #fff; background: #60843d; }
#nav > ul > li ul a:hover:before { color: #fff; }

.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }

.animate-swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; }

@-webkit-keyframes swing { 10% { -webkit-transform: rotate(30deg); transform: rotate(30deg); }
  20% { -webkit-transform: rotate(-30deg); transform: rotate(-30deg); }
  30% { -webkit-transform: rotate(30deg); transform: rotate(30deg); }
  40% { -webkit-transform: rotate(-30deg); transform: rotate(-30deg); }
  50% { -webkit-transform: rotate(15deg); transform: rotate(15deg); }
  60% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); }
  80% { -webkit-transform: rotate(5deg); transform: rotate(5deg); }
  100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } }

@keyframes swing { 10% { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); }
  20% { -webkit-transform: rotate(-30deg); -ms-transform: rotate(-30deg); transform: rotate(-30deg); }
  30% { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); }
  40% { -webkit-transform: rotate(-30deg); -ms-transform: rotate(-30deg); transform: rotate(-30deg); }
  50% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); }
  60% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); }
  80% { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); }
  100% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } }

.animate-rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; }

@-webkit-keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
  30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); }
  40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); }
  50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); }
  65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); }
  75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); }
  100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } }

@keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
  30% { -webkit-transform: scale3d(1.25, 0.75, 1); -ms-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); }
  40% { -webkit-transform: scale3d(0.75, 1.25, 1); -ms-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); }
  50% { -webkit-transform: scale3d(1.15, 0.85, 1); -ms-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); }
  65% { -webkit-transform: scale3d(0.95, 1.05, 1); -ms-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); }
  75% { -webkit-transform: scale3d(1.05, 0.95, 1); -ms-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); }
  100% { -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } }