html, body{
    height:100%;
    width: 100%;
    overflow: hidden;
}
body{
    font: 14px/1.3 Arial, Tahoma, "微軟正黑體";
}

h2{
    font-weight: 700;
}

.absolute{
    position:absolute;
}

.some-vh{
    height:100%;
}
.row{
    padding:0px;
    margin:0px;
}
.contain-vh{
    height:100%;
    width: 100%;
    margin:0px;
    padding:0px;

}

.contain-bg{
    background-color: #fff;
}


.no-padding{
    padding: 0px;
}
.magazine-viewport .container{
    padding: 0px;
}

.logo {
  position: absolute;
  left: 20px;
  top: 20px;
  top: 8px;
  margin: 0;
  padding: 0;
  width: 112px;
  height: 40px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url('../images/icon-01.png');
  width: 125px;
  height: 100px;
  overflow: hidden;
  text-indent: -2000em;
  transform-origin: left top; }
@media (max-width: 1400px) {
  .logo {
    width: 85px;
    height: 66px;
  } 
}
@media (max-width: 800px) {
  .logo {
    transform: scale(0.8);
    left: 10px;
    top: 15px;
    top: 10px; } }
@media (max-width: 480px) {
  .logo {
    transform: scale(0.4); } }



.book-div{
    /* height:772px;
    width:1114px; */
    height:100%;
    width:100%;
    /* top:10%; */
    left:0%;
    /* padding: 20px; */
}

@media (max-width:800px){
  .book-div{

      /* top:14%; */

  }
}



#canvas{
    height: 100%;
    width: 100%;
}

.left-page{
    width:66px;
    top:45%;
    left:20px;
    z-index:20;
}
.right-page{
    width:66px;
    top:45%;
    right:20px;
    z-index:20;
}

@media screen and (max-width:1300px) { 
    .left-page{
        display:none;
    }
    .right-page{
        display:none;
    }
}



.img_width_100{
    width: 100%;
}

.img_height_100{
    height: 100%;
}

.so_pointer{
    cursor:pointer;
}

.donw-nail{
    width:100%;
    bottom:17px;
    /* left:20px; */
    z-index:2;
    padding: 0px 24%; 
    height:66px;
}

@media (max-width: 800px) {
  .donw-nail{
    width:100%;
    padding: 0px 20px; 
    bottom:8px;
  }
}

.go-flex{
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    /* flex-wrap: wrap; */
}



.nail-big-div{
    height: 100%;
}



@media (max-width: 800px) {
  #all_screen{
    display:none;
  }

  .nail-big-div{
    margin-top:10px;
    height:86%;
  }
}

.nail-img{
    height: 100%;  
    transform: scale(1.0);
    
    transition: .3s;
}
.nail-img:hover{
    
    /* transition: .3s;*/
}

.go-none{
    display: none;
}

.some_anima{
    transform: scale(1.4); 
    margin:7px;
}

.some_anima_2{
    transform: scale(1.1); 
    margin:2px;
}


.rotate_div{
    animation-name: rotate-keyframe; /* 套用的 keyframe */
    animation-duration: 0.5s;
    transform-origin: left center 0px;
    transform: matrix3d(0.65778, 0, 0.23941, 0, 0, 0.7, 0, 0, -0.34202, 0, 0.93969, 0, 490, 0, 0, 1);
}
@keyframes rotate-keyframe {
    /* 定義每個階段的影格變化  */
    0% {
        /* 定義元素在該影格所套用的樣式 */
        transform: translate3d(0px, 0px, 0px);
        
    }
    100% {
        transform: matrix3d(0.65778, 0, 0.23941, 0, 0, 0.7, 0, 0, -0.34202, 0, 0.93969, 0, 490, 0, 0, 1)
        
    }
}

.rotate_div_back{
    animation-name: rotate-keyframe-back; /* 套用的 keyframe */
    animation-duration: 0.5s;
    transform-origin: left center 0px;
    transform: translate3d(0px, 0px, 0px);
}
@keyframes rotate-keyframe-back {
    /* 定義每個階段的影格變化  */
    0% {
        /* 定義元素在該影格所套用的樣式 */
        transform: matrix3d(0.65778, 0, 0.23941, 0, 0, 0.7, 0, 0, -0.34202, 0, 0.93969, 0, 490, 0, 0, 1)
    }
    100% {
        transform: translate3d(0px, 0px, 0px);
        
    }
}



/* sidebar  */ 

.sidebar .body{
  background-color: #e1e1e1;
}


.sidebar {
    display: table;
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateX(-100%);
    background-color: #1e1e1e;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
    /* color: #ccc;  */
    color: #000; 
  }
    @media (min-width: 420px) {
      .sidebar {
        width: 420px; } }
    @media print {
      .sidebar {
        display: none; } }
    .sidebar > .header {
      display: table-row; }
      .sidebar > .header > .inner {
        display: table-cell;
        height: 1px;
        /* border-bottom: 1px solid #222; */
        border-bottom: 1px solid #fff;
        /* background-color: rgba(0, 0, 0, 0.5); */
        background-color: #f0f0f0;
        text-align: center; }
        .sidebar > .header > .inner > .wrap {
          margin: 15px; }
        .sidebar > .header > .inner .heading {
          margin: 0;
          font-size: 22px;
          letter-spacing: 2px; }
          .sidebar > .header > .inner .heading:before {
            font-size: 18px;
            top: -1px; }
        .sidebar > .header > .inner .description {
          display: block;
          margin: 3px 0 0;
          font-style: normal;
          font-size: 13px;
          color: #666; }
    .sidebar > .body {
      display: table-row; }
      .sidebar > .body > .inner {
        display: table-cell; }
        .sidebar > .body > .inner > .scrollable {
          position: absolute;
          width: 100%;
          height: 0;
          overflow: hidden; }
          .mobile .sidebar > .body > .inner > .scrollable {
            overflow: auto;
            -webkit-overflow-scrolling: touch; }
          .sidebar > .body > .inner > .scrollable > .wrap {
            margin: 30px; }
          .sidebar > .body > .inner > .scrollable .form input[type="text"],
          .sidebar > .body > .inner > .scrollable .form textarea,
          .sidebar > .body > .inner > .scrollable .form select {
            width: 100%;
            /* border: 1px solid #3f3f3f; */
            border: 1px solid #c5c4c4;
            background-color: rgba(116, 116, 116, 0.3);
            transition: background-color, border-color, color;
            transition-duration: .1s;
            padding: 12px 8px;
            border-radius: 8px;
            color: #aaa;
            resize: none;
            transition-property: background-color, border-color;
            transition-duration: .1s; }
            .sidebar > .body > .inner > .scrollable .form input[type="text"]::-webkit-input-placeholder,
            .sidebar > .body > .inner > .scrollable .form textarea::-webkit-input-placeholder,
            .sidebar > .body > .inner > .scrollable .form select::-webkit-input-placeholder {
              color: #888; }
            .sidebar > .body > .inner > .scrollable .form input[type="text"]::-moz-placeholder,
            .sidebar > .body > .inner > .scrollable .form textarea::-moz-placeholder,
            .sidebar > .body > .inner > .scrollable .form select::-moz-placeholder {
              color: #888; }
            .sidebar > .body > .inner > .scrollable .form input[type="text"]:-ms-input-placeholder,
            .sidebar > .body > .inner > .scrollable .form textarea:-ms-input-placeholder,
            .sidebar > .body > .inner > .scrollable .form select:-ms-input-placeholder {
              color: #888; }
            .sidebar > .body > .inner > .scrollable .form input[type="text"]:focus,
            .sidebar > .body > .inner > .scrollable .form textarea:focus,
            .sidebar > .body > .inner > .scrollable .form select:focus {
              background-color: rgba(211, 211, 211, 0.4);
              color: #eee; }
              .sidebar > .body > .inner > .scrollable .form input[type="text"]:focus::-webkit-input-placeholder,
              .sidebar > .body > .inner > .scrollable .form textarea:focus::-webkit-input-placeholder,
              .sidebar > .body > .inner > .scrollable .form select:focus::-webkit-input-placeholder {
                color: #bbb; }
              .sidebar > .body > .inner > .scrollable .form input[type="text"]:focus::-moz-placeholder,
              .sidebar > .body > .inner > .scrollable .form textarea:focus::-moz-placeholder,
              .sidebar > .body > .inner > .scrollable .form select:focus::-moz-placeholder {
                color: #bbb; }
              .sidebar > .body > .inner > .scrollable .form input[type="text"]:focus:-ms-input-placeholder,
              .sidebar > .body > .inner > .scrollable .form textarea:focus:-ms-input-placeholder,
              .sidebar > .body > .inner > .scrollable .form select:focus:-ms-input-placeholder {
                color: #bbb; }
            .sidebar > .body > .inner > .scrollable .form input[type="text"].error,
            .sidebar > .body > .inner > .scrollable .form textarea.error,
            .sidebar > .body > .inner > .scrollable .form select.error {
              background-color: rgba(202, 0, 13, 0.51); }
              .sidebar > .body > .inner > .scrollable .form input[type="text"].error::-webkit-input-placeholder,
              .sidebar > .body > .inner > .scrollable .form textarea.error::-webkit-input-placeholder,
              .sidebar > .body > .inner > .scrollable .form select.error::-webkit-input-placeholder {
                color: #ea7b81; }
              .sidebar > .body > .inner > .scrollable .form input[type="text"].error::-moz-placeholder,
              .sidebar > .body > .inner > .scrollable .form textarea.error::-moz-placeholder,
              .sidebar > .body > .inner > .scrollable .form select.error::-moz-placeholder {
                color: #ea7b81; }
              .sidebar > .body > .inner > .scrollable .form input[type="text"].error:-ms-input-placeholder,
              .sidebar > .body > .inner > .scrollable .form textarea.error:-ms-input-placeholder,
              .sidebar > .body > .inner > .scrollable .form select.error:-ms-input-placeholder {
                color: #ea7b81; }
          .sidebar > .body > .inner > .scrollable .form label.error {
            display: none !important; }
    .sidebar > .footer {
      display: table-row; }
      .sidebar > .footer > .inner {
        display: table-cell;
        height: 1px;
        border-top: 1px solid #fff;
        /* background-color: rgba(0, 0, 0, 0.5); */
        background-color: #f0f0f0;
        text-align: center; }
        .sidebar > .footer > .inner > .wrap {
          margin: 15px; }
        .sidebar > .footer > .inner button {
          /* background-color: rgba(0, 0, 0, 0.8); */
          background-color: #fff;
          border: 1px solid rgb(207, 206, 206);
          padding: 8px 25px 8px 20px;
          border-radius: 10px;
          font-size: 16px;
          transition: background-color .1s; }
          .sidebar > .footer > .inner button:before {
            font-size: 13px;
            margin-right: 5px; }
          .sidebar > .footer > .inner button:hover {
            background-color: #03b0e0; }
          .sidebar > .footer > .inner button ~ button {
            margin: 0 10px; }
    .sidebar#category .form {
      display: block;
      position: relative;
      overflow: hidden; }
      .sidebar#category .form:after {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: auto;
        height: auto;
        display: block;
        content: "";
        background-color: rgba(0, 0, 0, 0); }
      .sidebar#category .form button[name="clear"],
      .sidebar#category .form button[name="submit"] {
        position: absolute;
        right: 8px;
        top: 20%;
        border: none;
        background: none;
        padding: 0;
        font-size: 20px;
        transition: .4s;
        transition-property: transform, opacity; }
      .sidebar#category .form button[name="clear"] {
        opacity: 0;
        transform: scale(0); }
    .sidebar#category.loaded .form:after {
      display: none; }
    .sidebar#category.applied .form button[name="submit"] {
      opacity: 0;
      transform: scale(0); }
    .sidebar#category.applied .form button[name="clear"] {
      opacity: 1;
      transform: scale(1); }
    .sidebar#category .pages {
      display: none;
      margin: 10px -5px;
      text-align: left; }
      .sidebar#category .pages li {
        position: relative;
        width: 25%;
        padding: 10px 10px;
        overflow: hidden;
        border-radius: 10px;
        text-align: center; }
        @media (max-width: 480px) {
          .sidebar#category .pages li {
            width: 33.33%; } }
        @media (max-width: 360px) {
          .sidebar#category .pages li {
            width: 50%; } }
        .sidebar#category .pages li.active a {
          border-color: #8d0000;
          cursor: default; }
          .sidebar#category .pages li.active a .border:before {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1); }
          .sidebar#category .pages li.active a .border:after {
            background-color: rgba(0, 0, 0, 0); }
          .sidebar#category .pages li.active a .border:before {
            display: none; }
          .sidebar#category .pages li.active a .subject {
            /* background-color: rgba(167, 0, 11, 0.95); */
            background-color: #03b0e0;
            color: #eee; }
        .sidebar#category .pages li a {
          display: block;
          position: relative;
          border: 2px solid #000;
          border-radius: 3px;
          overflow: hidden;
          cursor: pointer; }
          .sidebar#category .pages li a:hover .border:before {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1); }
          .sidebar#category .pages li a:hover .border:after {
            background-color: rgba(0, 0, 0, 0); }
          .sidebar#category .pages li a .border {
            position: relative;
            background: url("../images/loader/page.gif") #fff no-repeat center;
            overflow: hidden; }
            .sidebar#category .pages li a .border:before {
              display: block;
              content: attr(data-active);
              position: absolute;
              left: 50%;
              top: 50%;
              border-radius: 50%;
              padding: 8px;
              background-color: rgba(167, 0, 11, 0.9);
              opacity: 0;
              font-size: 12px;
              transform: translate(-50%, -50%) scale(0);
              transition: .2s ease-out; }
            .sidebar#category .pages li a .border:after {
              position: absolute;
              left: 0;
              top: 0;
              right: 0;
              bottom: 0;
              margin: auto;
              width: auto;
              height: auto;
              content: "";
              background-color: rgba(0, 0, 0, 0.3);
              transition: .1s; }
            .sidebar#category .pages li a .border .thumb {
              display: block;
              width: 100%;
              height: auto; }
          .sidebar#category .pages li a .subject {
            display: block;
            background-color: rgba(0, 0, 0, 0.9);
            padding: 4px 0 2px;
            line-height: 1;
            font-style: normal;
            font-weight: normal;
            font-size: 12px;
            color: #ccc; }
    .sidebar#category .loading,
    .sidebar#category .match,
    .sidebar#category .empty {
      display: none;
      position: absolute;
      left: 0;
      top: 40%;
      width: 100%;
      text-align: center;
      color: #666; }
    .sidebar#category .loading {
      display: block; }
      .sidebar#category .loading [class*="icon-"]:before {
        animation: icon-loading .6s infinite linear; }
  
  @keyframes icon-loading {
    0% {
      transform: rotate(0deg); }
    100% {
      transform: rotate(360deg); } }
    .sidebar#shareable .notice {
      display: block;
      line-height: 1.5;
      text-align: center; }
    .sidebar#shareable .links {
      margin-top: 50px; }
      .sidebar#shareable .links ~ * {
        display: none !important; }
      @media (max-width: 600px) {
        .sidebar#shareable .links {
          margin-top: 30px; } }
      .sidebar#shareable .links .link {
        position: relative;
        display: block;
        padding: 20px;
        margin: 0 15px;
        border: 3px dotted #555;
        border-radius: 20px;
        background-color: #2a2a2a;
        font-size: 48px;
        text-align: left;
        transition-property: border-color, background-color, color;
        transition-duration: .1s; }
        .sidebar#shareable .links .link ~ .link {
          margin-top: 40px; }
        .sidebar#shareable .links .link:before {
          margin: 0;
          transition-property: color;
          transition-duration: .1s; }
        .sidebar#shareable .links .link:hover {
          border-color: #888;
          background-color: rgba(15, 77, 154, 0.8);
          /* background-color: rgba(167, 0, 11, 0.95);  */
          background-color: #03b0e0; 
        }
        .sidebar#shareable .links .link.copied::before {
          content: "\e258"; }
        /* .sidebar#shareable .links .link.line {
          padding-left: 80px; } */
          .sidebar#shareable .links .link.line::before {
            /* content: "";
            display: inline-block;
            background: url(images/line.png) no-repeat transparent;
            background-size: 100%;
            width: 50px;
            height: 50px;
            position: absolute;
            left: 18px;
            top: 22px;  */
          }
        @media (max-width: 600px) {
          .sidebar#shareable .links .link {
            font-size: 36px;
            padding-top: 10px;
            padding-bottom: 10px; }
            .sidebar#shareable .links .link ~ .link {
              margin-top: 20px; }
            .sidebar#shareable .links .link.line {
              /* padding-left: 65px;  */
            }
              .sidebar#shareable .links .link.line::before {
                width: 38px;
                height: 38px;
                left: 18px;
                top: 12px; } }
        .sidebar#shareable .links .link .subject {
          font-size: 18px; }
          @media (max-width: 600px) {
            .sidebar#shareable .links .link .subject {
              font-size: 16px; } }
    .sidebar#shareable .form {
      display: block;
      margin-top: 30px; }
      .sidebar#shareable .form .message {
        display: none;
        position: relative;
        top: -5px;
        padding: 15px 10px;
        margin: 0 0 20px;
        border-radius: 10px;
        border: 1px solid;
        background-color: #000;
        border-color: #333;
        font-size: 14px;
        text-align: center; }
      .sidebar#shareable .form .rows {
        text-align: left; }
        .sidebar#shareable .form .rows ~ .rows {
          margin-top: 20px; }
        .sidebar#shareable .form .rows dt,
        .sidebar#shareable .form .rows dd {
          padding: 3px 0; }
        .sidebar#shareable .form .rows dt {
          font-size: 15px; }
          .sidebar#shareable .form .rows dt:before {
            content: "★";
            padding-right: 5px;
            position: relative;
            color: #666; }
        .sidebar#shareable .form .rows.required dt:before {
          color: #a7000b; }
    .sidebar#printable .form {
      display: block; }
      .sidebar#printable .form .rows {
        text-align: left; }
        .sidebar#printable .form .rows ~ .rows {
          margin-top: 20px; }
        .sidebar#printable .form .rows dt,
        .sidebar#printable .form .rows dd {
          padding: 5px 0; }
        .sidebar#printable .form .rows dt {
          font-size: 15px; }
        .sidebar#printable .form .rows dd .options {
          padding-top: 5px; }
        .sidebar#printable .form .rows.preview {
          display: none; }
          .sidebar#printable .form .rows.preview .wrap {
            position: relative; }
            .sidebar#printable .form .rows.preview .wrap .border {
              background: url("../images/loader/page.gif") #fff no-repeat center;
              border: 5px solid #aaa; }
              .sidebar#printable .form .rows.preview .wrap .border .thumb {
                display: block;
                width: 100%;
                margin: 0 auto; }
            .sidebar#printable .form .rows.preview .wrap .navigation {
              margin: 5px 0 0;
              text-align: center;
              white-space: nowrap; }
              .sidebar#printable .form .rows.preview .wrap .navigation li {
                padding: 5px; }
              .sidebar#printable .form .rows.preview .wrap .navigation button {
                border: none;
                background: none;
                padding: 0; }
    #printing {
      display: none;
      position: relative;
      background-color: #fff; }
      @media print {
        #printing {
          display: block; } }
      #printing .pages {
        height: 100%; }
        #printing .pages .page {
          page-break-after: always; }
          #printing .pages .page .medium {
            display: block;
            width: 100%; }
    .sidebar#downloadable .notice {
      display: block;
      padding: 15px;
      line-height: 1.5;
      text-align: center; }
    .sidebar#downloadable .files {
      margin-top: 50px; }
      @media (max-width: 600px) {
        .sidebar#downloadable .files {
          margin-top: 30px; } }
      .sidebar#downloadable .files .file {
        display: block;
        padding: 30px;
        margin: 0 15px;
        border: 3px dotted #555;
        border-radius: 20px;
        background-color: #2a2a2a;
        font-size: 72px;
        text-align: center;
        transition-property: border-color, background-color;
        transition-duration: .1s; }
        .sidebar#downloadable .files .file ~ .file {
          margin-top: 50px; }
        .sidebar#downloadable .files .file:before {
          margin: 0; }
        .sidebar#downloadable .files .file:hover {
          border-color: #888;
          background-color: rgba(15, 77, 154, 0.8); }
        @media (max-width: 600px) {
          .sidebar#downloadable .files .file {
            font-size: 52px; }
            .sidebar#downloadable .files .file ~ .file {
              margin-top: 40px; } }
        .sidebar#downloadable .files .file .subject {
          font-size: 24px; }
          @media (max-width: 600px) {
            .sidebar#downloadable .files .file .subject {
              font-size: 16px; } }






 .row>*{
    padding: 0px;
 }
 .some-mar{
    margin: 0 .3em;
 }
 .search-icon{
    color: #333333;
 }

.pa-0{
    padding: 0px;
}


/* sidebar  */ 

/*sidebar 1*/

.sidebar-1-page{
    margin:10px -5px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.s-page-content{
    flex: 0 0 auto; 
    width: calc(100%/4);
    padding:10px 10px;
    cursor: pointer;
}
.s-page-content-for_full{
    flex: 0 0 auto; 
    width: calc(100%/4);
    padding:10px 10px;
    cursor: pointer;
}


@media (max-width: 800px) {
  .s-page-content{
    width: calc(100%/3);
    height: auto;
  }
  .s-page-content-for_full{
    width: calc(100%/3);
    height: auto;
  }
}


.s-page-img{
    
    width:100%;
}
.s-under{
    display: block;
    background-color: #fff;
    padding: 4px 0 2px;
    line-height: 1;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    /* color: #ccc; */
    color: #000;
}

.all-100{
    width: 100%;
    height: 100%; 
}
.some-after{
    width: 100%;
    height: 100%;
}



.go-relative{
    position: relative;
}

.some-back{
    /* color: rgb(204, 204, 204); */
    color: rgb(31, 30, 30);
}

.from-0{
    transform: matrix(1, 0, 0, 1, -100000, 0);
}

.to-1{
    /* transition: transform 2s;*/
    
    animation-name: from-to-side-1;
    animation-duration: 0.5s;
    transform: matrix(1, 0, 0, 1, 0, 0); 
}

.to-0{
    animation-name: to-from-side-1;
    animation-duration: 0.5s;
    transform: matrix(1, 0, 0, 1, -100000, 0); 
}

@keyframes from-to-side-1 {
    /* 定義每個階段的影格變化  */
    0% {
      /* 定義元素在該影格所套用的樣式 */
      transform: matrix(1, 0, 0, 1, -500, 0);
    }
    100% {
        transform: matrix(1, 0, 0, 1, 0, 0);
    }
  }
@keyframes to-from-side-1 {
    /* 定義每個階段的影格變化  */
    0% {
      /* 定義元素在該影格所套用的樣式 */
      transform: matrix(1, 0, 0, 1, 0, 0);
    }
    100% {
        transform: matrix(1, 0, 0, 1, -500, 0);
    }
  }

.dark-mode{
    -webkit-filter: brightness(55%);
    transition: -webkit-filter 0.15s;
}
.use_dark:hover .dark-mode{
    
    -webkit-filter: brightness(100%);
    
}

.bright-mode{
    -webkit-filter: brightness(100%);
}

.page-border{
    display: block;
    position: relative;
    /* border: 2px solid #000; */
    border: 2px solid #fff;
    border-radius: 3px;
    overflow: hidden;
}

.load-bg{
    position: relative;
    background: url("../images/loader/page.gif") #fff no-repeat center;
    overflow: hidden;
}

.go-100{
    width:100%;
    height:100%;
}

.use_choose .page-border{
    /* border-color: #8d0000; */
    border-color: #03b0e0;
}
.use_choose .s-under{
    /* background-color: rgba(167, 0, 11, 0.95); */
    background-color: #03b0e0;
    color: #eee;
}

.use_choose .dark-mode{
    -webkit-filter: brightness(100%);
}


/*sidebar 1  ^^^^*/

.some-go{
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    padding: 8px;
    /* background-color: rgba(167, 0, 11, 0.9); */
    background-color: #03b0e0;
    opacity: 0;
    font-size: 12px;
    transform: translate(-50%, -50%) scale(0);
    transition: .2s ease-out;
    
}

.some-go-active{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.use_choose .some-go-active{
    display:none;
}


.inbook-z{
    z-index: 30;
}

.side-gray{
    position: absolute;
    left:0px;
    top:0px;
    z-index:40;
    background-color: #000;
    opacity: 0.3;
}

.dis-none{
    display:none;
}

.side-gray-up{
    z-index:50;
}

/*  zoombar */


#zoom{
  position:absolute;
  top:20px;
  left:50%;
  z-index: 99
}

#zoom {
  position: absolute;
  
  width: 30%;
  max-width: 300px;
  left: 50%;
  top: 20px;
  top: -100px;
  padding: 8px 20px;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
  transform: translateX(-50%);
  transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-property: top, bottom;
  transition-duration: .4s;
  opacity: .7; }
  .zoomable #zoom {
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    top: 16px; }
  @media (max-width: 1280px) {
    #zoom {
      transform: translateX(-52%);
      left: 52%; } }
  @media (max-width: 800px) {
    #zoom {
      width: 35%;
      padding: 14px 16px; }
      .zoomable #zoom {
        top: 14px; } }
  @media (max-width: ) {
    #zoom {
      width: 60%;
      left: 50%;
      top: auto;
      bottom: 90px;
      bottom: -100px;
      transform: translateX(-50%);
      padding: 16px; }
      .zoomable #zoom {
        top: auto;
        bottom: 90px; } }
  #zoom [name="less"],
  #zoom [name="more"] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer; }
    #zoom [name="less"][name="more"],
    #zoom [name="more"][name="more"] {
      left: auto;
      right: 10px; }
  #zoom .slider {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 50px;
    right: 50px;
    background: #888;
    border-color: #888; }
    #zoom .slider .ui-slider-range {
      background: #888; }
    #zoom .slider .ui-slider-handle {
      color: #111;
      background: #ccc;
      box-shadow: 1px 1px 30px black;
      border: none;
      outline: none; }
  #zoom[data-mode="vertical"] {
    left: auto;
    top: auto;
    right: -5px;
    bottom: 5%;
    bottom: -100%;
    width: auto;
    height: 25%;
    max-height: 40%;
    padding: 14px; }
    .zoomable #zoom[data-mode="vertical"] {
      bottom: 12%; }
    #zoom[data-mode="vertical"] [name="less"],
    #zoom[data-mode="vertical"] [name="more"] {
      left: 50%;
      right: auto;
      top: 10px;
      transform: translate(-50%, 0); }
      #zoom[data-mode="vertical"] [name="less"][name="less"],
      #zoom[data-mode="vertical"] [name="more"][name="less"] {
        top: auto;
        bottom: 10px; }
    #zoom[data-mode="vertical"] .slider {
      height: auto;
      left: 50%;
      right: auto;
      top: 35px;
      bottom: 45px;
      transform: translate(-50%, 0); }

      .hidden{
        display:none;
      }

      .ui-slider {
        position: relative;
        text-align: left;
      }
      .ui-slider .ui-slider-handle {
        position: absolute;
        z-index: 2;
        width: 1.2em;
        height: 1.2em;
        cursor: default;
        -ms-touch-action: none;
        touch-action: none;
      }
      .ui-slider .ui-slider-range {
        position: absolute;
        z-index: 1;
        font-size: .7em;
        display: block;
        border: 0;
        background-position: 0 0;
      }
      
      /* support: IE8 - See #6727 */
      .ui-slider.ui-state-disabled .ui-slider-handle,
      .ui-slider.ui-state-disabled .ui-slider-range {
        filter: inherit;
      }
      
      .ui-slider-horizontal {
        height: .8em;
      }
      .ui-slider-horizontal .ui-slider-handle {
        top: -.3em;
        margin-left: -.6em;
      }
      .ui-slider-horizontal .ui-slider-range {
        top: 0;
        height: 100%;
      }
      .ui-slider-horizontal .ui-slider-range-min {
        left: 0;
      }
      .ui-slider-horizontal .ui-slider-range-max {
        right: 0;
      }
      
      .ui-slider-vertical {
        width: .8em;
        height: 100px;
      }
      .ui-slider-vertical .ui-slider-handle {
        left: -.3em;
        margin-left: 0;
        margin-bottom: -.6em;
      }
      .ui-slider-vertical .ui-slider-range {
        left: 0;
        width: 100%;
      }
      .ui-slider-vertical .ui-slider-range-min {
        bottom: 0;
      }
      .ui-slider-vertical .ui-slider-range-max {
        top: 0;
      }

      .ui-widget {
        font-family: Arial,Helvetica,sans-serif/*{ffDefault}*/;
        font-size: 1em/*{fsDefault}*/;
      }
      .ui-widget .ui-widget {
        font-size: 1em;
      }
      .ui-widget input,
      .ui-widget select,
      .ui-widget textarea,
      .ui-widget button {
        font-family: Arial,Helvetica,sans-serif/*{ffDefault}*/;
        font-size: 1em;
      }
      .ui-widget.ui-widget-content {
        border: 1px solid #c5c5c5/*{borderColorDefault}*/;
      }
      .ui-widget-content {
        border: 1px solid #dddddd/*{borderColorContent}*/;
        background: #ffffff/*{bgColorContent}*/ /*{bgImgUrlContent}*/ /*{bgContentXPos}*/ /*{bgContentYPos}*/ /*{bgContentRepeat}*/;
        color: #333333/*{fcContent}*/;
      }
      .ui-widget-content a {
        color: #333333/*{fcContent}*/;
      }
      .ui-widget-header {
        border: 1px solid #dddddd/*{borderColorHeader}*/;
        background: #e9e9e9/*{bgColorHeader}*/ /*{bgImgUrlHeader}*/ /*{bgHeaderXPos}*/ /*{bgHeaderYPos}*/ /*{bgHeaderRepeat}*/;
        color: #333333/*{fcHeader}*/;
        font-weight: bold;
      }
      .ui-widget-header a {
        color: #333333/*{fcHeader}*/;
      }
      
      /* Interaction states
      ----------------------------------*/
      .ui-state-default,
      .ui-widget-content .ui-state-default,
      .ui-widget-header .ui-state-default,
      .ui-button,
      
      /* We use html here because we need a greater specificity to make sure disabled
      works properly when clicked or hovered */
      html .ui-button.ui-state-disabled:hover,
      html .ui-button.ui-state-disabled:active {
        border: 1px solid #c5c5c5/*{borderColorDefault}*/;
        background: #f6f6f6/*{bgColorDefault}*/ /*{bgImgUrlDefault}*/ /*{bgDefaultXPos}*/ /*{bgDefaultYPos}*/ /*{bgDefaultRepeat}*/;
        font-weight: normal/*{fwDefault}*/;
        color: #454545/*{fcDefault}*/;
      }
      .ui-state-default a,
      .ui-state-default a:link,
      .ui-state-default a:visited,
      a.ui-button,
      a:link.ui-button,
      a:visited.ui-button,
      .ui-button {
        color: #454545/*{fcDefault}*/;
        text-decoration: none;
      }
      .ui-state-hover,
      .ui-widget-content .ui-state-hover,
      .ui-widget-header .ui-state-hover,
      .ui-state-focus,
      .ui-widget-content .ui-state-focus,
      .ui-widget-header .ui-state-focus,
      .ui-button:hover,
      .ui-button:focus {
        border: 1px solid #cccccc/*{borderColorHover}*/;
        background: #ededed/*{bgColorHover}*/ /*{bgImgUrlHover}*/ /*{bgHoverXPos}*/ /*{bgHoverYPos}*/ /*{bgHoverRepeat}*/;
        font-weight: normal/*{fwDefault}*/;
        color: #2b2b2b/*{fcHover}*/;
      }
      .ui-state-hover a,
      .ui-state-hover a:hover,
      .ui-state-hover a:link,
      .ui-state-hover a:visited,
      .ui-state-focus a,
      .ui-state-focus a:hover,
      .ui-state-focus a:link,
      .ui-state-focus a:visited,
      a.ui-button:hover,
      a.ui-button:focus {
        color: #2b2b2b/*{fcHover}*/;
        text-decoration: none;
      }
      
      .ui-visual-focus {
        box-shadow: 0 0 3px 1px rgb(94, 158, 214);
      }
      .ui-state-active,
      .ui-widget-content .ui-state-active,
      .ui-widget-header .ui-state-active,
      a.ui-button:active,
      .ui-button:active,
      .ui-button.ui-state-active:hover {
        border: 1px solid #003eff/*{borderColorActive}*/;
        background: #007fff/*{bgColorActive}*/ /*{bgImgUrlActive}*/ /*{bgActiveXPos}*/ /*{bgActiveYPos}*/ /*{bgActiveRepeat}*/;
        font-weight: normal/*{fwDefault}*/;
        color: #ffffff/*{fcActive}*/;
      }
      .ui-icon-background,
      .ui-state-active .ui-icon-background {
        border: #003eff/*{borderColorActive}*/;
        background-color: #ffffff/*{fcActive}*/;
      }
      .ui-state-active a,
      .ui-state-active a:link,
      .ui-state-active a:visited {
        color: #ffffff/*{fcActive}*/;
        text-decoration: none;
      }
      
      /* Interaction Cues
      ----------------------------------*/
      .ui-state-highlight,
      .ui-widget-content .ui-state-highlight,
      .ui-widget-header .ui-state-highlight {
        border: 1px solid #dad55e/*{borderColorHighlight}*/;
        background: #fffa90/*{bgColorHighlight}*/ /*{bgImgUrlHighlight}*/ /*{bgHighlightXPos}*/ /*{bgHighlightYPos}*/ /*{bgHighlightRepeat}*/;
        color: #777620/*{fcHighlight}*/;
      }
      .ui-state-checked {
        border: 1px solid #dad55e/*{borderColorHighlight}*/;
        background: #fffa90/*{bgColorHighlight}*/;
      }
      .ui-state-highlight a,
      .ui-widget-content .ui-state-highlight a,
      .ui-widget-header .ui-state-highlight a {
        color: #777620/*{fcHighlight}*/;
      }
      .ui-state-error,
      .ui-widget-content .ui-state-error,
      .ui-widget-header .ui-state-error {
        border: 1px solid #f1a899/*{borderColorError}*/;
        background: #fddfdf/*{bgColorError}*/ /*{bgImgUrlError}*/ /*{bgErrorXPos}*/ /*{bgErrorYPos}*/ /*{bgErrorRepeat}*/;
        color: #5f3f3f/*{fcError}*/;
      }
      .ui-state-error a,
      .ui-widget-content .ui-state-error a,
      .ui-widget-header .ui-state-error a {
        color: #5f3f3f/*{fcError}*/;
      }
      .ui-state-error-text,
      .ui-widget-content .ui-state-error-text,
      .ui-widget-header .ui-state-error-text {
        color: #5f3f3f/*{fcError}*/;
      }
      .ui-priority-primary,
      .ui-widget-content .ui-priority-primary,
      .ui-widget-header .ui-priority-primary {
        font-weight: bold;
      }
      .ui-priority-secondary,
      .ui-widget-content .ui-priority-secondary,
      .ui-widget-header .ui-priority-secondary {
        opacity: .7;
        filter:Alpha(Opacity=70); /* support: IE8 */
        font-weight: normal;
      }
      .ui-state-disabled,
      .ui-widget-content .ui-state-disabled,
      .ui-widget-header .ui-state-disabled {
        opacity: .35;
        filter:Alpha(Opacity=35); /* support: IE8 */
        background-image: none;
      }
      .ui-state-disabled .ui-icon {
        filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */
      }
      
      /* Icons
      ----------------------------------*/
      
      /* states and images */
      .ui-icon {
        width: 16px;
        height: 16px;
      }
      .ui-icon,
      .ui-widget-content .ui-icon {
        background-image: url("images/ui-icons_444444_256x240.png")/*{iconsContent}*/;
      }
      .ui-widget-header .ui-icon {
        background-image: url("images/ui-icons_444444_256x240.png")/*{iconsHeader}*/;
      }
      .ui-state-hover .ui-icon,
      .ui-state-focus .ui-icon,
      .ui-button:hover .ui-icon,
      .ui-button:focus .ui-icon {
        background-image: url("images/ui-icons_555555_256x240.png")/*{iconsHover}*/;
      }
      .ui-state-active .ui-icon,
      .ui-button:active .ui-icon {
        background-image: url("images/ui-icons_ffffff_256x240.png")/*{iconsActive}*/;
      }
      .ui-state-highlight .ui-icon,
      .ui-button .ui-state-highlight.ui-icon {
        background-image: url("images/ui-icons_777620_256x240.png")/*{iconsHighlight}*/;
      }
      .ui-state-error .ui-icon,
      .ui-state-error-text .ui-icon {
        background-image: url("images/ui-icons_cc0000_256x240.png")/*{iconsError}*/;
      }
      .ui-button .ui-icon {
        background-image: url("images/ui-icons_777777_256x240.png")/*{iconsDefault}*/;
      }
      .ui-corner-all,
      .ui-corner-top,
      .ui-corner-left,
      .ui-corner-tl {
        border-top-left-radius: 3px/*{cornerRadius}*/;
      }
      .ui-corner-all,
      .ui-corner-top,
      .ui-corner-right,
      .ui-corner-tr {
        border-top-right-radius: 3px/*{cornerRadius}*/;
      }
      .ui-corner-all,
      .ui-corner-bottom,
      .ui-corner-left,
      .ui-corner-bl {
        border-bottom-left-radius: 3px/*{cornerRadius}*/;
      }
      .ui-corner-all,
      .ui-corner-bottom,
      .ui-corner-right,
      .ui-corner-br {
        border-bottom-right-radius: 3px/*{cornerRadius}*/;
      }
 .some-minus{
  color:#fff;
  opacity:0.7;
 }
 .some-plus{
  color:#fff;
  opacity:0.7;
 }
      

#magazine_id{
  transform-style: preserve-3d;
  /* transform-origin: left top 0px; */
  transform :scale3d(1.2, 1.2, 1);
  transform: translate3d(0px, 11.390625px, 0px);
 }
 
/*  zoombar */

.nail-top-font{
  position: absolute;
  display:none;
  z-index:99;
}

.t-f-span{
  font-size: 13px;
  background-color: #000;
  color: #fff;
  opacity: 0.7;
  padding: 8px 16px;
  border-radius: 6px;
}

.hidden-icon{
  position: absolute;
  /* top:20px; */
  left: 20px;
  background-color: rgba(10, 10, 10, 0.8);
  z-index: 99;
  padding: 15px 15px;
  height: 0px;
  bottom:0px;
  overflow:hidden;
  border-radius: 5px;
}

/*  隱藏icon顯示後 */

 .inside-li{
   width: 150px;
   padding: 15px 15px;
   font-size: 15px;
   text-align: center;
   transition: 0.8s;
   color: #ccc;
 }
 
  .inside-li:hover{
    background: #2356a7;
    transition: 0s;
  }

  



/*  隱藏icon顯示後 ^^^^^^^^^^^ */



/* sidebar 2  printable  vvvvvv  */

.rows {
  list-style: none;
  padding: 0;
  margin: 0; }
  .rows,
  .rows *,
  .rows *::before,
  .rows *::after {
    box-sizing: border-box; }
  .rows > * {
    padding: 0;
    margin: 0; }
  .rows > * {
    padding: 10px 15px;
    display: block;
    width: auto; }
    .rows > * > .columns,
    .rows > * > .rows,
    .rows > * > .grid {
      margin: -10px -15px; }
  .rows.gutterless > * {
    padding: 0; }
    .rows.gutterless > * > .columns,
    .rows.gutterless > * > .rows,
    .rows.gutterless > * > .grid {
      margin: -0; }

.columns {
  list-style: none;
  padding: 0;
  margin: 0; }
  .columns,
  .columns *,
  .columns *::before,
  .columns *::after {
    box-sizing: border-box; }
  .columns > * {
    padding: 0;
    margin: 0; }
  .columns::after {
    display: block;
    content: "";
    clear: both; }
  .columns > * {
    padding: 10px 15px;
    display: block;
    width: auto;
    float: left; }
    .columns > * > .columns,
    .columns > * > .rows,
    .columns > * > .grid {
      margin: -10px -15px; }
  .columns.gutterless > * {
    padding: 0; }
    .columns.gutterless > * > .columns,
    .columns.gutterless > * > .rows,
    .columns.gutterless > * > .grid {
      margin: -0; }
  .columns.inline {
    letter-spacing: -0.31em; }
    .columns.inline > * {
      letter-spacing: normal; }
  .columns.inline > * {
    display: inline-block;
    vertical-align: top;
    float: none; }





/* sidebar 2  printable  ^^^^^^  */



/*sidebar 4 shareable vvvvvv*/


a{
  color: #eee;
  border: none;
  border-bottom: 0px;
  text-decoration: none;
}
a:hover{
  color: #eee;
  
}



/*sidebar 4 shareable ^^^^^^*/

.scrollable::-webkit-scrollbar{

  display:none;
  
  }


.go_big{
  transform: scale(1.2);
  transition: 0.3s;
}
.go_normal{
  transform: scale(1);
  transition: 0.3s;
}

.none_go{
  display: none;
}

.some-go{
  color: #fff;
}



@media (min-width:1400px){
  .container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{
    /* max-width:1920px !important; */
}}

.some-logo{
  position: absolute;
  top: 5px;
  left: 20px;
  height: 4%;
  width: auto;
  z-index: 30;
}
.some-logo img{
  height: 100%;
}