.submenu-wrap {
    padding: 20px 0;
}

.submenu__title {
    background: url("/assets/bg-title-side.png") repeat-x scroll 0 0;
    border-bottom: 2px solid #fff;
    color: #fff;
    font: 20px/39px 'open sans','微軟正黑體',sans-serif;
    margin: 0;
    padding: 0 0 0 45px;
    position: relative;

    &:before {
        background: url("/assets/icon-title-side.png") no-repeat scroll 0 0;
        content: "";
        display: block;
        height: 3px;
        left: 30px;
        position: absolute;
        top: 20px;
        width: 8px;
    }
}

.submenu__list {
    @include clearfix;
    list-style: none;
    padding: 0;
    margin: 0;
}

.submenu__item.level-1 {
    line-height: 2.5em;
    position: relative;
}

.submenu__link.level-1 {
    background: none repeat scroll 0 0 #e9eef1;
    border-bottom: 2px solid #fff;
    color: #3f3f3f;
    display: block;
    font: 15px/1.2 'open sans','新細明體',sans-serif;
    padding: 12px 0;

    &:before {
        content: "●";
        font-family: '微軟正黑體',san-serif;
        font-size: 13px;
        margin: 0 7px 0 30px;
    }
    &:hover {
        background: #288cd3;
        color: #fff;
    }
}

.submenu__item:hover .dropdown,.submenu__item.level-1:hover .submenu__list.level-2 {
    display: block;
}

// Submenu dropdown
.submenu__list.level-2,.submenu__list.dropdown {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    border-radius: 2px;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
    z-index: 200;
    min-width: 200px;
    @media (max-width:767px){
        left: 20px;
        top: 100%;
        min-width: unset;
    }
}

.submenu__item.level-2 {
    display: block;
    font-size: 0.8125rem;
    background: none repeat scroll 0 0 #e9eef1;
}

.submenu__link.level-2 {
    border-bottom: 2px solid #fff;
    color: #3f3f3f;
    display: block;
    font: 15px/1.2 'open sans','新細明體',sans-serif;
    padding: 12px 0;


    &:before {
        content: "●";
        font-family: '微軟正黑體',san-serif;
        font-size: 13px;
        margin: 0 7px 0 30px;
        @media (max-width:767px){
            margin-left: 10px;
            color: #e48c1c;
        }
    }
    &:hover {
        background: #288cd3;
        color: #fff;
    }
}

.submenu__list.hidden--item {
    display: none;

    &:before {
        display: none;
    }
}
.sitemenu-wrap.sitemenu-vertical {
    padding: 20px 0;
      

.sitemenu-title,.submenu__title {
    background: url("/assets/bg-title-side.png") repeat-x scroll 0 0;
    border-bottom: 2px solid #fff;
    color: #fff;
    font: 20px/39px 'open sans','微軟正黑體',sans-serif;
    margin: 0;
    padding: 0 0 0 45px;
    position: relative;

    &:before {
        background: url("/assets/icon-title-side.png") no-repeat scroll 0 0;
        content: "";
        display: block;
        height: 3px;
        left: 30px;
        position: absolute;
        top: 20px;
        width: 8px;
    }
}

.sitemenu-list,.submenu__list {
    @include clearfix;
    list-style: none;
    padding: 0;
    margin: 0;
}

.sitemenu-item.level-1,.submenu__item.level-1 {
    line-height: 2.5em;
    position: relative;
}

.sitemenu-link.level-1,.submenu__link.level-1 {
    background: none repeat scroll 0 0 #e9eef1;
    border-bottom: 2px solid #fff;
    color: #3f3f3f;
    display: block;
    font: 15px/1.2 'open sans','新細明體',sans-serif;
    padding: 12px 0;

    &:before {
        content: "●";
        font-family: '微軟正黑體',san-serif;
        font-size: 13px;
        margin: 0 7px 0 30px;
    }
    &:hover {
        background: #288cd3;
        color: #fff;
    }
}

.sitemenu-item:hover .dropdown,.sitemenu-item.level-1:hover .sitemenu-list.level-2,.submenu__item:hover .dropdown,.submenu__item.level-1:hover .submenu__list.level-2 {
    display: block;
}

// Submenu dropdown
.sitemenu-list.dropdown,.sitemenu-list.level-2,.submenu__list.level-2,.submenu__list.dropdown {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    border-radius: 2px;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
    z-index: 200;
    min-width: 200px;
}

.sitemenu-item.level-2,.submenu__item.level-2 {
    display: block;
    font-size: 0.8125rem;
    background: none repeat scroll 0 0 #e9eef1;
}

.sitemenu-link.level-2,.submenu__link.level-2 {
    border-bottom: 2px solid #fff;
    color: #3f3f3f;
    display: block;
    font: 15px/1.2 'open sans','新細明體',sans-serif;
    padding: 12px 0;


    &:before {
        content: "●";
        font-family: '微軟正黑體',san-serif;
        font-size: 13px;
        margin: 0 7px 0 30px;
    }
    &:hover {
        background: #288cd3;
        color: #fff;
    }
}

.sitemenu-list.hidden--item,.submenu__list.hidden--item {
    display: none;

    &:before {
        display: none;
    }
}
}

.sitemenu-horizontal {
    padding: 0.625em 0;
  
    @include clearfix;
  
    .sitemenu-title {
      display: none;
    }
  
    .sitemenu-item.level-1 {
      font-size: 0.8125rem;
      position: relative;
      float: left;
      margin-right: 1%;
      margin-bottom: 0.75em;
      padding: 0.5em .8em;
      padding-bottom: 0.5em;
      color: $theme-white;
      border-radius: .2em;
      background: $theme-color-second;
  
      &:hover {
        background: darken($theme-color-second, 10%);
      }
    }
  
    .sitemenu-link.level-1 {
      margin-right: .25rem;
      color: $theme-white;
    }
  
    .sitemenu-dropdown-toggle {
      font-size: 0.75rem;
      padding: 0.125em .3125rem;
      cursor: pointer;
    }
  
    // sitemenu dropdown
    .sitemenu-list.dropdown-menu {
      min-width: 100%;
      margin-top: 0.25em;
      border: none;
      border-radius: .2em;
      background: $theme-color-main;
    }
  
    .sitemenu-link.level-2 {
      color: $theme-white;
      font-size: 0.8125rem;
      padding: 0.25em 0.625rem;
  
      &:hover {
        text-decoration: underline;
        background-color: transparent;
      }
    }
  }