@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i");
@import url(mCustomScrollbar.css);
@import url(default.css);
@import url(fonts/css/fontello.css);
@import url(plugins.css);
@import url(fontawesome-stars.css);
@import url(dropkick.css);
/* ==========================================================================
    public
 ==========================================================================*/
 .where {
  margin-bottom: 30px;
  padding: 30px;
  text-align: center; }
  .max-sm-size .where {
    margin-bottom: 0;
    padding: 20px 0; }
  .where ul li {
    display: inline-block; }
    .where ul li:after {
      content: ">";
      padding: 0 5px; }
    .where ul li a {
      color: #979797;
      font-size: 14px;
      -webkit-transition: none;
      -o-transition: none;
      transition: none; }
    .where ul li:last-of-type:after {
      content: normal; }
    .where ul li:last-of-type a {
      color: #000;
      font-weight: bold; }

.f14 {
  font-size: 14px;
  line-height: 1.6em; }

.f15 {
  font-size: 15px;
  line-height: 1.6em; }

.f16 {
  font-size: 16px;
  line-height: 1.6em; }

.f18 {
  font-size: 18px;
  line-height: 1.6em; }

.f22 {
  font-size: 22px;
  line-height: 1.6em; }

.f20 {
  font-size: 20px;
  line-height: 1.6em; }
  .max-sm-size .f20 {
    font-size: 18px; }

.f25 {
  font-size: 25px;
  line-height: 1.6em; }
  .max-sm-size .f25 {
    font-size: 20px; }

.f30 {
  font-size: 30px;
  line-height: 1.6em; }
  .max-sm-size .f30 {
    font-size: 25px; }

.textCenter {
  text-align: center !important; }

.textLeft {
  text-align: left !important; }

.textRight {
  text-align: right !important; }

.editor {
  word-wrap: break-word; }
  .editor .black {
    color: #000; }
  .editor hr {
    border-color: #000;
    border-width: 0.5px; }
  .editor .block {
    margin: 30px 0; }

.favorite {
  width: 40px;
  height: 40px;
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 5;
  border-radius: 50%;
  background-color: #fff;
  text-align: center;
  color: #ddd;
  font-size: 30px;
  line-height: 40px;
  cursor: pointer;
  -webkit-transition: color 0.5s;
  -o-transition: color 0.5s;
  transition: color 0.5s; }
  .favorite:hover {
    color: #c3c3c3; }
  .favorite.active {
    color: #d4003b; }

.pro-list {
  margin: 0 -10px !important;
  font-size: 0; }
  .max-sm-size .pro-list {
    margin: 30px -10px 0 -10px; }
  .pro-list .barrating-show {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s; }
  .pro-list .slick-slide {
    margin: 0; }
  .pro-list li {
    display: inline-block;
    vertical-align: top;
    width: 16.6%;
    margin-top: 30px;
    padding: 10px;
    position: relative; }
    .max-lg-size .pro-list li {
      width: 33.3%; }
    .max-sm-size .pro-list li {
      width: 50%;
      margin-top: 0; }
  .pro-list a {
    display: block;
    color: #000;
    font-size: 15px;
    text-align: center; }
    .pro-list a span {
      display: block; }
    .pro-list a .pic {
      margin: 0 auto 10px auto;
      background-color: #f2f2f2; }
      .pro-list a .pic img {
        display: block;
        margin: auto; }
    .pro-list a .brand, .pro-list a .date {
      color: #8f8f8f;
      font-weight: 100; }
    .pro-list a .sales span {
      display: inline-block;
      vertical-align: middle;
      padding: 0 5px; }
    .pro-list a .sales .original {
      position: relative;
      opacity: 0.8; }
      .pro-list a .sales .original:after {
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        position: absolute;
        left: 0;
        top: 50%;
        background-color: #666666; }
    .pro-list a .sales .price {
      font-weight: bold; }
    .pro-list a .price, .pro-list a .original {
      color: #666666;
      font-size: 16px; }
      .pro-list a .price:before, .pro-list a .original:before {
        content: 'NT$';
        padding-right: 5px; }
    .min-md-size .pro-list a:hover .pic:before {
      opacity: 0.2; }
    .min-md-size .pro-list a:hover .pic:after {
      top: 50%;
      opacity: 1; }
    .pro-list a .pic {
      position: relative; }
      .pro-list a .pic:before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        background-color: #000;
        opacity: 0;
        -webkit-transition: opacity 0.5s;
        -o-transition: opacity 0.5s;
        transition: opacity 0.5s; }
      .pro-list a .pic:after {
        content: '商品介紹';
        display: block;
        width: 100px;
        height: 100px;
        margin: -50px 0 0 -50px;
        position: absolute;
        left: 50%;
        top: 40%;
        z-index: 3;
        background-color: #000;
        border-radius: 50%;
        color: #fff;
        text-align: center;
        line-height: 100px;
        opacity: 0;
        -webkit-transition: opacity 0.5s, top 0.5s;
        -o-transition: opacity 0.5s, top 0.5s;
        transition: opacity 0.5s, top 0.5s; }

.parting .in-title {
  margin: 0 0 50px 0;
  color: #000;
  text-align: center; }
  .max-sm-size .parting .in-title {
    margin-bottom: 20px; }

.parting .container {
  max-width: 1400px; }

.parting .left-main {
  float: left;
  width: -moz-calc(100% - 360px);
  width: -webkit-calc(100% - 360px);
  width: calc(100% - 360px);
  padding-bottom: 50px; }
  .max-lg-size .parting .left-main {
    width: -moz-calc(100% - 300px);
    width: -webkit-calc(100% - 300px);
    width: calc(100% - 300px); }
  .max-md-size .parting .left-main {
    float: none;
    width: 100%; }
  .max-sm-size .parting .left-main {
    padding-bottom: 30px; }
  .parting .left-main .banner {
    margin-bottom: 30px; }
    .max-sm-size .parting .left-main .banner {
      margin-bottom: 10px; }
    .parting .left-main .banner img {
      display: block; }

.parting .right-detail {
  float: right;
  width: 270px;
  padding-bottom: 30px; }
  .max-md-size .parting .right-detail {
    float: none;
    width: 100%;
    padding-bottom: 50px; }
  .max-sm-size .parting .right-detail {
    padding-bottom: 30px; }
  .parting .right-detail .box {
    margin-top: 0;
    margin-bottom: 50px; }
    .max-md-size .parting .right-detail .box {
      display: none; }
      .max-md-size .parting .right-detail .box:nth-last-of-type(1) {
        margin-bottom: 0; }
    .max-sm-size .parting .right-detail .box {
      margin-bottom: 30px; }
    .parting .right-detail .box .title {
      margin-bottom: 20px;
      padding-bottom: 5px;
      color: #000;
      font-size: 15px;
      font-weight: bold;
      border-bottom: 1px solid #000; }
    .parting .right-detail .box a {
      color: #8d8d8d; }
      .parting .right-detail .box a:hover {
        color: #000; }
    .parting .right-detail .box .btn2 {
      color: #595959; }
      .parting .right-detail .box .btn2:hover {
        color: #fff; }
  .max-md-size .parting .right-detail .events {
    display: block; }
  .parting .right-detail .events ul > li {
    margin-bottom: 5px; }
    .parting .right-detail .events ul > li:last-of-type {
      margin-bottom: 0; }
  .parting .right-detail .tags ul > li {
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
    margin-bottom: 8px; }
    .parting .right-detail .tags ul > li a {
      display: block;
      padding: 2px 10px;
      border: 1px solid #ddd;
      -webkit-transition: color 0.5s, border 0.5s;
      -o-transition: color 0.5s, border 0.5s;
      transition: color 0.5s, border 0.5s; }
      .parting .right-detail .tags ul > li a:hover {
        border-color: #8d8d8d; }
  .max-md-size .parting .right-detail .veiw {
    display: block; }
  .parting .right-detail .veiw .scrollbar {
    max-height: 365px;
    margin-right: -5px;
    margin-bottom: 20px; }
    .parting .right-detail .veiw .scrollbar .mCSB_inside > .mCSB_container {
      margin-right: 0;
      padding-right: 5px; }
    .parting .right-detail .veiw .scrollbar .mCSB_scrollTools .mCSB_draggerContainer {
      opacity: 0;
      -webkit-transition: opacity 0.5s;
      -o-transition: opacity 0.5s;
      transition: opacity 0.5s; }
      .max-md-size .parting .right-detail .veiw .scrollbar .mCSB_scrollTools .mCSB_draggerContainer {
        opacity: 1; }
    .parting .right-detail .veiw .scrollbar:hover .mCSB_scrollTools .mCSB_draggerContainer {
      opacity: 1; }
  .parting .right-detail .veiw ul.pro {
    margin-bottom: 0; }
    .parting .right-detail .veiw ul.pro > li:last-of-type {
      border: none; }
    .parting .right-detail .veiw ul.pro > li .text .sum {
      padding-right: 0; }
  .parting .right-detail .veiw .btn2 {
    float: none;
    display: block;
    background-color: #626262;
    border: none;
    color: #fff;
    line-height: 35px;
    font-size: 14px; }
    .parting .right-detail .veiw .btn2:hover {
      background-color: #000; }
  .max-md-size .parting .right-detail .hots {
    display: block; }
  .parting .right-detail .hots .title {
    margin-bottom: 10px; }
  .parting .right-detail .hots ul li {
    border-bottom: 1px solid #ddd; }
    .parting .right-detail .hots ul li:last-of-type {
      border-bottom: none; }
    .parting .right-detail .hots ul li a {
      display: block;
      padding: 10px 0; }
  .max-md-size .parting .right-detail .theme {
    display: block; }
  .parting .right-detail .theme .dropkick {
    margin-bottom: 15px; }

ul.pro {
  margin-bottom: 20px;
  font-size: 14px; }
  ul.pro > li {
    padding: 10px;
    position: relative;
    border-bottom: 1px solid #e4e4e4; }
    ul.pro > li:after {
      content: '';
      display: block;
      clear: both; }
    ul.pro > li .pic {
      float: left;
      width: 70px;
      background-color: #f2f2f2; }
      ul.pro > li .pic img {
        display: block;
        margin: auto; }
    ul.pro > li .text {
      float: left;
      width: -moz-calc(100% - 70px);
      width: -webkit-calc(100% - 70px);
      width: calc(100% - 70px);
      height: 70px;
      padding-left: 20px;
      position: relative; }
      ul.pro > li .text .name {
        display: -webkit-box;
        max-height: 3em;
        color: #7d7777;
        line-height: 1.5em;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -moz-line-clamp: 2;
        -ms-line-clamp: 2;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -ms-box-orient: vertical;
        -webkit-transition: color 0.5s;
        -o-transition: color 0.5s;
        transition: color 0.5s; }
      ul.pro > li .text .sum {
        display: block;
        margin-top: 5px;
        padding-right: 50px;
        color: #999999; }
        ul.pro > li .text .sum .num:after {
          content: 'x';
          padding: 0 2px; }
        ul.pro > li .text .sum .price:before {
          content: 'NT$';
          padding-right: 2px; }
    ul.pro > li a {
      display: block; }
      ul.pro > li a:hover .text .name {
        color: #000; }
    ul.pro > li .delete {
      position: absolute;
      right: 0;
      bottom: 10px;
      z-index: 2;
      cursor: pointer;
      color: #c1c1c1;
      -webkit-transition: color 0.5s;
      -o-transition: color 0.5s;
      transition: color 0.5s; }
      ul.pro > li .delete:hover {
        color: #ed2323; }
      ul.pro > li .delete i {
        padding-right: 5px;
        font-size: 16px; }

.cart-list .btn2 {
  float: right; }

.cart-list .total {
  float: left;
  line-height: 35px; }
  .cart-list .total .price {
    color: #000; }
    .cart-list .total .price:before {
      content: 'NT$';
      padding-right: 2px; }

.tabs, .tabs2 {
  display: block !important;
  margin-top: -1px;
  margin-bottom: 50px;
  position: relative;
  z-index: 2;
  text-align: center; }
  .max-sm-size .tabs, .max-sm-size .tabs2 {
    margin-top: 0;
    margin-bottom: 30px !important; }
  .tabs .toggle, .tabs2 .toggle {
    display: none;
    padding: 10px 15px;
    position: relative;
    color: #fff;
    line-height: 20px;
    background-color: #d4003b;
    cursor: pointer; }
    .max-sm-size .tabs .toggle, .max-sm-size .tabs2 .toggle {
      display: block; }
    .tabs .toggle:after, .tabs2 .toggle:after {
      content: '';
      position: absolute;
      top: 45%;
      right: 10px;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 5px solid #fff; }
  .min-sm-size .tabs ul, .min-sm-size .tabs2 ul {
    display: block !important; }
  .max-sm-size .tabs ul, .max-sm-size .tabs2 ul {
    display: none;
    border: 1px solid #d4003b; }
  .tabs ul li, .tabs2 ul li {
    display: inline-block;
    vertical-align: top;
    margin: 0 5px;
    position: relative; }
    .max-md-size .tabs ul li, .max-md-size .tabs2 ul li {
      margin: 0; }
    .max-sm-size .tabs ul li, .max-sm-size .tabs2 ul li {
      display: block;
      border-bottom: 1px solid #c9c9c9; }
      .max-sm-size .tabs ul li:last-of-type, .max-sm-size .tabs2 ul li:last-of-type {
        border: none; }
    .tabs ul li:before, .tabs2 ul li:before {
      content: '';
      display: block;
      width: 0%;
      height: 2px;
      position: absolute;
      left: 50%;
      top: 0;
      background-color: #000;
      opacity: 0;
      -webkit-transition: opacity 0.5s, width 0.5s, left 0.5s;
      -o-transition: opacity 0.5s, width 0.5s, left 0.5s;
      transition: opacity 0.5s, width 0.5s, left 0.5s; }
      .max-sm-size .tabs ul li:before, .max-sm-size .tabs2 ul li:before {
        content: normal; }
    .tabs ul li a, .tabs2 ul li a {
      display: block;
      padding: 10px;
      color: #999999;
      font-weight: bold; }
      .min-md-size .tabs ul li a:hover, .min-md-size .tabs2 ul li a:hover {
        color: #000; }
    .tabs ul li.active:before, .tabs2 ul li.active:before {
      width: 100%;
      left: 0;
      opacity: 1; }
    .tabs ul li.active a, .tabs2 ul li.active a {
      color: #000; }
      .max-sm-size .tabs ul li.active a, .max-sm-size .tabs2 ul li.active a {
        color: #d4003b; }

.fixed-box {
  width: 100%;
  min-width: 320px;
  height: 0%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 101;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: opacity 1s, visibility 1s, height  0s 1s;
  -o-transition: opacity 1s, visibility 1s, height  0s 1s;
  transition: opacity 1s, visibility 1s, height  0s 1s; }
  .fixed-box.show {
    height: 100%;
    padding: 30px 0;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    -webkit-transition: opacity 1s, visibility 1s;
    -o-transition: opacity 1s, visibility 1s;
    transition: opacity 1s, visibility 1s; }
  .fixed-box .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    background-color: #000;
    opacity: 0.8; }
  .fixed-box .inner {
    width: 1000px;
    /* 去除購物首頁-彈出式廣告-覆蓋, banner的白邊 -by Billy 2020-10-08 */
    /*padding: 50px 30px 50px 50px;*/
    padding: 0;
    margin-left: -500px;
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 3;
    background-color: #fff;
    color: #000; }
    .max-lg-size .fixed-box .inner {
      width: 90%;
      margin-left: 0;
      /*padding: 50px 10px 30px 30px;*/
      padding: 0;
      left: 5%; }
    .fixed-box .inner .scrollbar {
      max-height: 70vh;
      overflow: auto; }
      .fixed-box .inner .scrollbar .mCSB_inside > .mCSB_container {
        margin: 0;
        padding-right: 0px; }
    .fixed-box .inner .close {
      position: absolute;
      right: 10px;
      top: 10px;
      z-index: 10;
      color: #000;
      font-size: 30px;
      cursor: pointer;
      -webkit-transition: color 0.5s;
      -o-transition: color 0.5s;
      transition: color 0.5s; }
      .fixed-box .inner .close:hover {
        color: #ed2323; }

#e-newsletter .inner {
  display: table;
  position: relative; }
  #e-newsletter .inner .bg {
    z-index: 1; }
    .max-xs-size #e-newsletter .inner .bg {
      background-position: center right !important; }
  #e-newsletter .inner .middle {
    height: 550px;
    padding-left: 30%;
    position: relative;
    z-index: 2;
    color: #fff; }
    .max-lg-size #e-newsletter .inner .middle {
      height: 300px; }
    .max-sm-size #e-newsletter .inner .middle {
      height: 200px;
      padding-left: 25%;
      vertical-align: top; }
    .max-xs-size #e-newsletter .inner .middle {
      padding-left: 0; }

#e-newsletter .close {
  color: #fff; }
  #e-newsletter .close:hover {
    color: #d82356; }

#e-newsletter .eng {
  font-size: 32px;
  line-height: normal; }
  .max-sm-size #e-newsletter .eng {
    font-size: 20px; }

#e-newsletter .btn {
  line-height: 32px;
  background-color: #000; }
  #e-newsletter .btn:hover {
    background-color: #d82356; }

.max-sm-size #e-newsletter .f20 {
  font-size: 15px; }

#e-newsletter .form-control {
  max-width: 220px;
  height: 30px;
  margin-right: 15px;
  border-radius: 30px;
  color: #fff;
  text-align: center;
  border-color: #fff;
  background-color: transparent;
  -webkit-transition: background 0.5s;
  -o-transition: background 0.5s;
  transition: background 0.5s; }
  .max-sm-size #e-newsletter .form-control {
    max-width: 150px;
    margin-right: 10px;
    padding: 0 10px; }
  #e-newsletter .form-control:hover, #e-newsletter .form-control:focus {
    background-color: rgba(255, 255, 255, 0.2); }

#e-newsletter ::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #fff; }

#e-newsletter ::-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #fff; }

#e-newsletter ::-o-placeholder {
  /* Mozilla Firefox 19+ */
  color: #fff; }

#e-newsletter ::-ms-placeholder {
  /* Internet Explorer 10+ */
  color: #fff; }

#e-newsletter ::-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #fff; }

ul.pages {
  margin-top: 50px;
  text-align: center; }
  .max-sm-size ul.pages {
    margin-top: 30px; }
  ul.pages li {
    display: inline-block;
    vertical-align: middle;
    margin: 0 3px; }
    .max-xs-size ul.pages li {
      margin: 0; }
    ul.pages li a {
      display: block;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      color: #666666;
      line-height: 34px;
      -webkit-transition: background 0.5s;
      -o-transition: background 0.5s;
      transition: background 0.5s; }
      ul.pages li a:hover {
        background-color: #f6f6f6; }
      ul.pages li a i {
        font-size: 25px; }
    ul.pages li.prev a, ul.pages li.next a {
      color: #999; }
    ul.pages li.active a {
      color: #fff;
      background-color: #666666; }

.video-box {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 63%;
  margin-top: 30px; }
  .video-box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

/* ==========================================================================
    header
 ==========================================================================*/
#header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  visibility: hidden;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s; }
  .max-md-size #header {
    display: none; }
  #header .topSpace {
    display: none;
    position: relative;
    text-align: center; }
    #header .topSpace .close {
      width: 34px;
      margin-top: -18px;
      position: absolute;
      right: 30px;
      top: 50%;
      z-index: 2;
      color: #fff;
      font-size: 25px;
      line-height: 34px;
      text-align: center;
      cursor: pointer;
      -webkit-transition: opacity 0.5s;
      -o-transition: opacity 0.5s;
      transition: opacity 0.5s; }
      #header .topSpace .close:hover {
        opacity: 0.8; }
    #header .topSpace a {
      display: block;
      padding: 10px 30px;
      color: #fff;
      background-color: #d4003b; }
  #header .top {
    background-color: #f6f6f6; }
    #header .top .left {
      float: left; }
    #header .top .right {
      float: right; }
    #header .top ul li {
      display: inline-block;
      vertical-align: middle;
      padding: 10px 3px; }
      #header .top ul li.official, #header .top ul li.app, #header .top ul li.login {
        margin-right: 30px;
        position: relative; }
        #header .top ul li.official:after, #header .top ul li.app:after, #header .top ul li.login:after {
          content: '';
          display: block;
          width: 4px;
          height: 4px;
          margin-top: -1px;
          position: absolute;
          right: -20px;
          top: 50%;
          border-radius: 50%;
          background-color: #7a7a7a; }
      #header .top ul li.official i {
        padding-right: 5px;
        font-size: 22px; }
      #header .top ul li.cart {
        margin-left: 30px;
        padding-right: 10px;
        position: relative; }
        #header .top ul li.cart:after {
          content: '';
          display: block;
          width: 1px;
          height: 14px;
          margin-top: -7px;
          position: absolute;
          left: -20px;
          top: 50%;
          background-color: #7a7a7a; }
        #header .top ul li.cart .num {
          display: block;
          width: 23px;
          height: 23px;
          position: absolute;
          right: 0;
          top: 6px;
          z-index: 2;
          border-radius: 50%;
          background-color: #ed2323;
          color: #fff;
          font-size: 14px;
          text-align: center;
          line-height: 23px;
          font-weight: bold; }
      #header .top ul li a {
        display: block;
        color: #8d8d8d;
        line-height: 30px; }
        #header .top ul li a i, #header .top ul li a span {
          display: inline-block;
          vertical-align: bottom; }
        #header .top ul li a i {
          margin-right: -3px;
          color: #ababab;
          font-size: 27px;
          line-height: 30px;
          -webkit-transition: color 0.5s;
          -o-transition: color 0.5s;
          transition: color 0.5s; }
        #header .top ul li a:hover {
          color: #000; }
          #header .top ul li a:hover i {
            color: #333; }
  #header .block > .container {
    padding: 0 300px;
    position: relative;
    text-align: center; }
    .max-bg-size #header .block > .container {
      padding: 0 250px; }
    .max-lg-size #header .block > .container {
      padding: 55px 30px 0 30px; }
  #header .block .logo {
    width: 250px;
    height: 100%;
    position: absolute;
    left: 30px;
    top: 0;
    z-index: 1; }
    .max-bg-size #header .block .logo {
      width: 230px;
      left: 10px; }
    .max-lg-size #header .block .logo {
      height: 55px;
      left: 30px; }
    #header .block .logo a {
      display: block;
      height: 100%;
      background: url("images/logo.png") center no-repeat;
      background-size: contain; 
      position:relative;
    }
   
      .chrome #header .block .logo a {
        image-rendering: -webkit-optimize-contrast; }
  #header .block .search {
    width: 250px;
    padding-right: 70px;
    position: absolute;
    right: 30px;
    top: 35px; }
    .max-bg-size #header .block .search {
      width: 230px;
      right: 10px; }
    .max-lg-size #header .block .search {
      right: 30px;
      top: 10px; }
    #header .block .search .form {
      position: relative; }
      #header .block .search .form input {
        width: 100%;
        height: 35px;
        padding: 0 20px;
        border-radius: 35px;
        border: 1px solid #c9c9c9;
        -webkit-transition: border 0.5s;
        -o-transition: border 0.5s;
        transition: border 0.5s; }
        #header .block .search .form input:hover, #header .block .search .form input:focus {
          border-color: #595959; }
      #header .block .search .form button {
        width: 35px;
        position: absolute;
        right: 0;
        top: 0;
        color: #595959;
        font-size: 25px;
        line-height: 35px;
        text-align: center;
        -webkit-transition: color 0.5s;
        -o-transition: color 0.5s;
        transition: color 0.5s; }
        #header .block .search .form button:hover {
          color: #d82356; }
    #header .block .search .btn {
      position: absolute;
      right: 0;
      top: 0; }
      #header .block .search .btn.active {
        background-color: #d82356; }
  #header .block .menu {
    position: relative; }
    #header .block .menu > ul > li {
      display: inline-block;
      vertical-align: middle;
      padding: 0 15px; }
      .max-bg2-size #header .block .menu > ul > li {
        padding: 0 10px; }
      .max-bg-size #header .block .menu > ul > li {
        padding: 0 5px; }
      .max-lg-size #header .block .menu > ul > li {
        padding: 0 20px; }
      #header .block .menu > ul > li > a {
        display: block;
        padding-top: 15px;
        position: relative;
        color: #000;
        font-size: 16px;
        line-height: 85px; }
        .max-bg-size #header .block .menu > ul > li > a {
          padding-top: 10px;
          line-height: 90px; }
        .max-lg-size #header .block .menu > ul > li > a {
          padding-top: 0;
          line-height: 45px; }
        #header .block .menu > ul > li > a:after {
          content: '';
          display: block;
          width: 1px;
          height: 1px;
          position: absolute;
          left: 50%;
          bottom: 0;
          background-color: #d4003b;
          opacity: 0;
          -webkit-transition: width 0.5s, left 0.5s, opacity 0.5s;
          -o-transition: width 0.5s, left 0.5s, opacity 0.5s;
          transition: width 0.5s, left 0.5s, opacity 0.5s; }
      #header .block .menu > ul > li.show a {
        color: #d4003b; }
        #header .block .menu > ul > li.show a:after {
          width: 100%;
          left: 0;
          opacity: 1; }
      #header .block .menu > ul > li.show .subnav {
        left: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: all; }
    #header .block .menu .subnav {
      width: 100%;
      height: 420px;
      padding: 50px 0;
      position: fixed;
      left: -200%;
      top: 151px;
      background-color: rgba(255, 255, 255, 0.95);
      text-align: left;
      pointer-events: none;
      opacity: 0;
      visibility: visible;
      overflow: hidden;
      border-bottom: 1px solid #ddd; }
      .max-bg-size #header .block .menu .subnav {
        padding: 30px 0; }
      #header .block .menu .subnav .left {
        float: left;
        width: 40%;
        height: 320px;
        padding-right: 30px; }
        .max-bg-size #header .block .menu .subnav .left {
          width: 50%; }
        .max-lg-size #header .block .menu .subnav .left {
          width: 63%; }
      #header .block .menu .subnav .right {
        float: left;
        width: 60%;
        height: 320px;
        padding-left: 30px;
        position: relative; }
        .max-bg-size #header .block .menu .subnav .right {
          width: 50%; }
        .max-lg-size #header .block .menu .subnav .right {
          width: 37%; }
        #header .block .menu .subnav .right:after {
          content: '';
          display: block;
          width: 200%;
          height: 200%;
          position: absolute;
          left: 0;
          top: -50%;
          background-color: #e8e5e5; }
      #header .block .menu .subnav .slick-slide {
        padding: 0 10px; }
      #header .block .menu .subnav ul.slider {
        padding: 0 50px; }
        .max-bg-size #header .block .menu .subnav ul.slider {
          padding: 0 30px; }
        #header .block .menu .subnav ul.slider ul {
          display: inline-block;
          vertical-align: top; }
        #header .block .menu .subnav ul.slider a {
          display: inline-block;
          margin-bottom: 20px;
          padding-left: 50px;
          position: relative;
          color: #666666; }
          .max-bg-size #header .block .menu .subnav ul.slider a {
            padding-left: 40px; }
          #header .block .menu .subnav ul.slider a:hover {
            color: #000; }
            #header .block .menu .subnav ul.slider a:hover span {
              text-decoration: underline; }
        #header .block .menu .subnav ul.slider .title {
          display: table;
          margin-bottom: 30px;
          color: #000;
          font-size: 16px;
          font-weight: bold; }
          #header .block .menu .subnav ul.slider .title:before {
            content: '';
            display: block;
            width: 1px;
            height: 100%;
            position: absolute;
            left: 20px;
            top: 0;
            background-color: #000;
            -webkit-transition: background 0.5s;
            -o-transition: background 0.5s;
            transition: background 0.5s; }
          #header .block .menu .subnav ul.slider .title:hover {
            color: #d82356; }
            #header .block .menu .subnav ul.slider .title:hover:before {
              background-color: #d82356; }
        #header .block .menu .subnav ul.slider .icon {
          display: block;
          width: 40px;
          padding: 7px;
          margin-top: -20px;
          position: absolute;
          left: 0;
          top: 50%; }
          #header .block .menu .subnav ul.slider .icon img {
            display: block; }
      #header .block .menu .subnav ul.slider-pic {
        padding: 0 50px;
        position: relative;
        z-index: 2; }
        .max-bg-size #header .block .menu .subnav ul.slider-pic {
          padding: 0 30px; }
        #header .block .menu .subnav ul.slider-pic .slick-slide {
          margin-top: 0; }
        #header .block .menu .subnav ul.slider-pic a {
          display: block;
          color: #000;
          text-align: center; }
          #header .block .menu .subnav ul.slider-pic a span {
            display: block; }
          #header .block .menu .subnav ul.slider-pic a .pic {
            max-width: 240px;
            margin: 0 auto 10px auto;
            background-color: transparent; }
          #header .block .menu .subnav ul.slider-pic a .brand {
            color: #8f8f8f;
            font-size: 16px;
            font-weight: 100; }
          #header .block .menu .subnav ul.slider-pic a .price {
            color: #666666;
            font-size: 16px; }
            #header .block .menu .subnav ul.slider-pic a .price:before {
              content: 'NT$';
              padding-right: 5px; }
  #header .search-box {
    display: none;
    width: 100%;
    padding: 50px 0;
    position: fixed;
    top: 152px;
    left: 0;
    background-color: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid #ddd;
    text-align: center; }
    .max-bg-size #header .search-box {
      padding: 30px 0; }
    #header .search-box .container {
      position: relative; }
    #header .search-box .close {
      width: 34px;
      position: absolute;
      right: 30px;
      top: 0;
      color: #595959;
      font-size: 25px;
      line-height: 34px;
      text-align: center;
      cursor: pointer;
      -webkit-transition: color 0.5s;
      -o-transition: color 0.5s;
      transition: color 0.5s; }
      #header .search-box .close:hover {
        color: #d82356; }
    #header .search-box .form {
      margin-bottom: 20px; }
      #header .search-box .form input {
        width: 200px;
        height: 35px;
        margin-right: 10px;
        padding: 0 20px;
        border-radius: 35px;
        border: 1px solid #c9c9c9;
        -webkit-transition: border 0.5s;
        -o-transition: border 0.5s;
        transition: border 0.5s; }
        #header .search-box .form input:hover, #header .search-box .form input:focus {
          border-color: #595959; }
      #header .search-box .form .dropkick {
        display: inline-block !important;
        vertical-align: middle;
        width: 200px;
        margin-right: 10px;
        text-align: left; }
        #header .search-box .form .dropkick .dk_toggle {
          padding: 5px 20px;
          border-radius: 35px;
          line-height: 23px; }
        #header .search-box .form .dropkick .dk_options {
          margin-top: 0;
          border-radius: 20px;
          overflow: hidden; }
    #header .search-box ul.hot {
      margin-top: 20px; }
      #header .search-box ul.hot li {
        display: inline-block;
        vertical-align: top;
        margin: 0 5px;
        color: #000;
        font-size: 14px; }
        #header .search-box ul.hot li:first-of-type {
          padding-right: 15px;
          position: relative; }
          #header .search-box ul.hot li:first-of-type:after {
            content: '';
            display: block;
            width: 1px;
            height: 15px;
            position: absolute;
            right: 0;
            top: 5px;
            background-color: #000; }
        #header .search-box ul.hot li a {
          color: #7b7b7b; }
          #header .search-box ul.hot li a:hover {
            text-decoration: underline; }

.header {
  display: none;
  width: 100%;
  min-width: 320px;
  height: 60px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
  background-color: #fff;
  border-bottom: 1px solid #ddd; }
  .max-md-size .header {
    display: block; }
  .header .topSpace {
    display: none;
    max-width: 500px;
    width: 90%;
    position: fixed;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    z-index: 5;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    text-align: center; }
    .header .topSpace .close {
      width: 34px;
      position: absolute;
      right: 0;
      top: -40px;
      z-index: 2;
      color: #fff;
      font-size: 25px;
      line-height: 34px;
      text-align: center;
      cursor: pointer;
      -webkit-transition: opacity 0.5s;
      -o-transition: opacity 0.5s;
      transition: opacity 0.5s; }
      .header .topSpace .close:hover {
        opacity: 0.8; }
    .header .topSpace a {
      display: block;
      padding: 30px;
      color: #fff;
      background-color: #d4003b; }
  .header .logo {
    width: 200px;
    height: 100%;
    position: absolute;
    left: 30px;
    top: 0;
    z-index: 1; }
    .max-xs-size .header .logo {
      left: 10px; }
    .max-ss-size .header .logo {
      width: 180px; }
    .header .logo a {
      display: block;
      height: 100%;
      background: url("images/logo.png") center no-repeat;
      background-size: contain; }
      .chrome .header .logo a {
        image-rendering: -webkit-optimize-contrast; }
  .header .sub {
    width: 90%;
    max-width: 300px;
    height: 100vh;
    position: fixed;
    right: -101%;
    top: 0;
    z-index: 4;
    background-color: #fff;
    pointer-events: none;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transition: right 0.8s ease-in-out;
    -o-transition: right 0.8s ease-in-out;
    transition: right 0.8s ease-in-out; }
    .touch .header .sub {
      padding-bottom: 60px; }
    .header .sub.show {
      right: 0;
      pointer-events: all; }
    .header .sub .sub {
      z-index: 4; }
  .header .back {
    padding: 15px 20px;
    position: relative;
    color: #000;
    font-size: 16px;
    line-height: 30px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    border-bottom: 1px solid #d6d6d6; }
    .header .back:before {
      content: '\e816';
      position: absolute;
      left: 20px;
      top: 0;
      z-index: 2;
      font-family: "fontello";
      color: #c2c2c2;
      font-size: 25px;
      line-height: 60px; }
  .header .mask {
    position: fixed;
    width: 100%;
    height: 0;
    left: 0;
    top: 0;
    z-index: 4;
    background-color: #000;
    opacity: 0;
    overflow: hidden;
    -webkit-transition: opacity 1s, height 0s 1s;
    -o-transition: opacity 1s, height 0s 1s;
    transition: opacity 1s, height 0s 1s; }
    .header .mask.show {
      height: 100%;
      opacity: 0.5;
      -webkit-transition: opacity 1s;
      -o-transition: opacity 1s;
      transition: opacity 1s; }
  .header .search {
    text-align: center; }
    .header .search .form {
      padding: 30px; }
      .header .search .form input, .header .search .form select {
        display: block;
        width: 100%;
        height: 35px;
        margin: 0 auto 10px auto;
        padding: 0 20px;
        border-radius: 35px;
        border: 1px solid #c9c9c9;
        -webkit-transition: border 0.5s;
        -o-transition: border 0.5s;
        transition: border 0.5s; }
        .header .search .form input:hover, .header .search .form input:focus, .header .search .form select:hover, .header .search .form select:focus {
          border-color: #595959; }
      .header .search .form i {
        padding: 0;
        font-size: 30px !important; }
  .header .links {
    position: absolute;
    right: 60px;
    top: 10px; }
    .max-ss-size .header .links {
      right: 50px; }
    .header .links > ul > li {
      display: inline-block;
      vertical-align: text-bottom; }
      .header .links > ul > li > a, .header .links > ul > li > .toggle {
        display: block;
        width: 40px;
        color: #000;
        text-align: center; }
        .max-xs-size .header .links > ul > li > a, .max-xs-size .header .links > ul > li > .toggle {
          width: 35px; }
        .header .links > ul > li > a i, .header .links > ul > li > .toggle i {
          font-size: 30px;
          line-height: 40px; }
      .header .links > ul > li.cart .toggle {
        position: relative;
        cursor: pointer; }
        .header .links > ul > li.cart .toggle .num {
          display: block;
          width: 20px;
          height: 20px;
          position: absolute;
          right: 0;
          top: 0;
          z-index: 2;
          border-radius: 50%;
          background-color: #ed2323;
          color: #fff;
          font-size: 12px;
          text-align: center;
          line-height: 20px;
          font-weight: bold; }
      .header .links > ul > li.cart .back:before {
        content: '\e80b';
        left: auto;
        right: 20px; }
    .header .links .cart-list {
      padding: 10px 15px; }
      .header .links .cart-list a {
        color: #000; }
      .header .links .cart-list .sum {
        color: #8d8d8d; }
  .header .menu-toggle {
    width: 60px;
    height: 60px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    cursor: pointer;
    -webkit-transition: background 0.5s;
    -o-transition: background 0.5s;
    transition: background 0.5s; }
    .max-ss-size .header .menu-toggle {
      width: 50px; }
    .header .menu-toggle div {
      width: 26px;
      height: 3px;
      position: absolute;
      left: 19px;
      background-color: #000;
      -webkit-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease; }
      .max-ss-size .header .menu-toggle div {
        left: 12px; }
      .header .menu-toggle div.bar1 {
        top: 20px; }
      .header .menu-toggle div.bar2 {
        top: 27px; }
      .header .menu-toggle div.bar3 {
        top: 34px; }
  .header .menu {
    width: 80%;
    max-width: 300px;
    position: absolute;
    top: 0;
    right: -101%;
    z-index: 4;
    background-color: #000;
    opacity: 0;
    visibility: visible;
    pointer-events: none;
    -webkit-transition: right 0.8s ease-in, opacity 0.8s, visibility 0.8s;
    -o-transition: right 0.8s ease-in, opacity 0.8s, visibility 0.8s;
    transition: right 0.8s ease-in, opacity 0.8s, visibility 0.8s; }
    .header .menu .scroll {
      height: 100vh;
      position: relative;
      z-index: 3;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch; }
      .touch .header .menu .scroll {
        padding-bottom: 60px; }
      .header .menu .scroll .mCSB_container {
        margin-right: 0; }
    .header .menu.active {
      right: 0;
      opacity: 1;
      visibility: visible;
      pointer-events: all;
      -webkit-transition: right 0.8s ease, opacity 1.8s ease, visibility 1.8s ease;
      -o-transition: right 0.8s ease, opacity 1.8s ease, visibility 1.8s ease;
      transition: right 0.8s ease, opacity 1.8s ease, visibility 1.8s ease; }
    .header .menu .toggle {
      padding: 15px 20px;
      position: relative;
      color: #000;
      font-size: 16px;
      line-height: 30px;
      cursor: pointer; }
      .header .menu .toggle:after {
        content: '\e823';
        position: absolute;
        right: 20px;
        top: 0;
        z-index: 2;
        font-family: "fontello";
        color: #c2c2c2;
        font-size: 25px;
        line-height: 60px; }
    .header .menu ul.tools {
      padding: 0 20px;
      text-align: left; }
      .header .menu ul.tools > li {
        border-bottom: 1px solid #323232; }
        .header .menu ul.tools > li:last-of-type {
          border: none; }
        .header .menu ul.tools > li > a {
          display: block;
          padding: 15px 20px;
          color: #fff;
          font-size: 16px;
          line-height: 30px; }
      .header .menu ul.tools i {
        padding-right: 10px;
        color: #bababa;
        font-size: 20px; }
      .header .menu ul.tools .toggle {
        color: #fff; }
        .header .menu ul.tools .toggle:after {
          content: normal; }
      .header .menu ul.tools .back:before {
        content: '\e80b';
        left: auto;
        right: 20px; }
    .header .menu ul.nav {
      padding: 0 20px;
      background-color: #fff; }
      .header .menu ul.nav li {
        border-bottom: 1px solid #d6d6d6; }
      .header .menu ul.nav > li:last-of-type {
        border: none; }
      .header .menu ul.nav > li a {
        display: block;
        padding: 15px 20px;
        color: #444444;
        font-size: 16px;
        line-height: 30px; }

/* ==========================================================================
    home
 ==========================================================================*/
@keyframes zoomPic {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(1.1) rotate(0.02deg);
    transform: scale(1.1) rotate(0.02deg); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@-webkit-keyframes zoomPic {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(1.1) rotate(0.02deg);
    transform: scale(1.1) rotate(0.02deg); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@-moz-keyframes zoomPic {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(1.1) rotate(0.02deg);
    transform: scale(1.1) rotate(0.02deg); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

#home #header .topSpace {
  display: block; }

#home #header .block .menu .subnav.active {
  top: 151px; }

#home #header .main > .inner.active {
  padding-top: 151px; }

#home .header .topSpace {
  display: block; }

#home .pro-list a .pic {
  background-color: transparent; }

#home .banner {
  overflow: hidden;
  position:relative; 
}
  #home .banner a {
    display: block; }
    #home .banner .banner_button{
  position:absolute;
  top:calc(50%);
  transform:translateY(-50%);
  cursor: pointer;
  width: 50px;
  text-align: center;
  background:transparent;
}
#home .banner .left_button{left:50px;}
#home .banner .right_button{right:50px;}
#home .banner .left_button::after{
  content:"\f104";
  color:#000;
  font-size:50px;
  font-family:"FontAwesome";
}
#home .banner .right_button::after{
  content:"\f105";
  color:#000;
  font-size:50px;
  font-family:"FontAwesome";
}
#home .banner .slick-dots{
  top:-25px;
}
#home .banner .slick-dots li button{
      font-size: 0;
    line-height: 0;
    display: block;
    width: 14px;
    height: 14px;
    border: 2px solid #000;
    top: 1px;
    cursor: pointer;
    color: transparent;
    outline: none;
    background-color: transparent;
    border-radius: 100%
}
#home .banner .slick-dots li.slick-active button{
  background:#000;
}

    #home .banner a span {
      display: block; }
  #home .banner .forDesktop {
    height: 690px;
    height: 36vw; }
    .max-xs-size #home .banner .forDesktop {
      display: none; }
  #home .banner .forMobile {
    display: none;
    height: 520px;
    height: 70vw; }
    .max-xs-size #home .banner .forMobile {
      display: block; }
  #home .banner .pic {
    -webkit-animation: zoomPic 30s ease-in-out infinite;
    animation: zoomPic 30s ease-in-out infinite; }
    .msie #home .banner .pic {
      -webkit-animation: none;
      animation: none; }

#home .more {
  display: none; }
  .max-sm-size #home .more {
    display: table;
    margin: 30px auto 10px auto;
    background-color: #f0f0f0;
    color: #7b7b7b; }

#home .introduce {
  /**padding: 50px 0;**/
  background-color: #fff;
   }
  .max-bg-size #home .introduce {
    padding-bottom: 0; }
  .max-sm-size #home .introduce {
    display: none; }
  #home .introduce ul.list {
    font-size: 0; }
    #home .introduce ul.list > li {
      display: inline-block;
      vertical-align: top;
      width: 25%;
      min-height: 65px;
      padding: 0 50px 0 80px;
      position: relative; }
      .max-bg-size #home .introduce ul.list > li {
        width: 50%;
        margin-bottom: 50px; }
        .max-bg-size #home .introduce ul.list > li:nth-of-type(2n) {
          padding-right: 0; }
      #home .introduce ul.list > li .icon {
        width: 65px;
        position: absolute;
        left: 0;
        top: 0; }
      #home .introduce ul.list > li .name {
        color: #000; }
      #home .introduce ul.list > li .summary {
        font-size: 14px;
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s; }

.max-xs-size #home .linkBlock .forDesktop {
  display: none; }

#home .linkBlock .forMobile {
  display: none; }
  .max-xs-size #home .linkBlock .forMobile {
    display: block; }

#home .linkBlock .title {
  display: none;
  padding: 20px 30px;
  text-align: center; }
  .max-sm-size #home .linkBlock .title {
    display: block; }
  #home .linkBlock .title .name {
    margin: 0;
    color: #000;
    font-weight: normal; }
  #home .linkBlock .title .eng {
    color: #7f7f7f;
    font-size: 12px; }

.max-xs-size #home .linkBlock .container {
  padding: 0; }

#home .linkBlock a {
  display: block;
  overflow: hidden; }
  #home .linkBlock a span {
    display: block; }
  #home .linkBlock a .pic {
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    -o-transition: transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s; }
    .chrome #home .linkBlock a .pic {
      image-rendering: -webkit-optimize-contrast; }
  .min-md-size #home .linkBlock a:hover .pic {
    -webkit-transform: perspective(1px) scale(1.05) rotate(0.15deg);
    transform: perspective(1px) scale(1.05) rotate(0.15deg); }

#home .linkBlock .left {
  float: left;
  width: 50%;
  padding-right: 5px;
  padding-right: 0.3vw; }
  .max-md-size #home .linkBlock .left {
    float: left;
    width: 100%;
    padding-right: 0;
    padding-bottom: 0.6vw; }
  #home .linkBlock .left .pic {
    height: 630px;
    height: 33vw; }
    .max-md-size #home .linkBlock .left .pic {
      height: 66vw; }

#home .linkBlock .right {
  float: right;
  width: 50%;
  padding-left: 5px;
  padding-left: 0.3vw; }
  .max-md-size #home .linkBlock .right {
    float: none;
    width: 100%;
    padding-left: 0; }
  #home .linkBlock .right ul li {
    float: left;
    width: 50%; }
    #home .linkBlock .right ul li.top {
      width: 100%;
      padding-bottom: 10px;
      padding-bottom: 0.6vw; }
      .max-xs-size #home .linkBlock .right ul li.top {
        width: 50%;
        padding-left: 5px;
        padding-left: 0.3vw; }
    .max-xs-size #home .linkBlock .right ul li:nth-of-type(1) {
      padding-right: 5px;
      padding-right: 0.3vw; }
    #home .linkBlock .right ul li:nth-last-of-type(2) {
      padding-right: 5px;
      padding-right: 0.3vw; }
    #home .linkBlock .right ul li:nth-last-of-type(1) {
      padding-left: 5px;
      padding-left: 0.3vw; }
    #home .linkBlock .right ul li .pic {
      height: 310px;
      height: 16.2vw; }
      .max-md-size #home .linkBlock .right ul li .pic {
        height: 32.4vw; }
      .max-xs-size #home .linkBlock .right ul li .pic {
        height: 59vw; }

#home .mainText {
  text-align: center; }
  #home .mainText .eng {
    margin-bottom: 5px;
    padding-bottom: 10px;
    position: relative;
    color: #d4003b; }
    .max-sm-size #home .mainText .eng {
      padding-bottom: 5px; }
    #home .mainText .eng:after {
      content: '';
      display: block;
      width: 64px;
      height: 1px;
      margin-left: -32px;
      position: absolute;
      left: 50%;
      bottom: 0;
      background-color: #000; }
  #home .mainText .name {
    margin: 0;
    color: #000;
    font-size: 15px;
    font-weight: normal; }
    .max-sm-size #home .mainText .name {
      font-size: 14px; }
  #home .mainText .summary {
    max-width: 1200px;
    margin: 30px auto;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s; 
    display:none;}
    .max-sm-size #home .mainText .summary {
      display: none; }

#home .exclusive {
  padding: 50px 0; }
  .max-sm-size #home .exclusive {
    padding: 30px 0; }
  #home .exclusive .slider {
    padding: 0 50px; }
    #home .exclusive .slider .slick-slide {
      margin-top: 30px; }
    .max-sm-size #home .exclusive .slider {
      padding: 0; }
      .max-sm-size #home .exclusive .slider > li {
        display: none; }
        .max-sm-size #home .exclusive .slider > li:nth-of-type(1), .max-sm-size #home .exclusive .slider > li:nth-of-type(2), .max-sm-size #home .exclusive .slider > li:nth-of-type(3), .max-sm-size #home .exclusive .slider > li:nth-of-type(4), .max-sm-size #home .exclusive .slider > li:nth-of-type(5), .max-sm-size #home .exclusive .slider > li:nth-of-type(6) {
          display: inline-block; }

.max-xs-size #home .linkBlock2 .forDesktop {
  display: none; }

#home .linkBlock2 .forMobile {
  display: none; }
  .max-xs-size #home .linkBlock2 .forMobile {
    display: block; }

#home .linkBlock2 ul {
  font-size: 0; }
  #home .linkBlock2 ul li {
    display: inline-block;
    vertical-align: top;
    width: 50%; }
    .max-md-size #home .linkBlock2 ul li {
      width: 100%;
      margin-bottom: 0.6vw; }
    #home .linkBlock2 ul li a {
      display: block;
      overflow: hidden; }
      #home .linkBlock2 ul li a span {
        display: block; }
      #home .linkBlock2 ul li a .pic {
        height: 390px;
        height: 20.4vw;
        -webkit-transition: -webkit-transform 0.5s;
        transition: -webkit-transform 0.5s;
        -o-transition: transform 0.5s;
        transition: transform 0.5s;
        transition: transform 0.5s, -webkit-transform 0.5s; }
        .max-md-size #home .linkBlock2 ul li a .pic {
          height: 40.8vw; }
        .chrome #home .linkBlock2 ul li a .pic {
          image-rendering: -webkit-optimize-contrast; }
      .min-md-size #home .linkBlock2 ul li a:hover .pic {
        -webkit-transform: perspective(1px) scale(1.05) rotate(0.15deg);
        transform: perspective(1px) scale(1.05) rotate(0.15deg); }

#home .best {
  padding: 50px 0; }
  .max-sm-size #home .best {
    padding: 30px 0; }
    .max-sm-size #home .best .pro-list > li {
      display: none; }
      .max-sm-size #home .best .pro-list > li:nth-of-type(1), .max-sm-size #home .best .pro-list > li:nth-of-type(2), .max-sm-size #home .best .pro-list > li:nth-of-type(3), .max-sm-size #home .best .pro-list > li:nth-of-type(4), .max-sm-size #home .best .pro-list > li:nth-of-type(5), .max-sm-size #home .best .pro-list > li:nth-of-type(6) {
        display: inline-block; }

/* ==========================================================================
    catalog
 ==========================================================================*/
#catalog .left-main ul.list {
  margin: 0 -7px;
  font-size: 0; }
  .max-xs-size #catalog .left-main ul.list {
    margin: 0 -5px; }
  #catalog .left-main ul.list li {
    display: inline-block;
    vertical-align: top;
    width: 25%;
    padding: 10px 7px; }
    .max-lg-size #catalog .left-main ul.list li {
      width: 33.3%; }
    .max-xs-size #catalog .left-main ul.list li {
      width: 50%;
      padding: 5px; }
    #catalog .left-main ul.list li a {
      display: block;
      color: #000; }
      #catalog .left-main ul.list li a span {
        display: block; }
      #catalog .left-main ul.list li a .pic {
        position: relative;
        overflow: hidden; }
        #catalog .left-main ul.list li a .pic .jqimgFill {
          height: 230px;
          height: 11.7vw;
          -webkit-transition: -webkit-transform 0.5s;
          transition: -webkit-transform 0.5s;
          -o-transition: transform 0.5s;
          transition: transform 0.5s;
          transition: transform 0.5s, -webkit-transform 0.5s; }
          .max-lg-size #catalog .left-main ul.list li a .pic .jqimgFill {
            height: 21vw; }
          .max-md-size #catalog .left-main ul.list li a .pic .jqimgFill {
            height: 28.6vw; }
          .max-xs-size #catalog .left-main ul.list li a .pic .jqimgFill {
            height: 40.5vw; }
      #catalog .left-main ul.list li a .name {
        margin: 10px 0 0 0;
        font-size: 16px;
        font-weight: normal; }
        .max-sm-size #catalog .left-main ul.list li a .name {
          margin-top: 5px;
          font-size: 15px; }
      #catalog .left-main ul.list li a:hover .jqimgFill {
        -webkit-transform: scale(1.05) rotate(0.2deg);
        -ms-transform: scale(1.05) rotate(0.2deg);
        transform: scale(1.05) rotate(0.2deg); }

/* ==========================================================================
    products
 ==========================================================================*/
.min-sm-size #products .parting.result ul.pro-list {
  margin: -30px -10px 0 -10px !important; }

#products .parting.result .cart-list {
  margin-top: 0; }

#products .parting.result .keyword {
  margin-top: 0;
  color: #000; }
  .max-md-size #products .parting.result .keyword {
    text-align: center; }

#products .parting .list {
  margin-top: 80px;
  padding-top: 30px;
  border-top: 1px solid #e1e1e1; }
  .max-md-size #products .parting .list {
    margin-top: 50px; }
  .max-sm-size #products .parting .list {
    margin-top: 30px; }
  #products .parting .list .title {
    margin-bottom: 30px; }
    .max-md-size #products .parting .list .title {
      margin-bottom: 0; }
    .max-xs-size #products .parting .list .title {
      text-align: center; }
    #products .parting .list .title .name {
      float: left;
      margin: 0;
      color: #000;
      font-size: 16px; }
      .max-sm-size #products .parting .list .title .name {
        float: none;
        margin-bottom: 20px; }
    #products .parting .list .title .array {
      float: right; }
      .max-sm-size #products .parting .list .title .array {
        float: none; }
      #products .parting .list .title .array ul li {
        display: inline-block;
        vertical-align: middle;
        padding: 0 10px;
        position: relative;
        color: #999999;
        font-size: 14px; }
        .max-sm-size #products .parting .list .title .array ul li {
          padding: 0 5px; }
        .max-xs-size #products .parting .list .title .array ul li {
          padding: 0 3px; }
          .max-xs-size #products .parting .list .title .array ul li:nth-of-type(2) {
            padding-left: 0; }
        #products .parting .list .title .array ul li:after {
          content: '';
          display: block;
          width: 1px;
          height: 14px;
          margin-top: -7px;
          position: absolute;
          right: 0;
          top: 50%;
          background-color: #999999; }
          .max-sm-size #products .parting .list .title .array ul li:after {
            right: -3px; }
        #products .parting .list .title .array ul li:first-of-type {
          padding-left: 0 !important; }
          .max-xs-size #products .parting .list .title .array ul li:first-of-type {
            display: block;
            padding: 0; }
          #products .parting .list .title .array ul li:first-of-type:after {
            content: normal; }
        #products .parting .list .title .array ul li:last-of-type {
          padding-right: 0 !important; }
          #products .parting .list .title .array ul li:last-of-type:after {
            content: normal; }
        #products .parting .list .title .array ul li a {
          color: #999999; }
          #products .parting .list .title .array ul li a:hover {
            color: #000; }
        #products .parting .list .title .array ul li.active a {
          color: #000;
          font-weight: bold; }

#products .parting ul.pro-list > li {
  width: 25%; }
  .max-lg-size #products .parting ul.pro-list > li {
    width: 33.3%; }
  .max-xs-size #products .parting ul.pro-list > li {
    width: 50%; }

#product .main .container {
  max-width: 1300px; }

#product .info {
  padding-bottom: 80px;
  position: relative; }
  .max-md-size #product .info {
    padding-bottom: 50px; }
  #product .info .content {
    padding-right: 150px; }
    .max-bg-size #product .info .content {
      padding-right: 120px; }
    .max-lg-size #product .info .content {
      padding-right: 0; }
  #product .info .browses {
    width: 115px;
    padding: 20px;
    position: absolute;
    right: -20px;
    top: 0;
    text-align: center;
    border: 1px solid #d2d2d2;
    color: #000; }
    .max-lg-size #product .info .browses {
      display: none; }
    #product .info .browses .slick-slide {
      padding: 5px 0; }
    #product .info .browses a {
      display: block; }
    #product .info .browses .pic {
      display: block;
      width: 70px;
      background-color: #f2f2f2; }
    #product .info .browses .slick-arrow {
      width: 26px;
      height: 26px;
      margin: 0 0 0 -13px;
      left: 50%;
      right: auto;
      opacity: 1;
      background-color: #959595;
      -webkit-transition: background 0.5s;
      -o-transition: background 0.5s;
      transition: background 0.5s; }
      #product .info .browses .slick-arrow:before {
        font-size: 18px;
        line-height: 28px; }
      #product .info .browses .slick-arrow:hover {
        background-color: #000; }
    #product .info .browses .slick-prev {
      top: -13px; }
      #product .info .browses .slick-prev:before {
        content: '\e822';
        line-height: 26px; }
    #product .info .browses .slick-next {
      top: auto;
      bottom: -13px; }
      #product .info .browses .slick-next:before {
        content: '\e81f'; }
  #product .info .left {
    float: left;
    width: 45%;
    position: relative; }
    .max-bg-size #product .info .left {
      width: 40%; }
    .max-md-size #product .info .left {
      float: none;
      width: 100%;
      max-width: 500px;
      margin: 0 auto 50px auto; }
    .max-sm-size #product .info .left {
      margin-bottom: 30px; }
    #product .info .left .favorite {
      width: 60px;
      height: 60px;
      font-size: 40px;
      line-height: 60px; }
      .max-sm-size #product .info .left .favorite {
        width: 40px;
        height: 40px;
        top: 10px;
        right: 10px;
        font-size: 30px;
        line-height: 40px; }
  #product .info .right {
    float: right;
    width: 55%;
    padding-left: 50px; }
    .max-bg-size #product .info .right {
      width: 60%;
      padding-left: 30px; }
    .max-md-size #product .info .right {
      float: none;
      width: 100%;
      padding-left: 0; }
    #product .info .right .title {
      margin: 0 0 20px 0;
      color: #000; }
    #product .info .right .box {
      margin-bottom: 20px;
      padding: 30px 0 25px 0;
      border-top: 1px solid #d2d2d2;
      border-bottom: 1px solid #d2d2d2; }
      #product .info .right .box .sales {
        float: left; }
        .max-sm-size #product .info .right .box .sales {
          float: none; }
        #product .info .right .box .sales span {
          display: inline-block;
          vertical-align: baseline; }
          #product .info .right .box .sales span:before {
            content: 'NT$';
            padding-right: 3px; }
        #product .info .right .box .sales .original {
          margin-right: 5px;
          position: relative;
          color: #b1b1b1;
          font-size: 14px; }
          #product .info .right .box .sales .original:after {
            content: '';
            display: block;
            width: 100%;
            height: 1px;
            position: absolute;
            left: 0;
            top: 50%;
            background-color: #b1b1b1; }
        #product .info .right .box .sales .price {
          color: #000;
          font-size: 20px;
          font-weight: bold; }
      #product .info .right .box .details {
        float: right; }
        .max-sm-size #product .info .right .box .details {
          float: none;
          margin-top: 10px; }
        #product .info .right .box .details .br-theme-fontawesome-stars .br-widget {
          margin-top: 0; }
        #product .info .right .box .details ul li {
          display: inline-block;
          vertical-align: middle;
          padding-left: 5px;
          font-size: 14px;
          color: #b6b6b6;
          display:none; 
        }
        #product .info .right .box .details ul .in-stock {
          color: #000; }
          #product .info .right .box .details ul .in-stock .num {
            display: inline-block;
            vertical-align: baseline;
            margin-left: 5px;
            padding: 2px;
            border-radius: 50%;
            background-color: #bebebe;
            color: #fff;
            text-align: center; }
        #product .info .right .box .details ul .people .num {
          color: #000;
          padding: 0 3px; }
    #product .info .right .editor {
      margin-bottom: 20px;
      line-height: 2em; }
    #product .info .right .data, #product .info .right .discount, #product .info .right .coupon {
      margin-bottom: 20px;
      color: #000;
      line-height: 2em; }
    #product .info .right .data ul span, #product .info .right .data ul ul {
      display: inline-block;
      vertical-align: top; }
    #product .info .right .events {
      padding: 30px 0;
      border-top: 1px solid #d2d2d2;
      border-bottom: 1px solid #d2d2d2; }
      #product .info .right .events .notice {
        margin-top: 15px; }
        #product .info .right .events .notice ul li {
          margin-bottom: 15px; }
          #product .info .right .events .notice ul li:last-of-type {
            margin-bottom: 0; }
    #product .info .right .form .group {
      float: left;
      margin-right: 15px; }
      .max-xs-size #product .info .right .form .group {
        float: none;
        margin-right: 0;
        margin-bottom: 10px; }
    #product .info .right .form .select, #product .info .right .form .button {
      width: -moz-calc(50% - 61px);
      width: -webkit-calc(50% - 61px);
      width: calc(50% - 61px); }
      .max-md-size #product .info .right .form .select, .max-md-size #product .info .right .form .button {
        width: -moz-calc(50% - 74px);
        width: -webkit-calc(50% - 74px);
        width: calc(50% - 74px); }
      .max-xs-size #product .info .right .form .select, .max-xs-size #product .info .right .form .button {
        width: 100%; }
    #product .info .right .form .button {
      float: right;
      min-width: 0; }
      #product .info .right .form .button:hover {
        background-color: #d82356; }
  #product .info .buttons {
    padding: 20px 0; }
    #product .info .buttons .button2 {
      float: left;
      min-width: 0;
      margin: 10px 15px 5px 0;
      padding: 10px;
      border-width: 1px;
      border-color: #999999;
      color: #999999; }
      .max-sm-size #product .info .buttons .button2 {
        padding: 10px 10px; }
      .max-xs-size #product .info .buttons .button2 {
        margin-top: 5px; }
      #product .info .buttons .button2:last-of-type {
        margin-right: 0; }
      #product .info .buttons .button2:hover {
        background-color: #fff;
        border-color: #000;
        color: #000; }
    #product .info .buttons .share {
      padding: 10px 20px;
      }
      .max-sm-size #product .info .buttons .share {
        width: 100%; }
    #product .info .buttons .feedback, #product .info .buttons .messerger {
      width: -moz-calc(50% - 66px);
      width: -webkit-calc(50% - 66px);
      width: calc(50% - 66px); }
      .max-sm-size #product .info .buttons .feedback, .max-sm-size #product .info .buttons .messerger {
        width: -moz-calc(50% - 8px);
        width: -webkit-calc(50% - 8px);
        width: calc(50% - 8px); }
      .max-xs-size #product .info .buttons .feedback, .max-xs-size #product .info .buttons .messerger {
        width: 100%; }
  .max-sm-size #product .info ul.to-share {
    text-align: center; }
  #product .info ul.to-share li {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px; }
    .max-sm-size #product .info ul.to-share li {
      margin: 0 5px; }
    #product .info ul.to-share li a {
      display: block;
      color: #c9c9c9;
      font-size: 34px; }
      #product .info ul.to-share li a:hover.fb {
        color: #3b5998; }
      #product .info ul.to-share li a:hover.line {
        color: #00c300; }
      #product .info ul.to-share li a:hover.twitter {
        color: #1da1f2; }
      #product .info ul.to-share li a:hover.google {
        color: #dd4b39; }
      #product .info ul.to-share li a:hover.ig {
        color: #000; }
  #product .info .photos .slick-slide {
    height: auto; }
  #product .info .photos .pic {
    height: 500px; }
    .max-sm-size #product .info .photos .pic {
      height: 80vw; }
  #product .info .photos-btn {
    margin-top: 10px; }
    #product .info .photos-btn .slick-slide {
      padding: 10px;
      cursor: pointer; }
      .max-xs-size #product .info .photos-btn .slick-slide {
        padding: 5px; }
    #product .info .photos-btn .pic {
      height: 100px; }
      .max-xs-size #product .info .photos-btn .pic {
        height: 70px; }
    #product .info .photos-btn .slick-prev {
      left: -17px; }
    #product .info .photos-btn .slick-next {
      right: -17px; }

#product .features, #product .recommend, #product .browse-list, #product .evaluation {
  padding-bottom: 80px;
  border-top: 1px solid #d2d2d2; }
  .max-md-size #product .features, .max-md-size #product .recommend, .max-md-size #product .browse-list, .max-md-size #product .evaluation {
    padding-bottom: 50px; }

#product .features .tabs {
  margin-bottom: 35px; }

#product .features .form .button2 {
  height: 40px;
  padding: 5px 20px;
  border-width: 2px;
  border-color: #383838;
  color: #383838; }
  #product .features .form .button2:hover {
    background-color: #383838;
    color: #fff; }

#product .recommend .slider, #product .browse-list .slider {
  padding: 0 50px; }
  .max-md-size #product .recommend .slider, .max-md-size #product .browse-list .slider {
    padding: 0; }
  .max-sm-size #product .recommend .slider, .max-sm-size #product .browse-list .slider {
    margin-top: 0; }

#product .evaluation .br-theme-fontawesome-stars .br-widget {
  margin-top: 0;
  margin-bottom: 20px;
  text-align: left; }
  .max-sm-size #product .evaluation .br-theme-fontawesome-stars .br-widget {
    margin-bottom: 10px; }

#product .evaluation ul li {
  padding: 20px 0;
  border-bottom: 1px solid #e8e8e8;
  color: #000; }
  .max-sm-size #product .evaluation ul li {
    padding: 10px 0; }
  #product .evaluation ul li:last-of-type {
    border-bottom: none; }
  #product .evaluation ul li:after {
    content: '';
    display: block;
    clear: both; }
  #product .evaluation ul li .name {
    float: left;
    width: 100px;
    font-weight: bold; }
    .max-sm-size #product .evaluation ul li .name {
      padding-right: 20px; }
  #product .evaluation ul li .text {
    float: left;
    width: -moz-calc(100% - 100px);
    width: -webkit-calc(100% - 100px);
    width: calc(100% - 100px);
    padding-left: 20px; }
    .max-sm-size #product .evaluation ul li .text {
      padding-left: 0; }

.subTitle {
  display: table;
  margin: -1px auto 50px auto;
  padding: 10px;
  border-top: 2px solid #000;
  color: #000;
  font-weight: bold; }
  .max-sm-size .subTitle {
    margin-bottom: 20px; }

.purchase {
  padding-bottom: 80px;
  position: relative;
  border-top: 1px solid #d2d2d2; }
  .max-md-size .purchase {
    padding-bottom: 50px; }
  .purchase .open-box {
    position: absolute;
    right: 10px;
    top: 13px;
    opacity: 0.5;
    -webkit-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s; }
    .purchase .open-box:hover {
      opacity: 1; }
    .purchase .open-box:before {
      content: '?';
      display: inline-block;
      width: 17px;
      margin-right: 5px;
      border-radius: 50%;
      background-color: #000;
      color: #fff;
      text-align: center;
      opacity: 0.5; }
  .purchase .more {
    display: table;
    margin: 50px auto 0 auto;
    border-width: 1px;
    border-color: #999999;
    color: #999999; }
    .purchase .more:hover {
      background-color: #fff;
      border-color: #000;
      color: #000; }
    .max-sm-size .purchase .more {
      display: block;
      width: 100%;
      margin-top: 0; }
  .purchase ul.list {
    margin: 0 -10px;
    font-size: 0; }
    .purchase ul.list > li {
      display: inline-block;
      vertical-align: top;
      width: 50%;
      margin-bottom: 20px;
      padding: 10px 10px 10px 50px;
      position: relative;
      font-size: 16px; }
      .max-md-size .purchase ul.list > li {
        padding-left: 10px;
        text-align: center; }
      .purchase ul.list > li input {
        position: absolute;
        left: 20px;
        top: 50%;
        bottom: auto;
        -webkit-transform: translateY(-50%) scale(1.3);
        -ms-transform: translateY(-50%) scale(1.3);
        transform: translateY(-50%) scale(1.3);
        cursor: pointer; }
        .max-md-size .purchase ul.list > li input {
          position: relative;
          left: 0;
          top: 0; }
      .purchase ul.list > li .barrating-show {
        position: absolute;
        right: 10px;
        top: -3px; }
        .max-md-size .purchase ul.list > li .barrating-show {
          position: relative;
          right: 0;
          top: 0; }
        .purchase ul.list > li .barrating-show .br-theme-fontawesome-stars .br-widget {
          margin-top: 0; }
          .max-md-size .purchase ul.list > li .barrating-show .br-theme-fontawesome-stars .br-widget {
            text-align: left; }
        .purchase ul.list > li .barrating-show a {
          font-size: 14px; }
      .purchase ul.list > li .box {
        position: relative; }
        .max-md-size .purchase ul.list > li .box {
          text-align: left; }
        .min-md-size .purchase ul.list > li .box .favorite {
          width: 30px;
          height: 30px;
          top: 5px;
          left: 88px;
          right: auto;
          line-height: 30px;
          font-size: 20px; }
        .max-md-size .purchase ul.list > li .box .favorite {
          top: 10px;
          right: 10px; }
        .purchase ul.list > li .box .bottom {
          width: 100%;
          padding-left: 145px;
          position: absolute;
          left: 0;
          bottom: 0;
          line-height: 30px; }
          .max-md-size .purchase ul.list > li .box .bottom {
            padding-left: 0;
            position: relative; }
          .purchase ul.list > li .box .bottom .price {
            float: left;
            margin-right: 20px;
            color: #000; }
            .purchase ul.list > li .box .bottom .price:before {
              content: 'NT$';
              padding-right: 5px; }
          .purchase ul.list > li .box .bottom .dropkick {
            float: left; }
        .purchase ul.list > li .box select {
          height: 0; }
        .purchase ul.list > li .box .dropkick {
          width: 80px; }
          .max-md-size .purchase ul.list > li .box .dropkick {
            width: 100%;
            height: 35px;
            margin-top: 5px; }
        .purchase ul.list > li .box .dk_container a {
          padding: 0 20px; }
          .max-sm-size .purchase ul.list > li .box .dk_container a {
            padding: 10px 20px; }
        .purchase ul.list > li .box > a {
          display: block;
          color: #000; }
          .purchase ul.list > li .box > a:hover img {
            -webkit-transform: scale(1.05) rotate(0.2deg);
            -ms-transform: scale(1.05) rotate(0.2deg);
            transform: scale(1.05) rotate(0.2deg); }
          .purchase ul.list > li .box > a:after {
            content: '';
            display: block;
            clear: both; }
          .purchase ul.list > li .box > a span {
            display: block; }
          .purchase ul.list > li .box > a .pic {
            float: left;
            width: 125px;
            background-color: #f2f2f2;
            overflow: hidden;
            text-align: center; }
            .max-md-size .purchase ul.list > li .box > a .pic {
              float: none;
              width: 100%;
              margin-bottom: 10px; }
            .purchase ul.list > li .box > a .pic img {
              -webkit-transition: -webkit-transform 0.5s;
              transition: -webkit-transform 0.5s;
              -o-transition: transform 0.5s;
              transition: transform 0.5s;
              transition: transform 0.5s, -webkit-transform 0.5s; }
          .purchase ul.list > li .box > a .text {
            float: left;
            width: -moz-calc(100% - 125px);
            width: -webkit-calc(100% - 125px);
            width: calc(100% - 125px);
            padding-left: 20px; }
            .max-md-size .purchase ul.list > li .box > a .text {
              float: none;
              width: 100%;
              padding-left: 0; }
            .purchase ul.list > li .box > a .text .brand {
              height: 25px;
              padding-right: 80px;
              color: #8f8f8f;
              font-size: 14px;
              line-height: normal;
              line-height: 25px;
              overflow: hidden;
              -o-text-overflow: ellipsis;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -moz-line-clamp: 1;
              -ms-line-clamp: 1;
              -webkit-box-orient: vertical;
              -moz-box-orient: vertical;
              -ms-box-orient: vertical; }
              .max-md-size .purchase ul.list > li .box > a .text .brand {
                padding-right: 0; }
            .purchase ul.list > li .box > a .text .name {
              max-height: 50px;
              margin-bottom: 5px;
              line-height: 25px;
              overflow: hidden;
              -o-text-overflow: ellipsis;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -moz-line-clamp: 2;
              -ms-line-clamp: 2;
              -webkit-box-orient: vertical;
              -moz-box-orient: vertical;
              -ms-box-orient: vertical; }
              .max-md-size .purchase ul.list > li .box > a .text .name {
                height: 50px;
                font-size: 15px; }

.recommend .subTitle, .browse-list .subTitle, .evaluation .subTitle {
  margin-bottom: 15px; }

/* ==========================================================================
    cart
 ==========================================================================*/
#cart .main .container {
  max-width: 1300px; }
  #cart .main .container > .title {
    color: #000;
    font-weight: bold;
    text-align: center; }

ul.steps {
  margin: 50px 0;
  text-align: center; }
  .max-xs-size ul.steps {
    width: 270px;
    margin: 30px auto;
    text-align: left; }
  ul.steps > li {
    display: inline-block;
    vertical-align: middle;
    padding: 0 50px;
    position: relative;
    line-height: 50px;
    text-align: left; }
    .min-md-size ul.steps > li {
      width: 200px;
      padding: 0 60px; }
    .max-xs-size ul.steps > li {
      padding: 0 30px 0 40px; }
    ul.steps > li:after {
      content: '\e824';
      position: absolute;
      right: 20px;
      top: 2px;
      color: #ddd;
      font-size: 30px;
      font-family: "fontello"; }
      .min-md-size ul.steps > li:after {
        right: 30px; }
      .max-xs-size ul.steps > li:after {
        right: 10px;
        font-size: 25px; }
    ul.steps > li:last-of-type {
      width: auto;
      padding-right: 0; }
      ul.steps > li:last-of-type:after {
        content: normal; }
    ul.steps > li.active .number {
      background-color: #333333;
      border-color: #333333;
      color: #fff; }
    ul.steps > li .number {
      width: 40px;
      height: 40px;
      margin-top: -20px;
      position: absolute;
      left: 0;
      top: 50%;
      border-radius: 50%;
      font-size: 20px;
      line-height: 38px;
      font-weight: bold;
      text-align: center;
      border: 1px solid #d2d2d2; }
      .max-xs-size ul.steps > li .number {
        width: 30px;
        height: 30px;
        margin-top: -15px;
        font-size: 16px;
        line-height: 28px; }
    ul.steps > li .name {
      color: #000; }

.cart-list {
  margin: 50px 0; }
  .max-xs-size .cart-list {
    margin: 30px 0; }
  .cart-list .success {
    padding: 30px 10px;
    border-top: 1px solid #000; }
    .max-sm-size .cart-list .success {
      padding: 20px 10px; }
  .cart-list .details {
    padding: 30px 10px;
    border-top: 1px solid #000;
    color: #000; }
    .max-sm-size .cart-list .details {
      padding: 20px 10px; }
    .cart-list .details .left {
      float: left; }
      .max-sm-size .cart-list .details .left {
        float: none; }
    .cart-list .details .right {
      float: right; }
      .max-sm-size .cart-list .details .right {
        float: none; }
      .cart-list .details .right ul li {
        display: inline-block;
        vertical-align: middle;
        margin-left: 20px; }
        .max-sm-size .cart-list .details .right ul li {
          display: block;
          margin-left: 0; }
  .cart-list .list-table {
    border-top: 1px solid #000;
    font-size: 16px; }
    .max-sm-size .cart-list .list-table tr {
      display: block;
      padding: 20px 0 20px 90px;
      position: relative;
      border-bottom: 1px solid #d2d2d2;
      font-size: 0; }
      .max-sm-size .cart-list .list-table tr:first-of-type {
        display: none; }
    .max-xs-size .cart-list .list-table tr {
      padding: 50px 0 15px 0; }
    .cart-list .list-table th, .cart-list .list-table td {
      min-width: 90px;
      text-align: center; }
      .cart-list .list-table th.width40, .cart-list .list-table td.width40 {
        width: 40%; }
        .max-md-size .cart-list .list-table th.width40, .max-md-size .cart-list .list-table td.width40 {
          width: 30%; }
      .cart-list .list-table th.width0, .cart-list .list-table td.width0 {
        min-width: 0; }
    .cart-list .list-table th {
      padding: 10px;
      color: #000;
      font-size: 15px;
      font-weight: normal;
      background-color: #f6f6f6; }
    .cart-list .list-table td {
      padding: 20px 10px;
      border-bottom: 1px solid #d2d2d2; }
      .max-sm-size .cart-list .list-table td {
        display: inline-block;
        vertical-align: top;
        width: 50%;
        padding: 5px 20px 5px 0;
        border: none;
        font-size: 15px;
        text-align: left; }
        .max-sm-size .cart-list .list-table td .hidden {
          display: inline-block !important; }
        .max-sm-size .cart-list .list-table td:first-of-type {
          width: 100%; }
        .max-sm-size .cart-list .list-table td.null {
          display: none; }
        .max-sm-size .cart-list .list-table td.delete-btn {
          width: auto;
          min-width: 0;
          padding: 0;
          position: absolute;
          right: 0;
          top: 13px;
          z-index: 5;
          line-height: 35px; }
        .max-sm-size .cart-list .list-table td.favorite-btn, .max-sm-size .cart-list .list-table td.add-btn {
          width: auto;
          min-width: 0;
          padding: 0;
          position: absolute;
          right: 40px;
          top: 13px;
          line-height: 35px;
          z-index: 5; }
        .max-sm-size .cart-list .list-table td.favorite-btn.two {
          right: 0; }
      .max-xs-size .cart-list .list-table td {
        width: 100%;
        padding-right: 0; }
    .cart-list .list-table a.pro {
      display: block;
      text-align: left; }
      .max-sm-size .cart-list .list-table a.pro {
        margin-right: 60px;
        margin-bottom: 10px; }
      .max-xs-size .cart-list .list-table a.pro {
        margin-right: 0; }
      .cart-list .list-table a.pro:after {
        content: '';
        display: block;
        clear: both; }
      .cart-list .list-table a.pro span {
        display: block; }
      .cart-list .list-table a.pro .pic {
        float: left;
        width: 75px;
        background-color: #f2f2f2; }
        .max-sm-size .cart-list .list-table a.pro .pic {
          float: none;
          position: absolute;
          left: 0;
          top: 20px; }
        .max-xs-size .cart-list .list-table a.pro .pic {
          width: 100%;
          margin: 0 auto 10px auto;
          position: relative;
          top: 0;
          text-align: center; }
      .cart-list .list-table a.pro .text {
        float: left;
        width: -moz-calc(100% - 75px);
        width: -webkit-calc(100% - 75px);
        width: calc(100% - 75px);
        padding-left: 10px; }
        .max-sm-size .cart-list .list-table a.pro .text {
          float: none;
          width: 100%;
          padding-left: 0; }
        .cart-list .list-table a.pro .text .name {
          color: #000;
          font-weight: bold; }
        .cart-list .list-table a.pro .text .id {
          color: #999999;
          font-size: 13px; }
        .cart-list .list-table a.pro .text .notice {
          font-size: 13px;
          line-height: normal; }
        .cart-list .list-table a.pro .text .summary {
          color: #666666;
          font-size: 13px;
          line-height: normal; }
    .max-sm-size .cart-list .list-table .selectNum .hidden {
      float: left; }
    .max-sm-size .cart-list .list-table .selectNum:after {
      content: '';
      display: block;
      clear: both; }
    .cart-list .list-table .dropkick {
      font-size: 15px; }
      .max-sm-size .cart-list .list-table .dropkick {
        float: left;
        width: -moz-calc(100% - 60px);
        width: -webkit-calc(100% - 60px);
        width: calc(100% - 60px); }
    .cart-list .list-table .dk_container a {
      min-width: 60px;
      text-align: left;
      padding: 5px 15px; }
    .cart-list .list-table .price:before {
      content: 'NT$';
      padding-right: 3px; }
    .cart-list .list-table .favorite, .cart-list .list-table .add-cart {
      display: inline-block;
      width: auto;
      height: auto;
      margin: auto;
      position: relative;
      right: 0;
      top: 0;
      font-size: 25px;
      cursor: pointer; }
    .cart-list .list-table .favorite {
      line-height: normal; }
    .cart-list .list-table .add-cart {
      color: #dddddd;
      -webkit-transition: color 0.5s;
      -o-transition: color 0.5s;
      transition: color 0.5s; }
      .cart-list .list-table .add-cart:hover {
        color: #c3c3c3; }
      .cart-list .list-table .add-cart.active {
        color: #000; }
    .cart-list .list-table .delete {
      display: inline-block;
      cursor: pointer;
      color: #c1c1c1;
      font-size: 20px;
      -webkit-transition: color 0.5s;
      -o-transition: color 0.5s;
      transition: color 0.5s; }
      .min-md-size .cart-list .list-table .delete:hover {
        color: #ed2323; }
    .cart-list .list-table input.package {
      -webkit-transform: scale(1.3);
      -ms-transform: scale(1.3);
      transform: scale(1.3);
      cursor: pointer; }
  .cart-list .event {
    margin: 30px 0; }
  .cart-list .upgrade {
    margin: 20px 0 50px 0;
    color: #000; }
    .cart-list .upgrade .price:before {
      content: 'NT$';
      padding: 0 3px; }
  .cart-list .discount, .cart-list .transport {
    padding: 30px 0;
    border-top: 1px solid #000;
    color: #000; }
    .cart-list .discount .left, .cart-list .transport .left {
      float: left;
      width: 160px;
      font-weight: bold; }
      .max-sm-size .cart-list .discount .left, .max-sm-size .cart-list .transport .left {
        float: none;
        width: 100%;
        margin-bottom: 20px;
        font-size: 16px; }
    .cart-list .discount .right, .cart-list .transport .right {
      float: left;
      width: -moz-calc(100% - 160px);
      width: -webkit-calc(100% - 160px);
      width: calc(100% - 160px); }
      .max-sm-size .cart-list .discount .right, .max-sm-size .cart-list .transport .right {
        float: none;
        width: 100%; }
    .cart-list .discount label.radio, .cart-list .transport label.radio {
      cursor: pointer; }
      .max-xs-size .cart-list .discount label.radio input[type="radio"], .max-xs-size .cart-list .transport label.radio input[type="radio"] {
        -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3); }
  .cart-list .discount .group {
    margin-bottom: 10px; }
  .cart-list .discount .form-control {
    width: 200px;
    height: 35px;
    margin: 0 5px;
    padding: 0 10px; }
    .cart-list .discount .form-control.bonus {
      width: 80px;
      text-align: center; }
  .cart-list .discount .note {
    color: #8D8D8E; }
  .cart-list .transport {
    position: relative; }
    .cart-list .transport .open-box {
      position: absolute;
      right: 10px;
      top: 33px;
      opacity: 0.5;
      -webkit-transition: opacity 0.5s;
      -o-transition: opacity 0.5s;
      transition: opacity 0.5s; }
      .cart-list .transport .open-box:hover {
        opacity: 1; }
      .cart-list .transport .open-box:before {
        content: '?';
        display: inline-block;
        width: 17px;
        margin-right: 5px;
        border-radius: 50%;
        background-color: #000;
        color: #fff;
        text-align: center;
        opacity: 0.5; }
    .cart-list .transport label.radio {
      margin-right: 30px; }
  .cart-list .all-total {
    padding: 30px 0;
    border-top: 1px solid #000;
    color: #757575; }
    .max-sm-size .cart-list .all-total {
      padding-top: 20px; }
    .cart-list .all-total .left {
      float: left;
      width: 220px; }
      .max-sm-size .cart-list .all-total .left {
        float: none;
        width: 100%;
        text-align: center; }
      .cart-list .all-total .left .button2 {
        width: 100%;
        margin-bottom: 15px;
        border-width: 2px; }
        .max-sm-size .cart-list .all-total .left .button2 {
          width: auto;
          margin: 5px; }
        .max-xs-size .cart-list .all-total .left .button2 {
          width: 100%;
          margin: 5px 0; }
    .cart-list .all-total .right {
      float: right;
      width: 400px; }
      .max-sm-size .cart-list .all-total .right {
        float: none;
        width: 100%;
        margin-bottom: 30px; }
    .cart-list .all-total .total-table td {
      padding: 10px;
      border-bottom: 1px solid #d2d2d2; }
      .cart-list .all-total .total-table td:nth-of-type(2) {
        text-align: right; }
    .cart-list .all-total .total-table tr:last-of-type td {
      border-bottom: none; }
    .cart-list .all-total .total-table .price:before {
      content: 'NT$';
      padding-right: 3px; }

.max-sm-size .cart-list.checked .list-table tr {
  padding-top: 15px; }

.max-sm-size .cart-list.checked .all-total {
  margin-bottom: 0;
  padding-bottom: 0; }

.cart-info {
  padding-bottom: 50px; }
  .cart-info .block {
    padding: 30px 0;
    border-top: 1px solid #000;
    color: #000; }
    .max-sm-size .cart-info .block {
      padding: 20px 0; }
    .cart-info .block .left-name {
      float: left;
      width: 160px;
      padding-top: 13px;
      font-weight: bold; }
      .max-sm-size .cart-info .block .left-name {
        float: none;
        width: 100%;
        margin-bottom: 20px;
        font-size: 16px; }
      .cart-info .block .left-name .same {
        margin-top: 10px;
        color: #8d8d8d;
        font-weight: normal; }
    .cart-info .block .right-form {
      float: left;
      width: -moz-calc(100% - 160px);
      width: -webkit-calc(100% - 160px);
      width: calc(100% - 160px); }
      .max-sm-size .cart-info .block .right-form {
        float: none;
        width: 100%; }
  .cart-info .invoice .left-name {
    padding-top: 0; }
  .cart-info .triple-box {
    display: none; }
    .cart-info .triple-box label.name {
      width: 120px; }
    .cart-info .triple-box .right {
      width: -moz-calc(100% - 120px);
      width: -webkit-calc(100% - 120px);
      width: calc(100% - 120px); }
      .max-lg-size .cart-info .triple-box .right {
        padding-top: 13px; }
      .max-sm-size .cart-info .triple-box .right {
        padding-top: 9px; }
      .cart-info .triple-box .right .form-control {
        width: 200px;
        margin: 0 10px; }
      .cart-info .triple-box .right .company {
        display: inline-block; }
        .max-lg-size .cart-info .triple-box .right .company {
          display: block;
          margin-top: 15px; }
        .cart-info .triple-box .right .company .sub {
          display: inline-block; }
          .max-lg-size .cart-info .triple-box .right .company .sub {
            margin-bottom: 15px; }
          .max-xs-size .cart-info .triple-box .right .company .sub {
            display: block; }
            .max-xs-size .cart-info .triple-box .right .company .sub label {
              display: block;
              width: 100%; }
            .max-xs-size .cart-info .triple-box .right .company .sub .form-control {
              width: 100%;
              margin: 5px 0 0 0; }
    .cart-info .triple-box .note {
      margin-top: 15px; }
      .max-lg-size .cart-info .triple-box .note {
        margin-top: 0; }
  .cart-info .donate-box {
    display: none; }
    .cart-info .donate-box .dropkick {
      width: 200px;
      float: left; }
  .cart-info .buttonBlock {
    margin: 50px 0; }
    .max-lg-size .cart-info .buttonBlock {
      margin-top: 0; }
    .max-md-size .cart-info .buttonBlock {
      margin-bottom: 0; }
    .max-sm-size .cart-info .buttonBlock .button2 {
      width: auto;
      margin: 5px; }
    .max-xs-size .cart-info .buttonBlock .button2 {
      width: 100%;
      margin: 5px 0; }
  .cart-info .agree {
    margin: 50px 0; }
    .max-sm-size .cart-info .agree {
      margin-top: 30px; }
    .max-xs-size .cart-info .agree {
      margin-bottom: 30px; }
    .cart-info .agree a {
      color: #ed2323; }
      .cart-info .agree a:hover {
        text-decoration: underline; }

.cart-info.checked .block {
  position: relative;
  color: #8d8d8d; }
  .cart-info.checked .block .tag {
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    top: -150px; }
    .max-md-size .cart-info.checked .block .tag {
      top: -60px; }
  .cart-info.checked .block .left-name {
    padding-top: 0;
    color: #000; }
  .cart-info.checked .block .right-form ul li {
    margin-bottom: 10px; }
    .cart-info.checked .block .right-form ul li:last-of-type {
      margin-bottom: 0; }
    .cart-info.checked .block .right-form ul li .title {
      display: inline-block;
      width: 120px;
      color: #000; }
      .max-xs-size .cart-info.checked .block .right-form ul li .title {
        display: block;
        width: auto; }

.order .cart-info {
  padding-bottom: 0; }
  .order .cart-info .buttonBlock {
    margin-top: 50px;
    margin-bottom: 0; }
    .max-sm-size .order .cart-info .buttonBlock {
      margin-top: 30px; }

.max-sm-size .order .list-table td.add-btn {
  right: 0; }

.max-sm-size .order .all-total {
  padding-bottom: 0; }
  .max-sm-size .order .all-total .right {
    margin-bottom: 0; }

.dialogue-table tr.question td {
  padding-top: 20px; }

.dialogue-table tr.reply {
  border-bottom: 1px solid #e7e7e7; }
  .dialogue-table tr.reply td {
    padding-bottom: 20px; }

.dialogue-table tr:first-of-type td {
  padding-top: 0; }

.dialogue-table tr:last-of-type {
  border: none; }
  .dialogue-table tr:last-of-type td {
    padding-bottom: 0; }

.dialogue-table td {
  width: 90%;
  padding: 10px;
  vertical-align: top; }
  .dialogue-table td:first-of-type {
    width: 10%;
    min-width: 80px;
    padding: 10px 0;
    color: #000; }

.payfor-table {
  border-top: 1px solid #000; }
  .max-sm-size .payfor-table {
    display: block;
    padding: 20px 0;
    border-bottom: 1px solid #000; }
    .max-sm-size .payfor-table tbody {
      display: block; }
  .max-sm-size .payfor-table tr {
    display: block;
    padding: 10px 0;
    position: relative;
    border-bottom: 1px solid #c9c9c9; }
    .max-sm-size .payfor-table tr:last-of-type {
      border: none; }
  .min-sm-size .payfor-table tr:first-of-type td {
    padding-top: 20px; }
  .min-sm-size .payfor-table tr:first-of-type .name {
    padding: 30px 10px; }
  .min-sm-size .payfor-table tr:last-of-type td {
    padding-bottom: 20px; }
  .payfor-table td {
    border-bottom: 1px solid #c9c9c9; }
    .max-sm-size .payfor-table td {
      display: block;
      position: static;
      border: none; }
  .payfor-table .name {
    width: 160px;
    color: #000;
    font-weight: bold;
    vertical-align: top; }
    .max-sm-size .payfor-table .name {
      margin-bottom: 20px;
      font-size: 16px; }
  .payfor-table .card {
    padding-right: 160px;
    position: relative; }
    .max-xs-size .payfor-table .card {
      padding-right: 0; }
    .payfor-table .card .pic {
      width: 140px;
      position: absolute;
      top: 50%;
      bottom: auto;
      right: 10px;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%); }
      .max-xs-size .payfor-table .card .pic {
        display: block;
        margin-top: 5px;
        position: relative;
        top: 0;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none; }
  .payfor-table .radio {
    display: block;
    width: 240px;
    padding: 10px; }
    .max-sm-size .payfor-table .radio {
      padding: 0; }
  .payfor-table .type {
    color: #000; }
    .payfor-table .type input {
      margin-right: 10px; }

@media print {
  #header, .header, #footer, .where {
    display: none; }
  .main > .inner {
    min-height: 0;
    padding-top: 0; }
  #cart .main .container > .title,
  #cart ul.steps, #cart .success, #cart .buttonBlock {
    display: none; }
  #cart .cart-list {
    margin-bottom: 0; }
    #cart .cart-list .details {
      padding: 20px 10px; }
    #cart .cart-list .list-table td {
      padding: 10px; }
  #cart .cart-list .all-total, #cart .cart-info .block {
    padding: 20px 0; } }

/* ==========================================================================
    faq
 ==========================================================================*/
ul.faq-list > li {
  border-bottom: 1px solid #ddd; }
  ul.faq-list > li .toggle {
    padding: 15px 10px;
    color: #000;
    cursor: pointer;
    -webkit-transition: background 0.5s;
    -o-transition: background 0.5s;
    transition: background 0.5s; }
    .max-sm-size ul.faq-list > li .toggle {
      padding: 10px; }
    ul.faq-list > li .toggle.active .f16 {
      font-weight: bold; }
    .min-md-size ul.faq-list > li .toggle:hover {
      background-color: #f4f4f4; }
    ul.faq-list > li .toggle .f16 {
      margin: 0;
      font-weight: normal; }
      .max-sm-size ul.faq-list > li .toggle .f16 {
        font-size: 15px; }
  ul.faq-list > li .answer {
    display: none;
    padding: 10px 10px 20px 10px; }
    .max-sm-size ul.faq-list > li .answer {
      padding-top: 0; }

/* ==========================================================================
    profit
 ==========================================================================*/
#profit .parting {
  padding-bottom: 50px; }
  #profit .parting .button2 {
    border-width: 2px;
    color: #626262;
    border-color: #626262; }
    .max-sm-size #profit .parting .button2 {
      width: auto; }
    .max-xs-size #profit .parting .button2 {
      width: 100%; }
    #profit .parting .button2:hover {
      color: #fff;
      border-color: #000;
      background-color: #000; }

ul.profit-steps {
  color: #666; }
  ul.profit-steps > li {
    padding: 30px 10px;
    border-bottom: 1px solid #ddd; }
    .max-sm-size ul.profit-steps > li {
      padding: 20px 10px; }
    ul.profit-steps > li:last-of-type {
      border: none; }
    ul.profit-steps > li:after {
      content: '';
      display: block;
      clear: both; }
    ul.profit-steps > li .step {
      float: left;
      width: 150px;
      position: relative;
      color: #000; }
      .max-xs-size ul.profit-steps > li .step {
        float: none;
        width: 100%;
        margin-bottom: 10px; }
      ul.profit-steps > li .step:after {
        content: '';
        display: block;
        width: 1px;
        height: 14px;
        margin-top: -7px;
        position: absolute;
        right: 20px;
        top: 50%;
        background-color: #ddd; }
        .max-xs-size ul.profit-steps > li .step:after {
          content: normal; }
      ul.profit-steps > li .step .num {
        display: inline-block;
        width: 25px;
        margin: 0 5px;
        border-radius: 50%;
        background-color: #000;
        color: #fff;
        text-align: center; }
    ul.profit-steps > li .text {
      float: left;
      width: -moz-calc(100% - 150px);
      width: -webkit-calc(100% - 150px);
      width: calc(100% - 150px); }
      .max-xs-size ul.profit-steps > li .text {
        float: none;
        width: 100%; }

/* ==========================================================================
    login
 ==========================================================================*/
#login .parting {
  max-width: 550px;
  margin: auto;
  padding-bottom: 50px; }
  #login .parting .form .button {
    width: 100%; }
  #login .parting .form .notice {
    margin-top: 30px; }
    #login .parting .form .notice .icon {
      display: block;
      width: 50px;
      height: 50px;
      margin: 20px auto;
      background: url("images/icon-plaint.png") center no-repeat; }
    #login .parting .form .notice a {
      color: #ff9999;
      text-decoration: underline; }
      #login .parting .form .notice a:hover {
        color: #ed2323; }
  #login .parting .form ul.tool {
    margin: 50px 0 20px 0;
    text-align: center; }
    #login .parting .form ul.tool li {
      display: inline-block;
      vertical-align: middle;
      margin-bottom: 10px;
      border-right: 1px solid #c9c9c9; }
      #login .parting .form ul.tool li:last-of-type {
        border: none; }
      #login .parting .form ul.tool li.profit i {
        font-size: 20px; }
      #login .parting .form ul.tool li a {
        display: block;
        padding: 0 20px;
        color: #000; }
        #login .parting .form ul.tool li a:hover {
          color: #ed2323; }
          #login .parting .form ul.tool li a:hover i {
            border-color: #ed2323; }
        #login .parting .form ul.tool li a i, #login .parting .form ul.tool li a span {
          display: inline-block;
          vertical-align: middle; }
        #login .parting .form ul.tool li a i {
          margin-right: 5px; }
      #login .parting .form ul.tool li .icon-user2 {
        font-size: 25px; }
      #login .parting .form ul.tool li .icon-question {
        width: 22px;
        height: 22px;
        border: 2px solid #000;
        border-radius: 50%;
        text-align: center;
        line-height: 18px;
        -webkit-transition: border 0.5s;
        -o-transition: border 0.5s;
        transition: border 0.5s; }
        #login .parting .form ul.tool li .icon-question:after {
          content: '?';
          font-style: normal;
          font-weight: bold; }

#login .sucess-box {
  display: none;
  padding: 50px;
  border: 5px solid #e5e5e5;
  color: #000;
  text-align: center; }
  .max-sm-size #login .sucess-box {
    padding: 30px; }
  #login .sucess-box .icon {
    display: inline-block;
    width: 65px;
    height: 65px;
    background: url("images/icon-lock.png") center no-repeat; }
  #login .sucess-box .icon2 {
    display: inline-block;
    width: 75px;
    height: 75px;
    background: url("images/icon-join.png") center no-repeat; }
  #login .sucess-box .button {
    margin-top: 30px; }
    .max-sm-size #login .sucess-box .button {
      margin-top: 20px; }

/* ==========================================================================
    member
 ==========================================================================*/
#member .where {
  margin-bottom: 0; }

#member .main .container {
  max-width: 1300px;
  padding-bottom: 50px; }

#member .welcome {
  color: #000;
  font-weight: bold;
  text-align: center; }
  .max-sm-size #member .welcome {
    font-size: 18px; }
  #member .welcome .level {
    font-size: 15px; }
  .max-sm-size #member .welcome .slogan {
    display: block; }

#member .container > .form {
  max-width: 1000px;
  margin: auto; }
  .max-sm-size #member .container > .form .button2 {
    width: auto;
    margin: 5px; }
  .max-xs-size #member .container > .form .button2 {
    width: 100%;
    margin: 5px 0; }

#member .word {
  text-align: center; }
  #member .word .total, #member .word .btn2 {
    display: inline-block;
    vertical-align: middle; }
  #member .word .total {
    margin: 5px 20px 5px 0;
    color: #000; }
    #member .word .total .number {
      padding: 0 5px;
      color: #ed2323;
      font-size: 22px;
      font-weight: bold; }
  #member .word i {
    padding: 0 5px;
    color: #9b9b9b;
    font-size: 22px; }
  #member .word.Lv1 i {
    color: #ffcc00; }
  #member .word.Lv2 i {
    color: #ff9c00; }
  #member .word.Lv3 i {
    color: #ff6000; }
  #member .word.Lv4 i {
    color: #ff000c; }

#member .scrollbarX {
  margin-bottom: 30px; }
  .min-md-size #member .scrollbarX .mCSB_container {
    width: auto !important; }
  .max-sm-size #member .scrollbarX .mCSB_container {
    width: auto !important; }
  #member .scrollbarX .table {
    margin-bottom: 0; }

#member ul.pro-list {
  max-width: 1050px;
  margin: auto; }
  .max-md-size #member ul.pro-list {
    margin: 30px -10px 0 -10px; }
  .max-sm-size #member ul.pro-list {
    margin-top: 20px; }
  #member ul.pro-list > li {
    width: 25%; }
    .max-sm-size #member ul.pro-list > li {
      width: 33.3%; }
    .max-xs-size #member ul.pro-list > li {
      width: 50%; }

#member .sequence {
  max-width: 200px;
  margin-left: auto; }
  .max-xs-size #member .sequence {
    width: 100%;
    max-width: none; }

#member .bottom-block {
  margin-top: 50px;
  padding-top: 30px;
  border-top: 1px solid #dadada; }

#member .activitys .member-nav {
  margin-bottom: 20px; }

#member .activitys .pro-list {
  max-width: none;
  margin: 0 -25px; }
  #member .activitys .pro-list li {
    width: 25%;
    padding: 10px 25px; }
    .max-lg-size #member .activitys .pro-list li {
      padding: 10px; }
    .max-md-size #member .activitys .pro-list li {
      width: 33.3%; }
    .max-sm-size #member .activitys .pro-list li {
      width: 50%; }
    .max-xs-size #member .activitys .pro-list li {
      width: 100%;
      padding: 10px 0; }
    #member .activitys .pro-list li a .pic {
      height: 250px; }
      .max-lg-size #member .activitys .pro-list li a .pic {
        height: 19vw; }
      .max-md-size #member .activitys .pro-list li a .pic {
        height: 26vw; }
      .max-sm-size #member .activitys .pro-list li a .pic {
        height: 40vw; }
      .max-xs-size #member .activitys .pro-list li a .pic {
        height: 80vw; }
      #member .activitys .pro-list li a .pic:after {
        content: '活動介紹'; }

#member .activitys .banner {
  margin: 50px 0; }
  .max-sm-size #member .activitys .banner {
    margin-top: 30px;
    margin-bottom: 20px; }
  #member .activitys .banner img {
    display: block;
    margin: auto; }

#member .activitys .content .top-title {
  margin-bottom: 30px;
  padding-bottom: 30px;
  text-align: center;
  border-bottom: 1px solid #dcdcdc; }
  .max-sm-size #member .activitys .content .top-title {
    margin-bottom: 20px;
    padding-bottom: 20px; }
  #member .activitys .content .top-title .brand, #member .activitys .content .top-title .name {
    display: inline-block;
    vertical-align: middle;
    font-size: 20px; }
    .max-sm-size #member .activitys .content .top-title .brand, .max-sm-size #member .activitys .content .top-title .name {
      display: block; }
  .min-sm-size #member .activitys .content .top-title .brand {
    margin-right: 10px;
    padding-right: 15px;
    border-right: 1px solid #dcdcdc;
    font-weight: bold; }
  #member .activitys .content .top-title .name {
    margin: 0;
    color: #000; }
  #member .activitys .content .top-title .time {
    margin-top: 20px; }
    .max-sm-size #member .activitys .content .top-title .time {
      margin-top: 10px; }

#member .activitys .content .apply {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #dcdcdc; }
  .max-sm-size #member .activitys .content .apply {
    margin-top: 20px;
    padding-top: 20px; }
  #member .activitys .content .apply .title {
    margin-top: 0;
    margin-bottom: 50px;
    text-align: center;
    color: #000; }
    .max-sm-size #member .activitys .content .apply .title {
      margin-bottom: 20px; }
  .max-sm-size #member .activitys .content .apply .button2 {
    width: auto;
    margin: 5px; }
  .max-xs-size #member .activitys .content .apply .button2 {
    width: 100%;
    margin: 5px 0; }

.top-info {
  margin-bottom: 20px;
  padding-right: 100px;
  position: relative;
  color: #000;
  line-height: 30px; }
  .max-xs-size .top-info {
    padding-right: 0; }
  .top-info .left {
    float: left; }
    .max-lg-size .top-info .left {
      float: none; }
  .top-info .right {
    float: right; }
    .max-lg-size .top-info .right {
      float: none; }
    .top-info .right ul li {
      display: inline-block;
      vertical-align: middle;
      margin-right: 20px; }
      .max-xs-size .top-info .right ul li {
        display: block;
        margin-right: 0; }
    .top-info .right .btn2 {
      min-width: 0;
      position: absolute;
      right: 0;
      top: 2px;
      border-width: 1px;
      line-height: 28px; }
      .max-xs-size .top-info .right .btn2 {
        width: 100%;
        margin-top: 15px;
        position: relative;
        top: 0;
        line-height: 33px; }

.member-nav {
  margin: 30px 0 50px 0;
  text-align: center; }
  .max-sm-size .member-nav {
    margin: 20px 0 30px 0; }
  .member-nav .tabs2 {
    margin: 0; }
    .max-sm-size .member-nav .tabs2 {
      display: none !important; }
    .member-nav .tabs2 ul li.hover a {
      color: #000; }
    .member-nav .tabs2 ul li:before {
      top: auto;
      bottom: 0; }
    .member-nav .tabs2 ul li a {
      padding-bottom: 20px; }
  .member-nav .tabs-content {
    background-color: #f7f7f7;
    border-top: 1px solid #d0d0d0; }
    .max-sm-size .member-nav .tabs-content {
      display: block !important;
      margin-bottom: 8px;
      background-color: transparent;
      border-top: none; }
      .max-sm-size .member-nav .tabs-content:last-of-type {
        margin-bottom: 0; }
      .max-sm-size .member-nav .tabs-content.show .toggle {
        background-color: #999999;
        color: #fff; }
        .max-sm-size .member-nav .tabs-content.show .toggle:after {
          border-top-color: #fff; }
      .max-sm-size .member-nav .tabs-content.show ul {
        border-color: #999999; }
    .member-nav .tabs-content .toggle {
      display: none;
      padding: 10px 15px;
      position: relative;
      color: #000;
      line-height: 20px;
      background-color: #ddd;
      cursor: pointer; }
      .max-sm-size .member-nav .tabs-content .toggle {
        display: block; }
      .member-nav .tabs-content .toggle:after {
        content: '';
        position: absolute;
        top: 45%;
        right: 10px;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #000; }
    .max-sm-size .member-nav .tabs-content ul {
      display: none;
      border: 1px solid #ddd; }
    .member-nav .tabs-content ul li {
      display: inline-block;
      vertical-align: middle;
      margin: 5px 10px; }
      .max-sm-size .member-nav .tabs-content ul li {
        display: block;
        margin: 0;
        border-bottom: 1px solid #ddd; }
        .max-sm-size .member-nav .tabs-content ul li:last-of-type {
          border: none; }
      .member-nav .tabs-content ul li a {
        display: block;
        padding: 10px;
        color: #999999; }
        .min-md-size .member-nav .tabs-content ul li a:hover {
          color: #666666; }
      .member-nav .tabs-content ul li.active a {
        color: #000;
        font-weight: bold; }
        .max-sm-size .member-nav .tabs-content ul li.active a {
          color: #ed2323; }

.table {
  color: #666; }

.member-table {
  margin: 30px 0;
  border-top: 1px solid #000; }
  .max-sm-size .member-table tr {
    display: block;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #e4e4e4; }
    .max-sm-size .member-table tr:first-of-type {
      display: none; }
    .max-sm-size .member-table tr:last-of-type {
      margin-bottom: 0; }
  .member-table th {
    min-width: 110px;
    padding: 10px;
    color: #000;
    font-weight: normal;
    background-color: #f6f6f6; }
    .max-md-size .member-table th {
      min-width: 100px;
      padding: 10px 5px; }
    .member-table th.width60 {
      width: 60%; }
  .member-table td {
    padding: 15px 10px;
    text-align: center;
    border-bottom: 1px solid #e4e4e4; }
    .max-md-size .member-table td {
      padding: 10px 5px; }
    .max-sm-size .member-table td {
      display: block;
      text-align: left;
      padding: 5px 0;
      border: none; }
      .max-sm-size .member-table td .hidden {
        display: inline-block !important;
        color: #000; }
    .member-table td.gray {
      color: #bababa; }
    .max-sm-size .member-table td.add-btn {
      width: auto;
      min-width: 0;
      padding: 0;
      position: absolute;
      right: 40px;
      top: 15px;
      z-index: 5; }
  .member-table .add-cart {
    display: inline-block;
    width: auto;
    height: auto;
    margin: auto;
    position: relative;
    right: 0;
    top: 0;
    color: #dddddd;
    font-size: 25px;
    cursor: pointer;
    -webkit-transition: color 0.5s;
    -o-transition: color 0.5s;
    transition: color 0.5s; }
    .member-table .add-cart:hover {
      color: #c3c3c3; }
    .member-table .add-cart.active {
      color: #000; }
  .member-table a.link {
    color: #666; }
    .member-table a.link:hover {
      color: #000;
      text-decoration: underline; }
  .member-table a.link2 {
    display: inline-block;
    vertical-align: bottom;
    margin: 0 10px;
    color: #cccccc;
    font-size: 26px; }
    .member-table a.link2:hover {
      color: #000; }

.book .back {
  display: table;
  margin-bottom: 30px;
  margin-left: auto;
  color: #ff9999;
  text-decoration: underline; }
  .book .back:hover {
    color: #ed2323; }

.book .note {
  margin-top: 9px; }

.book .block {
  margin-top: 30px;
  padding-top: 30px;
  color: #000;
  border-top: 1px solid #000; }
  .book .block:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border: none; }
  .book .block.add-info {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #000; }
  .book .block:after {
    content: '';
    display: block;
    clear: both; }
  .book .block .left-name {
    float: left;
    width: 160px;
    padding-top: 9px;
    font-weight: bold; }
    .max-sm-size .book .block .left-name {
      float: none;
      width: 100%;
      margin-bottom: 20px;
      padding-top: 0;
      font-size: 16px; }
    .book .block .left-name .same {
      margin-top: 10px;
      color: #8d8d8d;
      font-weight: normal; }
  .book .block .right-main {
    float: left;
    width: -moz-calc(100% - 160px);
    width: -webkit-calc(100% - 160px);
    width: calc(100% - 160px); }
    .max-sm-size .book .block .right-main {
      float: none;
      width: 100%; }
  .book .block .buttonBlock {
    margin-top: 20px;
    text-align: right; }
    .book .block .buttonBlock button {
      padding: 5px 10px;
      -webkit-transition: color 0.5s;
      -o-transition: color 0.5s;
      transition: color 0.5s; }
      .book .block .buttonBlock button:first-of-type {
        border-right: 1px solid #dadada; }
      .book .block .buttonBlock button:hover {
        color: #ed2323; }
  .book .block .form-control {
    height: 40px; }
  .book .block .dk_container a {
    line-height: 18px; }
  .book .block .form .group label.name {
    padding-top: 9px; }

.maintenance-form {
  margin-bottom: 50px; }
  .max-sm-size .maintenance-form .button2 {
    width: auto;
    margin: 5px; }
  .max-xs-size .maintenance-form .button2 {
    width: 100%;
    margin: 5px 0; }

.max-xs-size .maintenance-table tr {
  display: block;
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #dadada; }

.maintenance-table tr:last-of-type td {
  border: none; }

.maintenance-table td {
  padding: 10px;
  border-bottom: 1px solid #dadada; }
  .max-xs-size .maintenance-table td {
    display: block;
    padding: 0;
    border: none; }
    .max-xs-size .maintenance-table td .hidden {
      display: inline-block !important; }

.cancel-form {
  max-width: none !important; }
  .cancel-form .top-info {
    padding-right: 0; }
    .cancel-form .top-info .right ul li:last-of-type {
      margin-right: 0; }
  .cancel-form .box {
    padding: 30px 50px;
    border: 1px solid #e5e5e5; }
    .max-sm-size .cancel-form .box {
      padding: 30px 30px 10px 30px; }
  .cancel-form .title {
    color: #000;
    font-weight: bold;
    text-align: center; }
  .cancel-form .group label.name {
    width: 130px; }
  .cancel-form .group .right {
    width: -moz-calc(100% - 130px);
    width: -webkit-calc(100% - 130px);
    width: calc(100% - 130px); }

ul.notice-list {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #cccccc; }
  ul.notice-list > li {
    margin-bottom: 10px;
    padding-left: 30px;
    position: relative;
    color: #ff6666; }
    ul.notice-list > li:last-of-type {
      margin-bottom: 0; }
    ul.notice-list > li:before {
      content: '!';
      width: 30px;
      position: absolute;
      left: 0;
      top: 0;
      font-weight: bold;
      font-size: 20px;
      text-align: center; }
    ul.notice-list > li a {
      color: #ff6666; }
      ul.notice-list > li a:hover {
        text-decoration: underline; }

.return .cart-list {
  margin-top: 0; }

.return .top-info {
  padding-right: 0; }
  .return .top-info .right ul li:last-of-type {
    margin-right: 0; }

.return .list-table {
  min-width: 950px; }
  .max-sm-size .return .list-table {
    min-width: 0; }
  .return .list-table input[type="checkbox"], .return .list-table input[type="radio"] {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3); }
  .return .list-table label.radio {
    margin-right: 20px; }
    .max-sm-size .return .list-table label.radio:last-of-type {
      margin-right: 0; }
  .max-xs-size .return .list-table tr {
    padding-top: 20px; }
  .max-xs-size .return .list-table tr:last-of-type {
    border: none; }
  .return .list-table tr:last-of-type td {
    border: none; }
  .return .list-table .all-btn {
    min-width: 100px; }
  .max-sm-size .return .list-table td.reason {
    width: 100%; }
  .max-sm-size .return .list-table a.pro {
    margin-right: 0; }
  .max-sm-size .return .list-table a.pro .pic {
    top: 65px; }
  .max-xs-size .return .list-table a.pro .pic {
    top: 0; }

.return .book .block {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #000; }
  .return .book .block.notice {
    color: #8d8d8d; }
    .return .book .block.notice .title {
      color: #000;
      font-weight: bold; }
      .max-sm-size .return .book .block.notice .title {
        margin-bottom: 20px;
        font-size: 16px; }

.max-sm-size .return .book .button2 {
  width: auto;
  margin: 5px; }

.max-xs-size .return .book .button2 {
  width: 100%;
  margin: 5px 0; }

.reminder .info {
  margin-bottom: 50px;
  padding-bottom: 30px;
  border-bottom: 1px solid #000; }
  .max-sm-size .reminder .info {
    margin-bottom: 30px; }
  .reminder .info .title {
    margin-bottom: 20px;
    color: #000;
    font-weight: bold;
    font-size: 16px; }

.reminder .reminder-form {
  max-width: none !important; }
  .reminder .reminder-form label.name {
    width: 150px; }
  .reminder .reminder-form .right {
    width: -moz-calc(100% - 150px);
    width: -webkit-calc(100% - 150px);
    width: calc(100% - 150px); }

.reminder .member-table {
  margin-top: 50px; }

.service .member-table td {
  vertical-align: top; }

.service ul.list > li {
  margin-bottom: 10px; }
  .service ul.list > li:last-of-type {
    margin-bottom: 0; }
  .service ul.list > li:after {
    content: '';
    display: block;
    clear: both; }
  .service ul.list > li .date {
    float: left;
    width: 200px; }
    .max-md-size .service ul.list > li .date {
      width: 160px; }
    .max-sm-size .service ul.list > li .date {
      float: none;
      width: 100%; }
  .service ul.list > li .right {
    float: left;
    width: -moz-calc(100% - 200px);
    width: -webkit-calc(100% - 200px);
    width: calc(100% - 200px); }
    .max-md-size .service ul.list > li .right {
      width: -moz-calc(100% - 160px);
      width: -webkit-calc(100% - 160px);
      width: calc(100% - 160px); }
    .max-sm-size .service ul.list > li .right {
      float: none;
      width: 100%; }
  .min-sm-size .service ul.list > li.reply {
    color: #999; }

/* ==========================================================================
    notes
 ==========================================================================*/
#notes .parting {
  padding-bottom: 50px; }

/* ==========================================================================
    footer
 ==========================================================================*/
#footer {
  background-color: #00B0F0; position: relative;}
  #footer .service {
    padding-top: 50px;
    background-color: #f7f7f7; }
    .max-md-size #footer .service {
      padding-bottom: 50px; }
    .max-sm-size #footer .service {
      padding: 0; }
      .max-sm-size #footer .service .container {
        padding: 0; }
    #footer .service .forMobile {
      display: none; }
      .max-sm-size #footer .service .forMobile {
        display: block; }
    #footer .service ul.list {
      font-size: 0; }
      .max-sm-size #footer .service ul.list:first-of-type > li:first-of-type {
        border-top: none; }
      #footer .service ul.list > li {
        display: inline-block;
        vertical-align: top;
        width: 33.3%;
        margin-bottom: 50px;
        padding: 0 50px;
        text-align: center; }
        .max-md-size #footer .service ul.list > li {
          display: block;
          width: 100%; }
          .max-md-size #footer .service ul.list > li:last-of-type {
            margin-bottom: 0; }
        .max-sm-size #footer .service ul.list > li {
          display: block;
          width: 100%;
          margin-bottom: 0;
          padding: 0;
          text-align: left;
          border-top: 1px solid #e5e5e5; }
        #footer .service ul.list > li .toggle {
          display: block; }
          .max-sm-size #footer .service ul.list > li .toggle {
            padding: 0 50px 0 70px;
            position: relative;
            cursor: pointer; }
            .max-sm-size #footer .service ul.list > li .toggle:after {
              content: '\e824';
              position: absolute;
              right: 20px;
              top: 50%;
              bottom: auto;
              -webkit-transform: translateY(-50%);
              -ms-transform: translateY(-50%);
              transform: translateY(-50%);
              color: #7a7a7a;
              font-size: 20px;
              font-family: "fontello"; }
            .max-sm-size #footer .service ul.list > li .toggle.active:after {
              content: '\e81e'; }
          #footer .service ul.list > li .toggle .box {
            display: none;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2; }
            .max-sm-size #footer .service ul.list > li .toggle .box {
              display: block; }
          #footer .service ul.list > li .toggle .icon {
            width: 65px;
            margin: auto; }
            .max-sm-size #footer .service ul.list > li .toggle .icon {
              width: 35px;
              position: absolute;
              left: 20px;
              top: 50%;
              bottom: auto;
              -webkit-transform: translateY(-50%);
              -ms-transform: translateY(-50%);
              transform: translateY(-50%);
              -webkit-animation-name: fadeIn !important;
              animation-name: fadeIn !important; }
            #footer .service ul.list > li .toggle .icon img {
              display: block; }
          #footer .service ul.list > li .toggle .name {
            margin-bottom: 20px;
            color: #000; }
            .max-sm-size #footer .service ul.list > li .toggle .name {
              margin-bottom: 0;
              padding: 10px 0;
              font-size: 14px;
              line-height: 30px;
              -webkit-animation-name: fadeIn !important;
              animation-name: fadeIn !important; }
        #footer .service ul.list > li a.toggle {
          display: block; }
          #footer .service ul.list > li a.toggle span {
            display: block; }
          #footer .service ul.list > li a.toggle:after {
            content: normal !important; }
        #footer .service ul.list > li .summary {
          font-size: 14px;
          -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
          .min-sm-size #footer .service ul.list > li .summary {
            display: block !important; }
          .max-sm-size #footer .service ul.list > li .summary {
            display: none;
            padding: 0 50px 20px 70px;
            -webkit-animation-name: none;
            animation-name: none;
            visibility: visible !important; }
  #footer .info {
    padding: 50px 340px 0 0;
    position: relative;
    border-bottom: 1px solid #4d4d4d; }
    .max-md-size #footer .info {
      padding-bottom: 50px;
      padding-right: 0; }
    .max-sm-size #footer .info {
      padding: 30px 0; }
    .max-xs-size #footer .info {
      padding-bottom: 0;
      border-bottom: none; }
    #footer .info .fb-page {
      width: 340px;
      position: absolute;
      right: 0;
      top: 50px;
      z-index: 2;
      -webkit-animation-delay: 1s;
      animation-delay: 1s; }
      .max-md-size #footer .info .fb-page {
        display: table;
        margin: 30px auto 0 auto;
        position: relative;
        top: 0; }
      .max-sm-size #footer .info .fb-page {
        display: none; }
    #footer .info ul.sitemap {
      color: #706c6c;
      font-size: 0; }
      .max-md-size #footer .info ul.sitemap {
        max-width: 580px;
        margin: auto; }
      #footer .info ul.sitemap > li {
        display: inline-block;
        vertical-align: top;
        margin-right: 5px;
        margin-bottom: 50px;
        font-size: 14px; }
        .max-md-size #footer .info ul.sitemap > li {
          margin-right: 20px; }
          .max-md-size #footer .info ul.sitemap > li:last-of-type {
            margin-bottom: 0; }
        .max-sm-size #footer .info ul.sitemap > li {
          display: none;
          margin-right: 0; }
          .max-sm-size #footer .info ul.sitemap > li.contact {
            display: block;
            text-align: center; }
        #footer .info ul.sitemap > li:last-of-type {
          margin-right: 0; }
        #footer .info ul.sitemap > li .title {
          margin-bottom: 10px;
          color: #fff; }
          .max-sm-size #footer .info ul.sitemap > li .title {
            display: none; }
        #footer .info ul.sitemap > li a {
          color: #706c6c; }
          #footer .info ul.sitemap > li a:hover {
            color: #fff; }
        #footer .info ul.sitemap > li ul.sub {
          display: inline-block;
          vertical-align: top;
          margin-right: 30px; }
          .max-sm-size #footer .info ul.sitemap > li ul.sub {
            margin-right: 0; }
          #footer .info ul.sitemap > li ul.sub > li {
            margin-top: 5px; }
            #footer .info ul.sitemap > li ul.sub > li span {
              padding-right: 10px; }
              .max-sm-size #footer .info ul.sitemap > li ul.sub > li span {
                display: block;
                padding-right: 0; }
            #footer .info ul.sitemap > li ul.sub > li ul {
              display: inline-block;
              vertical-align: top;
              margin-left: -4px; }
  #footer .bottom {
    padding: 20px 0 30px 0;
    color: #949494;
    font-size: 14px; }
    .max-md-size #footer .bottom {
      text-align: center; }
    #footer .bottom ul li {
      display: inline-block;
      vertical-align: middle; }
    #footer .bottom .left {
      float: left; }
      .max-md-size #footer .bottom .left {
        float: none; }
      .max-xs-size #footer .bottom .left {
        margin-top: 20px;
        padding-top: 50px;
        position: relative; }
      #footer .bottom .left ul {
        display: inline-block;
        vertical-align: middle; }
        .max-xs-size #footer .bottom .left ul {
          display: block; }
        #footer .bottom .left ul li {
          margin-right: 10px; }
          #footer .bottom .left ul li a {
            color: #6c6c6c; }
            #footer .bottom .left ul li a:hover {
              text-decoration: underline; }
      .max-sm-size #footer .bottom .left ul.follow {
        margin-top: 20px; }
      .max-xs-size #footer .bottom .left ul.follow {
        display: block;
        width: 100%;
        margin-top: 0;
        position: absolute;
        top: 0; }
      #footer .bottom .left ul.follow li {
        margin-right: 3px; }
        #footer .bottom .left ul.follow li a {
          opacity: 0.3;
          -webkit-transition: opacity 0.5s;
          -o-transition: opacity 0.5s;
          transition: opacity 0.5s; }
          .max-sm-size #footer .bottom .left ul.follow li a {
            opacity: 1; }
          #footer .bottom .left ul.follow li a i {
            color: #949494;
            font-size: 26px;
            line-height: 30px;
            -webkit-transition: color 0.5s;
            -o-transition: color 0.5s;
            transition: color 0.5s; }
            .max-sm-size #footer .bottom .left ul.follow li a i {
              font-size: 35px; }
          .min-md-size #footer .bottom .left ul.follow li a:hover {
            opacity: 1; }
    #footer .bottom .right {
      float: right; }
      .max-md-size #footer .bottom .right {
        float: none; }
      #footer .bottom .right ul li {
        padding-right: 20px;
        position: relative; }
        #footer .bottom .right ul li:after {
          content: '';
          display: block;
          width: 1px;
          height: 14px;
          margin-top: -7px;
          position: absolute;
          right: 9px;
          top: 50%;
          background-color: #949494; }
        #footer .bottom .right ul li:last-of-type {
          padding-right: 0; }
          #footer .bottom .right ul li:last-of-type:after {
            content: normal; }
        #footer .bottom .right ul li a {
          color: #949494; }
          #footer .bottom .right ul li a:hover {
            color: #fff; }

.min-md-size .mobileToolContainer {
  display: none; }

.mobileToolContainer .toolBoxRight {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 100;
  -webkit-transition: right 0.5s ease-in-out 0.2s, -webkit-transform 0.5s ease-in-out 0.2s;
  transition: right 0.5s ease-in-out 0.2s, -webkit-transform 0.5s ease-in-out 0.2s;
  -o-transition: right 0.5s ease-in-out 0.2s, transform 0.5s ease-in-out 0.2s;
  transition: right 0.5s ease-in-out 0.2s, transform 0.5s ease-in-out 0.2s;
  transition: right 0.5s ease-in-out 0.2s, transform 0.5s ease-in-out 0.2s, -webkit-transform 0.5s ease-in-out 0.2s; }
  .mobileToolContainer .toolBoxRight.open {
    -webkit-transition: right 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    transition: right 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    -o-transition: right 0.3s ease-in-out, transform 0.3s ease-in-out;
    transition: right 0.3s ease-in-out, transform 0.3s ease-in-out;
    transition: right 0.3s ease-in-out, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    right: 0;
    -webkit-transform: translate(100%);
    -ms-transform: translate(100%);
    transform: translate(100%); }
  .mobileToolContainer .toolBoxRight .toolBtn {
    width: 40px;
    height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer; }
  .mobileToolContainer .toolBoxRight .toolBtn + .toolBtn {
    margin-top: 5px; }
  .mobileToolContainer .toolBoxRight .openlistBtn {
    background-color: #000; }
    .mobileToolContainer .toolBoxRight .openlistBtn .icon:before {
      color: #fff; }
  .mobileToolContainer .toolBoxRight .backtop {
    background-color: #fff; }

.mobileToolContainer .toolBoxBottom {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  padding-top: 40px;
  z-index: 5;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  -o-transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; }
  .mobileToolContainer .toolBoxBottom:not(.open) {
    -webkit-transition: -webkit-transform 0.5s ease-in-out 0.2s;
    transition: -webkit-transform 0.5s ease-in-out 0.2s;
    -o-transition: transform 0.5s ease-in-out 0.2s;
    transition: transform 0.5s ease-in-out 0.2s;
    transition: transform 0.5s ease-in-out 0.2s, -webkit-transform 0.5s ease-in-out 0.2s;
    -webkit-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    transform: translate(0, 100%); }
  .mobileToolContainer .toolBoxBottom:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 60px;
    width: 100%;
    background-color: #000; }
  .mobileToolContainer .toolBoxBottom .toolList {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 60px;
    width: 100%;
    max-width: 360px;
    margin: 0 auto; }
  .mobileToolContainer .toolBoxBottom .toolList .toolBtn {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
    .mobileToolContainer .toolBoxBottom .toolList .toolBtn .icon:before {
      color: #fff;
      font-size: 20px; }
    .mobileToolContainer .toolBoxBottom .toolList .toolBtn span {
      color: #fff;
      font-size: 14px; }
  .mobileToolContainer .toolBoxBottom .closeBtn {
    position: absolute;
    right: 10px;
    top: 0;
    cursor: pointer;
    border-radius: 50%;
    background-color: #000;
    width: 30px;
    height: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    .mobileToolContainer .toolBoxBottom .closeBtn:before {
      color: #fff; }
      #mobile_search{
        height:0;
        width:0;
      }
@media screen and (max-width:991px){
  #mobile_search{
    position: absolute;
    top: 60px;
    width: 100%;
    background: #ccc;
    height: 50px;
    display:none;
  }
  #mobile_search .search form{
    padding: 10px 0; max-width:300px; margin:auto; position:relative;
  }
  #mobile_search .search form input{
    width: 100%;
    border:1px #000 solid;
    padding:5px;
  }
  #mobile_search .search form button{
    position:absolute; right:10px; top: 15.5px;
  }
}


@media screen and (max-width:480px) {
  #home .banner .left_button{left:20px;}
  #home .banner .right_button{right:20px;}
  #home .banner .slick-dots{top:-15px;}
}

/* 購物車-隱賣不出貨字樣-預設手機版 -by Billy 2020-09-24 */
.mobile_noship{
    margin-left:5px;
}
/* 購物車-隱賣不出貨字樣-寬度大於480就是電腦版 */
@media only screen and (min-width:480px) {
    .mobile_noship{
        display:none;
    }    
}

.BlockHide{
    display:none;
}
.BlockShow{
    display:block;
}
.TxtShow{
    display:initial;
}

/* 自適應調整影片 -by Billy 2019-10-16 */
iframe{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
}

/* 保固贈品-按鈕顏色調整-紅底白字 -by Billy 2020-10-15 */
.giftSubmit{
    background-color:#cc0000;
    color:#FFFFFF;
}

@media screen and (min-width:1000px) {
    /* 產品內頁-美安導購顯示-menu */
    .marketProductHeight{
        height: 100px;
    }
    .marketProductHeight a{
        display: inline-block;
        position: relative;
        margin-top: 35px;
        padding: 8px 50px;
        border-radius: 20px;
        font-style: normal;
        color: #fff;
        background: #d3003b;
    }
    .marketProduct{
        display:none;
    }
}

/* 手機版:max 400px以下 */
@media screen and (max-width:400px){
    .cart-list form .list-table tr{width:330px;}
    .cart-list form .list-table td div {width:330px;}
    .cart-list form .list-table td div .current .subject{width:240px;word-break:normal;display:block;white-space:pre-wrap;overflow:hidden;}
    .cart-list form .list-table td div .option .subject{width:150px;word-break:normal;display:block;white-space:pre-wrap;overflow:hidden;}
    .cart-list form .list-table td div .option .im-checkmark{margin-right: 20px;}
    
    .promotion div .current .subject{width:240px;word-break:normal;display:block;white-space:pre-wrap;overflow:hidden;}
    .promotion .option .subject{width:150px;word-break:normal;display:block;white-space:pre-wrap;overflow:hidden;}
    .promotion .option .im-checkmark{margin-right: 20px;}
}