@import url(http://fonts.googleapis.com/css?family=Quicksand);
/**
* 放置基本設定
*
* 如 瀏覽器reset, body 初始設定, 預設字型顏色大小
*/

/* reset */

body,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  font-family: 'Microsoft JhengHei';
}

ol:not(.list),
ul:not(.list) {
  list-style: none;
}

a:not(.link),
a:not(.link):link,
a:not(.link):visited {
  text-decoration: none;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}

.font16px {
  font-size: 16px;
}

.font18px {
  font-size: 18px;
}

::-moz-selection {
  background: #337ab7;
  color: #D4F0F4;
}

::selection {
  background: #337ab7;
  color: #D4F0F4;
}

/* reset */

/**
* 放置可重複利用單元的組件
*
* 如 自訂button樣式, 自訂input樣式, 自訂p與span樣式 etc...
*/

.search {
  display: inline-block;
  position: relative;
}

.search input[type="search"] {
  box-sizing: border-box;
  width: 180px;
  height: 30px;
  margin: 0 4px;
  padding-right: 8px;
  padding-left: 8px;
  border-width: 1px;
  border-color: #eee;
  color: initial;
  font-size: 16px;
  line-height: 30px;
}

.search .glyphicon + input[type="search"] {
  padding-left: 32px;
}

.search .glyphicon {
  position: absolute;
  top: 10px;
  left: 13px;
  color: #757575;
}

.frame {
  position: relative;
  width: 320px;
  height: 320px;
  border: 4px dashed #b3b3b3;
  border-radius: 8px;
  text-align: center;
  color: #b3b3b3;
  font-size: 18px;
}

.frame:after {
  content: "";
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

.frame img {
  width: 90%;
}

.frame .frame--cross {
  display: inline-block;
  position: relative;
  width: 72px;
  height: 72px;
  margin-top: 96px;
  margin-bottom: 12px;
}

.frame .frame--cross:before {
  content: "";
  position: absolute;
  top: 0;
  left: 26px;
  width: 20px;
  height: 72px;
  background-color: #b3b3b3;
  border-radius: 4px;
}

.frame .frame--cross:after {
  content: "";
  position: absolute;
  top: 26px;
  left: 0;
  width: 72px;
  height: 20px;
  background-color: #b3b3b3;
  border-radius: 4px;
}

.frame .frame--small {
  font-size: 14px;
}

.icon-btns {
  display: inline-block;
}

.icon-btns .glyphicon {
  width: 28px;
  height: 28px;
  margin-left: 1px;
  margin-right: 2px;
  background: #808080;
  color: #fff;
  text-align: center;
  font-size: 16px;
  line-height: 28px;
}

.icon-btns .cover-glyphicon {
  position: absolute;
  top: 0px;
  right: 0;
  width: 60px;
  height: 60px;
  margin: 12px;
  color: #B3B3B3;
  font-size: 60px;
}

.icon-btns.btn-square .glyphicon {
  padding: 0 0 0 1px;
  border-radius: 4px;
}

.icon-btns.btn-circle .glyphicon {
  padding: 1px 0 0 1px;
  border-radius: 14px;
}

.icon-btns .glyphicon-plus,
.icon-btns .glyphicon-pencil {
  background: #4f8dc5;
}

.icon-btns .glyphicon-eye-close {
  background: #91cde6;
}

.icon-btns .glyphicon-remove {
  background: #c1272d;
}

.icon-center {
  text-align: center;
}

.icon-font21 {
  font-size: 21px;
  line-height: 42px;
}

@media (max-width: 768px) {
  .phone-icon-narrow {
    transform: scale(0.9);
  }
}

.left {
  float: left;
}

.right {
  float: right;
}

@media (max-width: 768px) {
  .phone-clear-spacing {
    padding: 0;
    margin: 0;
  }
}

span.price:before {
  content: "NT$ ";
}

span.price.total-price {
  font-size: 16px;
  color: #c1272d;
}

.beadcrumb--trail {
  color: white;
  margin: 12px 0;
}

.beadcrumb--trail a {
  color: white;
  display: inline-block;
}

.cart--checkout-button {
  padding: 0 15px;
}

.cart--checkout-button,
.cart--checkout-button input {
  width: 100%;
}

.cart--checkout-button input {
  padding: 12px 0;
}

.sandwich {
  padding-top: 6px;
  padding-bottom: 6px;
  border-top: 1px solid #4f8dc5;
  border-bottom: 1px solid #4f8dc5;
}

.sandwich.center {
  text-align: center;
}

.sandwich.center .sprite {
  margin: 0px auto;
}

.sandwich.top {
  border-bottom: 0px;
  margin-top: 12px;
}

.sandwich.down {
  border-top: 0px;
  margin-bottom: 12px;
}

.sandwich .clear {
  clear: left;
  overflow: auto;
}

.hover-fog {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.hover-fog .hover-title,
.hover-fog .hover-title > a {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

.hover-fog .hover-title {
  backface-visibility: hidden;
  display: block;
  box-sizing: border-box;
}

.hover-fog .hover-title:before {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: transparent linear-gradient(to bottom, rgba(72, 76, 97, 0) 0%, rgba(72, 76, 97, 0.8) 75%) repeat scroll 0% 0%;
  content: "";
  opacity: 0;
  transform: translate3d(0px, 50%, 0px);
}

.hover-fog a {
  z-index: 0;
  text-indent: 200%;
  white-space: nowrap;
  font-size: 0px;
  opacity: 0;
}

.hover-fog h1 {
  left: 0px;
  width: 100%;
  transition: transform 0.35s ease 0s, color 0.35s ease 0s;
  transform: translate3d(0px, -50%, 0px);
}

.hover-fog:hover h1 {
  color: #fff;
  transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0);
}

.hover-fog p {
  position: absolute;
  bottom: 25px;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}

.hover-fog .hover-title::before,
.hover-fog p {
  transition: opacity 0.35s, transform 0.35s;
}

.hover-fog:hover .hover-title::before,
.hover-fog:hover p {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.hover-fog:hover p {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.backsite-index--top .padding3px {
  background-color: #0085CC;
  height: 70px;
}

.backsite-index--top p {
  width: 100%;
  color: white;
  text-align: right;
  padding: 6px;
}

.backsite-index--top p span {
  font-size: 20px;
}

.backsite-index--top span.price::before {
  content: "NT$ ";
  font-size: 16px;
}

.backsite-index--top .sprite {
  position: absolute;
  margin: 9px;
}

/**
* 放置整體布局區塊設定
*
* 如 header, footer, navbar, main etc...
*/

.header {
  position: relative;
  padding-top: 9px;
  z-index: 800;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
  font-family: Microsoft JhengHei;
  /* 當第一層選單被觸發時，指定第二層顯示 */
}

.header.home {
  box-shadow: none;
}

.header .header--logo {
  min-height: 100%;
  height: 80px;
  float: left;
}

.header.home .logo2{
  display: none;
}

.header.home .logo{
  display: inline;
}
.header .logo2{
  display: inline;
}
.header .logo{
  display: none;
}

.header .navbar-right {
  margin-right: 0px;
}

.header .nav--menu,
.header .nav--top {
  display: block;
  text-align: right;
}

.header .nav--menu > li,
.header .nav--top > li {
  display: inline-block;
  padding: 2px 15px 9px 15px;
}

.header .nav--top > li {
  padding: 2px 6px;
}

.header .nav--top > li > a,
.header .icon {
  display: inline-block;
  text-decoration: none;
}

.header .nav--top > li > a {
  color: #4F8DC5;
}

.header .nav--top > li > a:hover {
  color: #5A6269;
}

.header .nav--top-language-select {
  position: absolute;
  display: none;
  text-align: center;
}

.header .nav--top-language:hover > .nav--top-language-select {
  display: block;
}

.header .nav--top-language-select > li {
  position: relative;
  background-color: rgba(79, 141, 197, 0.7);
  margin-bottom: 3px;
  width: 100px;
}

.header .nav--top-language-select > li:hover {
  background-color: #4f8dc5;
}

.header .nav--top-language-select > li > a {
  text-decoration: none;
  color: white;
}

.header .nav--top-cart-total {
  width: 74px;
  border-width: 1px;
  border-radius: 12px;
  border-color: #4F8DC5;
  border-style: solid;
  color: #4F8DC5;
  padding: 0px 6px;
  text-align: center;
  transition: color 0.3s ease-in;
  transition: background-color 0.3s ease-in;
  /* 淡入淡出 */
}

.header .navTop > li > .nav--top-cart-total:hover {
  color: white;
  background-color: #4F8DC5;
}

.header .cartIcon {
  float: left;
}

.header .nav--top-cart-number {
  display: inline-block;
}

.header .nav--top-cart {
  position: relative;
}

.header .nav--top-cart:hover > .nav--cart-pack {
  display: block;
}

.header .nav--cart-pack {
  display: none;
  position: absolute;
  overflow: auto;
  text-align: left;
  padding-top: 6px;
  z-index: 800;
  right: 0;
}

.header .nav--cart {
  background-color: #4D4D4D;
  color: white;
  width: 300px;
  padding: 0 18px;
  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.5);
}

.header .nav--cart > p {
  margin: 0;
  padding: 10px 0;
}

.header .nav--cart > p.nav--cart-total {
  border-width: 1px;
  border-top-style: solid;
  border-color: white;
}

.header .nav--cart > .nav--cart-items {
  max-height: 300px;
}

.header .nav--cart > .nav--cart-buttom-div {
  margin-left: 0px;
}

.header .nav--menu > li > a {
  color: black;
  font-size: 18px;
  text-decoration: none;
}

.header .nav--menu > li > a:hover {
  color: #4F8DC5;
}

.header .nav--menu--product:hover,
.header .nav--menu--product[data-focus="true"] {
  position: relative;
  background-color: #e6e6e6;
}
.home.header .nav--menu--product:hover,
.home.header .nav--menu--product[data-focus="true"] {
  background-color: rgba(230, 230, 230,.5);
}

.header .nav--menu--product:hover:after,
.header .nav--menu--product[data-focus="true"]:after {
  display: block;
}

.header .nav--menu--product:hover a,
.header .nav--menu--product[data-focus="true"] a {
  color: #4F8DC5;
}

.header .nav--menu--product:after {
  content: "";
  position: absolute;
  display: none;
  background-color: #e6e6e6;
  height: 12px;
  width: 100%;
  right: 0;
}

.header .nav--phone {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 800;
}

.header .nav--phone-top {
  height: 65px;
  background-color: white;
  min-width: 340px;
  border-width: 1px;
  border-bottom-style: solid;
  border-color: #E6E6E6;
}

.header .nav--phone-top a {
  display: inline;
}

.header .nav--phone-menu {
  float: right;
  overflow: auto;
}

.header .nav--phone-menu .nav--phone-buttom {
  font-size: 24px;
  padding: 0 16px;
  color: #5A6269;
  line-height: 65px;
  height: 65px;
  border-width: 1px;
  border-left-style: solid;
  border-color: #E6E6E6;
}

.header .nav--phone-menu .icon {
  top: 0;
}

.header .nav--phone-menu a {
  display: inline-block;
  float: right;
}

.header .nav--phone-list {
  display: none;
  background-color: #F1F1F1;
  text-align: center;
  width: 100%;
}

.header .nav--phone-list > a,
.header .nav--phone-languages > a {
  font-size: 18px;
  color: #333;
  padding: 8px 0;
  text-decoration: none;
  border-width: 1px;
  border-bottom-style: solid;
  border-color: #E6E6E6;
}

.header .nav--phone-languages {
  padding: 10px 0;
  border-width: 1px;
  border-bottom-style: solid;
  border-color: #E6E6E6;
}

.header .nav--phone-languages > a {
  border-width: 0px;
  font-size: 14px;
  margin: 0 3px;
}

.header .nav--phone-shoplist {
  /*display: none;*/
  background-color: #4D4D4D;
  color: white;
  width: 100%;
}

.header .nav--phone-languages > * {
  display: inline-block;
}

.header .nav--phone-buttom:hover {
  background-color: #F1F1F1;
}

.header .nav--show-shoplist:hover {
  position: relative;
}

.header .nav--show-shoplist[data-arrow="none"]:after {
  display: none;
}

.header .nav--show-shoplist[data-arrow="display"]:after {
  display: inline-block;
}

.header .nav--show-shoplist:after {
  position: absolute;
  display: none;
  width: 0px;
  height: 0px;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 16px solid #4D4D4D;
  content: "";
  bottom: 0;
  right: 28%;
}

.header .nav--phone-cart {
  display: none;
  background-color: #4D4D4D;
  color: white;
  width: 100%;
  padding: 0 18px;
}

.header .nav--phone-cart > p {
  margin: 0;
  padding: 10px 0;
}

.header .nav--phone-cart > p.nav--cart-total {
  border-width: 1px;
  border-top-style: solid;
  border-color: white;
}

.header .nav--cart-items {
  list-style-type: none;
  padding: 0;
  margin: 0;
  max-height: 300px;
  overflow-y: auto;
}

.header .nav--cart-item {
  position: relative;
  padding: 12px 0;
  border-width: 1px;
  border-top-style: dashed;
  border-color: white;
}

.header .nav--cart-item:first-child {
  border-width: 0px;
  border-top-style: none;
}

.header .nav--cart-item > .icon-remove {
  position: absolute;
  top: 10px;
  right: 0px;
  color: white;
  text-decoration: none;
}

.header .nav--cart-item-figure {
  display: inline-block;
  height: 70px;
  width: 70px;
  background-color: #FFF;
}

.header .nav--cart-item-figure img {
  padding: 6px;
  width: 100%;
}

.header .nav--cart-item-content {
  position: absolute;
  display: inline-block;
  margin-left: 10px;
}

.header .nav--cart-item-content > p {
  margin: 0;
  padding: 0;
  padding-bottom: 6px;
  font-size: 12px;
}

.header .nav--cart-item-name {
  color: #91CDE6;
}

.header .nav--cart-buttom-div {
  padding-bottom: 10px;
  height: 36px;
}

.header .nav--cart-buttom {
  overflow: auto;
  display: inline-block;
  background-color: #4F8DC5;
  text-decoration: none;
  border-radius: 3px;
  font-size: 15px;
  font-weight: bold;
  color: #FFF;
  text-align: center;
  font-family: Microsoft JhengHei;
  padding: 3px 0px;
}

.header .nav--cart-buttom:hover {
  text-decoration: none;
  background-color: #91CDE6;
  color: #666;
}

.header .nav--cart-items > *,
.header .nav--cart > *,
.header .nav--phone-list > * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.content > .container img{
  width: 100%;
}

@media screen and (max-width: 995px) {
  .header .nav--menu > li {
    padding: 2px 10px;
  }
}

@media screen and (max-width: 768px) {
  .header {
    padding: 0;
  }

  .header .logo {
    height: 100%;
    padding: 6px;
    display: inline;
  }

  .header .head {
    margin: 0;
  }

  .header .head > .container {
    padding: 0;
  }

  .header .nav--phone-menu > .icon {
    float: right;
    top: 0;
  }
}

.nav--product {
  display: none;
  position: absolute;
  background: #e6e6e6;
  box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.25);
  padding: 18px 0;
  width: 100%;
  z-index: 801;
  top: 69px;
}
.home.nav--product {
  background: rgba(255, 255, 255, 0.7);
}

.nav--product .nav--product--sidebar div,
.nav--product h1,
.nav--product h2,
.nav--product h3,
.nav--product h4,
.nav--product h5,
.nav--product h6 {
  display: inline-block;
  vertical-align: inherit;
}

.nav--product .nav--product--bigTitle {
  font-size: 24px;
  color: #4f8dc5;
}

.nav--product .nav--product--title {
  width: 100%;
  margin-left: 15px;
  padding: 8px;
  color: #4D4D4D;
  font-weight: bold;
  font-size: 18px;
}

.nav--product .nav--product--title .icon {
  font-size: 20px;
  display: none;
}

.nav--product .nav--product--title:hover {
  background-color: #4f8dc5;
  color: white;
  transition: color 0.3s ease-in;
  transition: background-color 0.3s ease-in;
  /* 淡入淡出 */
}

.nav--product .nav--product--title:hover .icon {
  display: block;
}

.nav--product .content--footer .content--footer-control {
  margin-top: 0;
}

.nav--product .content--footer-control div,
.nav--product span {
  display: inline-block;
  vertical-align: middle;
  color: #4F8DC5;
}

.nav--product .content--footer-control:hover .sprite {
  background-position: -397px -827px;
}

.nav--product .gallery--item {
  margin-bottom: 6px;
}

.nav--product .gallery--item a {
  color: #333333;
}

.nav--product .gallery--item a:hover {
  color: #4f8dc5;
}

.nav--product .gallery--item .gallery--item-side {
  padding: 10px;
  background-color: white;
}

.nav--product .gallery--item .gallery--item-title {
  font-size: 18px;
  margin: 6px 0;
}

.gallery--item-img {
  height: 190px;
  background-color: white;
  background-repeat: no-repeat;
  background-clip: inherit;
  background-position: center center;
  background-size: cover;
}
@media (max-width: 768px) {
  .gallery--item-img {
      height: 300px;

  }
}
.header.home {
  position: absolute;
  margin: 0;
  padding-top: 9px;
  padding-bottom: 18px;
  background: rgba(255, 255, 255, 0) linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)) repeat scroll 0% 0%;
  width: 100%;
}

.header.home .nav--top > li > a {
  color: #91cde6;
}

.header.home .nav--top > li > a:hover,
.header.home .nav--menu > li > a {
  color: white;
}

.header.home .nav--top-language-select li {
  background-color: rgba(255, 255, 255, 0.6);
}

.header.home .nav--top-language-select li:hover {
  background-color: #ffffff;
}

.header.home .nav--top-language-select a {
  color: black;
}

.header.home .nav--top-cart-total {
  border-color: #91cde6;
}

.header.home .nav--top-cart-total:hover {
  background-color: #91cde6;
}

.header.home .search2{
  display: none
}
.header .search2{
  display: inline
}
.header .search{
  display: none
}
.header.home .search{
  display: inline
}
@media screen and (max-width: 768px) {
  .header.home {
    padding: 0;
  }
}

.footer {
  background-color: #F2F2F2;
  font-family: Microsoft JhengHei;
  padding: 25px 0;
}

.footer--title {
  color: #4F8DC5;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  border-width: 1px;
  border-top-style: solid;
  border-bottom-style: solid;
  margin-bottom: 6px;
}

.footer--product > a {
  color: #4D4D4D;
  margin-top: 2px;
}

.footer--product > a:hover {
  text-decoration: none;
  color: #4F8DC5;
}

.footer--vertical-line {
  border-width: 1px;
  border-left-style: solid;
  border-color: #4F8DC5;
}

.footer--vertical-line > .footer--related > a {
  color: #4F8DC5;
  margin-top: 2px;
}

.footer--related > a:hover {
  text-decoration: none;
  color: #5A6269;
}

.footer--related {
  color: #4F8DC5;
  font-size: 16px;
}

.footer--vertical-font {
  color: #333333;
}

.liaison > p {
  margin: 0px 0px 0px;
}

footer {
  color: white;
  text-align: center;
  background-color: #808080;
}

footer > .container {
  display: inline-block;
  font-size: 12px;
  margin: 8px 0px;
}

footer > .container > a,
.footer--clause > a {
  color: white;
  display: inline-block;
}

.footer--clause {
  display: inline-block;
}

.footer--icon {
  padding: 0 3px;
}

@media screen and (max-width: 995px) {
  /*如果使用者之視窗寬度 <= 995px，將會再載入這裡的 CSS。*/

  .footer--product > a {
    font-size: 12px;
  }

  .footer--vertical-line > .footer--related > a {
    font-size: 14px;
  }
}

@media screen and (max-width: 768px) {
  /*如果使用者之視窗寬度 <= 768px，將會再載入這裡的 CSS。*/

  .header {
    margin: 0;
  }

  .footer--vertical-line {
    border-style: none;
  }

  .footer--clause {
    display: block;
  }
}

/**
* 放置頁面用區塊組件, 非必要
*
* 如 聯絡我們區塊, banner區塊
*/

@media (max-width: 768px) {
  .main {
    margin-top: 65px;
  }
}

.main > .main-margin {
  margin-top: 24px;
}

.main--top {
  margin-top: 0;
  padding-top: 18px;
  padding-bottom: 0;
}

.main--top.main--top-gray {
  background: #f2f2f2;
}

.main--top.main--top-fixed {
  margin-top: 0;
  padding-top: 18px;
  padding-bottom: 40px;
}

.main--top .frame {
  margin: 0 auto;
}

.main--top .content--head {
  margin-bottom: 32px;
}

.main--top .container {
  position: relative;
}

.main .container{
  animation: fade-in;/*动画名称*/  
  animation-duration: 1s;/*动画持续时间*/  
  -webkit-animation:fade-in 1s;/*针对webkit内核*/  
}
@keyframes fade-in {  
    0% {opacity: 0;}/*初始状态 透明度为0*/  
    40% {opacity: 0;}/*过渡状态 透明度为0*/  
    100% {opacity: 1;}/*结束状态 透明度为1*/  
}  
@-webkit-keyframes fade-in {/*针对webkit内核*/  
    0% {opacity: 0;}  
    40% {opacity: 0;}  
    100% {opacity: 1;}  
} 

.home.home-board .spritediv,
.application .spritediv {
  position: absolute;
  padding: 10px;
  padding-top: 12px;
  background-color: rgba(77, 77, 77, 0.3);
  cursor: pointer;
  z-index: 1;
}

.home.home-board .spritediv.pull-left,
.application .spritediv.pull-left {
  left: 0;
}

.home.home-board .spritediv.pull-right,
.application .spritediv.pull-right {
  right: 0;
}

.home.home-board .scroll,
.application .scroll {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  z-index: 99;
}

.home.home-board .home.spritediv,
.application .home.spritediv {
  margin-left: 30px;
  margin-right: 30px;
}

.home.home-board .application.spritediv,
.application .application.spritediv {
  padding: 0 3px;
}

.home.home-board .sandwich h1,
.application .sandwich h1 {
  padding: 8px 0;
}

.home.home-board .home-board .board--img,
.application .home-board .board--img {
  background-image: url(../images/home.jpg);
}

.home.home-board .categorys-board .board--img,
.application .categorys-board .board--img {
  background-position: left;
}

.home.home-board .category .board--img,
.application .category .board--img {
  background-position: center;
  height: 270px;
}

.home.home-board .category.col-xs-12,
.application .category.col-xs-12 {
  margin-top: 12px;
}

.home.home-board .category.col-xs-12 a,
.application .category.col-xs-12 a {
  position: relative;
}

.home.home-board .category.col-xs-12 p,
.application .category.col-xs-12 p {
  position: absolute;
  background-color: #E6E6E6;
  padding: 3px 12px;
  margin-top: -48px;
  min-height: 54px;
  color: #333;
  width: 100%;
  transition: color 0.3s ease-in;
  transition: background-color 0.3s ease-in;
}

.home.home-board .category.col-xs-12 a:hover > p,
.application .category.col-xs-12 a:hover > p {
  background-color: #5a6269;
  color: white;
}

.application .boards .board--title h1,
.application .boards p {
  position: absolute;
  bottom: 10%;
  width: 100%;
  color: white;
  font-weight: bold;
  font-size: 36px;
  text-align: center;
  text-shadow: 2px 2px 2px #030303;
}

.application .boards.col-xs-12 .board--title {
  position: relative;
}

.application .boards.col-xs-12 .board--title h1 {
  bottom: 0;
  top: -80px;
  font-size: 21px;
}

.application .boards .board--english {
  font-size: 18px;
  font-family: "Quicksand", "Microsoft JhengHei", sans-serif;
}

.board--img {
  z-index: -1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.board--img img {
  height: 100%;
}

.board--img img[data-type="fill"] {
  height: 100%;
  width: 100%;
}

.board--img img[data-type="widthFill"] {
  width: 100%;
}

.board--img[data-type="Marine"] {
  background-image: url(../images/application/aplication-01.jpg);
}

.board--img[data-type="Public"] {
  background-image: url(../images/application/aplication-02.jpg);
}

.board--img[data-type="Commercial"] {
  background-image: url(../images/application/aplication-03.jpg);
}

.board--img[data-type="Industrial"] {
  background-image: url(../images/application/aplication-04.jpg);
}

.board--img[data-type="Hotel"] {
  background-image: url(../images/application/aplication-05.jpg);
}

.board--img[data-type="Office"] {
  background-image: url(../images/application/home.jpg);
}

.board--img[data-type="Restaurant"] {
  background-image: url(../images/application/aplication-06.jpg);
}

.board--img[data-type="Residential"] {
  background-image: url(../images/application/home.jpg);
}

.board--img[data-type="School"] {
  background-image: url(../images/application/aplication-06.jpg);
}

.board--img[data-type="Grow"] {
  background-image: url(../images/application/home.jpg);
}

.board--img[data-bg="gallery-background"] {
  background-image: url(../images/application/gallery-background.png);
  background-size: initial;
  background-position: initial;
}

.gallery.gallery--cavia {
  position: relative;
}

.gallery .spritediv {
  margin-top: 240px;
  margin-left: 18px;
  margin-right: 18px;
}

.gallery .board--img {
  z-index: 0;
  height: 600px;
  border-style: solid;
  border-color: white;
  border-width: 6px;
}

.application-gallery .nav-tabs a.pull-right * {
  display: inline-block;
  vertical-align: middle;
}

@media (min-width: 1600px) {
  .home.home-gallery .home-gallery-controller {
    max-width: 1600px;
  }

  /* .home-board,
  .home .board--img {
    height: 800px;
  } */

  .home-board .spritediv,
  .home .board--img .spritediv {
    margin-top: 351px;
  }

  .application-categorys .boards .board--img,
  .application.spritediv {
    height: 500px;
  }

  .application-categorys .boards .board--img .sprite,
  .application.spritediv .sprite {
    margin-top: 201px;
  }
}

@media (max-width: 1600px) {
  .home.home-gallery .home-gallery-controller {
    max-width: 1280px;
  }

  /* .home-board,
  .home .board--img {
    height: 620px;
  } */

  .home-board .spritediv,
  .home .board--img .spritediv {
    margin-top: 261px;
  }

  .application-categorys .boards .board--img,
  .application.spritediv {
    height: 400px;
  }

  .application-categorys .boards .board--img .sprite,
  .application.spritediv .sprite {
    margin-top: 151px;
  }
}

@media (max-width: 1280px) {
  .home.home-gallery .home-gallery-controller {
    max-width: 1024px;
  }

  /* .home-board,
  .home .board--img {
    height: 440px;
  } */

  .home-board .spritediv,
  .home .board--img .spritediv {
    margin-top: 171px;
  }

  .application-categorys .boards .board--img,
  .application.spritediv {
    height: 300px;
  }

  .application-categorys .boards .board--img .sprite,
  .application.spritediv .sprite {
    margin-top: 101px;
  }
}

@media (max-width: 1024px) {
  .home.home-gallery .home-gallery-controller {
    max-width: 768px;
  }

  .home.home-gallery .home-gallery-controller .sprite {
    top: 78px;
  }

  .home.home-gallery .home-gallery-controller .product .gallery--item-img {
    height: 100px;
  }

  /* .home-board,
  .home .board--img {
    height: 296px;
  } */

  .home-board .spritediv,
  .home .board--img .spritediv {
    margin-top: 99px;
  }

  .application-categorys .boards .board--img,
  .application.spritediv {
    height: 300px;
  }

  .application-categorys .boards .board--img .sprite,
  .application.spritediv .sprite {
    margin-top: 101px;
  }
}

@media (max-width: 995px) {
  .col-sm-4.col-xs-12.category .board--img {
    height: 230px;
  }
}

@media (max-width: 768px) {
  .home.home-board .home.spritediv {
    margin-left: 0;
    margin-right: 0;
    padding: 0 2px;
    background-color: rgba(77, 77, 77, 0.6);
  }

  .home.home-board .sprite {
    transform: scale(0.6);
  }

  .application-categorys {
    height: auto;
  }

  .application-categorys .board--img {
    height: 400px;
  }

  .col-sm-4.col-xs-12.category .board--img {
    height: 500px;
  }

  .board--img[data-bg="gallery-background"] {
    background-image: none;
  }

  .gallery.gallery--cavia {
    margin: 0 -15px;
  }

  .gallery .spritediv {
    margin-top: 65px;
  }

  .gallery .board--img {
    height: 250px;
    border-style: none;
  }

  .application-gallery .head-sandwich .pull-left h1,
  .application-gallery .head-sandwich .pull-left h2,
  .application-gallery .head-sandwich .pull-left h3,
  .application-gallery .head-sandwich .pull-left h4,
  .application-gallery .head-sandwich .pull-left h5,
  .application-gallery .head-sandwich .pull-left h6 {
    margin-top: 6px;
  }
}

@media (max-width: 580px) {
  .application-categorys .boards .board--img {
    height: 260px;
  }

  .col-sm-4.col-xs-12.category .board--img {
    height: 400px;
  }
}

@media (max-width: 400px) {
  .application-categorys .boards .board--img {
    height: 220px;
  }

  .col-sm-4.col-xs-12.category .board--img {
    height: 230px;
  }
}

.home.home-gallery {
  background-color: #4D4D4D;
  text-align: center;
}

.home.home-gallery .home-gallery-controller {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  margin: 12px auto;
  padding: 0 32px;
}

.home.home-gallery .products {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  width: 100%;
}

.home.home-gallery .product {
  float: left;
  width: 100px;
  padding: 18px;
}

.home.home-gallery .product .home-gallery-figure {
  padding: 10px;
  background-color: #FFF;
}

.home.home-gallery .product .gallery--item-img {
  height: 170px;
}

.home.home-gallery .product .name {
  padding: 12px;
  color: white;
}

.home.home-gallery .product:hover p {
  color: #91cde6;
}

.home.home-gallery .sprite {
  position: absolute;
  top: 104px;
  cursor: pointer;
}

.home.home-gallery .sprite.pull-left {
  left: 0;
}

.home.home-gallery .sprite.pull-right {
  right: 0;
}

.home.home-gallery .home-gallery-controller.visible-phone {
  height: 180px;
  width: 100%;
}

.home.home-gallery .home-gallery-controller.visible-phone .products {
  margin: 0 auto;
  height: 180px;
  width: 275px;
}

.home.home-gallery .home-gallery-controller.visible-phone .product {
  width: auto;
}

.home.home-gallery .home-gallery-controller.visible-phone .product .home-gallery-figure {
  padding: 6px;
  background-color: #FFF;
}

.home.home-gallery .home-gallery-controller.visible-phone .product .gallery--item-img {
  height: 94px;
}

.home.home-gallery .home-gallery-controller.visible-phone .sprite {
  margin-top: -15px;
}

.home.home-news {
  margin-top: 12px;
  margin-bottom: 24px;
  text-align: center;
}

.home.home-news a,
.home.home-news a:hover {
  color: #4f8dc5;
}

.home.home-news .new--title * {
  display: inline-block;
  margin: 0 3px;
  vertical-align: middle;
  font-family: 'Quicksand', sans-serif;
  font-size: 66px;
}

.home.home-news img {
  width: 164px;
  margin-bottom: 16px;
}

.home.home-news .new--content {
  text-align: left;
  width: 580px;
  margin: 0px auto;
}

.home.home-news .new--content a {
  margin-top: 6px;
}

.home.home-news .new--content a:hover > .new--article {
  text-decoration: underline;
  color: #4f8dc5;
}

.home.home-news .new--content .new--date {
  font-weight: bold;
}

.home.home-news .new--content .new--article {
  color: #333;
}

.home.home-news .news--more {
  margin-top: 12px;
}

.home.home-news .news--more div,
.home.home-news .news--more span {
  display: inline-block;
  vertical-align: middle;
  color: #91cde6;
}

.home.home-news .news--more .sprite {
  margin-top: 3px;
}

.home.home-news .news--more:hover > .sprite {
  background-position: -397px -827px;
}

.home.home-news span:hover {
  color: #4f8dc5;
}

@media (max-width: 768px) {
  .home.home-gallery {
    height: auto;
  }

  .home.home-news .new--content {
    width: auto;
    margin: 0;
  }

  .home.home-news .new--content * {
    display: block;
  }

  .home.home-news .new--content a {
    border-bottom: 1px dashed #4f8dc5;
    padding-bottom: 6px;
  }
}

.content {
  margin-top: 36px;
  margin-bottom: 36px;
}

.content .col-xs-12 {
  margin-bottom: 18px;
}

.content--head {
  height: 36px;
  margin-bottom: 8px;
  line-height: 36px;
}

.content--head.cart {
  height: auto;
}

.content--head .sprite {
  float: left;
  display: inline-block;
  margin: -4px 16px -1px 0;
}

.content--head .content--head-title {
  float: left;
  display: inline-block;
  padding: 6px 0;
  color: #4f8dc5;
  font-size: 24px;
  line-height: 1;
}

.content--head .breadcrumb {
  display: inline-block;
  margin-bottom: 0;
  background: none;
}

.content--head .breadcrumb > li + li:before {
  content: ">";
}

.content--head .content--head-control {
  float: right;
  text-align: right;
  line-height: 36px;
}

.content--head span.blue {
  color: #4f8dc5;
}

.content--head + .nav-tabs {
  margin-top: 36px;
  margin-bottom: 36px;
}

.content--footer {
  overflow: auto;
  font-size: 16px;
}

.content--footer .content--footer-control {
  float: right;
  margin-top: 24px;
  text-align: right;
}

.content--footer p span {
  margin: 0 2px;
  color: #d86131;
  font-size: 1.4em;
}

.content--footer .pagination {
  margin: 6px 0;
}

.content--footer.front--order {
  margin: 24px 0;
}

.content--footer.inRow {
  overflow: inherit;
}

.cart.content--footer-control {
  margin-top: 0;
  padding: 0;
  font-size: 14px;
}

.cart.content--footer-control .sandwich {
  text-align: right;
  border-color: #808080;
}

.cart.content--footer-control div {
  padding-right: 12px;
}

.cart.content--footer-control div:last-child {
  background-color: #f2f2f2;
}

.cart.content--footer-control p,
.cart.content--footer-control span {
  display: inline-block;
}

.cart.content--footer-control span {
  min-width: 120px;
}

.cart.content--footer-control small {
  line-height: 26px;
  color: #808080;
}

.cart.content--footer-control small.sandwich {
  padding-top: 4px;
  border-top-style: dashed;
  border-bottom: 0;
}

.content--side {
  margin-bottom: 24px;
  padding: 12px 8px;
  background: #f2f2f2;
  border: 1px solid #ccc;
  border-radius: 2px;
}

.content--side li a {
  width: 100%;
}

.content--side li .glyphicon {
  display: none;
  float: right;
}

.content--side li .glyphicon:hover {
  opacity: 0.8;
}

.content--side li:hover .glyphicon {
  display: inline-block;
}

.content--side .content--side-head {
  margin: -12px -8px 12px;
  background-color: #4f8dc5;
  color: #fdfdfd;
  font-size: 18px;
  padding: 6px 18px;
}

.content--side .content--side-control {
  text-align: right;
}

.content--side .form-group {
  padding-left: 10px;
  padding-right: 10px;
}

.content--side>ul>li ul{
 display: none
}

.content--side>ul>li.active2 ul{
 display: block
}

.content--form {
  margin-top: 32px;
}

.content--form .content--form-info {
  margin-bottom: 24px;
}

.content--group {
  border: 1px solid #b3b3b3;
  margin: 24px -1px;
}

.content--group .content--group-head {
  box-sizing: border-box;
  background-color: #808080;
  color: #fdfdfd;
}

.content--group .content--group-title {
  display: inline-block;
  padding: 12px 16px;
  font-size: 18px;
  line-height: 1;
}

.content--group .content--group-title.status {
  background-color: #4f8dc5;
  padding: 6px;
  font-size: 22px;
}

.content--group .content--group-notice {
  color: #c1272d;
}

.content--group .glyphicon {
  margin-left: 12px;
  margin-right: -12px;
  width: 26px;
  height: 26px;
  background-color: #fdfdfd;
  color: #808080;
  font-size: 15px;
  line-height: 26px;
}

.content--group.backsite .help-block {
  color: #737373;
}

.content--group.backsite .help-block p {
  margin: 0px 12px;
}

.content--group.backsite textarea {
  width: 100%;
  height: 72px;
}

.content--group.front {
  border: 1px solid #91cde6;
  padding-bottom: 30px;
  margin: 0px -1px;
}

.content--group.front h1 {
  font-size: 24px;
  font-weight: bold;
}

.content--group.front .row {
  margin-right: 0px;
  margin-left: 0px;
}

.content--group.front .content--group-head {
  background-color: #91cde6;
  color: white;
}

.content--group.front .content--group-affix {
  float: right;
}

.content--group.front .col-sm-6.col-xs-12 {
  margin-top: 12px;
  margin-bottom: 12px;
  font-size: 18px;
}

.content--group.front .col-sm-6.col-xs-12 .head-title {
  padding-top: 0;
  margin-bottom: 6px;
  text-align: left;
}

.content--group.front .col-sm-6.col-xs-12 .pay-manner {
  color: #4f8dc5;
}

.content--group.front .col-sm-6.col-xs-12.small > p {
  font-size: 14px;
  color: #666;
}

@media screen and (max-width: 768px) {
  .content--group.front {
    margin: 0 -15px;
    border: 0px;
  }

  .content--group.front h1 {
    font-size: 18px;
  }

  .content--group.front .list.table td {
    padding: 6px 8px;
  }

  .content--group.front .list.table thead:first-child > tr:first-child > td {
    padding: 6px 8px;
  }
}

@media screen and (max-width: 430px) {
  .content--group.front .content--group-head {
    height: auto;
  }

  .content--group.front .content--group-affix {
    float: none;
    text-align: right;
  }
}

.contact {
  background: url(../images/aboutContainer.jpg);
  height: 300px;
}

.contact > .container {
  display: table;
  height: 100%;
}

.contact > .container > .contactEmail {
  display: table-cell;
  vertical-align: middle;
}

.contact--text {
  padding: 12px 0px;
  font-size: 24px;
  border-width: 1px;
  border-color: white;
  border-style: solid;
  color: white;
  transition: color 0.3s ease-in;
  transition: background-color 0.3s ease-in;
  /* 淡入淡出 */
}

.contact--text > * {
  display: inline-block;
  font-family: "Microsoft JhengHei";
  margin: 0px 0px 0px;
}

.contact--text:hover {
  background-color: white;
  color: #4D4D4D;
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  /*如果使用者之視窗寬度 <= 768px，將會再載入這裡的 CSS。*/

  .contact {
    background: #4D4D4D;
    height: 60px;
  }

  .contact--text {
    font-size: 18px;
    border-width: 0px;
    border-style: none;
  }

  .contact--text:hover {
    background-color: transparent;
    color: white;
  }
}

.banner > * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.banner,
.contact {
  width: 100%;
  color: white;
}

.banner {
  background-color: #211a1b;
  height: 150px;
}

.banner > .container {
  background-size: cover;
  height: 100%;
}

.banner .about {
  background: url(../images/banner-about.png) no-repeat right center;
}

.banner .product {
  background: url(../images/banner-product.png) no-repeat right center;
}

 

.banner--left > h1 {
  color: #FFF;
  font-size: 28px;
  font-weight: normal;
  margin-top: 5px;
  display: inline-block;
  margin-bottom: 8px;
  letter-spacing: 0.3em;
}

.banner--left > img {
  width: 219px;
}

.banner--left > img[alt="cart"] {
  width: auto;
}

.banner--left {
  float: left;
  /* border-right: 1px solid #91cde6; */
  padding: 0 10px 0px 10px;
  margin-top: 27px;
  margin-right: 20px;
}

.banner--right {
  display: table;
  padding: 0px 0 0 20px;
  border-left: 1px solid #91cde6;
  position: relative;
  top: 36px;
  color: #cccccc;
}

.banner--right > p {
  color: #cccccc;
  line-height: 1.6em;
  text-shadow: 0px 0px 6px #000;
}

.banner--right > p.member--name {
  color: #91CDE6;
  font-size: 21px;
}

@media screen and (max-width: 768px) {
  /*如果使用者之視窗寬度 <= 768px，將會再載入這裡的 CSS。*/

  .banner {
    margin-bottom: 0;
    height: auto;
  }

  .banner .container {
    padding: 0;
    background-size: 100% auto;
    background-position: 50% 0%;
  }

  .banner .banner--left {
    border-right: 0px;
    padding: 0px 20px 0px 20px;
    margin: 18px 0px;
  }

  .banner .banner--right > p {
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  }

  .banner .banner--right > p.member--name {
    color: #4f8dc5;
  }

  .banner .banner--clear {
    clear: left;
  }

  .banner .banner--right {
    width: 100%;
    background: #f2f2f2;
    padding: 3px 20px;
    border-left: 0px;
    top: 0px;
  }

  .banner .banner--right p {
    color: #333333;
    margin: 0 0 0 0;
    padding: 0.2em 0;
    font-size: 14pt;
    text-align: center;
  }

  .banner .banner > .container {
    padding: 0;
    margin: 0;
  }

  .banner .product {
    background: url(images/banner-productmm.jpg) no-repeat right center;
  }

  .banner .video {
    background: url(images/banner-video.png) no-repeat -143px center;
  }
}

.banner.application-category .hidden-phone,
.banner.application-category .spritediv {
  height: 150px;
  text-align: center;
}

.banner.application-category .sprite {
  margin-top: 58px;
  cursor: pointer;
}

.banner.application-category li {
  padding: 12px;
}

.banner.application-category .board--img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100px;
}

.banner.application-category .title {
  color: white;
  margin: 6px 0;
}

.product--top {
  position: relative;
}

.product--figure {
  max-width: 400px;
  width: 100%;
  height: 380px;
  background-repeat: no-repeat;
  background-clip: inherit;
  background-position: center;
  background-size: contain;
}

.product--infomation .product--infomation-title {
  text-align: left;
  line-height: 1;
}

.product--infomation .product--infomation-box {
  box-sizing: border-box;
  overflow: auto;
   padding: 18px;
  background-color: #fdfdfd;
  border: 10px solid #91cde6;
}

.product--infomation .product--infomation-price {
  color: #808080;
  border-bottom: 1px dashed #808080;
}

.product--infomation .product--infomation-price .origin {
  text-decoration: line-through;
}

.product--infomation .product--infomation-price .discount .price {
  color: #c1272d;
}

.product--infomation .product--infomation-price .discount .price:before {
  color: #333;
}

.product--infomation .product--infomation-price .contact_admin {
  color: red;
}

.product--infomation .product--infomation-control {
  margin: 8px 0;
}

.product--infomation .product--infomation-control input {
  float: right;
  margin-left: 8px;
  text-align: center;
}

.product--infomation .product--infomation-control .plus,
.product--infomation .product--infomation-control .minus {
  float: right;
  display: inline-block;
  margin-left: 8px;
  background-color: #808080;
  color: #fdfdfd;
  text-align: center;
  line-height: 1;
}

.product--infomation .row {
  text-align: center;
}

.product--infomation .row .btn {
  width: 100%;
  height: 34px;
}

@media (min-width: 768px) {
  .product--figure {
    float: left;
  }

  .product--infomation {
    position: absolute;
    top: 64px;
    right: 0;
    width: 100%;
  }

  .product--infomation .product--infomation-title {
    display: inline-block;
    min-width: 320px;
    text-align: left;
    font-size: 36px;
  }

 

  .product--infomation .product--infomation-price {
    font-size: 16px;
  }

  .product--infomation .product--infomation-price .discount {
    line-height: 40px;
  }

  .product--infomation .product--infomation-price .discount .price {
    margin-left: 12px;
    font-size: 40px;
  }

  .product--infomation .product--infomation-price .discount .price:before {
    font-size: 28px;
  }

  .product--infomation .product--infomation-price .contact_admin {
    color: red;
  }

  .product--infomation .product--infomation-control {
    height: 36px;
  }

  .product--infomation .product--infomation-control input {
    width: 54px;
    height: 36px;
  }

  .product--infomation .product--infomation-control .plus,
  .product--infomation .product--infomation-control .minus {
    width: 36px;
    height: 36px;
    font-size: 36px;
  }
}

@media (max-width: 768px) {
  .product--figure {
    width: 100%;
    margin: 0 auto;
  }

  .product--infomation {
    margin-top: 25px;
  }

  .product--infomation .product--infomation-title {
    font-size: 30px;
  }

  .product--infomation .product--infomation-box {
    margin-left: -15px;
    margin-right: -15px;
    background-color: #fdfdfd;
    border: 10px solid #91cde6;
  }

  .product--infomation .product--infomation-price {
    font-size: 18px;
  }

  .product--infomation .product--infomation-price .discount {
    line-height: 45px;
  }

  .product--infomation .product--infomation-price .discount .price {
    margin-left: 12px;
    font-size: 45px;
  }

  .product--infomation .product--infomation-price .discount .price:before {
    font-size: 31px;
  }

  .product--infomation .product--infomation-price .contact_admin {
    color: red;
  }

  .product--infomation .product--infomation-control {
    height: 36px;
  }

  .product--infomation .product--infomation-control input {
    width: 54px;
    height: 36px;
  }

  .product--infomation .product--infomation-control .plus,
  .product--infomation .product--infomation-control .minus {
    width: 36px;
    height: 36px;
    font-size: 36px;
  }
}

.aside--products .aside--products-head {
  box-sizing: border-box;
  padding: 12px 16px;
  background-color: #f2f2f2;
  border: 1px solid #b3b3b3;
  text-align: center;
  font-size: 18px;
}

.aside--products .aside--products-content {
  overflow: auto;
  border: 1px solid #b3b3b3;
  padding: 18px;
}

.aside--products .aside--products-head + .aside--products-content {
  margin-top: -1px;
}

.aside--products .aside--products-group li {
  position: relative;
  margin-top: -18px;
  padding-bottom: 18px;
  text-align: center;
}

.aside--products .aside--products-group li img {
  box-sizing: border-box;
  width: 100%;
  max-width: 150px;
  height: auto;
  padding: 18px;
}

.aside--products .aside--products-group li p {
  font-size: 18px;
}

.aside--products .aside--products-group li .control {
  position: absolute;
  top: 4px;
  right: 4px;
}

.aside--products .btn {
  width: 100%;
  height: 40px;
  background-color: #f2f2f2;
}

.aside--products a {
  color: #333;
}

.aside--products.blue * {
  border-color: #4f8dc5;
}

.aside--products.blue .aside--products-head {
  background-color: #4f8dc5;
  color: white;
}

@media (max-width: 768px) {
  .aside--products .aside--products-group li {
    float: left;
    width: 50%;
  }
}

.about.row {
  padding: 24px 0;
  line-height: 1.6;
}

.about.row img {
  max-width: 100%;
}

@media (max-width: 768px) {
  .about.row p {
    font-size: 15px;
  }
}

.aside--cart .aside--cart-head {
  box-sizing: border-box;
  padding: 12px 16px;
  background-color: #4f8dc5;
  border: 1px solid #4f8dc5;
  text-align: center;
  font-size: 18px;
  color: white;
}

.aside--cart .aside--cart-content {
  border: 1px solid #4f8dc5;
  padding: 18px;
}

.aside--cart .aside--cart-subtotal {
  margin-bottom: 12px;
  padding-bottom: 18px;
}

.aside--cart .aside--cart-subtotal.sandwich {
  border-color: #b3b3b3;
}

.aside--cart .aside--cart-surcharge {
  font-size: 12px;
  color: #808080;
}

.aside--cart .aside--cart-surcharge span {
  margin: 3px 0;
}

.aside--cart .aside--cart-total {
  padding: 6px;
  margin-top: 6px;
  background-color: #f2f2f2;
  line-height: 22px;
}

.aside--cart .aside--cart-total .price {
  font-weight: bold;
}

.aside--cart input,
.aside--cart a {
  margin-top: 12px;
  font-size: 15px;
}

.aside--cart input {
  width: 100%;
}

.aside--cart a {
  font-size: 14px;
  color: #4f8dc5;
}

.aside--cart a * {
  display: inline-block;
  vertical-align: middle;
}

.aside--cart .clear {
  overflow: auto;
  clear: left;
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  .aside--cart .aside--cart-subtotal {
    padding-bottom: 30px;
  }

  .aside--cart .aside--cart-total {
    padding-bottom: 30px;
  }
}

@media (max-width: 768px) {
  .aside--cart .aside--cart-head,
  .aside--cart .aside--cart-subtotal > .font16px {
    font-size: 20px;
  }

  .aside--cart .aside--cart-surcharge,
  .aside--cart .aside--cart-total,
  .aside--cart .aside--cart-subtotal > .pull-left {
    font-size: 17px;
  }

  .aside--cart .aside--cart-total .price {
    font-size: 22px;
  }

  .aside--cart a {
    font-size: 16px;
  }

  .aside--cart input {
    font-size: 18px;
  }
}

.cart--status {
  padding: 18px;
}

.cart--status .cart--status-head h1,
.cart--status h2,
.cart--status h3,
.cart--status h4,
.cart--status h5,
.cart--status h6 {
  font-weight: bold;
  margin: 12px 0;
}

.cart--status .cart--status-title {
  margin: 4px 0px;
  padding-left: 17px;
  text-transform: uppercase;
  position: relative;
}

.cart--status .cart--status-title * {
  display: inline-block;
}

.cart--status .cart--status-title:before {
  content: "";
  position: absolute;
  left: -5px;
  top: 3px;
  width: 12px;
  height: 12px;
  border: 2px solid #E0E0E0;
  border-radius: 14px;
  border-color: #91cde6;
  background: #91cde6 none repeat scroll 0% 0%;
}

.cart--status .cart--status-title.active:before {
  background: none;
}

.cart--status .cart--status-title.after:before {
  border-color: #ccc;
  background: #ccc none repeat scroll 0% 0%;
}

.cart--status .cart--status-caption {
  margin-bottom: 1px;
  padding: 0px 0px 15px 15px;
  border-left: 2px solid #91cde6;
  color: #999999;
  word-break: break-all;
}

.cart--status .cart--status-caption.before {
  border-left: 2px solid #91cde6;
}

.cart--status .cart--status-caption.after {
  border-left: 2px solid #ccc;
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  .cart--status-title a {
    float: right;
  }
}

.aside--table.backsite {
  background: #f2f2f2;
  border: 1px solid #b3b3b3;
  padding: 12px;
  color: #808080;
}

.aside--table.backsite .aside--table-content {
  margin: 18px 0;
}

.aside--table.backsite .sandwich {
  padding-bottom: 18px;
  border-bottom: 1px dotted #b3b3b3;
}

.aside--table.backsite .price {
  text-align: right;
  margin-top: 12px;
  color: #c1272d;
  font-weight: bold;
}

.aside--table.backsite .aside--table-content:first-child > .price {
  color: #4f8dc5;
}

.aside--table.backsite .unitTW:before {
  content: "新台幣";
  display: block;
  position: absolute;
  right: 28px;
  height: 34px;
  padding: 0 6px;
  border: 1px solid #b3b3b3;
  background: #f2f2f2;
  line-height: 32px;
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  .aside--table.backsite > .sandwich {
    padding-bottom: 40px;
  }
}

/**
* 放置可重複利用區塊的組件
*
* 如 自訂table樣式組件, 自訂form樣式組件, 登入欄位組件 etc...
*/

.nav.nav-tabs {
  font-size: 0;
}

.nav.nav-tabs li {
  display: inline-block;
  margin-right: -1px;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

.nav.nav-tabs li:first-child {
  margin-left: 48px;
}

.nav.nav-tabs a {
  margin-right: 0;
  margin-bottom: -1px;
  font-size: 15px;
}

.nav.nav-tabs .active {
  border: 0;
}

.nav.nav-tabs .active > a,
.nav.nav-tabs .active > a:hover,
.nav.nav-tabs .active > a:focus {
  border-top: 3px solid #4f8dc5;
}

.nav.nav-tabs.middle {
  text-align: center;
}

.nav.nav-tabs.middle li:first-chlid {
  margin-left: 0;
}

.nav.nav-tabs.middle li {
  float: none;
}

.list.table {
  font-size: 16px;
}

.list.table.list-center {
  text-align: center;
}

.list.table thead:first-child > tr:first-child > td {
  border-top: 1px solid #b3b3b3;
  border-bottom: 1px solid #b3b3b3;
  padding: 16px 8px;
}

.list.table tbody tr:hover {
  background: #f2f2f2;
}

.list.table td {
  position: relative;
  padding: 0;
  border-top: none;
  border-bottom: 1px dashed #b3b3b3;
  vertical-align: middle;
  padding: 24px 8px;
}

.list.table td .icon-btns {
  margin: -16px 0;
}

.list.table input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 2px 4px;
}

.list.table img {
  width: 60px;
  height: 60px;
  margin: -8px;
}

.list.table .list--order-no small {
  color: #f7931e;
  font-size: 14px;
}

.list.table .list--order-amount {
  color: #c1272d;
}

.list.table .list--order-amount:before {
  content: "NT.";
}

.list.table .list--order-status {
  color: #4f8dc5;
}

.list.table .list--order-status small {
  font-size: 12px;
}

.list.table .list--order-text {
  width: 50%;
  text-align: left;
}

.list.list-front {
  color: #808080;
}

.list.list-front .list--table-no > * {
  display: inline-block;
}

.list.list-front thead:first-child > tr:first-child > td {
  border-top: 0px;
}

.list.list-cart .list--table-no > * {
  display: inline-block;
}

.list.list-cart .list--table-no > div:first-child {
  margin-right: 12px;
}

.list.list-cart input[type="text"] {
  height: 36px;
  width: 55px;
  text-align: center;
  font-size: 12px;
}

.list.list-cart .icon-btns.btn-circle {
  margin: 0;
}

.list.list-cart .glyphicon-remove {
  background: #4f8dc5;
}

.list.list-cart .glyphicon-remove.red {
  background: #c1272d;
}

.list.list-cart.visible-phone {
  border: 1px solid #b3b3b3;
  padding: 0 12px;
}

.list.list-cart.visible-phone div {
  margin: 6px 0px;
}

.list.list-cart.visible-phone .list--table-no {
  padding: 6px 8px;
}

.list.list-cart.visible-phone .item {
  margin-right: 18px;
}

.list.list-cart.visible-phone input[type="text"] {
  height: 26px;
  width: 40px;
  font-size: 14px;
}

.list.list-cart.visible-phone .sandwich:first-child {
  border: 0px;
}

.list.list-cart.visible-phone .sandwich {
  border-color: #b3b3b3;
  padding-bottom: 0;
}

.list.list-cart.visible-phone .sandwich.full {
  margin: 0 -12px;
  margin-top: 12px;
}

.phone-list .list--table-head,
.phone-table .list--table-head {
  margin-top: 6px;
  margin-bottom: 3px;
  padding: 6px 0;
  border-bottom: 2px solid #B3B3B3;
  font-size: 15px;
  line-height: 18px;
}

.phone-list p,
.phone-table p {
  line-height: 36px;
}

.phone-list .list--order-no small,
.phone-table .list--order-no small {
  color: #f7931e;
  font-size: 14px;
}

.phone-list .list--order-amount,
.phone-table .list--order-amount {
  color: #c1272d;
}

.phone-list .list--order-amount:before,
.phone-table .list--order-amount:before {
  content: "NT.";
}

.phone-list .list--order-notice,
.phone-table .list--order-notice {
  color: #c1272d;
}

.phone-list .list--order-button,
.phone-table .list--order-button {
  padding-bottom: 12px;
  border-bottom: 1px dashed #b3b3b3;
}

.phone-list .content--footer-control,
.phone-table .content--footer-control {
  margin-top: 6px;
}

.cart--table .cart--table-head {
  background: #f2f2f2 none repeat scroll 0% 0%;
  padding: 10px;
  border: 1px solid #b3b3b3;
  border-top: 0px;
}

.cart--table .cart--table-head .number {
  display: inline-block;
  vertical-align: middle;
  height: 30px;
  width: 30px;
  font-size: 18px;
  line-height: 27px;
  text-align: center;
  font-family: Arial;
  border-radius: 50%;
}

.cart--table .cart--table-head h1,
.cart--table .cart--table-head h2,
.cart--table .cart--table-head h3,
.cart--table .cart--table-head h4,
.cart--table .cart--table-head h5,
.cart--table .cart--table-head h6 {
  display: inline-block;
  vertical-align: middle;
  padding: 0 10px;
}

.cart--table .cart--table-head a {
  display: inline-block;
  vertical-align: middle;
  background-color: #999;
  color: #FFF;
  text-align: center;
  width: 42px;
  height: 20px;
}

.cart--table li:first-child .cart--table-head {
  border-top: 1px solid #b3b3b3;
}

.cart--table .before .number {
  color: #FFF;
  background: #91cde6 none repeat scroll 0% 0%;
}

.cart--table .active {
  color: #FFF;
  border: 1px solid #4f8dc5;
  background: #4f8dc5 none repeat scroll 0% 0%;
}

.cart--table .active .number {
  border: 2px solid #FFF;
  background: #4f8dc5 none repeat scroll 0% 0%;
}

.cart--table .after .number {
  border: 2px solid #4f8dc5;
  color: #4f8dc5;
  background: #F2F2F2 none repeat scroll 0% 0%;
}

.cart--table .cart--table-active {
  border: 1px solid #b3b3b3;
  padding: 18px;
}

.cart--table .cart--table-active .cart--table-payment * {
  display: inline-block;
  vertical-align: middle;
}

.cart--table .cart--table-active .cart--table-payment p {
  padding: 0 10px;
  font-size: 15px;
}

.cart--table .cart--table-active .cart--table-payment input {
  transform: scale(1.2);
}

.cart--table .cart--table-active .cart--table-title {
  padding-bottom: 24px;
}

.cart--table .cart--table-active .cart--table-caption {
  width: 100%;
  margin-top: 6px;
  padding-left: 30px;
  font-size: 13px;
  color: #4f8dc5;
}

.cart--table .cart--table-active .form-group.tax3 {
  display: none;
}

.cart--table .cart--table-active .cart--table-input {
  width: 100%;
  text-align: right;
}

.gallery .head {
  margin-bottom: 36px;
  text-align: center;
}

.gallery h1 {
  font-size: 32px;
}

.gallery--item {
  box-sizing: border-box;
  margin-bottom: 60px;
  text-align: center;
}

.gallery--item.active .gallery--item-figure {
  border: 3px solid #4f8dc5;
}

.gallery--item .gallery--item-figure {
  width: 100%;
  height: auto;
  border: 1px solid #b3b3b3;
  padding: 15px;
}

.gallery--item .gallery--item-title {
  font-size: 21px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.gallery--item .gallery--item-price {
  font-size: 20px;
}

.gallery--item .gallery--item-price span:before {
  content: "NT$ ";
  color: #666;
}

.gallery--item .gallery--item-price span:first-child {
  margin-right: 8px;
  font-size: 16px;
  text-decoration: line-through;
}

.gallery--item .gallery--item-price span + span {
  color: #4f8dc5;
}

.gallery--item .gallery--item-price .contact_admin:before {
  content: "";
}

.gallery--item .gallery--item-price span:first-child {
  text-decoration: none;
}

.gallery--item .gallery--item-price .contact_admin {
  color: red;
}

.contact_admin {
  color: red;
}

.tabs {
  position: relative;
  margin-bottom: 36px;
}

.tabs.tabs-1tab .tabs--nav,
.tabs.tabs-2tab .tabs--nav {
  overflow: auto;
}

.tabs.tabs-1tab .tabs--nav li a,
.tabs.tabs-2tab .tabs--nav li a {
  box-sizing: border-box;
  float: left;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #b3b3b3;
  text-align: center;
  font-size: 18px;
}

.tabs.tabs-1tab .tabs--nav li a {
  background-color: #0085cc;
  color: #fdfdfd;
}

.tabs.tabs-2tab .tabs--nav li a {
  width: 50%;
  background-color: #f2f2f2;
}

.tabs.tabs-2tab .tabs--nav li:first-child a {
  border-right-width: 1px;
}

.tabs.tabs-2tab .tabs--nav li + li a {
  border-left-width: 1px;
}

.tabs.tabs-2tab .tabs--nav li.active a {
  background-color: #0085cc;
  color: #fdfdfd;
}

.tabs .tabs-tab {
  padding: 18px;
  border: 1px solid #b3b3b3;
}

.tabs .tabs-tab .content--group {
  margin: 24px -24px 0;
}

.tabs .content--group:first-child {
  margin-top: 0;
}

.tabs .tabs--nav + .tabs-tab {
  margin-top: -1px;
  padding: 24px;
}

.tabs .tab-gallery li {
  position: relative;
  margin-bottom: 15px;
}

.tabs .tab-gallery li .tab-gallery-remove {
  opacity: 0;
}

.tabs .tab-gallery li:hover .tab-gallery-remove {
  opacity: 1;
}

.tabs .tab-gallery .tab-gallery-image {
  box-sizing: border-box;
  width: 100%;
  height: 160px;
  border: 1px solid #808080;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.tabs .tab-gallery-remove {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 15px;
  padding: 8px;
  background-color: rgba(0, 0, 255, 0.5);
  color: #fff;
  font-size: 14px;
  text-align: center;
}

.tabs .tab-gallery-remove .glyphicon {
  padding: 4px;
  border: 2px solid #fdfdfd;
  border-radius: 15px;
  font-size: 12px;
}

.tabs .tab-gallery-upload {
  box-sizing: border-box;
  width: 100%;
  height: 160px;
  color: #666;
  border: 10px dashed #808080;
  line-height: 140px;
  text-align: center;
}

.tabs iframe {
  overflow: hidden;
  width: 100%;
  /*height: 100%;*/
  /*min-height: 800px;*/
  border: 0;
}

.tabs .note-text {
  color: #666;
  margin-bottom: 20px;
}

.content--message {
  margin: 24px 0;
  font-size: 16px;
}

.pull-center {
  text-align: center;
  margin-top: 36px;
}

@media (max-width: 768px) {
  .pull-center {
    margin-top: 0px;
  }
}

.form-group .help-block {
  color: #4f8dc5;
}

.form-group .text-width-cut40 {
  width: 60%;
}

.form-group .tab-CAPTCHA > * {
  display: inline-block;
}

@media screen and (min-width: 768px) {
  .form-group .control-label-align {
    padding-top: 7px;
  }
}

.main--phone--nav {
  margin-top: 0px;
  padding: 12px 0px;
  background-color: #4f8dc5;
  text-align: center;
}

.main--phone--nav li {
  display: inline-block;
}

.main--phone--nav li.nav--logout {
  display: block;
  margin-top: 6px;
}

.main--phone--nav .nav--edit {
  border-width: 1px;
  border-left-style: solid;
  border-right-style: solid;
  border-color: #91DCE6;
  padding: 0 3px;
  margin: 0 3px;
}

.main--phone--nav a {
  font-size: 18px;
  color: #91DCE6;
}

.main--phone--nav li.active > a {
  color: white;
}

@media (min-width: 768px) {
  #twzipcode {
    float: left;
    width: 298px;
  }

  #twzipcode div:first-child input,
  #twzipcode div:first-child select {
    margin-left: 0;
  }

  #twzipcode input,
  #twzipcode select {
    box-sizing: border-box;
    float: left;
    height: 34px;
    margin-left: 6px;
  }

  #twzipcode input {
    width: 70px;
  }

  #twzipcode select {
    width: 105px;
  }

  #twzipcode + div {
    margin-left: 298px;
    max-width: 300px;
  }
}

@media (max-width: 768px) {
  #twzipcode {
    overflow: auto;
  }

  #twzipcode div:first-child {
    padding-left: 0;
  }

  #twzipcode div {
    box-sizing: border-box;
    float: left;
    width: 33.3%;
    padding-left: 6px;
    margin-bottom: 6px;
  }

  #twzipcode input,
  #twzipcode select {
    width: 100%;
    height: 34px;
  }
}

.head {
  margin-bottom: 18px;
  font-size: 28px;
}

.head.head-sandwich {
  padding-top: 6px;
  padding-bottom: 6px;
  border-top: 1px solid #4f8dc5;
  border-bottom: 1px solid #4f8dc5;
  text-align: center;
}

.head.head-gray {
  border-color: #c3c3c3;
}

.head.head-top {
  padding-bottom: 0px;
  border-bottom: 0px;
}

.head.head-bottom {
  padding-top: 0px;
  border-top: 0px;
}

.head .sprite,
.head h1,
.head h2,
.head h3,
.head h4,
.head h5,
.head h6 {
  display: inline-block;
  vertical-align: middle;
}

.head .main {
  text-align: left;
}

.head .affix {
  position: inherit;
  text-align: right;
}

.head .clear {
  clear: left;
}

.sprite {
  background-image: url(../images/spritesheet.png);
  background-repeat: no-repeat;
}

.sprite-404NotFound {
  width: 503px;
  height: 500px;
  background-position: -5px -5px;
}

.sprite-BacksitContact {
  width: 41px;
  height: 41px;
  background-position: -518px -5px;
}

.sprite-BacksiteHoverMember_OderButton {
  width: 154px;
  height: 154px;
  background-position: -569px -5px;
}

.sprite-BacksiteHoverPageEditButton {
  width: 154px;
  height: 154px;
  background-position: -518px -169px;
}

.sprite-BacksiteHoverProductButton {
  width: 154px;
  height: 154px;
  background-position: -682px -169px;
}

.sprite-BacksiteHoverSettingButton {
  width: 154px;
  height: 154px;
  background-position: -518px -333px;
}

.sprite-BacksiteMember {
  width: 46px;
  height: 52px;
  background-position: -733px -5px;
}

.sprite-BacksiteMemberEdit {
  width: 41px;
  height: 41px;
  background-position: -789px -5px;
}

.sprite-BacksiteMember_OderButton {
  width: 155px;
  height: 155px;
  background-position: -682px -333px;
}

.sprite-BacksiteOrderEdit {
  width: 41px;
  height: 41px;
  background-position: -518px -56px;
}

.sprite-BacksitePageEditButton {
  width: 155px;
  height: 155px;
  background-position: -518px -498px;
}

.sprite-BacksiteProduct {
  width: 60px;
  height: 44px;
  background-position: -789px -56px;
}

.sprite-BacksiteProductButton {
  width: 155px;
  height: 155px;
  background-position: -683px -498px;
}

.sprite-BacksiteProductIcon {
  width: 41px;
  height: 41px;
  background-position: -518px -110px;
}

.sprite-BacksiteSale {
  width: 52px;
  height: 52px;
  background-position: -5px -663px;
}

.sprite-BacksiteSettingButton {
  width: 155px;
  height: 155px;
  background-position: -67px -663px;
}

.sprite-BacksiteSettingIcon {
  width: 41px;
  height: 41px;
  background-position: -733px -110px;
}

.sprite-BacksiteShop {
  width: 55px;
  height: 53px;
  background-position: -232px -663px;
}

.sprite-BacksiteVideoEdit {
  width: 41px;
  height: 41px;
  background-position: -784px -110px;
}

.sprite-BigLeftArrow {
  width: 34px;
  height: 98px;
  background-position: -297px -663px;
}

.sprite-BigRightArrow {
  width: 34px;
  height: 98px;
  background-position: -341px -663px;
}

.sprite-ContactsIcon {
  width: 49px;
  height: 50px;
  background-position: -385px -663px;
}

.sprite-Copy {
  width: 12px;
  height: 13px;
  background-position: -840px -5px;
}

.sprite-DetailOrderIcon {
  width: 31px;
  height: 31px;
  background-position: -835px -110px;
}

.sprite-DetailShippingIcon {
  width: 31px;
  height: 31px;
  background-position: -444px -663px;
}

/**
 * Less member-center-mean-sprite
*/

.member-center-mean-sprite {
  margin: 0 auto;
  width: 155px;
  height: 155px;
}

.sprite-HomeOrder {
  margin: 0 auto;
  width: 155px;
  height: 155px;
  background-position: -848px -497px;
}

.sprite-HomeOrder:hover {
  background-position: -647px -663px;
}

.sprite-HomePersonEdit {
  margin: 0 auto;
  width: 155px;
  height: 155px;
  background-position: -232px -827px;
}

.sprite-HomePersonEdit:hover {
  background-position: -846px -167px;
}

.sprite-HomePassword {
  margin: 0 auto;
  width: 155px;
  height: 155px;
  background-position: -848px -662px;
}

.sprite-HomePassword:hover {
  background-position: -876px -5px;
}

.sprite-HomeLogout {
  margin: 0 auto;
  width: 155px;
  height: 155px;
  background-position: -847px -332px;
}

.sprite-HomeLogout:hover {
  background-position: -485px -663px;
}

/**
 * End member-center-mean-sprite
*/

.sprite-NewsIcon {
  width: 49px;
  height: 50px;
  background-position: -5px -827px;
}

.sprite-addHover {
  width: 24px;
  height: 24px;
  background-position: -397px -827px;
}

.sprite-addIn {
  width: 24px;
  height: 24px;
  background-position: -431px -827px;
}

.sprite-addProducts {
  width: 24px;
  height: 24px;
  background-position: -465px -827px;
}

.sprite-backHover {
  width: 24px;
  height: 23px;
  background-position: -499px -827px;
}

.sprite-backIn {
  width: 24px;
  height: 23px;
  background-position: -533px -827px;
}

.sprite-bulb01 {
  width: 36px;
  height: 36px;
  background-position: -567px -827px;
}

.sprite-bulb02 {
  width: 41px;
  height: 41px;
  background-position: -613px -827px;
}

.sprite-faxIcon {
  width: 22px;
  height: 22px;
  background-position: -664px -827px;
}

.sprite-locationIcon {
  width: 22px;
  height: 22px;
  background-position: -696px -827px;
}

.sprite-mailIcon {
  width: 22px;
  height: 22px;
  background-position: -728px -827px;
}

.sprite-selectIcon {
  width: 24px;
  height: 24px;
  background-position: -760px -827px;
}

.sprite-smallLeftIcon {
  width: 20px;
  height: 33px;
  background-position: -1011px -167px;
}

.sprite-smallRightArrow {
  width: 20px;
  height: 33px;
  background-position: -1011px -210px;
}

.sprite-telIcon {
  width: 22px;
  height: 22px;
  background-position: -794px -827px;
}

.sprite-topIcon02 {
  width: 31px;
  height: 17px;
  background-position: -826px -827px;
}

.sprite-videoIcon {
  width: 24px;
  height: 24px;
  background-position: -867px -827px;
}

/**
 * Less member-center-mean-sprite backsite
*/

.sprite-BacksiteProductButton {
  margin: 0 auto;
  width: 155px;
  height: 155px;
  background-position: -683px -498px;
}

.sprite-BacksiteMember_OderButton {
  margin: 0 auto;
  width: 155px;
  height: 155px;
  background-position: -682px -333px;
}

.sprite-BacksitePageEditButton {
  margin: 0 auto;
  width: 155px;
  height: 155px;
  background-position: -518px -498px;
}

.sprite-BacksiteSettingButton {
  margin: 0 auto;
  width: 155px;
  height: 155px;
  background-position: -67px -663px;
}

.sprite-BacksiteProductButton:hover {
  background-position: -682px -169px;
}

.sprite-BacksiteMember_OderButton:hover {
  background-position: -569px -5px;
}

.sprite-BacksitePageEditButton:hover {
  background-position: -518px -169px;
}

.sprite-BacksiteSettingButton:hover {
  background-position: -518px -333px;
}

/**
 * End Less member-center-mean-sprite backsite
*/

.cant-touch {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
}

.blueBox {
  max-width: 600px;
  margin: 50px auto;
  padding: 45px;
  border: 20px solid rgba(145, 205, 230, 0.5);
  box-sizing: border-box;
}

.blueBox.main-home-form {
  background-color: white;
  margin: 0 auto;
}

.blueBox.main-home-form button[type="submit"] {
  width: 100%;
}

.grayBox {
  margin: 20px auto;
  border: 1px solid #b3b3b3;
  padding: 15px 20px;
}

.grayBox p {
  text-align: justify;
}

.buttonBox {
  display: none;
  padding: 20px;
  margin-bottom: 15px;
  width: 100%;
  background: #4f8dc5;
  color: white;
  font-size: 17px;
  text-align: center;
}

.circle {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  border-radius: 50%;
  border: solid 1px #FFF;
}

.spriteLogIn {
  display: block;
  text-indent: -9999px;
  margin: 0 auto;
}

.sprite-notice {
  width: 164px;
  height: 21px;
  margin-bottom: 10px;
  background: url(../images/notice.svg) center no-repeat;
}

.sprite-register {
  width: 100%;
  height: 59px;
  background: url(../images/register.svg) center no-repeat;
}

.sprite-singIn {
  width: 100%;
  height: 59px;
  background: url(../images/logIn.svg) center no-repeat;
}

.logIcon {
  position: relative;
  top: 7px;
  padding-right: 6px;
  font-size: 24px;
}

@media screen and (max-width: 700px) {
  /*如果使用者之視窗寬度 >= 1024px，將會再載入這裡的 CSS。*/

  .blueBox {
    width: 100%;
    border: 0px;
    padding: 1%;
    margin: 1em auto;
  }
}

@media screen and (max-width: 768px) {
  /*如果使用者之視窗寬度 <= 768px，將會再載入這裡的 CSS。*/

  .buttonBox {
    display: inherit;
  }
}

.picBox {
  height: 180px;
  overflow: hidden;
}

.picBox span {
  display: block;
  width: 100%;
  height: 180px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  transition: 0.3s linear;
}

.news-page li {
  margin-bottom: 20px;
}

.news-page li a {
  border: 1px solid #dddddd;
  box-sizing: border-box;
  display: block;
  text-decoration: none;
  background: #fff;
  transition: opacity 0.1s linear;
}

.news-page li a:hover .picBox span {
  transform: scale(1.1);
}

.news-page li a:hover {
  opacity: 0.8;
}

.news-page li dl {
  height: 180px;
  margin: -60px 12px 0 12px;
  background-color: #fff;
  position: relative;
  padding: 20px;
}

.news-page li dl dt h1 {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.news-page li dl dd {
  font-size: 12px;
  color: #666;
}

.news-page li dt span {
  font-size: 12px;
  color: #4f8dc5;
}

.mainPhoto {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 350px;
}

.mainPhoto.none {
  height: 200px;
}

.container article {
  position: relative;
  top: -110px;
  background: #FFF;
  padding: 15px 20px;
}

.container article span {
  font-size: 18px;
  color: #4f8dc5;
}

.container article h1 {
  font-size: 36px;
  font-weight: bold;
  color: #2e3192;
  margin-bottom: 20px;
}

a.blue-btn {
  display: block;
  float: right;
  margin-right: 30px;
  padding-bottom: 20px;
  font-family: 'Quicksand', sans-serif;
  color: #91cde6;
}

a.blue-btn span {
  font-size: 17px;
}

a.blue-btn .circle-blue {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  padding: 0 5px;
  color: #91cde6;
  border-radius: 50%;
  border: solid 1px #91cde6;
  background: #FFF;
}

a.blue-btn.pull-right {
  margin: 0px;
  padding: 0px;
}

a.blue-btn.pull-right .circle-blue {
  padding: 0px 6px;
}

a.blue-btn.pull-right h1,
a.blue-btn.pull-right h2,
a.blue-btn.pull-right h3,
a.blue-btn.pull-right h4,
a.blue-btn.pull-right h5,
a.blue-btn.pull-right h6 {
  vertical-align: inherit;
}

a.blue-btn:hover {
  transition: all 0.4s ease-in;
}

a.blue-btn:hover .circle-blue {
  border: solid 1px #4f8dc5;
  background: #4f8dc5;
  color: white;
}

a.blue-btn:hover span {
  color: #4f8dc5;
}

a.blue-btn:hover span .circle-blue {
  transition: 0.3s linear;
}

@media screen and (max-width: 768px) {
  /*如果使用者之視窗寬度 <= 768px，將會再載入這裡的 CSS。*/

  .row li dl {
    margin: auto;
    height: auto;
    padding: 15px;
  }

  .container article {
    padding: 10px 15px;
    top: -90px;
  }

  .container article span {
    font-size: 10px;
  }

  .container article h1 {
    margin: 5px 0px 15px;
    font-size: 24px;
  }

  .mainPhoto {
    height: 200px;
  }
}

.video-title {
  position: relative;
  padding: 10px;
  width: 100%;
  background: #5A6269 url(../images/spritesheet.png) no-repeat -860px -820px;
  color: white;
}

.video-title h2 {
  padding-left: 30px;
  font-size: 18px;
}

.video-page li {
  height: 314px;
  overflow: hidden;
}

.contact-page {
  width: 95%;
  margin: 0 auto;
}

.contact-box {
  width: 100%;
  height: auto;
  overflow: hidden;
  padding: 20px;
  border: 20px solid rgba(145, 205, 230, 0.5);
  text-align: center;
}

.contact-box .contact-title {
  margin: 10px auto;
  max-width: 345px;
  text-align: center;
}

.contact-box .contact-title h2 {
  font-size: 50px;
  text-align: center;
}

.contact-box .contact-title img {
  margin-right: 5px;
  margin-top: auto;
  margin-bottom: auto;
  width: 49px;
  height: 49px;
}

.contact-box #form {
  text-align: left;
}

.contact-box #form span {
  color: #4f8dc5;
}

.contact-box #form li {
  margin-bottom: 8px;
  padding: 0;
}

.contact-box #form .form-control {
  background-color: #f2f2f2;
  border-radius: inherit;
  color: #5A6269;
}

.contact-box #form li:nth-child(5) {
  padding-right: 8px;
}

.contact-box #form li:nth-child(10) {
  padding-right: 8px;
}

.contact-box #form .company-info {
  display: -ms-flexbox;
  display: flex;
  margin: 20px auto;
}

.contact-box #form .company-info .infoBox-left {
  background: #4f8dc5;
  padding: 20px 0;
  text-align: center;
  color: white;
  border: 1px solid #4f8dc5;
}

.contact-box #form .company-info .infoBox-left span {
  color: #91cde6;
  font-family: 'Quicksand', sans-serif;
}

.contact-box #form .company-info .infoBox-right {
  padding: 10px;
  border: 1px solid #b3b3b3;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.contact-box #form .company-info .infoBox-right h4 {
  color: #808080;
  font-weight: bold;
  margin-bottom: 10px;
}

.contact-box #form .company-info .infoBox-right .info-icon {
  display: inline-block;
  vertical-align: middle;
  margin: 0 5px 5px 0;
}

.contact-box #form .company-info .infoBox-right span {
  color: #211a1b;
}

.map-height {
  height: 825px;
}

.full-width {
  padding: 0;
}

.clear {
  clear: both;
}

@media screen and (max-width: 768px) {
  /*如果使用者之視窗寬度 <= 768px，將會再載入這裡的 CSS。*/

  .contact-page {
    width: 100%;
  }

  .contact-page .col-xs-12 {
    padding: 0;
  }

  .full-width {
    margin-bottom: 30px;
  }

  .map-height {
    height: 250px;
  }

  .contact-box #form li:nth-child(5) {
    padding-right: 0;
  }

  .contact-box #form .company-info {
    display: inherit;
  }
}

@media screen and (max-width: 1087px) {
  /*如果使用者之視窗寬度 <= 1087px，將會再載入這裡的 CSS。*/

  .contact-box {
    border: 10px solid rgba(145, 205, 230, 0.5);
  }

  .contact-box .contact-title h2 {
    font-size: 40px;
  }

  .contact-box .contact-title img {
    width: 35px;
    height: 35px;
  }
}

.border-left {
  border-left: 1px solid #808080;
}

.payment-finish {
  height: auto;
  text-align: center;
  background-color: white;
  color: #333;
  padding-top: 40px;
}

@media screen and (max-width: 768px) {
  /*如果使用者之視窗寬度 <= 768px，將會再載入這裡的 CSS。*/

  .border-left {
    border-left: none;
    border-top: 1px solid #808080;
  }

  .padd-height {
    padding: 18px 0;
  }

  .payment-finish {
    height: 78px;
    padding-top: 0;
    background-color: #211a1b;
    color: white;
  }

  .payment-finish h1 {
    font-size: 18px;
    line-height: 78px;
  }
}

.tile {
  position: relative;
  height: 90px;
  padding: 10px;
  margin-bottom: 40px;
  background-color: #4f8dc5;
  text-align: right;
}

.tile .bkimg {
  position: absolute;
  left: 10px;
  bottom: 15px;
}

.tile h3 {
  color: #f2f2f2;
  font-size: 16px;
}

.tile h4 {
  margin-top: 25px;
  color: white;
  font-size: 24px;
  font-weight: 700;
}

.tile h4 span {
  font-size: 18px;
}

.container,
.container-fluid {
  max-width: 1000px !important;
}

.icon {
  position: relative;
  top: 2px;
}

a {
  display: block;
}




.foot-nav {
    display: flex;
    position: fixed;
    z-index: 90;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    bottom: 0;
    overflow: hidden;
}
.foot-nav a {
    display: block;
    width: 50%;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    border-right: solid 1px #fff;
    background: #0066cc;
    color: #fff;
}
.foot-nav a img {
    margin: -3px 4px -8px 0;
}
.foot-nav a:nth-child(1) {
    background: #eb565b;
}
.foot-nav a:nth-child(2) {
    background: #339900;
    border-right: solid 0px #fff;
}
@media screen and (min-width: 736px) {
	.foot-nav{
		    display: none;
	}
}