@charset "UTF-8";
@font-face {
  font-family: Belleza;
  src: url("../../..//fonts/Belleza-Regular.ttf"); }
body {
  font-family: Belleza, Heiti TC, Microsoft JhengHei;
  overflow-y: auto;
  cursor: default;
  word-break: break-all;
  color: #555; }

.panel {
  box-shadow: 2px 2px 6px 2px rgba(51, 51, 102, 0.3);
  -webkit-border-top-left-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -moz-border-radius-bottomright: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px; }
  .panel .panel-heading {
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px; }
  .panel .panel-footer {
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-right-radius: 7px;
    -webkit-border-bottom-left-radius: 7px;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 7px;
    -moz-border-radius-bottomleft: 7px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 7px; }

.container {
  padding-left: 0px;
  padding-right: 0px; }

:hover, :focus, :active {
  outline: none !important; }

a {
  box-shadow: inherit !important; }
  a:hover, a:focus, a:active {
    text-decoration: none;
    color: inherit; }

.btn.btn-primary-black {
  padding: 5px 25px;
  margin-left: 8px;
  margin-right: 8px;
  font-size: 15px;
  min-width: 80px;
  background-color: #404040;
  transition: all 600ms ease 0s;
  color: #FFF;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  /*    .btn-group>&{
          border-left: 1px solid #DDD;
          border-right: 1px solid #DDD;
          @include margin-LR-reset;
          margin-left: -1px;
          &:first-child{
              border-left: none;
              margin-left: 8px;
          }
          &:last-child{
              border-right: none;
              margin-right: 8px;
          }
      }*/ }
  .btn.btn-primary-black:hover {
    background-color: #546e7a;
    color: #FFF; }
  .btn.btn-primary-black:focus {
    color: #FFF;
    background-color: #404040; }
  .btn.btn-primary-black.disabled {
    opacity: 0.25; }

.btn-group > a > .btn.btn-primary-black {
  -webkit-border-top-left-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  -webkit-border-bottom-right-radius: 0px;
  -webkit-border-bottom-left-radius: 0px;
  -moz-border-radius-topleft: 0px;
  -moz-border-radius-topright: 0px;
  -moz-border-radius-bottomright: 0px;
  -moz-border-radius-bottomleft: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-left: 1px solid #DDD;
  border-right: 1px solid #DDD;
  margin-left: 0px;
  margin-right: 0px;
  margin-left: -5px; }
.btn-group > a:first-child > .btn.btn-primary-black {
  border-left: none;
  margin-left: 8px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 0px;
  -webkit-border-bottom-right-radius: 0px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 0px;
  -moz-border-radius-bottomright: 0px;
  -moz-border-radius-bottomleft: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 10px; }
.btn-group > a:last-child > .btn.btn-primary-black {
  border-right: none;
  margin-right: 8px;
  -webkit-border-top-left-radius: 0px;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 0px;
  -moz-border-radius-topleft: 0px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 0px; }

.progress {
  height: 12px;
  background: none repeat scroll 0% 0% #EBEDEF;
  border-radius: 32px;
  box-shadow: none; }

.table {
  margin-bottom: 0px; }

hr {
  margin-top: 10px;
  margin-bottom: 10px; }

.popover {
  word-break: normal;
  font-size: 15px;
  max-width: none; }
  .popover.right {
    margin-left: 15px; }
  .popover.left {
    margin-right: 15px; }
  .popover.top {
    margin-bottom: 15px; }
  .popover.bottom {
    margin-top: 15px; }

/*sidebar選單*/
.btn.btn-menu {
  /*平板*/
  padding: 5px 20px;
  margin-left: 8px;
  margin-right: 8px;
  margin-left: 0px;
  margin-right: 0px;
  font-size: 16px;
  min-width: 80px;
  background-color: #607d8b;
  transition: all 600ms ease 0s;
  color: #FFF;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  /*電腦版*/ }
  .btn.btn-menu:hover {
    background-color: #546e7a;
    color: #FFF; }
  .btn.btn-menu:focus {
    color: #FFF;
    background-color: #607d8b; }
  .btn.btn-menu.disabled {
    opacity: 0.25; }
  .btn-group > .btn.btn-menu {
    border-left: 1px solid #DDD;
    border-right: 1px solid #DDD;
    margin-left: -1px; }
    .btn-group > .btn.btn-menu:first-child {
      border-left: none;
      margin-left: 8px; }
    .btn-group > .btn.btn-menu:last-child {
      border-right: none;
      margin-right: 8px; }
  .btn.btn-menu.active {
    opacity: 0.55;
    background-color: #607d8b; }
  @media (min-width: 767px) {
    .btn.btn-menu {
      width: 210px;
      margin-left: 0px;
      margin-right: 0px;
      padding-left: 0px;
      padding-right: 0px; }
      .btn-group > .btn.btn-menu {
        border-top: 1px solid #DDD;
        border-bottom: 1px solid #DDD;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 1px; }
        .btn-group > .btn.btn-menu:first-child {
          -webkit-border-top-left-radius: 8px;
          -webkit-border-top-right-radius: 8px;
          -webkit-border-bottom-right-radius: 0px;
          -webkit-border-bottom-left-radius: 0px;
          -moz-border-radius-topleft: 8px;
          -moz-border-radius-topright: 8px;
          -moz-border-radius-bottomright: 0px;
          -moz-border-radius-bottomleft: 0px;
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
          border-bottom-right-radius: 0px;
          border-bottom-left-radius: 0px;
          margin-left: 0px;
          margin-right: 0px;
          border-radius: 8px 8px 0px 0px !important;
          border-top: none;
          margin-top: 8px; }
        .btn-group > .btn.btn-menu:last-child {
          -webkit-border-top-left-radius: 0px;
          -webkit-border-top-right-radius: 0px;
          -webkit-border-bottom-right-radius: 8px;
          -webkit-border-bottom-left-radius: 8px;
          -moz-border-radius-topleft: 0px;
          -moz-border-radius-topright: 0px;
          -moz-border-radius-bottomright: 8px;
          -moz-border-radius-bottomleft: 8px;
          border-top-left-radius: 0px;
          border-top-right-radius: 0px;
          border-bottom-right-radius: 8px;
          border-bottom-left-radius: 8px;
          margin-left: 0px;
          margin-right: 0px;
          border-bottom: none;
          margin-bottom: 8px; } }

/*分頁*/
#content-panel > .panel-footer > ul.pagination {
  margin-top: 7px;
  margin-bottom: 1px; }
  #content-panel > .panel-footer > ul.pagination > li.active > a {
    background-color: #546e7a;
    border-color: #546e7a;
    color: #FFF; }

.sweet-alert {
  font-family: Belleza, Heiti TC, Microsoft JhengHei; }
  .sweet-alert h2 {
    font-weight: normal; }

.disabled a {
  cursor: default !important; }

#check-admin-pw > .modal-dialog {
  width: 700px;
  margin-top: 200px; }
  #check-admin-pw > .modal-dialog > .modal-content > .modal-body > form > #label-input {
    width: 220px; }
  #check-admin-pw > .modal-dialog > .modal-content > .modal-body > form > #admin-input {
    width: 300px; }

.modal.in {
  background-color: rgba(0, 0, 0, 0.4);
  transition: background-color .20s linear; }

#share-modal > .modal-dialog {
  opacity: 0.95;
  width: 700px;
  height: 200px; }
  #share-modal > .modal-dialog > .modal-content {
    margin-top: -100px; }
    #share-modal > .modal-dialog > .modal-content > .modal-body {
      position: relative; }
      #share-modal > .modal-dialog > .modal-content > .modal-body > button.close {
        opacity: 0.5;
        position: absolute;
        top: 5px;
        right: 15px; }
        #share-modal > .modal-dialog > .modal-content > .modal-body > button.close:hover {
          opacity: 0.8; }
        #share-modal > .modal-dialog > .modal-content > .modal-body > button.close > span {
          font-size: 35px;
          color: #000; }
          #share-modal > .modal-dialog > .modal-content > .modal-body > button.close > span:hover {
            color: #000000; }
      #share-modal > .modal-dialog > .modal-content > .modal-body > #share-link {
        text-align: center;
        padding-top: 20px;
        padding-bottom: 20px; }
        #share-modal > .modal-dialog > .modal-content > .modal-body > #share-link > input {
          width: 500px;
          margin-left: 10px;
          padding-top: 5px;
          padding-bottom: 5px; }
      #share-modal > .modal-dialog > .modal-content > .modal-body > #share-btn-group {
        height: 150px; }
        #share-modal > .modal-dialog > .modal-content > .modal-body > #share-btn-group > div {
          float: left;
          width: 20%;
          transition: background-color 0.5s;
          padding-top: 15px;
          padding-bottom: 15px;
          text-align: center; }
          #share-modal > .modal-dialog > .modal-content > .modal-body > #share-btn-group > div > img {
            /*float: left;*/ }
          #share-modal > .modal-dialog > .modal-content > .modal-body > #share-btn-group > div:hover {
            background-color: #DDD;
            cursor: pointer; }
          #share-modal > .modal-dialog > .modal-content > .modal-body > #share-btn-group > div > p {
            margin-top: 21px; }

.modal-dialog-center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%; }

.modal-body {
  overflow-y: auto; }

.modal-footer {
  margin-top: 0; }

@media (max-width: 767px) {
  .modal-dialog-center {
    width: 100%; } }
#data-bind {
  display: none; }

.panel-body > div.row > div {
  padding-left: 0px;
  padding-right: 0px; }
  .panel-body > div.row > div > div.row > div {
    padding-left: 0px;
    padding-right: 0px; }

.row {
  margin-left: 0px;
  margin-right: 0px; }
  .row > div {
    padding-left: 0px;
    padding-right: 0px; }

body {
  /*background-image: $bg-img4;*/
  background-image: url("../../..//img/base/bg3.png"); }

#layout-container {
  width: 1000px;
  min-width: 730px;
  max-width: 1000px;
  margin-bottom: 3%;
  border-top: 5px solid #333;
  padding-top: 3px;
  padding-left: 0px;
  padding-right: 0px; }
  @media (max-width: 767px) {
    #layout-container {
      width: 730px;
      border: none; } }

#layout-panel {
  box-shadow: 0px 0px 0px 0px rgba(51, 51, 102, 0.3);
  background-image: none;
  background-color: transparent; }
  #layout-panel > .panel-body.container-fluid {
    margin-bottom: 0px;
    -webkit-border-top-left-radius: 12px;
    -webkit-border-top-right-radius: 12px;
    -webkit-border-bottom-right-radius: 12px;
    -webkit-border-bottom-left-radius: 12px;
    -moz-border-radius-topleft: 12px;
    -moz-border-radius-topright: 12px;
    -moz-border-radius-bottomright: 12px;
    -moz-border-radius-bottomleft: 12px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    padding-top: 0px;
    background-image: none;
    background-color: transparent; }
    #layout-panel > .panel-body.container-fluid > div {
      padding-left: 0px;
      padding-right: 0px; }
  #layout-panel > .panel-footer {
    background: none;
    padding-top: 10px;
    padding-bottom: 15px;
    line-height: 26px;
    text-align: center;
    color: #666; }
    #layout-panel > .panel-footer > div {
      text-align: right; }

#content-panel {
  width: 700px;
  margin-top: -85px;
  margin-left: 10px;
  margin-right: 0px;
  margin-bottom: 20px;
  overflow-y: auto;
  border: #ddd 1px solid;
  box-shadow: none;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px; }
  @media (max-width: 767px) {
    #content-panel {
      margin-left: 0px;
      margin-right: 0px;
      margin-top: 0px; } }
  #content-panel > .panel-heading {
    height: 81px;
    box-shadow: 1px 1px 2px 1px rgba(51, 51, 102, 0.3);
    /*background-color: transparent;*/ }
    #content-panel > .panel-heading > .panel-title {
      font-size: 30px;
      margin-top: 15px;
      margin-left: 10px; }
  #content-panel > .panel-body {
    min-height: 510px;
    padding-top: 3px;
    padding-bottom: 0px;
    padding-right: 4px;
    max-height: 650px; }
    #content-panel > .panel-body.mCS_no_scrollbar {
      padding-right: 15px; }
  #content-panel > .panel-footer {
    background-color: #FFF;
    text-align: center;
    padding: 10px; }

#wrapper > .top-title {
  border-bottom: 1px solid #F1F1F1;
  padding: 15px 10px;
  position: relative; }

#brand {
  margin-left: 30px;
  margin-top: 20px;
  background-image: url("../../..//img/base/SOKO_logo.png");
  background-repeat: no-repeat;
  width: 170px;
  height: 180px; }
  @media (max-width: 767px) {
    #brand {
      background-image: url("../../..//img/base/SOKO_logo_pad.png");
      margin-top: 0px;
      margin-bottom: 15px;
      margin-left: 10px;
      width: 180px;
      height: 170px;
      z-index: 2; } }

a {
  color: inherit; }

#rightbrand {
  height: 130px; }
  #rightbrand > #nav {
    font-size: 24px;
    margin-top: 30px;
    margin-left: 128px; }
    #rightbrand > #nav > a {
      margin-left: 3px;
      margin-right: 3px; }
    @media (max-width: 767px) {
      #rightbrand > #nav {
        margin-top: 65px;
        margin-left: 52px;
        font-size: 20px; } }
  #rightbrand > #signin {
    font-size: 16px;
    text-align: right;
    margin-right: 16px; }
    @media (max-width: 767px) {
      #rightbrand > #signin {
        margin-top: 15px; } }
    #rightbrand > #signin > a {
      margin-left: 3px;
      margin-right: 3px; }

#sidebar {
  margin-top: 22px;
  text-align: center; }
  #sidebar > .panel {
    box-shadow: none; }
    #sidebar > .panel > .panel-heading {
      text-align: left;
      /*background-color: transparent;*/
      color: #444;
      font-size: 17px; }
    #sidebar > .panel > .panel-body {
      text-align: center; }

#mCSB_1_dragger_vertical {
  margin-right: 10px !important;
  z-index: 2 !important; }

#wrapper > div {
  margin-top: 150px;
  width: 50%;
  float: left; }
  #wrapper > div > h1#error-code {
    font-size: 80px;
    margin-top: 0px;
    margin-bottom: 0px; }
  #wrapper > div#div-img-soko {
    text-align: right;
    position: relative; }
    #wrapper > div#div-img-soko > div > a > img {
      margin-right: 46px; }
    #wrapper > div#div-img-soko > div > a > button {
      margin-right: 75px;
      cursor: pointer; }
  #wrapper > div#div-err {
    text-align: left; }
    #wrapper > div#div-err > h1 {
      margin-left: 0px; }
      #wrapper > div#div-err > h1:first-of-type {
        margin-left: 33px; }
      #wrapper > div#div-err > h1:last-of-type {
        margin-left: 25px; }