@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
* {
    font-family: 'Noto Sans TC';
}


html {
  background-color: #e6e6e6;

  font-size: 18px;
  font-family: 'Noto Sans TC';
}

body {
  font-family: 'Noto Sans TC';
}

#header{
  height: 50px;
  background-color: #efefef;
  font-family: 'Noto Sans TC';
}

#content{
  font-family: 'Noto Sans TC';
 
}

.footer{
  background-color: #262626;
  font-family: 'Noto Sans TC';
}


.uk-padding-small{
  padding:10px;
}

ul > li { 
  margin:0px;
  padding:0px;
  line-height: 22px;
  font-family: 'Noto Sans TC';
}

p {
   font-size: 16px;
   line-height: 23px;
   font-weight: normal;
   font-family: 'Noto Sans TC';
}

    @media screen and (min-width:374px) { 
      p {
         font-size: 17px;
         line-height: 22px;
      }
    }

    @media screen and (min-width:413px) { 
      p {
         font-size: 18px;
         line-height: 26px;
      }
    }


    @media screen and (min-width:767px) { 
      p {
         font-size: 20px;
         line-height: 28px;
      }
     
    }





.uk-icon-image {
  margin-top: -3px;
}
.uk-icon-image-read {
  margin-top: -5px;
}


#datepicker, #datepicker2{
  font-size: 16px;
  line-height: 36px;
  font-family: 'Noto Sans TC';

}



/* Focus */
.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
  outline: none;
  background-color: #fff;
  border-color: #00B2AC;
  -webkit-text-fill-color: #666;
  cursor: #00B2AC;
  font-family: 'Noto Sans TC';
}

.event-text {
  font-size: 15px;
  font-family: 'Noto Sans TC';
  line-height: 20px;
}
   @media screen and (min-width:374px) { 
      .event-text {
        font-size: 18px;
        line-height: 24px;
      }
    }

    @media screen and (min-width:413px) { 
      .event-text {
        font-size: 20px;
        line-height: 28px;
      }
    }


    @media screen and (min-width:767px) { 
      
     
    }




/* navigation 導航
 ========================================================================== */

.uk-navbar-container {
  font-family: 'Noto Sans TC';

}


.nevigation {
  position: relative; 
  z-index: 980; 
  font-family: 'Noto Sans TC';
  
  border-bottom: 1px solid #d9d9d9;
  box-shadow: 0px 0px 2px rgba(0,0,0,.2);
  background-color: #fff;
}

ul.uk-navbar-nav { 

}
ul.uk-navbar-nav > li { 
  margin:0px;
  padding:0px;
  font-family: 'Noto Sans TC';
}
ul.uk-navbar-nav > li > a { 
  padding:0px;
  width: 50px;
  height: 50px;
  font-family: 'Noto Sans TC';

}



.icon-search, .icon-cart {

  color: #8c8c8c;
}
.icon-search:hover, .icon-cart:hover, .icon-search:focus, .icon-cart:focus {
  color: #8c8c8c;
}
.icon-nevigation {
  color: #00B2AC;
}
.icon-nevigation:hover, .icon-nevigation:focus {
  color: #00B2AC;
}


.icon-cart {
  position: relative;
}


.cart-badge {
  position: absolute;
  top:10px;
  left: 20px;
  padding:1px;
  font-size: 10px;
  font-family: 'Noto Sans TC';
  background-color: #cc0000;


}





/* slideshow
 ========================================================================== */

.uk-slideshow-nav {
  font-family: 'Noto Sans TC';

}







    /* uk-offcanvas 右邊選單 */

    .uk-offcanvas-bar {
        padding: 20px 0px 0px 0px;
        background: #fff;
        font-family: 'Noto Sans TC';
        color: #000;
    }
    .uk-offcanvas-overlay::before {

        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.7);
        opacity: 0;
        transition: opacity .15s linear;

    }


    #search-close {
      position: absolute;
      z-index: 999px;
        color: #a6a6a6;
        background-color: #efefef;
        border-radius: 50%;
        right:10px;
        top:10px;

    }

    .uk-form-icon-flip {
    right: 10px;
    top:10px;
    }


    .uk-card-primary.uk-card-body .uk-nav-default > li > a, .uk-card-primary > :not([class*="uk-card-media"]) .uk-nav-default > li > a, .uk-card-secondary.uk-card-body .uk-nav-default > li > a, .uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav-default > li > a, .uk-light .uk-nav-default > li > a, .uk-offcanvas-bar .uk-nav-default > li > a, .uk-overlay-primary .uk-nav-default > li > a, .uk-section-primary:not(.uk-preserve-color) .uk-nav-default > li > a, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-default > li > a, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-default > li > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default > li > a {
        font-size: 18px;
        font-family: 'Noto Sans TC';
        line-height: 28px;
        color: #595959;
    }

    .uk-card-primary.uk-card-body .uk-nav-default > li > a:focus, .uk-card-primary.uk-card-body .uk-nav-default > li > a:hover, .uk-card-primary > :not([class*="uk-card-media"]) .uk-nav-default > li > a:focus, .uk-card-primary > :not([class*="uk-card-media"]) .uk-nav-default > li > a:hover, .uk-card-secondary.uk-card-body .uk-nav-default > li > a:focus, .uk-card-secondary.uk-card-body .uk-nav-default > li > a:hover, .uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav-default > li > a:focus, .uk-card-secondary > :not([class*="uk-card-media"]) .uk-nav-default > li > a:hover, .uk-light .uk-nav-default > li > a:focus, .uk-light .uk-nav-default > li > a:hover, .uk-offcanvas-bar .uk-nav-default > li > a:focus, .uk-offcanvas-bar .uk-nav-default > li > a:hover, .uk-overlay-primary .uk-nav-default > li > a:focus, .uk-overlay-primary .uk-nav-default > li > a:hover, .uk-section-primary:not(.uk-preserve-color) .uk-nav-default > li > a:focus, .uk-section-primary:not(.uk-preserve-color) .uk-nav-default > li > a:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-default > li > a:focus, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-default > li > a:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-default > li > a:focus, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-default > li > a:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default > li > a:focus, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default > li > a:hover {
        color: #595959;
        font-family: 'Noto Sans TC';
    }

    li.uk-nav-header {
      display: block;
      width:100%;
      background-color: #e6e6e6;
      font-family: 'Noto Sans TC';
      margin-top: 10px;
      margin-bottom: 10px;
      

    }

    h3.menu-title {
      margin:0px;
      padding:0px;
      display: block;
      width:90%;
      line-height: 35px;
      height: 35px;
      font-size: 20px;
      font-family: 'Noto Sans TC';
      font-weight: 500;
      padding-left: 20px;
      color: #595959;


    }












    /* search-canvas 搜尋卡片 */

    .search-canvas {
      margin-top: 51px;
      width: 100%;
      height: 130px;
      font-family: 'Noto Sans TC';
    }

    #search-input  {
      width: 100%;
      font-size: 15px;
      font-family: 'Noto Sans TC';
          color: #a6a6a6;
          background-color: #f2f2f2;
          border: 1px solid #d9d9d9;
    }
    

    #search-input::placeholder  {
      font-size: 15px;
      font-family: 'Noto Sans TC';
          color: #a6a6a6;
    }


















/* card 卡片
 ========================================================================== */
.uk-card-default {
  margin: 0px auto;
  border: 1px solid #d9d9d9;
  box-shadow: 0 0px 0px rgba(0,0,0,.08);
  font-family: 'Noto Sans TC';
 

}


h3.card-title {
  font-weight: 500;
  font-size: 20px;
  font-family: 'Noto Sans TC';
  color: #cc0000;
  line-height: 22px;
  border-left: 3px solid #cc0000;
  padding-left: 8px;
  letter-spacing: 0px;
}

a.card-more {
  color: #00B2AC;
  font-family: 'Noto Sans TC';
}



.book-feature {
  padding: 2px;
  background: #00B2AC;
  font-size: 12px;
  line-height: 15px;
  font-family: 'Noto Sans TC';
  color: #fff;
  vertical-align: middle;
  white-space: nowrap;
  border-radius: 2px;
  text-transform: uppercase;
}

a.book-feature-icon {
  display: block;
  height: 16px;
  font-size: 11px;
  line-height: 16px;
  font-family: 'Noto Sans TC';
  color: #fff;
  text-decoration: none;
  padding-left: 3px;
  padding-right: 3px;
}

.book-category {
  padding: 2px;
  color: #00B2AC;
  font-size: 12px;
  font-family: 'Noto Sans TC';
  line-height: 18px;
  background-color: #fff;
  border: 1px solid #00B2AC;
}

.book-category-r {
  float: right;
}


a.book-category-icon {
  display: block;
  height: 18px;
  font-size: 12px;
  font-family: 'Noto Sans TC';
  line-height: 18px;
  color: #00B2AC;
  text-decoration: none;
  padding-left: 3px;
  padding-right: 3px;
  float: left;
  background-color: #fff;
  border: 1px solid #00B2AC;
}

span.bicon {
  margin:0px auto;
  padding:0px;
  width: 14px;
  height: 14px;
  margin-top: -2px;
}

span.bicons {
  margin:0px auto;
  padding:0px;
  width: 13px;
  height: 14px;
  margin-top: -2px;
}


.card-breadcrumb-payment, .card-breadcrumb-list{
  display: block; 
  height: 18px;
  font-size: 13px;
  font-family: 'Noto Sans TC';
  line-height: 20px;
  color: #00B2AC;
  letter-spacing: -1px;
  text-decoration: none;
  padding-left: 3px;
  padding-right: 3px;
  float: left;
}

.card-breadcrumb-payment:hover, .card-breadcrumb-list:hover {
  color: #00B2AC;
  text-decoration: none;
}

.card-breadcrumb-payment-unactive, .card-breadcrumb-list-unactive {
  display: block;
  height: 18px;
  font-size: 12px;
  font-family: 'Noto Sans TC';
  line-height: 20px;
  color: #a6a6a6;
  text-decoration: none;
  padding-left: 3px;
  padding-right: 3px;
  float: left;
}
.card-breadcrumb-payment-unactive:hover, .card-breadcrumb-list-unactive:hover  {
  color: #a6a6a6;
  text-decoration: none;
}

a.book-fillter {
  font-size: 12px;
  font-family: 'Noto Sans TC';
  line-height: 14px;
  color: #999;
  margin-right: 10px;
  text-decoration: none;
}





    @media screen and (min-width: 359px) and (max-width: 384px)  { 
      a.book-feature-icon {
        height: 18px;
        font-size: 14px;
        line-height: 18px;
      }
      a.book-category-icon {
         height: 20px;
         font-size: 15px;
         line-height: 20px;
      }
      span.bicon {
         margin-top: -2px;
      }
      .card-breadcrumb {
        font-size: 13px;
      }
      .card-breadcrumb-unactive {
        font-size: 13px;
      }
      .card-breadcrumb-payment, .card-breadcrumb-list{
        height: 22px;
        font-size: 15px;
        line-height: 22px;
      }

      .card-breadcrumb-payment-unactive, .card-breadcrumb-list-unactive {
        height: 22px;
        font-size: 15px;
        line-height: 22px;
      }
      a.book-fillter {
        font-size: 15px;
        line-height: 18px;
      }

    }

    @media screen and (min-width:412px) { 
      a.book-feature-icon {
        height: 20px;
        font-size: 17px;
        line-height: 20px;
      }
      a.book-category-icon {
         height: 22px;
         font-size: 17px;
         line-height: 22px;
         padding-left: 5px;
         padding-right: 5px;
      }
      span.bicon {
         width: 18px;
         height: 18px;
         margin-top: -2px;
      }
      .card-breadcrumb {
        font-size: 17px;
      }
      .card-breadcrumb-unactive {
        font-size: 17px;
      }

      .card-breadcrumb-payment, .card-breadcrumb-list{
        font-size: 17px;
        height: 25px;
        line-height: 25px;
        padding-left: 5px;
        padding-right: 5px;
      }

      .card-breadcrumb-payment-unactive, .card-breadcrumb-list-unactive {
        font-size: 17px;
        height: 25px;
        line-height: 25px;
        padding-right: 5px;
      }
      a.book-fillter {
        font-size: 17px;
        line-height: 20px;
      }

    }


    @media screen and (min-width:767px) { 
      a.book-feature-icon {
        height: 26px;
        font-size: 20px;
        line-height: 26px;
      }
      a.book-category-icon {
         height: 26px;
         font-size: 20px;
         line-height: 26px;
         padding-left: 5px;
         padding-right: 5px;
      }
      span.bicon {
         width: 20px;
         height: 20px;
         margin-top: -3px;
      }

      .card-breadcrumb-payment, .card-breadcrumb-list{
        font-size: 20px;
        height: 27px;
        line-height: 27px;
        padding-right: 5px;
      }

      .card-breadcrumb-payment-unactive, .card-breadcrumb-list-unactive {
        font-size: 20px;
        height: 27px;
        line-height: 27px;
        padding-right: 5px;
      }
      a.book-fillter {
        font-size: 20px;
        line-height: 22px;
      }
     
    }





a.book-card-body-title {
  margin: 0px;
  padding: 0px;
  display: block;
  min-height: 20px;
  max-height: 32px;
  width: 100%;
  font-size: 16px;
  font-family: 'Noto Sans TC';
  line-height: 23px;
  font-weight: 400;
  color: #cc0000;
  text-decoration: underline;
  padding-top: 0px;
  padding-bottom: 10px;
  /*多行文字限制*/
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}



.uk-button {
  padding: 2px 5px 2px 5px;
  font-family: 'Noto Sans TC';
}



.button-a {
  font-size: 13px;
  font-weight: 500;
  font-family: 'Noto Sans TC';
  width: 100%;
  color: #fff;
  background-color: #ff4d4d;
  border: 1px solid #e60000;
  box-shadow: 0 0px 3px rgba(0,0,0,.3);
  border-radius: 2px;
  text-decoration: none;
}

.button-a:hover {
  color: #fff;
}


.button-b {
  font-size: 13px;
  font-weight: 500;
  font-family: 'Noto Sans TC';
  width: 100%;
  color: #e60000;
  background-color: #fff;
  border: 1px solid #e60000;
  box-shadow: 0 0px 3px rgba(0,0,0,.3);
  border-radius: 2px;
  text-decoration: none;
  
}

.button-b:hover {
  color: #e60000;
}


.button-c {
  font-size: 13px;
  font-weight: 500;
  font-family: 'Noto Sans TC';
  width: 100%;
  color: #fff;
  background-color: #737373;
  border: 1px solid #4d4d4d;
  box-shadow: 0 0px 3px rgba(0,0,0,.3);
  border-radius: 2px;
  text-decoration: none;
  
}
.button-c:hover {
  color: #fff;
}



.button-d {
  display: block;
  font-size: 15px;
  line-height: 40px;
  font-family: 'Noto Sans TC';
  font-weight: 500;
  width: 100%;
  height: 45px;
  color: #333333;
  background-color: #fff;
  border: 1px solid #333333;
  text-decoration: none;
  
}

.button-d:hover {
  color: #333333;
}


.button-e {
  display: block;
  font-size: 15px;
  line-height: 40px;
  font-family: 'Noto Sans TC';
  font-weight: 500;
  width: 100%;
  height: 45px;
  color: #fff;
  background-color: #333333;
  border: 1px solid #cccccc;
  text-decoration: none;
  
}

.button-e:hover {
  color: #fff;

}

.button-f {
  font-size: 18px;
  font-weight: 500;
  font-family: 'Noto Sans TC';
  width: 100%;
  color: #737373;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 0px 3px rgba(0,0,0,.2);
  border-radius: 2px;
  text-decoration: none;
  
}
.button-f:hover {
  color: #737373;
}



.button-store {
  font-size: 13px;
  font-weight: 500;
  font-family: 'Noto Sans TC';
  width: 100%;
  color: #fff;
  background-color: #ff4d4d;
  border: 1px solid #e60000;
  box-shadow: 0 0px 3px rgba(0,0,0,.3);
  border-radius: 2px;
  text-decoration: none;
  text-align: left;
  padding-left: 10px;
  padding-right: 10px;
}

.button-store:hover {
  color: #fff;
}

.button-same {
  font-size: 15px;
  font-weight: 500;
  font-family: 'Noto Sans TC';
  width: 100%;
  color: #e60000;
  background-color: #fff;
  border: 1px solid #e60000;
  box-shadow: 0 0px 3px rgba(0,0,0,.3);
  border-radius: 2px;
  text-decoration: none;
  text-align: left;
  padding-left: 10px;
  padding-right: 10px;
  
}

.button-same:hover {
  color: #e60000;
}

.fa-check {
  font-size: 15px;
  font-family: 'Noto Sans TC';
  margin-top: 5px;
  float: right;
}

.fa-angle-right {
  font-size: 22px;
  font-family: 'Noto Sans TC';
  margin-top: 3px;
  float: right;
}



.fa-angle-down {
  font-size: 22px;
  font-family: 'Noto Sans TC';
  margin-top: 3px;
  float: right;
}


    @media screen and (min-width:374px) { 
      .button-a {
        font-size: 15px;
      }
      .button-b {
        font-size: 15px;
      }
      .button-c {
        font-size: 15px;
      }
      .button-f {
        font-size: 15px;
      }
      .button-store {
        font-size: 15px;
      }
      .button-same {
        font-size: 15px;
      }
     
    }

    @media screen and (min-width:413px) { 
      .button-a {
        font-size: 18px;
      }
      .button-b {
        font-size: 18px;
      }
      .button-c {
        font-size: 18px;
      }
      .button-f {
        font-size: 18px;
      }
      .button-store {
        font-size: 18px;
      }
      .button-same {
        font-size: 16px;
      }
      
    }


    @media screen and (min-width:767px) { 
      
    }










small {
  margin:0px;
  display: block;
  color: #8c8c8c;
  line-height: 18px;
  padding-bottom: 15px;
  clear: both;

}

.store-map {
  line-height: 28px;
}

.uk-text-red {
  color: #cc0000;
}
.uk-text-red:hover {
  color: #cc0000;
}

.uk-text-gray {
  font-size:12px;
  font-family: 'Noto Sans TC';
  line-height: 13px;
  color: #ababab;

}

.uk-text-gray-bold {
  font-size:17px;
  font-family: 'Noto Sans TC';
  float: right;
  color: #666;

}

.price-total {
  display: block;width: 100%; height:70px;
}

.price-total-box {
  display: block;width: 150px; float: right;
}


 div.ordertetail {
  margin: 0px auto;
  padding:0px;
  width: 100%;
  font-size: 15px;
  font-family: 'Noto Sans TC';
  line-height: 35px;
  font-weight: 500;
  color: #000;
  text-align: right;
  text-decoration: none;


}

.label-a {
  padding: 0px 5px;
  font-size: 11px;
  font-family: 'Noto Sans TC';
  width: 35px;
  height: 18px;
  line-height: 18px;
  color: #737373;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 2px;
  text-decoration: none;
}

.label-b {
  padding: 0px 5px;
  font-size: 11px;
  font-family: 'Noto Sans TC';
  width: 35px;
  height: 18px;
  line-height: 18px;
  color: #cc0000;
  background-color: #fff;
  border: 1px solid #cc0000;
  border-radius: 2px;
  text-decoration: none;
}



.order-totald {

  padding: 0px 5px;
  font-size: 11px;
  font-family: 'Noto Sans TC';
  width: 35px;
  height: 18px;
  line-height: 18px;
  color: #737373;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 1px;
  text-decoration: none;
  
}







    /* book-card-straight 直式卡片書 */

    div.listprice-box {
      min-height: 110px;
      border-bottom: 1px solid #e6e6e6;
    }

    .book-card-straight {
      margin: 0px 5px 5px 5px;

      background-color: #fff;
      border-bottom: 1px solid #e6e6e6;
    }


    .book-card-small {
      padding:5px;
    }



    div.book-card-img {
      margin: 0px auto;
      padding:0px;

      border: 1px solid #e6e6e6;
    }

    img.bookimg {
      margin: 0px auto;
      padding:0px;
      width: 100%;
      max-width: 280px;
    }

    a.book-card-title {
      margin: 0px;
      padding: 0px;
      display: block;
      min-height: 20px;
      max-height: 44px;
      width: 100%;
      font-size: 18px;
      font-family: 'Noto Sans TC';
      line-height: 23px;
      font-weight: 400;
      color: #404040;
      text-decoration: none;
      padding-top: 3px;
      padding-bottom: 3px;
      /*多行文字限制*/
      overflow : hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    @media screen and (min-width:374px) { 
     
     


    }

    @media screen and (min-width:413px) { 
     

    }


    @media screen and (min-width:767px) { 
  


    }








    div.uk-card-author {
      display: block;
      height: 16px;
      width: 100%;
      margin: 0px;
      padding: 0px;
      font-size: 15px;
      font-family: 'Noto Sans TC';
      line-height: 16px;
      color: #a6a6a6;
      margin-bottom: 30px;
      /*多行文字限制*/
      overflow : hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }


    


    div.book-card-listprice-sale {
      font-size: 11px;
      line-height: 12px;
      margin-bottom: 25px;
    }

    div.book-card-listprice-box {
      font-size: 11px;
      line-height: 12px;

      color: #999;
    }


    span.stire {
      text-decoration: line-through;
    }

    div.book-card-sales {
      font-size: 11px;
      line-height: 12px;
    }

    div.book-card-sales > span {
      color: #b30000;
    }

    div.book-card-sales2 {
      font-size: 16px;
      line-height: 16px;
      margin-left: -10px;
    }

    div.book-card-sales2 > span {
      color: #b30000;
    }




    div.book-card-price {
      float: right;
      font-size: 10px;
      line-height: 12px;
    }
    div.book-card-price > span {
      font-size: 16px;
      font-weight: 500;
      color: #b30000;
    }

    @media screen and (min-width:374px) { 
      div.book-card-listprice-box {
        font-size: 14px;
        line-height: 20px;
      }
      div.book-card-sales {
        font-size: 16px;
      }
      div.book-card-price {
        font-size: 15px;
      }
      div.book-card-price > span {
        font-size: 18px;
  
      }
    }

    @media screen and (min-width:413px) { 
      div.book-card-listprice-box {
        font-size: 15px;
        line-height: 22px;
      }
     
    }


    @media screen and (min-width:767px) { 

      div.uk-card-author {
        font-size: 18px;
        line-height: 18px;
        height: 18px;
        margin-bottom: 50px;
      }
      div.listprice-box {
        min-height: 120px;
      }
      div.book-card-listprice-box {

        font-size: 20px;
        line-height: 24px;

      }
      div.book-card-sales {
        font-size: 20px;
        line-height: 16px;

      }
      div.book-card-price {
        font-size: 20px;
        line-height: 16px;
      }
      div.book-card-price > span {
        font-size: 32px;
  
      }
    }

    .uk-margin-large-bottom {
        margin-bottom: 40px !important;
    }








    /* book-card-landscape 橫式卡片書 */
    .book-card-landscape-box {
      padding-bottom: 5px;

      
    }

    .book-card-landscape {
      margin: 0px 5px 0px 5px;
      min-height: 140px;

    }

    a.book-card-landscape-title {
      margin: 0px;
      padding: 0px;
      display: block;
      min-height: 20px;
      max-height: 70px;
      width: 100%;
      font-size: 18px;
      font-family: 'Noto Sans TC';
      line-height: 25px;
      font-weight: 400;
      color: #404040;
      text-decoration: none;
      padding-top: 0px;
      padding-bottom: 5px;

      /*多行文字限制*/
      overflow : hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }

    div.uk-card-landscape-author, div.uk-card-landscape-publisher {
      display: block;
      height: 15px;
      width: 100%;
      margin: 0px;
      padding: 0px;
      font-size: 14px;
      font-family: 'Noto Sans TC';
      line-height: 15px;
      color: #a6a6a6;
      margin-top: 2px;
      margin-bottom: 2px;
      /*多行文字限制*/
      overflow : hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }

    div.uk-card-landscape-intro {
      margin: 0px;
      padding: 0px;
      display: block;
      min-height: 20px;
      max-height: 80px;
      width: 100%;
      margin: 0px;
      padding: 0px;
      font-size: 14px;
      font-family: 'Noto Sans TC';
      line-height: 20px;
      color: #a6a6a6;
      margin-bottom: 2px;
      /*多行文字限制*/
      overflow : hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical;
    }

    a.book-card-newstitle {
      margin: 0px;
      padding: 0px;
      display: block;
      min-height: 20px;
      max-height: 60px;
      width: 100%;
      font-size: 18px;
      font-family: 'Noto Sans TC';
      line-height: 23px;
      font-weight: 400;
      color: #404040;
      text-decoration: none;
      padding-top: 0px;
      /*多行文字限制*/
      overflow : hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;

    }






    div.book-card-listprice {
      font-size: 11px;
      font-family: 'Noto Sans TC';
      line-height: 12px;
      margin-bottom: 15px;

    }


    div.book-card-listprice-list {
      font-size: 11px;
      font-family: 'Noto Sans TC';
      line-height: 12px;
      margin-bottom: 55px;

    }


    @media screen and (min-width:374px) { 
      div.book-card-listprice-list {
        font-size: 14px;
        line-height: 12px;
        margin-bottom: 58px;

      }
   
      div.book-card-listprice {
        font-size: 14px;
        margin-bottom: 18px;
      }
    }


    @media screen and (min-width:413px) { 
      a.book-card-landscape-title {
        max-height: 80px;
        font-size: 24px;
        line-height: 28px;
      }
      div.book-card-listprice-list {
        font-size: 14px;
        line-height: 12px;
        margin-bottom: 58px;
      }

      div.book-card-listprice {
        font-size: 15px;
        line-height: 14px;
        margin-bottom: 20px;
      }
      
    }


    @media screen and (min-width:767px) { 
      a.book-card-landscape-title {
        min-height: 20px;
        max-height: 90px;
        font-size: 24px;
        line-height: 30px;
      }

      div.uk-card-landscape-author, div.uk-card-landscape-publisher {
        height: 17px;
        font-size: 15px;
        line-height: 17px;

      }
  

      div.book-card-listprice {
        font-size: 20px;
        line-height: 14px;
        margin-bottom: 25px;
      }
      div.book-card-listprice-list {
        font-size: 20px;
        line-height: 12px;
        margin-bottom:68px;
      }


      div.uk-card-landscape-intro {
        margin: 0px;
        padding: 0px;
        display: block;
        min-height: 20px;
        max-height: 160px;
        width: 100%;
        margin: 0px;
        padding: 0px;
        font-size: 18px;
        line-height: 26px;
        color: #a6a6a6;
        margin-bottom: 2px;
        /*多行文字限制*/
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
      }

      a.book-card-newstitle {
        font-size: 22px;
        line-height: 30px;
      }

      
    }




    div.book-card-landscape-box-botton {
      padding: 8px 0px 18px 0px;
      margin: 5px;
      border-bottom: 1px solid #e6e6e6;
    }



    @media screen and (min-width:767px) { 

      
      
    }












    /* login 會員登入 */

    div.login-title {
      font-size: 18px;
      font-family: 'Noto Sans TC';
      line-height: 26px;
      font-weight: 500;
    }



    span.mustfill {
      color: #ff3300
    }

    a.login-forget {
      font-size: 13px;
      font-family: 'Noto Sans TC';
      color: #a6a6a6;
    }

    .uk-input, .uk-select, .uk-textarea {
      font-size: 15px;

      font-family: 'Noto Sans TC';
      color: #a6a6a6;
      background-color: #f2f2f2;
      border: 1px solid #d9d9d9;
    }

    

    /* book-card 單書頁 */

    .book-title {
      margin: 0px auto;
      padding: 0px;
      display: block;
      width: 100%;
      min-height: 20px;
      font-size: 18px;
      font-family: 'Noto Sans TC';
      line-height: 23px;
      font-weight: 400;
      color: #404040;
      text-decoration: none;
      padding-top: 5px;
      padding-bottom: 5px;

      margin-bottom: 10px;
    }

    div.book-img {
      margin: 0px auto;
      padding:0px;
      position: relative;
      display: block;
      max-width: 180px;
      border: 1px solid #e6e6e6;
    }

    img.bookimg {
      margin: 0px auto;
      padding:0px;

      width: 100%;
   
    }

    span.book-popup {
      margin:0px;
      padding: 5px;
      display: block;
      font-family: 'Noto Sans TC';
      width: 28px;
      height: 28px;
      right: -8px; 
      bottom: -8px; 
      background-color:#00B2AC; 
      border: 1px solid #f2f2f2;

    }

    .book-popup-text {
      position: absolute;
      right: -30px; 
      bottom: -11px; 
      color: #00B2AC; 
      font-family: 'Noto Sans TC';
    }






    .book-listprice-box {
      padding-top: 20px;
      font-size: 15px;
      font-family: 'Noto Sans TC';
      line-height: 20px;
      color: #999;
    }

    div.book-sales > span {
      color: #b30000;
    }

    div.book-price {
      float: right;
      font-size: 10px;
      line-height: 12px;
    }
    div.book-price > span {
      font-size: 18px;
      font-weight: 500;
      color: #b30000;
    }


    @media screen and (min-width:374px) { 
      .book-title {
        font-size: 22px;
        line-height: 25px;
      }
      .book-listprice-box {
        font-size: 18px;
        line-height: 24px;
      }
      div.book-price {
        font-size: 13px;
        line-height: 12px;
      }
      div.book-price > span {
        font-size: 22px;
      }

    }

    @media screen and (min-width:413px) { 
      .book-title {
        font-size: 24px;
        line-height: 28px;
      }
      .book-listprice-box {
        font-size: 20px;
        line-height: 28px;
      }
      div.book-price {
        font-size: 13px;
        line-height: 12px;
      }
      div.book-price > span {
        font-size: 24px;
      }
    }


    @media screen and (min-width:767px) { 
      .book-title {
        min-height: 22px;
        font-size: 28px;
        line-height: 34px;
      }
      .book-listprice-box {
        font-size: 24px;
        line-height: 32px;
      }
      div.book-price {
        font-size: 13px;
        line-height: 12px;
      }
      div.book-price > span {
        font-size: 32px;
      }
    }



    div.book-speical {
      display: block;
      width: 170px;
      height: 25px;
      line-height: 25px;
      padding: 5px;
      font-family: 'Noto Sans TC';
      color: #fff;
      background-color: #cc0000;
    }

    a.book-speical-title {
      margin: 0px auto;
      padding: 0px;
      display: block;
      width: 100%;
      height: 23px;
      font-size: 18px;
      font-family: 'Noto Sans TC';
      line-height: 23px;
      font-weight: 400;
      color: #cc0000;
      text-decoration: underline;


    }

    .book-speical-intro {
        margin: 0px;
        padding: 0px;
        display: block;
        min-height: 20px;
        max-height: 80px;
        width: 100%;
        font-family: 'Noto Sans TC';

      
        margin-top: 8px;
        margin-bottom: 8px;
        /*多行文字限制*/
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;

    }

    div.uk-subnav {
      margin: 0px auto;
      padding:0px;
      background-color: #f2f2f2;
      font-family: 'Noto Sans TC';
        color: #595959;
        padding-bottom: 10px;
        padding-left: 20px;
        padding-right: 20px;
    }

    div.uk-subnav > div {
      padding:0px;
      height: 25px;
      line-height: 25px;
      text-decoration: underline;
      font-family: 'Noto Sans TC';
      
    }

    .uk-subnav > * > :first-child {
      font-size: 16px;
      font-family: 'Noto Sans TC';
      
    }

   a.uk-accordion-title {
      color: #666;

    }

    a.uk-accordion-title > span {
      font-size: 16px;
      font-family: 'Noto Sans TC';

    }


    .uk-accordion-content {
      margin: 0px auto;
      font-size: 18px;
   
      padding-top: 10px;
    }
    .uk-accordion-content > p {
      font-size: 16px;
      line-height: 20px;
    }


    p.accordion {

       padding-bottom: 0px;
       margin-bottom: 10px;

       /*多行文字限制*/
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
    }



    

    




  

    .uk-accordion > :nth-child(n+2) {
        margin-top: 8px;
    }


    a.uk-accordion-box {
      margin: 0px auto;
      padding: 0px;
      display: block;
      height: 46px;
        font-size: 16px;
      line-height: 46px;
      font-family: 'Noto Sans TC';
      width: 100%;
      color: #666;
      background-color: #efefef;
      border: 1px solid #ccc;
      text-align: left;
      border-radius: 2px;
      text-decoration: none;

    }
    a.uk-accordion-box > span {
      padding-left: 20px;

    }

    .uk-open > .uk-accordion-box::after {
        background-image: url("../img/02.svg");
    }

    .uk-accordion-box::after {
        content: "";
        width: 1.2em;
        height: 1.2em;
        float: right;
        margin-top: 15px;
        margin-right: 15px;
        background-image: url("../img/01.svg");
        background-repeat: no-repeat;
        background-position: 50% 50%;
    }



    ul.sub-accordion {

    }

    hr.sub-line {
      margin:0px auto;
      padding:0px;
      color: #ccc;
      padding-left: 20px;
      margin-left: 20px;
      margin-right: 10px;
      margin-top: 10px;

    }




    a.uk-accordion-subbox {
      margin: 0px auto;
      padding: 0px;
      font-family: 'Noto Sans TC';
      font-size: 16px;
      line-height: 26px;
      width: 90%;
      color: #1E5F87;
      text-align: left;
      border-left: 3px solid #ccc;
      padding-left: 8px;
      letter-spacing: 0px;
      text-decoration: none;
    }

    a.uk-accordion-subbox:hover {

      color: #1E5F87;

    }

    .accordion-subcontent {
      width: 90%;
    }



    .uk-open > .uk-accordion-subbox::after {
        background-image: url("../img/02.svg");
    }

    .uk-accordion-subbox::after {
        content: "";
        width: 1.2em;
        height: 1.2em;
        float: right;
        margin-top: 10px;
        margin-right: 10px;
        background-image: url("../img/01.svg");
        background-repeat: no-repeat;
        background-position: 50% 50%;
    }

    .uk-open > .uk-accordion-title::after {

        background-image: url("../img/02.svg");
    }

    .uk-accordion-title::after {
        content: "";
        width: 1.2em;
        height: 1.2em;
        float: right;

        background-image: url("../img/01.svg");
        background-repeat: no-repeat;
        background-position: 50% 50%;
    }

    .uk-tab  {
    margin-left: 0px;
    }

    .uk-tab > * {
        flex: none;
        padding-left: 0px;
        width: 50%;

        position: relative;
    }

    .uk-tab > .uk-active > a.tabb {
        color: #1E5F87;
        height: 25px;
        background-color: #fff;
        font-size: 15px;
        font-family: 'Noto Sans TC';
        line-height: 25px;
        border-top: 5px solid #1E5F87;
        border-left: 1px solid #efefef;
        border-right: 1px solid #efefef;
        border-bottom-color: transparent;
        border-radius: 1px;

  
    }

    .uk-tab > * > a.tabb {
        color: #999;
        height: 30px;
        background-color: #efefef;
        border-color: #ccc;
        font-size: 15px;
        line-height: 30px;
        font-family: 'Noto Sans TC';
        border-top: transparent;
        border-left: transparent;
        border-right: transparent;
        border-bottom: transparent;
        border-radius: 0px;
        padding-left: 0px;
        padding-right: 0px;
        border-bottom: 0px;
    }

    .uk-tab::before {
        content: "";
        position: absolute;
        bottom: 0px;
        left: 50%;
        right: 0px;
        border-bottom: 0px;
        font-family: 'Noto Sans TC';
    }


    a.uk-accordion-book {
      padding-top: 10px;
      padding-bottom: 10px;
      font-size: 13px;
      font-family: 'Noto Sans TC';
      width: 100%;
      color: #a6a6a6;
      background-color: #fff;
      border: 1px solid #ccc;
      text-align: center;
      margin-top: 10px;
      border-radius: 2px;
      text-decoration: none;
      background-image: none;

    }

    .uk-open > .uk-accordion-book::after {
        content: "隱藏詳細內容";
        width: 100%;
        background-image: none;
        text-align: center;
        
    }

    .uk-accordion-book::after {
        content: "↑";
        width: 100%;
        background-image: none;
        text-align: center;

    }












    /* 滑動選單 */

    #navbars-right {
      position: fixed;
      margin-top: 150px;
      right: 0px;
      width: 40px;
      display:block;
      transition: right 0.3s;
      z-index: 999;
    }

    #navbars {
      background-color: rgba(0,0,0,.6);
      position: fixed;
      bottom: 0px;
      width: 100%;
      display:block;
      transition: bottom 0.5s;
      z-index: 999;
    }

    #gotops {
      position: fixed;
      bottom: -80px;
      width: 100%;
      height: 50px;
      display:block;
      transition: bottom 0.3s;
      z-index: 999;
    }

    a.gotop {
      margin:0px auto;
      display: block;
      width: 30px;
      height: 30px;
      margin-bottom: 50px;
    }

    a.gotop > svg {
      z-index: 0;
      visibility: hidden;
    }



    /* add-member-subtitle 會員新增 */
    h4.add-member-subtitle {
      margin:0px auto;
      padding:0px;
      display: block;
      font-size: 22px;
      font-weight: 500;
      line-height: 38px;
      color: #737373;
      width: 100%;
      height: 38px;
      background-color: #f2f2f2;

    }

    

.card-breadcrumb{
  display: block; 
  height: 18px;
  font-size: 12px;
  font-family: 'Noto Sans TC';
  line-height: 20px;
  color: #b30000;
  letter-spacing: -1px;
  text-decoration: none;
  padding-left: 3px;
  padding-right: 3px;
  float: left;
}

.card-breadcrumb:hover{
  color: #b30000;
  text-decoration: none;
}

.card-breadcrumb-unactive{
  display: block; 
  height: 18px;
  font-size: 12px;
  font-family: 'Noto Sans TC';
  line-height: 20px;
  color: #a6a6a6;
  letter-spacing: -1px;
  text-decoration: none;
  padding-left: 3px;
  padding-right: 3px;
  float: left;

}



    @media screen and (min-width:374px) { 
      .card-breadcrumb{
        height: 20px;
        font-size: 15px;
        line-height: 20px;
      }

      .card-breadcrumb-unactive{
        height: 20px;
        font-size: 15px;
        line-height: 20px;
      }

    }

    @media screen and (min-width:413px) { 
      .card-breadcrumb {
        font-size: 17px;
      }
      .card-breadcrumb-unactive {
        font-size: 17px;
      }

    }


    @media screen and (min-width:767px) { 

      .card-breadcrumb{
        font-size: 20px;
        height: 27px;
        line-height: 27px;
        padding-right: 5px;
      }

      .card-breadcrumb-unactive{
        font-size: 20px;
        height: 27px;
        line-height: 27px;
        padding-right: 5px;
      }

    }
















    p.confirm-step-text::first-letter {
    padding-left:20px;
    }

    .uk-table {
    border: 1px solid #d9d9d9;
    border-spacing: 0;
    }

    .uk-table-total {
      font-size: 15px;
      font-family: 'Noto Sans TC';
      border: 0px solid #d9d9d9;
      padding: 0px;
      margin-top: 10px;
      border-spacing: 0;
    }

    tr.total-text > td{
      border-top: 1px solid #ccc;

    }

    tr.total-detail > td{
      border-bottom: 1px solid #ccc;
      padding: 3px 0px 10px 0px;

    }


    @media screen and (min-width:374px) { 
      .uk-table-total {
        font-size: 18px;
      }
    }

    @media screen and (min-width:413px) { 
   

    }


    @media screen and (min-width:767px) { 

    }









    .total-price {
      color: #cc0000;
      font-size: 20px;
      font-weight: 600;
      line-height:18px;
      font-family: 'Noto Sans TC';
    }





    .uk-table-item {
    border: 1px solid #d9d9d9;
    background-color: #f2f2f2;
    text-align: right;
    font-size: 15px;
 
    }
    a.order-number{
    color: #b30000;
    text-decoration: underline;
    }




    .uk-sales-box {
      width: 100%;
      padding: 20px;
      font-size: 18px;
      font-family: 'Noto Sans TC';
      text-align: center;
      color: #fff;
      background-color: #1e5f87;
    }

    .uk-sales-box > p {

   
    }






/* footer 底部
 ========================================================================== */


.footer-link-major {
  display: block;
  font-size: 16px;
  font-family: 'Noto Sans TC';
  line-height: 30px;
  width: 100%;
  color: #fff;
  text-decoration: none;
  border-bottom: #d9d9d9 1px solid;
  
}

.footer-link-major:hover {
  color: #fff;
  text-decoration: none;
}

.footer-link-sub  {
  display: block;
  font-size: 16px;
  font-family: 'Noto Sans TC';
  width: 90%;
  color: #fff;
  text-decoration: none;
}
.footer-link-sub:hover {
  color: #fff;
  text-decoration: none;
}






.select-shop-map:not([multiple]):not([size]) {
    height:35px;
}

.select-shop-map:not([multiple]):not([size]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 20px;

}


.select-shop-map {
  max-width: 100%;
    width: 100%;
    height:35px;
    padding: 0 10px;
    font-size: 15px;
    font-family: 'Noto Sans TC';
    color: #fff;
    background-color: #cc0000;
    border: 1px solid #cc0000;
    border-radius: 2px;
    box-shadow: 0 0px 3px rgba(0,0,0,.3);

}



.select-shop-map > option {
  color: #fff;

}

.select-shop-map:focus, .select-shop-map:not(select), .select-shop-map:not([multiple]):not([size]){
  background-image: url("../img/01w.svg");
  background-size: 15px 15px;
  background-position: 95% 50%;
  background-repeat: no-repeat;
}








ul.invoice {}

ul.invoice > li {}
ul.invoice > li {
  padding-left: 25px;
  background-image: url("../img/unchecked.svg");
  background-size: 18px 18px;
  background-position: left;
  background-repeat: no-repeat;

}


.select-red {
  height: 35px;
  line-height: 32px;
  background-color: #cc0000;
  color: #fff;

}


ul.invoice > li.uk-active  {
  padding-left: 25px;
  color: #cc0000;
  background-image: url("../img/checked.svg");
  background-size: 18px 18px;
  background-position: left;
  background-repeat: no-repeat;
}
ul.invoice > li > a  {
  color: #666;
  font-size: 18px;
  line-height: 30px;
  text-decoration: none;
}

ul.invoice > li.uk-active > a  {
  color: #cc0000;
  text-decoration: none;
}


span:first-child{

}
 Sans TC';
      text-align: center;
      color: #fff;
      background-color: #1e5f87;
    }

    .uk-sales-box > p {

   
    }






/* footer 底部
 ========================================================================== */


.footer-link-major {
  display: block;
  font-size: 16px;
  font-family: 'Noto Sans TC';
  line-height: 30px;
  width: 100%;
  color: #fff;
  text-decoration: none;
  border-bottom: #d9d9d9 1px solid;
  
}

.footer-link-major:hover {
  color: #fff;
  text-decoration: none;
}

.footer-link-sub  {
  display: block;
  font-size: 16px;
  font-family: 'Noto Sans TC';
  width: 90%;
  color: #fff;
  text-decoration: none;
}
.footer-link-sub:hover {
  color: #fff;
  text-decoration: none;
}






.select-shop-map:not([multiple]):not([size]) {
    height:35px;
}

.select-shop-map:not([multiple]):not([size]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 20px;

}


.select-shop-map {
  max-width: 100%;
    width: 100%;
    height:35px;
    padding: 0 10px;
    font-size: 15px;
    font-family: 'Noto Sans TC';
    color: #fff;
    background-color: #cc0000;
    border: 1px solid #cc0000;
    border-radius: 2px;
    box-shadow: 0 0px 3px rgba(0,0,0,.3);

}



.select-shop-map > option {
  color: #fff;

}

.select-shop-map:focus, .select-shop-map:not(select), .select-shop-map:not([multiple]):not([size]){
  background-image: url("../img/01w.svg");
  background-size: 15px 15px;
  background-position: 95% 50%;
  background-repeat: no-repeat;
}








ul.invoice {}

ul.invoice > li {}
ul.invoice > li {
  padding-left: 25px;
  background-image: url("../img/unchecked.svg");
  background-size: 18px 18px;
  background-position: left;
  background-repeat: no-repeat;

}


.select-red {
  height: 35px;
  line-height: 32px;
  background-color: #cc0000;
  color: #fff;

}


ul.invoice > li.uk-active  {
  padding-left: 25px;
  color: #cc0000;
  background-image: url("../img/checked.svg");
  background-size: 18px 18px;
  background-position: left;
  background-repeat: no-repeat;
}
ul.invoice > li > a  {
  color: #666;
  font-size: 18px;
  line-height: 30px;
  text-decoration: none;
}

ul.invoice > li.uk-active > a  {
  color: #cc0000;
  text-decoration: none;
}


span:first-child{

}