.fas {
        padding: 0 0 0 5px;
        font-size: 14px;
      }

      #menu_control:checked~.header .dropdown-menu {
        left: 0;
      }

      .page-wrap {
        padding: 20px 3px;
        border-top: 0.5px solid #444444;
        margin-top: 5px;
        margin-right: 3%;
        margin-left: 3%;
      }

      .page-wrap .breadcrumb {
        width: 100%;
        margin: auto;
        margin-left: 0;
        display: flex;
      }

      .page-wrap .breadcrumb li {
        padding: 0 10px;
      }

      .page-wrap .breadcrumb a {
        color: #aaa;
        font-family: 'Noto Sans TC', sans-serif;
        font-size: 0.8rem;
        font-weight: 300;
        text-decoration: none;
        letter-spacing: 1.5px;
        transition: .3s;
      }

      .page-wrap .breadcrumb a:hover,
      .page-wrap .breadcrumb li:last-child a {
        color: #444444;
      }

      .page-wrap .breadcrumb li+li {
        padding-left: 0;
      }

      .page-wrap .breadcrumb li+li:before {
        content: '>';
        color: #aaa;
        margin-right: 10px;
      }

      .product-container {
        width: 80%;
        margin: auto;
      }

      .product-container .slidershow {
        position: relative;
        overflow: hidden;
      }

      .product-container .navigation {
        width: 100%;
        /*position: absolute;*/
        bottom: 0;
        margin-top: 5px;
        margin-bottom: 5px;
        /*transform: translateX(70%);
        transform: translateY(50%);*/
        display: flex;
      }

      .product-container .bar {
        width: 8px;
        height: 8px;
        border-radius: 100%;
        border: 1px solid none;
        background: rgba(170, 170, 170, .5);
        margin: 5px;
        cursor: pointer;
        transition: .4s;
      }

      .product-container .bar:hover {
        background: #444444;
      }

      .product-container .slides input[name="p"] {
        position: absolute;
        visibility: hidden;
      }

      .product-container .slides {
        width: 500%;
        display: flex;
      }

      .product-container .slide {
        width: 20%;
        transition: .6s;
      }

      .product-container .slide img {
        width: 100%;

      }

      #p1:checked~.s1 {
        margin-left: 0;
      }

      #p2:checked~.s1 {
        margin-left: -20%;
      }

      #p3:checked~.s1 {
        margin-left: -40%;
      }

      #p4:checked~.s1 {
        margin-left: -60%;
      }

      #p5:checked~.s1 {
        margin-left: -80%;
      }

      .product-title {
        display: flex;
        flex-wrap: wrap;
        /*border-bottom: 0.5px solid #aaa;*/
      }

      .product-title .product-wrap {
        width: 100%;
      }

      .product-title h2 {
        width: 100%;
        font-size: 1.6rem;
        font-family: 'Noto Sans TC', sans-serif;
        line-height: 1.5;
        font-weight: 400;
        letter-spacing: 1.5px;
        color: #444444;
        margin-left: 40px;
      }

      .product-title h3 {
        width: 100%;
        font-size: 0.8rem;
        font-family: 'Noto Sans TC', sans-serif;
        line-height: 1.8;
        letter-spacing: 1.5px;
        font-weight: 300;
        color: #aaa;
        margin-top: 1px;
        margin-left: 40px;
      }

      .product-title .stock {
        display: flex;
        margin-top: 5px;
        height: 0;
      }

      .product-title .stock h3 {
        margin-left: 5px;
      }

      .product-title .stock p {
        width: 8px;
        height: 8px;
        background: green;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 50px;
        margin-top: 9px;
        margin-right: 5px;
        margin-left: 40px;
      }

      .product-title .stock h3 {
        font-size: 0.8rem;
        font-family: 'Noto Sans TC', sans-serif;
        line-height: 1.8;
        letter-spacing: 1.5px;
        font-weight: 300;
        color: #444444;
        margin-bottom: 10px;
      }

      .product-title .btn-collect {
        left: 80%;
        height: 0;
        text-align: center;
        font-family: 'Noto Sans TC', sans-serif;
        letter-spacing: 1.5px;
        font-weight: 300;
        font-size: 0.8rem;
        color: #444444;
        position: relative;
        line-height: 2.2;
        margin-top: 5px;
      }
      .product-title .btn-collect a {
        color: #444;
        text-decoration: none;
      }

      .product-title .dis-price {
        width: 82%;
        font-size: 1.2rem;
        font-family: 'Noto Sans TC', sans-serif;
        line-height: 2.2;
        letter-spacing: 1.5px;
        font-weight: 400;
        color: #E74C3C;
        margin-bottom: 0px;
        right: 8%;
        margin-top: 40px;
        /*left: 10px; */
        position: absolute;
        border-top: 0.5px solid #aaa;
      }

      .product-title .price-d {
        width: 82%;
        font-size: 0.6rem;
        font-family: 'Noto Sans TC', sans-serif;
        line-height: 2.2;
        letter-spacing: 1.5px;
        font-weight: 300;
        color: #aaa;
        text-decoration: line-through;
        margin-bottom: 0px;
        right: 8%;
        margin-top: 75px;
        /*left: 10px; */
        position: absolute;
        /*border-top:  0.5px solid #aaa;*/
      }

      .product-title .price {
        width: 82%;
        font-size: 1.2rem;
        font-family: 'Noto Sans TC', sans-serif;
        line-height: 2.2;
        letter-spacing: 1.5px;
        font-weight: 400;
        color: #444444;
        margin-bottom: 0px;
        right: 8%;
        margin-top: 35px;
        /*left: 10px; */
        position: absolute;
        border-top: 0.5px solid #aaa;
      }

      .select-box {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        flex-direction: column;
        margin-top: 110px;
        margin-left: 40px;
      }

      .select-box .option-container {
        width: 76%;
        max-height: 0;
        opacity: 0;
        color: #444444;
        border: 0.5px solid #444444;
        font-family: 'Noto Sans TC', sans-serif;
        font-weight: 300;
        font-size: 1rem;
        letter-spacing: 1px;
        /*border-radius: 5px;*/
        overflow: hidden;
        order: 1;
      }

      .select-box .selected {
        width: 72%;
        background: #fff;
        border: 0.5px solid #444444;
        margin-bottom: 5px;
        position: relative;
        order: 0;
      }

      .selected::after {
        content: '';
        background: url("image/angle-down-solid.svg");
        background-size: 35%;
        background-repeat: no-repeat;
        position: absolute;
        height: 100%;
        width: 32px;
        right: 1px;
        transition: all 0.4s;
      }

      .select-box .option-container.active {
        max-height: 240px;
        opacity: 1;
        overflow-y: scroll;
      }

      .select-box .option-container.active+.selected:after {
        transform: rotateX(180deg);
        top: -9px;
        /*right: 20px;*/
      }

      .select-box .option-container::-webkit-scrollbar {
        width: 8px;
        background: rgba(68, 68, 68, .1);
        border-radius: 50px;
      }

      .select-box .option-container::-webkit-scrollbar-thumb {
        background: rgba(170, 170, 170, .6);
        border-radius: 50px;
      }

      .select-box .select-amount {
        width: 77%;
        background: #fff;
        border: 0.5px solid #444444;
        margin-bottom: 5px;
        position: relative;
        order: 0;
        font-family: 'Noto Sans TC', sans-serif;
        padding: 8px 0 8px 16px;
        cursor: pointer;
        color: #444444;
        /* letter-spacing: 1px; */
        font-size: 1rem;
      }

      .select-box .selected {
        font-family: 'Noto Sans TC', sans-serif;
        padding: 10px 0 10px 16px;
        cursor: pointer;
        color: #444444;
      }


      .select-box .option {
        padding: 15px 15px;
        cursor: pointer;
      }

      .select-box .option-container .option:hover {
        background: #444444;
        color: #fff;
      }

      .select-box label {
        cursor: pointer;
      }

      .select-box .option .radio {
        display: none;
      }


      .product-title .btn-purchase {
        width: 80%;
        background: #aaa;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 5px;
        margin-left: 10%;
        margin-right: 10%;
        padding-top: 10px;
        padding-bottom: 10px;
      }

      .product-title .btn-purchase a {
        font-family: 'Noto Sans TC', sans-serif;
        letter-spacing: 1.5px;
        font-weight: 400;
        font-size: 1rem;
        color: #fff;
        text-decoration: none;
      }

      .product-title .btn-cart {
        width: 80%;
        background: #444444;
        text-align: center;
        margin-bottom: 5px;
        padding-top: 10px;
        padding-bottom: 10px;
        margin-left: 10%;
        margin-right: 10%;
        margin-top: 10px;
      }

      .product-title .btn-cart a {
        width: 100%;
        font-family: 'Noto Sans TC', sans-serif;
        letter-spacing: 1.5px;
        font-weight: 400;
        font-size: 1rem;
        color: #fff;
        margin-bottom: 10px;
        text-decoration: none;
      }

      .info-container {
        width: 94%;
        margin-right: 3%;
        margin-left: 3%;
        margin: auto;
        text-align: center;
        margin-top: 15px;
        border-top: 0.5px solid #AAA;
      }

      .info-container h2 {
        padding-top: 25px;
        font-family: 'Noto Sans TC', sans-serif;
        letter-spacing: 1.5px;
        font-weight: 400;
        color: #444444;
        font-size: 1.2rem;
      }

      .info-container p {
        padding-top: 15px;
        margin-right: 18px;
        margin-left: 18px;
        font-family: 'Noto Sans TC', sans-serif;
        letter-spacing: 1.5px;
        line-height: 1.8;
        font-weight: 300;
        color: #444444;
        font-size: 1rem;
        text-align: justify;
      }

      .essential {
        width: 94%;
        margin-top: 25px;
        /* margin-right: 4%; 
        margin-left: 2%;  */
        margin-right: 3%;
        margin-left: 3%;
        border-top: 0.5px solid #AAA;
        padding-bottom: 10px;
      }

      .essential h2 {
        width: 100%;
        margin: auto;
        padding-top: 25px;
        font-family: 'Noto Sans TC', sans-serif;
        letter-spacing: 1.5px;
        font-weight: 400;
        color: #444444;
        font-size: 1.1rem;
        text-align: center;
      }

      .essential .essential-container {
        width: 90%;
        display: flex;
        margin: auto;
        padding-bottom: 10px;
        padding-top: 30px;
      }

      .essential .essential-item {
        width: 45%;
        margin-left: 1%;
        margin-right: 1%;
      }

      .essential .essential-item img {
        width: 90%;
        /*margin-left: 5px; 
        margin-right: 5px;  */
      }

      #topBtn {
        position: fixed;
        bottom: 11%;
        right: 30px;
        padding-left: 2px;
        padding-right: 7px;
        font-size: 1rem;
        width: 30px;
        height: 30px;
        background: rgba(53, 59, 72, .5);
        color: #fff;
        border: none;
        border-radius: 100%;
        cursor: pointer;
        outline: none;
      }




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

        .page-wrap {
          width: 98%;
          margin: auto;
          padding: 20px 0;
          border-top: 0.5px solid #aaa;
          margin-top: 12px;
          /*margin-right: 3%;*/
          /*margin-left: 3%;*/
        }

        .page-wrap .breadcrumb {
          width: 80%;
          margin: auto;
          margin-left: 7.5%;
          display: flex;
          margin-top: 30px;
          padding-bottom: 20px;
        }

        .page-wrap .breadcrumb li {
          padding: 0 10px;
        }

        .page-wrap .breadcrumb a {
          color: #aaa;
          font-family: 'Noto Sans TC', sans-serif;
          font-size: 1.1rem;
          font-weight: 400;
          text-decoration: none;
          letter-spacing: 1.5px;
          transition: .3s;
        }

        .page-wrap .breadcrumb a:hover,
        .page-wrap .breadcrumb li:last-child a {
          color: #444444;
        }

        .page-wrap .breadcrumb li+li {
          padding-left: 0;
        }

        .page-wrap .breadcrumb li+li:before {
          content: '>';
          color: #aaa;
          margin-right: 10px;
        }

        .product-container {
          width: 50%;
          margin: auto;
          display: flex;
          flex-wrap: wrap;
          position: relative;
        }

        .product-container .slidershow {
          width: 100%;
          /*height: 50vh;*/
          /*height: 50vh; */
          right: 38%;
          position: absolute;
          overflow: hidden;
          margin: 30px 0 0 0;
          margin-right: 5%;
          padding: 0;
        }

        .product-container .navigation {
          width: 50px;
          padding-top: 100%;
          padding-right: 20px;
          display: flex;
          flex-wrap: wrap;
          background: #fff;
          top: 0;
          position: relative;
          transform: translateY(-100%);
        }

        .product-container .bar {
          width: 12px;
          height: 12px;
          border-radius: 0%;
          border: 1px solid none;
          background: rgba(170, 170, 170, .5);
          margin: 15px 0 3px 25px;
          cursor: pointer;
          transition: .4s;
        }

        .product-container .bar:hover {
          background: #444444;
        }

        .product-container .slides input[name="p"] {
          position: absolute;
          visibility: hidden;
        }

        .product-container .slides {
          width: 500%;
          display: flex;
        }

        .product-container .slide {
          width: 20%;
          transition: .6s;
        }

        .product-container .slide img {
          width: 90%;
          padding-left: 10%;

        }

        #p1:checked~.s1 {
          margin-left: 0;
        }

        #p2:checked~.s1 {
          margin-left: -20%;
        }

        #p3:checked~.s1 {
          margin-left: -40%;
        }

        #p4:checked~.s1 {
          margin-left: -60%;
        }

        #p5:checked~.s1 {
          margin-left: -80%;
        }

        .product-title {
          width: 35%;
          /*height: 0;  */
          left: 58%;
          bottom: 40px;
          /*height: 20%;  */
          display: flex;
          flex-wrap: wrap;
          /*position: absolute;*/
          position: relative;
          border-bottom: none;
        }

        .product-title .product-wrap {
          width: 100%;
          /*height: 25vh;  */
          padding-top: 45%;
          padding-bottom: 30%;
          position: absolute;
        }

        .product-title h2 {
          width: 100%;
          /*margin-top: 50px;*/
          font-size: 1.9rem;
          letter-spacing: 3px;
          position: absolute;
          margin-left: 0;
        }

        .product-title h3 {
          width: 100%;
          font-size: 1rem;
          letter-spacing: 4px;
          margin-left: 1px;
          position: absolute;
          margin-top: 50px;
        }

        .product-title .stock {
          width: 80%;
          margin-top: 45px;
          position: absolute;
        }

        .product-title .stock h3 {
          font-size: 1rem;
          letter-spacing: 3px;
          margin-left: 20px;
        }

        .product-title .stock p {
          margin-top: 61px;
          margin-right: 0px;
          margin-left: 0;
        }

        .product-title .btn-collect {
          width: 20%;
          position: absolute;
          margin-top: 93px;
          margin-left: 5%;
          font-size: 1rem;
        }

        .product-title .btn-collect a {
          color: #444;
          text-decoration: none;
        }

        .product-title .dis-price {
          font-family: 'Noto Sans TC', sans-serif;
          font-weight: 400;
          color: #E74C3C;
          width: 100%;
          position: absolute;
          border-top: 0.5px solid #aaa;
          margin-top: 140px;
          font-size: 1.6rem;
          padding-top: 5px;
          padding-right: 30px;
          left: 0;
        }

        .product-title .price-d {
          width: 100%;
          margin-top: 12.5em;
          border-top: none;
          font-size: 0.8rem;
          text-decoration: line-through;
          padding-top: 30px;
          padding-right: 30px;
          color: #aaa;
          left: 0;
        }

        .product-title .price {
          width: 100%;
          position: absolute;
          border-top: 0.5px solid #aaa;
          margin-top: 140px;
          font-size: 1.6rem;
          padding-top: 5px;
          padding-right: 30px;
          left: 0;
        }

        .select-box {
          /*position: absolute;*/
          display: flex;
          width: 80%;
          flex-wrap: wrap;
          flex-direction: column;
          margin-top: 220px;
          z-index: 99;
          margin-left: 0;
        }

        .select-box .option-container {
          width: 76%;
          max-height: 0;
          opacity: 0;
          color: #444444;
          border: 1px solid #444444;
          font-family: 'Noto Sans TC', sans-serif;
          font-weight: 300;
          font-size: 1rem;
          letter-spacing: 1px;
          overflow: hidden;
          order: 1;
          background: #fff;
          padding: 2px 1px 0 1px;
        }

        .select-box .selected {
          width: 72%;
          background: #fff;
          border: 0.5px solid #444444;
          margin-bottom: 5px;
          position: relative;
          order: 0;
        }

        .selected::after {
          content: '';
          background: url("image/angle-down-solid.svg");
          background-size: 35%;
          background-repeat: no-repeat;
          position: absolute;
          height: 100%;
          width: 32px;
          right: 1px;
          transition: all 0.4s;
        }

        .select-box .option-container.active {
          max-height: 240px;
          opacity: 1;
          overflow-y: scroll;
        }

        .select-box .option-container.active+.selected:after {
          transform: rotateX(180deg);
          top: -9px;
          /*right: 20px;*/
        }

        .select-box .option-container::-webkit-scrollbar {
          width: 8px;
          background: rgba(68, 68, 68, .1);
          border-radius: 50px;
        }

        .select-box .option-container::-webkit-scrollbar-thumb {
          background: rgba(170, 170, 170, .6);
          border-radius: 50px;
        }

        .select-box .selected {
          font-family: 'Noto Sans TC', sans-serif;
          padding: 10px 0 10px 16px;
          cursor: pointer;
          color: #444444;
        }

        .select-box .option {
          padding: 15px 15px;
          cursor: pointer;
        }

        .select-box .option-container .option:hover {
          background: #444444;
          color: #fff;
        }

        .select-box label {
          cursor: pointer;
        }

        .select-box .option .radio {
          display: none;
        }

        .product-title .btn-purchase {
          position: absolute;
          width: 49%;
          background: #444444;
          text-align: center;
          /*margin-top: 275px;*/
          margin-bottom: 5px;
          padding-top: 20px;
          padding-bottom: 20px;
          margin-left: 0;
        }

        .product-title .btn-purchase a {
          font-family: 'Noto Sans TC', sans-serif;
          letter-spacing: 1.5px;
          font-weight: 400;
          font-size: 1.2rem;
          color: #fff;
          text-decoration: none;
        }

        .product-title .btn-cart {
          width: 49%;
          position: absolute;
          background: #aaa;
          text-align: center;
          margin-bottom: 5px;
          padding-top: 20px;
          padding-bottom: 20px;
          /*margin-top: 275px;*/
          margin-left: 50%;
        }

        .product-title .btn-cart a {
          width: 100%;
          font-family: 'Noto Sans TC', sans-serif;
          letter-spacing: 1.5px;
          font-weight: 400;
          font-size: 1.2rem;
          color: #fff;
          margin-bottom: 10px;
          text-decoration: none;
        }

        .info-container {
          width: 98%;
          margin-top: 50%;
          position: relative;
          /*position: absolute;*/
          /*margin-top: 50%; */
          padding-top: 0;
          margin-right: 1%;
          margin-left: 1%;
          font-family: 'Noto Sans TC', sans-serif;
          letter-spacing: 1.5px;
          color: #444444;
        }

        .info-container h2 {
          width: 100%;
          text-align: center;
          font-size: 1.6rem;
          font-weight: 400;
          line-height: 1;
          margin-top: 30px;
        }

        .info-container p {
          width: 50%;
          margin-top: 15px;
          text-align: justify;
          margin-right: 25%;
          margin-left: 25%;
          font-size: 1rem;
          line-height: 2.5;
        }

        .essential {
          position: relative;
          width: 98%;
          /*position: absolute;*/
          margin: auto;
          top: 100px;
          border-top: 0.5px solid #AAA;
          padding-bottom: 100px;
        }

        .essential h2 {
          width: 100%;
          margin: auto;
          padding-top: 65px;
          padding-bottom: 20px;
          font-family: 'Noto Sans TC', sans-serif;
          letter-spacing: 1.5px;
          font-weight: 400;
          color: #444444;
          font-size: 1.6rem;
          text-align: center;
        }

        .essential .essential-container {
          width: 90%;
          display: flex;
          margin: auto;
          padding-bottom: 40px;
          padding-top: 30px;
        }

        .essential .essential-item {
          width: 30%;
          margin-bottom: 10px;
          /*position: relative;*/
        }

        .essential .essential-item img {
          width: 80%;
          margin: auto;
        }







      }