/*導覽列*/
/*導覽列藍色區塊*/
.topline{
    width: 100%;
    height: 25px;
    background-color: #284763;
    position: fixed;
    z-index: 20;
    top: 0;
}


/*LOGO強制同行與置中*/
@media (min-width: 768px){
#header .logo {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50% , 10px);
}
#header .computer_nav {
    position: relative;
}
#header .logo img {
    height: 100px;
}
}

/*更改導覽列寬度限制*/
#header .container {
    max-width: 90% !important;
    position: relative;
    z-index: 9;
}

/*改變選單寬度*/
#header .main-nav{
    width: 80%;
}

/*改變選單排序方式*/
#header nav ul {
    display: flex;
    justify-content: space-between;
}

/*字體設定*/
#header .link_shelf_top > li > a {
    padding: 10px 0px;
    font-size: 20px;
    color: #ED6E2B;
}
#header .main-nav .link_shelf_top .show > a, #header .main-nav .link_shelf_top > li > a:hover {
    color: #ED6E2B !important;
    background: none !important;
    padding-bottom: 3px;
    border-bottom: 1px solid #ED6E2B;
}

/*背景*/
@media (min-width: 768px){
#header.nav-top {
    background: #EFEBE4;
    background: rgba(250, 238, 225, 0) !important;
    box-shadow: 0 0 5px rgb(0 0 0 / 0%) !important;
    position: fixed;
    top: 60px;
    left: calc(0%);
    z-index: 10;
    width: 100%;
}
#header {
    background: #EFEBE4;
}

#header.nav-top:before{
    content: "";
    display: block;
    position: absolute;
    width: 45%;
    height: 80px;
    border-top: 1px solid #ED6E2B;
    border-bottom: 1px solid #ED6E2B;
}

#header.nav-top:after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 45%;
    height: 80px;
    border-top: 1px solid #ED6E2B;
    border-bottom: 1px solid #ED6E2B;
    z-index: 5;
}
}

/*滑動時選單間距*/
.navPadding{
    padding: 25px 0 15px 0;
}

/*滑動時LOGO大小*/
.imagechange1{
    height: 60px !important;
}
.logochange1{
    top: 2px !important;
}


@media (max-width: 767px){
/*更改手機版背景*/
#header.nav-top {
    background: #EFEBE4 !important;
    position: fixed;
    top: 25px;
}

/*更改手機版滑動背景*/
#header{
    background: #EFEBE4 !important;
    height: auto;
}

/*目錄選單按鈕置右*/
#header .mobile-nav li.sidebar-menu-icon{
    position: absolute;
    right: 15px;
}

/*更改選單點開後的背景色*/
.drawer--left.drawer-open .drawer-nav, .drawer--left .drawer-hamburger, .drawer--left.drawer-open .drawer-navbar .drawer-hamburger {
    background: #EFEBE4;
}

/*選單大小*/
#header .mobile-nav li.sidebar-menu-icon svg.menu-svg{
    height: 25px;
}

#header .mobile-nav li.logo{
    margin-left: 15px;
}

/*滑動時選單間距*/
.navPadding{
    padding: 30px 0 5px 0;
}
}


#header {
  background: #EFEBE4;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
  }
  #header .logo {
    display: block; }
  #header.nav-top {
    background: rgba(250, 238, 225, 0.7);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 20px;
    left: calc(50% - 555px);
    z-index: 10;
    width: 1110px;}
    @media (max-width: 991px) {
      #header.nav-top {
        top: 0;
        left: 0;
        width: 100%; } }
  #header .computer_nav {
    padding-top: 80px;
    text-align: center; }
  #header nav {
    display: inline-block;
    vertical-align: top; }
    #header nav ul {
      list-style-type: none;
      margin: 0;
      padding: 0; }
    #header nav a {
      color: #565656;
      display: inline-block;
      line-height: 30px;
      text-decoration: none;
      width: 100%; }
    #header nav svg {
      fill: #565656;
      vertical-align: middle; }
      #header nav svg:hover {
        fill: #d49e6a; }
    #header nav .dropdown-menu {
      border-radius: 0;
      margin: 0;
      padding: 10px;
      top: 100% !important;
      transform: none !important;
      width: 100%; }
      #header nav .dropdown-menu .collection-all {
        display: flex; }
    #header nav .global-cart-count {
      background: #e55555;
      border-radius: 50%;
      color: #fff;
      font-size: 14px;
      height: 25px;
      line-height: 25.5px;
      text-align: center;
      vertical-align: middle;
      width: 25px; }
    #header nav .search .search-area {
      display: flex; }
    #header nav .search form {
      flex: 1; }
    #header nav .search .form-area {
      display: flex;
      width: 100%; }
      #header nav .search .form-area input {
        flex: 1;
        margin-right: 5px;
        width: 170px; }
      #header nav .search .form-area button {
        margin-right: 5px;
        padding: 0;
        width: 60px; }
    #header nav .search a.close-dropdown {
      cursor: pointer;
      text-align: center;
      width: 40px; }
    #header nav .btn-logout, #header nav .btn-orders, #header nav .btn-login, #header nav .btn-signin, #header nav .btn-search, #header nav .close-dropdown, #header nav .btn-checkout {
      line-height: 38px; }
    #header nav .btn-logout, #header nav .btn-login {
      background: #ABB4BB;
      border-color: #ABB4BB;
      border-radius: 5px;
      color: #ffffff;
      transition: all ease-in-out .15s;
      text-align: center; }
      #header nav .btn-logout:hover, #header nav .btn-login:hover {
        background: #86919B;
        border-color: #86919B; }
    #header nav .btn-signin, #header nav .btn-orders {
      border: 1px solid #d49e6a;
      border-radius: 5px;
      color: #d49e6a;
      transition: all ease-in-out .15s;
      text-align: center; }
      #header nav .btn-signin:hover, #header nav .btn-orders:hover {
        background: #d49e6a;
        color: #ffffff; }
    #header nav .btn-checkout {
      background: #d49e6a;
      border-color: #d49e6a;
      border-radius: 5px;
      color: #ffffff;
      transition: all ease-in-out .15s;
      text-align: center; }
      #header nav .btn-checkout:hover {
        background: #A00000;
        border-color: #A00000; }
    #header nav .btn-search {
      background: #d49e6a;
      border-color: #d49e6a;
      border-radius: 5px;
      color: #ffffff;
      transition: all ease-in-out .15s;
      text-align: center; }
      #header nav .btn-search:hover {
        background: #cab69b;
        border-color: #cab69b; }
    #header nav .close-dropdown {
      background: #ffffff;
      border: 1px solid #ABB4BB;
      border-radius: 5px;
      color: #ABB4BB;
      transition: all ease-in-out .15s;
      text-align: center;
      border: none; }
      #header nav .close-dropdown:hover {
        background: #ffffff;
        border-color: #86919B;
        color: #86919B; }

@media (min-width: 992px) {
  #header .link_shelf_top > li {
    display: inline-block; }
    #header .link_shelf_top > li > a {
      padding: 10px; }
  #header .main-nav a {
    font-size: 14px; }
  #header .main-nav .link_shelf_top .show > a, #header .main-nav .link_shelf_top > li > a:hover {
    color: #ffffff;
    background: #d49e6a; }
  #header .main-nav .dropdown-menu li {
    height: 44px; }
  #header .main-nav .dropdown-menu a {
    align-items: center;
    display: flex;
    height: 100%;
    padding: 4px 10px; }
    #header .main-nav .dropdown-menu a:hover {
      background: #a3a3a3;
      color: #d49e6a; }
    #header .main-nav .dropdown-menu a span {
      display: -webkit-box;
      display: block\0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      line-height: 18px; }
  #header .main-nav .two-dimension .dropdown-menu {
    padding: 10px;
    border: 1px solid #a3a3a3; }
    #header .main-nav .two-dimension .dropdown-menu .row {
      margin: 0; }
      #header .main-nav .two-dimension .dropdown-menu .row .title a {
        color: #565656; }
      #header .main-nav .two-dimension .dropdown-menu .row li:not(.title) a {
        color: #a3a3a3; }
      #header .main-nav .two-dimension .dropdown-menu .row .col-sm-2 {
        padding: 0; }
        #header .main-nav .two-dimension .dropdown-menu .row .col-sm-2:hover .title a {
          background: none;
          color: #d49e6a; }
        #header .main-nav .two-dimension .dropdown-menu .row .col-sm-2:hover li:not(.title) a:hover {
          color: #d49e6a;
          background: none; }
  #header .main-nav .three-dimension .dropdown-menu {
    padding: 0px; }
    #header .main-nav .three-dimension .dropdown-menu a:hover {
      color: #d49e6a;
      background: none; }
    #header .main-nav .three-dimension .dropdown-menu .link_shelf_second, #header .main-nav .three-dimension .dropdown-menu .link_shelf_third {
      background: #ffffff; }
      #header .main-nav .three-dimension .dropdown-menu .link_shelf_second > li, #header .main-nav .three-dimension .dropdown-menu .link_shelf_third > li {
        position: relative; }
        #header .main-nav .three-dimension .dropdown-menu .link_shelf_second > li > a, #header .main-nav .three-dimension .dropdown-menu .link_shelf_third > li > a {
          align-items: center;
          display: flex; }
        #header .main-nav .three-dimension .dropdown-menu .link_shelf_second > li.relative:hover > a, #header .main-nav .three-dimension .dropdown-menu .link_shelf_second > li.relative:hover > a:hover, #header .main-nav .three-dimension .dropdown-menu .link_shelf_third > li.relative:hover > a, #header .main-nav .three-dimension .dropdown-menu .link_shelf_third > li.relative:hover > a:hover {
          color: #d49e6a; }
        #header .main-nav .three-dimension .dropdown-menu .link_shelf_second > li.relative:hover > a:hover:after, #header .main-nav .three-dimension .dropdown-menu .link_shelf_second > li > a:hover:after, #header .main-nav .three-dimension .dropdown-menu .link_shelf_third > li.relative:hover > a:hover:after, #header .main-nav .three-dimension .dropdown-menu .link_shelf_third > li > a:hover:after {
          border-bottom: 1px solid #a3a3a3; }
        #header .main-nav .three-dimension .dropdown-menu .link_shelf_second > li:not(:last-child) > a:after, #header .main-nav .three-dimension .dropdown-menu .link_shelf_third > li:not(:last-child) > a:after {
          bottom: -1px;
          border-bottom: 1px solid #a3a3a3;
          content: "";
          position: absolute;
          left: 5%;
          width: 90%; }
    #header .main-nav .three-dimension .dropdown-menu .link_shelf_third {
      border: 1px solid #a3a3a3;
      display: none;
      left: 100%;
      position: absolute;
      top: -1px;
      width: 100%; }
  #header .main-nav .collection-all.dropdown-menu {
    padding: 0px; }
  #header .main-nav .collection-all .collection {
    background: #faeee1;
    width: 20%; }
  #header .main-nav .collection-all .title, #header .main-nav .collection-all .products .col-md-3 {
    height: 44px; }
  #header .main-nav .collection-all .products {
    display: none;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 80%; }
    #header .main-nav .collection-all .products .col-md-3 {
      padding: 0; }
  #header .main-nav .collection-all .collection:hover .title a {
    color: #d49e6a;
    background: none; }
  #header .main-nav .collection-all .collection:hover .products {
    display: block; }
    #header .main-nav .collection-all .collection:hover .products a:hover {
      background: none;
      color: #d49e6a; }
  #header .main-nav .collection_link_shelf.dropdown-menu {
    padding: 10px;
    border: 1px solid #a3a3a3; }
    #header .main-nav .collection_link_shelf.dropdown-menu .row {
      margin: 0; }
      #header .main-nav .collection_link_shelf.dropdown-menu .row .title a {
        color: #565656; }
      #header .main-nav .collection_link_shelf.dropdown-menu .row li:not(.title) a {
        color: #a3a3a3;
        background: none; }
      #header .main-nav .collection_link_shelf.dropdown-menu .row .col-sm-2 {
        padding: 0; }
        #header .main-nav .collection_link_shelf.dropdown-menu .row .col-sm-2:hover .title a {
          background: none;
          color: #d49e6a; }
        #header .main-nav .collection_link_shelf.dropdown-menu .row .col-sm-2:hover li:not(.title) a:hover {
          color: #d49e6a; }
  #header .tool-nav {
    float: none;
    position: absolute;
    right: 10px;
    top: 10px; }
    #header .tool-nav .dropdown > a {
      padding: 10px; }
    #header .tool-nav .link_shelf_top > li {
      position: relative; }
    #header .tool-nav .link_shelf_top .dropdown-menu {
      left: auto !important;
      right: 0; }
    #header .tool-nav .customer_account .dropdown-menu, #header .tool-nav .cart .dropdown-menu {
      width: 300px;
      padding: 5px 0; }
    #header .tool-nav .search .dropdown-menu {
      padding: 15px;
      width: 300px; }
    #header .tool-nav .button, #header .tool-nav .total {
      margin: 10px 15px; }
    #header .tool-nav .total .global-cart-total {
      color: #e55555 !important;
      padding-left: 5px; }
    #header .tool-nav .cart_list {
      max-height: 50vh;
      overflow-y: scroll; }
      #header .tool-nav .cart_list p {
        margin: 0; }
      #header .tool-nav .cart_list a {
        line-height: 1.3; }
      #header .tool-nav .cart_list .product_item {
        display: grid;
        display: -ms-grid;
        -ms-grid-columns: 60px auto;
        grid-template-columns: 60px auto;
        -ms-grid-rows: auto auto;
        grid-template-rows: auto auto;
        margin: 0 10px;
        padding: 10px 0; }
      #header .tool-nav .cart_list .thumb-img {
        grid-column: 1;
        -ms-grid-column: 1;
        grid-row: 1/3;
        -ms-grid-row: 1;
        -ms-grid-row-span: 2; }
        #header .tool-nav .cart_list .thumb-img img {
          opacity: 1; }
      #header .tool-nav .cart_list .title {
        grid-column: 2;
        -ms-grid-column: 2;
        grid-row: 1;
        -ms-grid-row: 1; }
      #header .tool-nav .cart_list .amount {
        grid-column: 2;
        -ms-grid-column: 2;
        grid-row: 2;
        -ms-grid-row: 2; } }

@media (max-width: 991px) {
  #header .container {
    padding: 0;
    min-width: 100%; }
  #header .mobile-nav {
    width: 100%; }
    #header .mobile-nav a {
      padding: 0; }
    #header .mobile-nav ul {
      display: flex; }
      #header .mobile-nav ul > li {
        height: 50px;
        line-height: 50px;
        text-align: center;
        padding: 0 5px; }
    #header .mobile-nav .sidebar-menu-icon, #header .mobile-nav .member, #header .mobile-nav .cart, #header .mobile-nav .search {
      min-width: 10%; }
    #header .mobile-nav .logo {
      flex: 1;
      padding: 5px; }
      #header .mobile-nav .logo a {
        height: 100%;
        vertical-align: top; } }

@media (max-width: 450px) {
  #header .mobile-nav svg {
    height: 20px; } }