.fas {
    padding: 0 0 0 5px;
    font-size: 14px;
  }
  
  #menu_control:checked~.header .dropdown-menu {
    left: 0;
  }
  
  .top-container .left-wrap {
    width: 86%;
    margin-left: 7%;
    margin-right: 7%;
  }
  
  .top-container {
    width: 100%;
  }
  .top-container .cart-title{
    letter-spacing: 2px;
    font-size: 1.6rem;
    text-align: center;
    margin: 5% auto;
  }
  
  .top-container .left-wrap .step-bar {
    margin-top: 30px;
    margin-bottom: 40px;
  }
  
  .top-container .left-wrap .step-bar ol {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .top-container .left-wrap .step-bar li {
    width: 25%;
    margin-right: 10px;
  }
  
  .top-container .left-wrap .step-bar .first {
    background: #444444;
    padding: 25px 5px;
    vertical-align: middle;
  }
  
  .top-container .left-wrap .step-bar .second {
    border: 0.5px solid #444444;
    padding: 20px 5px;
  }
  
  .top-container .left-wrap .step-bar .third {
    border: 0.5px solid #444444;
    padding: 25px 5px;
    vertical-align: middle;
  }
  
  .top-container .left-wrap .step-bar .first h3 {
    width: 100%;
    font-family: 'Noto Sans TC', sans-serif;
    letter-spacing: 1.5px;
    font-weight: 400;
    font-size: 1rem;
    text-align: center;
    color: #fff;
    line-height: 2;
  }
  
  .top-container .left-wrap .step-bar .second h3,
  .top-container .left-wrap .step-bar .third h3 {
    width: 100%;
    font-family: 'Noto Sans TC', sans-serif;
    letter-spacing: 1.5px;
    font-weight: 400;
    font-size: 1rem;
    text-align: center;
    color: #444444;
    line-height: 2;
  }
  
  .top-container .left-wrap .step-bar h4 {
    width: 100%;
    font-family: 'Noto Sans TC', sans-serif;
    letter-spacing: 1.5px;
    font-weight: 300;
    font-size: 0.8rem;
    line-height: 1.5;
    text-align: center;
    color: #444444;
  }
  
  .top-container .left-wrap .step-bar .first h4 {
    color: #ffff;
  }
  
  .top-container .right-wrap {
    width: 94%;
    margin-left: 3%;
    margin-right: 3%;
  }
  
  .top-container .right-wrap .order-info-w {
    /*display: none;*/
  }
  
  
  
  
  
  .top-container .right-wrap .order-info-w {
    width: 80%;
    display: block;
    margin: 0 auto;
  }
  
  .top-container .right-wrap .order-info-w .item {
    width: 100%;
    display: flex;
    margin-top: 35px;
    border-top: 2px solid #444444;
    border-bottom: 2px solid #444444;
    padding-top: 10px;
    padding-bottom: 10px;
    display: none;
  }
  
  .top-container .right-wrap .order-info-w .item .pic-name,
  .top-container .right-wrap .order-info-w .item .product-name,
  .top-container .right-wrap .order-info-w .item .stock,
  .top-container .right-wrap .order-info-w .item .total-price,
  .top-container .right-wrap .order-info-w .item .delet {
    width: 100%;
    margin-right: 10px;
    text-align: center;
  }
  
  .top-container .right-wrap .order-info-w .item .pic-name h3,
  .top-container .right-wrap .order-info-w .item .product-name h3,
  .top-container .right-wrap .order-info-w .item .product-price h3,
  .top-container .right-wrap .order-info-w .item .stock h3,
  .top-container .right-wrap .order-info-w .item .total-price h3,
  .top-container .right-wrap .order-info-w .item .delet h3 {
    color: #444444;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 1.5px;
  }
  
  .top-container .right-wrap .order-info-w .order-info {
    width: 100%;
    display: flex;
    border-bottom: 0.5px solid #444444;
    padding: 5px 0;
    align-items: center;
  }
  
  .top-container .right-wrap .order-info-w .order-info .pic {
    width: 35%;
    text-align: left;
    vertical-align: middle;
  }
  .top-container .right-wrap .order-info-w .order-info .text{
    width: 60%;
  }
  
  .top-container .right-wrap .order-info-w .order-info .product,
  .top-container .right-wrap .order-info-w .order-info .price,
  .top-container .right-wrap .order-info-w .order-info .total,
  .top-container .right-wrap .order-info-w .order-info .stock,
  .top-container .right-wrap .order-info-w .order-info .delet {
    width: 100%;
    /*text-align: center;*/
    flex: 1;
  }
  
  .top-container .right-wrap .order-info-w .order-info .pic img {
    width: 95%;
    margin: 30px 0;
  }
  
  .top-container .right-wrap .order-info-w .order-info .product h3,
  .top-container .right-wrap .order-info-w .order-info .price h3,
  .top-container .right-wrap .order-info-w .order-info .total h3,
  .top-container .right-wrap .order-info-w .order-info .stock h3,
  .top-container .right-wrap .order-info-w .order-info .delet h3 {
    width: 100%;
    color: #444444;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    text-decoration: none;
    letter-spacing: 1.5px;
    line-height: 1.4;
  }
  
  .top-container .right-wrap .order-info-w .order-info .total h3 {
    /*text-align: center;*/
    width: 100%;
    /*padding: 30px 0;*/
  }
  
  .top-container .right-wrap .order-info-w .order-info .stock h3,
  .top-container .right-wrap .order-info-w .order-info .delet h3 {
    width: 100%;
   /* padding: 30px 0;*/
  }
  
  .top-container .right-wrap .order-info-w .order-info .product h3 {
    /*padding-top: 25px;*/
    padding: 5% 0;
  }
  
  .top-container .right-wrap .order-info-w .order-info .total h3,
  .top-container .right-wrap .order-info-w .order-info .stock h3,
  .top-container .right-wrap .order-info-w .order-info .delet h3 {
   /* margin-top: 10px;*/
  }
  
  .top-container .right-wrap .order-info-w .order-info .stock h3 input {
    /*border: none;*/
    text-align: left;
    color: #444;
    font-weight: 500;
    font-size: 0.9rem;
    width: 50%;
    line-height: 1.3;
  }
  
  .top-container .right-wrap .order-info-w .order-info .product h4 {
    color: #444444;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 0.9rem;
    font-weight: 300;
    text-decoration: none;
    letter-spacing: 1.5px;
    /*padding-bottom: 20px;*/
    line-height: 2;
  }
  
  .top-container .right-wrap .order-info-w .order-info .product,
  .top-container .right-wrap .order-info-w .order-info .total,
  .top-container .right-wrap .order-info-w .order-info .stock,
  .top-container .right-wrap .order-info-w .order-info .delet {
    /*padding: 30px 0;*/
  }
  
  .top-container .right-wrap .order-info-w .order-info .delet {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: #444444;
    /*padding: 100px 0;*/
    text-align: center;
    width: 10%;
  }
  
  .top-container .right-wrap .order-info-w .area,
  .top-container .right-wrap .order-info-w .pay,
  .top-container .right-wrap .order-info-w .shipping {
    width: 100%;
    display: flex;
    margin-bottom: 40px;
  }
  
  .top-container .right-wrap .order-info-w .area {
    border-top: 1px solid #444444;
    padding-top: 40px;
    margin-top: 40px;
  }
  
  .top-container .right-wrap .order-info-w .area h3,
  .top-container .right-wrap .order-info-w .pay h3,
  .top-container .right-wrap .order-info-w .shipping h3 {
    width: 33%;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    text-decoration: none;
    letter-spacing: 1.5px;
    margin-top: 5px;
  }
  
  
  .top-container .right-wrap .order-info-w .area h3:after,
  .top-container .right-wrap .order-info-w .pay h3:after,
  .top-container .right-wrap .order-info-w .shipping h3:after {
    content: '*';
    color: red;
  }
  
  .top-container .right-wrap .order-info-w .area .w-select-box {
    display: flex;
    width: 67%;
    /*margin-left: 5%; */
    /*margin-right: 5%;  */
    flex-wrap: wrap;
    flex-direction: column;
    /*margin-top: 30px; */
    /*align-items: center;*/
  }
  
  .top-container .right-wrap .order-info-w .area .w-select-box .w-option-container {
    width: 100%;
    max-height: 0;
    opacity: 0;
    color: #444444;
    border: 0.5px solid #444444;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 300;
    font-size: 0.9rem;
    letter-spacing: 2px;
    /*border-radius: 10px;*/
    overflow: hidden;
    order: 1;
  }
  
  
  .top-container .right-wrap .order-info-w .area .w-select-box .w-selected {
    width: 90%;
    background: #fff;
    border: 0.5px solid #444444;
    /*border-radius: 10px;*/
    margin-bottom: 5px;
    position: relative;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    letter-spacing: 2px;
    order: 0;
  }
  
  .top-container .right-wrap .order-info-w .area .w-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;
  }
  
  .top-container .right-wrap .order-info-w .area .w-select-box .w-option-container.active {
    max-height: 240px;
    opacity: 1;
    overflow-y: scroll;
    border-radius: 10px;
  }
  
  .top-container .right-wrap .order-info-w .area .w-select-box .w-option-container.active+.selected:after {
    transform: rotateX(180deg);
    top: -9px;
    /*right: 20px;*/
  }
  
  
  .top-container .right-wrap .order-info-w .area .w-select-box .w-selected {
    font-family: 'Noto Sans TC', sans-serif;
    padding: 10px 0 10px 16px;
    cursor: pointer;
    color: #444444;
    border-radius: 10px;
  }
  
  .top-container .right-wrap .order-info-w .area .w-select-box .w-option {
    padding: 15px 15px;
    cursor: pointer;
  }
  
  .top-container .right-wrap .order-info-w .area .w-select-box .w-option-container .w-option:hover {
    width: 100%;
    background: #444444;
    color: #fff;
  }
  
  .top-container .right-wrap .order-info-w .area .w-select-box label {
    cursor: pointer;
  }
  
  .top-container .right-wrap .order-info-w .area .w-select-box .w-option .radio {
    display: none;
  }
  .select-1{
    padding: 5px 0 5px 16px;
    cursor: pointer;
    width: 60%;
    background: #fff;
    color: #444444;
    border: 0.5px solid #444444;
    margin-bottom: 5px;
    position: relative;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: 2px;
    order: 0;
    border-radius: 10px;
  }
  .top-container .right-wrap .order-info-w .pay .w-select-box-pay {
    display: flex;
    width: 67%;
    /*margin-left: 5%; */
    /*margin-right: 5%;  */
    flex-wrap: wrap;
    flex-direction: column;
    /*margin-top: 30px; */
    /*align-items: center;*/
  }
  
  .top-container .right-wrap .order-info-w .pay .w-select-box-pay .w-pay-option-container {
    width: 100%;
    max-height: 0;
    opacity: 0;
    color: #444444;
    border: 0.5px solid #444444;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 300;
    font-size: 0.9rem;
    letter-spacing: 2px;
    /*border-radius: 10px;*/
    overflow: hidden;
    order: 1;
  }
  
  .top-container .right-wrap .order-info-w .pay .w-select-box-pay .w-pay-selected {
    width: 90%;
    background: #fff;
    border: 0.5px solid #444444;
    /*border-radius: 10px;*/
    margin-bottom: 5px;
    position: relative;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    letter-spacing: 2px;
    order: 0;
  }
  
  .top-container .right-wrap .order-info-w .pay .w-pay-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;
  }
  
  .top-container .right-wrap .order-info-w .pay .w-select-box-pay .w-pay-option-container.active {
    max-height: 240px;
    opacity: 1;
    overflow-y: scroll;
    border-radius: 10px;
  }
  
  .top-container .right-wrap .order-info-w .pay .w-select-box-pay .w-pay-option-container.active+.w-selected:after {
    transform: rotateX(180deg);
    top: -9px;
    /*right: 20px;*/
  }
  
  
  .top-container .right-wrap .order-info-w .pay .w-select-box-pay .w-pay-selected {
    font-family: 'Noto Sans TC', sans-serif;
    padding: 10px 0 10px 16px;
    cursor: pointer;
    color: #444444;
    border-radius: 10px;
  }
  
  .top-container .right-wrap .order-info-w .pay .w-select-box-pay .w-pay-option {
    padding: 15px 15px;
    cursor: pointer;
  }
  
  .top-container .right-wrap .order-info-w .pay .w-select-box-pay .w-pay-option-container .w-pay-option:hover {
    background: #444444;
    color: #fff;
  }
  
  .top-container .right-wrap .order-info-w .pay .w-select-box-pay label {
    cursor: pointer;
  }
  
  .top-container .right-wrap .order-info-w .pay .w-select-box-pay .w-pay-option .radio {
    display: none;
  }
  
  .top-container .right-wrap .order-info-w .shipping .w-shipping-select-box {
    display: flex;
    width: 67%;
    /*margin-left: 5%; */
    /*margin-right: 5%;  */
    flex-wrap: wrap;
    flex-direction: column;
    /*margin-top: 30px; */
    /*align-items: center;*/
  }
  
  .top-container .right-wrap .order-info-w .shipping .w-shipping-select-box .w-shipping-option-container {
    width: 100%;
    max-height: 0;
    opacity: 0;
    color: #444444;
    border: 0.5px solid #444444;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 300;
    font-size: 0.9rem;
    letter-spacing: 2px;
    /*border-radius: 10px;*/
    overflow: hidden;
    order: 1;
  }
  
  .top-container .right-wrap .order-info-w .shipping .w-shipping-select-box .w-shipping-selected {
    width: 90%;
    background: #fff;
    border: 0.5px solid #444444;
    /*border-radius: 10px;*/
    margin-bottom: 5px;
    position: relative;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    letter-spacing: 2px;
    order: 0;
  }
  
  .top-container .right-wrap .order-info-w .shipping .w-shipping-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;
  }
  
  .top-container .right-wrap .order-info-w .shipping .w-shipping-select-box .w-shipping-option-container.active {
    max-height: 240px;
    opacity: 1;
    overflow-y: scroll;
    border-radius: 10px;
  }
  
  .top-container .right-wrap .order-info-w .shipping .w-shipping-select-box .w-shipping-option-container.active+.w-shipping-selected:after {
    transform: rotateX(180deg);
    top: -9px;
    /*right: 20px;*/
  }
  
  
  .top-container .right-wrap .order-info-w .shipping .w-shipping-select-box .w-shipping-selected {
    font-family: 'Noto Sans TC', sans-serif;
    padding: 10px 0 10px 16px;
    cursor: pointer;
    color: #444444;
    border-radius: 10px;
  }
  
  .top-container .right-wrap .order-info-w .shipping .w-shipping-select-box .w-shipping-option {
    padding: 15px 15px;
    cursor: pointer;
  }
  
  .top-container .right-wrap .order-info-w .shipping .w-shipping-select-box .w-shipping-option-container .w-shipping-option:hover {
    background: #444444;
    color: #fff;
  }
  
  .top-container .right-wrap .order-info-w .shipping .w-shipping-select-box label {
    cursor: pointer;
  }
  
  .top-container .right-wrap .order-info-w .shipping .w-shipping-select-box .w-shipping-option .radio {
    display: none;
  }
  
  .top-container .right-wrap .order-info-w span p {
    border-bottom: 1px solid #444444;
    width: 100%;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    line-height: 2.4;
    /*padding-bottom: 30px;*/
    letter-spacing: 2px;
    margin-bottom: 30px;
  }
  
  .top-container .right-wrap .order-info-w .price,
  .top-container .right-wrap .order-info-w .shipping-fee,
  .top-container .right-wrap .order-info-w .total {
    width: 100%;
    display: flex;
  }
  
  .top-container .right-wrap .order-info-w .price h3,
  .top-container .right-wrap .order-info-w .shipping-fee h3,
  .top-container .right-wrap .order-info-w .total h3 {
    width: 50%;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    text-align: left;
    letter-spacing: 1.5px;
    line-height: 2;
  }
  
  .top-container .right-wrap .order-info-w .price p,
  .top-container .right-wrap .order-info-w .shipping-fee p,
  .top-container .right-wrap .order-info-w .total p {
    width: 50%;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    text-align: left;
    letter-spacing: 1.5px;
    line-height: 2;
    text-align: right;
  }
  
  .top-container .right-wrap .order-info-w input[type="submit"] {
    width: 100%;
      margin-top: 40px;
      margin-bottom: 30px;
      background: #444444;
      color: #fff;
      border: none;
      outline: none;
      font-family: 'Noto Sans TC', sans-serif;
      font-weight: 400;
      font-size: 0.9rem;
      letter-spacing: 1.5px;
      border-radius: 10px;
      padding: 8px 0;
      /* transition: .25s;*/
  }
  
  .top-container .right-wrap .order-info-w input[type="submit"]:hover {
    background: #444444;
    color: #fff;
  }
  
  
  .top-container .right-wrap .order-info-w .orderer {
    width: 100%;
    border-top: 2px solid #444444;
    border-bottom: 0.5px solid #444444;
    margin-top: 40px;
    padding-top: 25px;
    padding-bottom: 25px;
    margin-bottom: 20px;
    display: flex;
  }
  
  .top-container .right-wrap .order-info-w .orderer .title h3,
  .top-container .right-wrap .order-info-w .recipient .title h3,
  .top-container .right-wrap .order-info-w .invoice h3 {
    /* width: 100%; */
    text-align: left;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: 1.5px;
    color: #444444;
  }
  
  .top-container .right-wrap .order-info-w .orderer .title,
  .top-container .right-wrap .order-info-w .recipient .title {
    width: 100%;
  }
  
  .top-container .right-wrap .order-info-w .orderer-info {
    width: 100%;
  }
  
  .top-container .right-wrap .order-info-w .orderer-info .orderer-name,
  .top-container .right-wrap .order-info-w .orderer-info .orderer-phone,
  .top-container .right-wrap .order-info-w .orderer-info .orderer-email {
    /*width: 100%;
    margin-top: 40px;
    margin-bottom: 20px;*/
    /* display: flex; */
  }
  
  .top-container .right-wrap .order-info-w .orderer-info h3 {
    text-align: left;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 1.5px;
    margin-top: 18px;
  }
  
  .top-container .right-wrap .order-info-w .orderer-info input[type="text"],
  .top-container .right-wrap .order-info-w .orderer-info input[type="password"] {
    width: 98%;
    outline: none;
    border-radius: 10px;
    background: none;
    display: block;
    border: 0.5px solid #444444;
    padding: 5px 0px 5px 10px;
    margin-top: 10px;
    font-family: 'Noto Sans TC', sans-serif;
    color: #444444;
    font-weight: 400;
    font-size: 1.2rem;
    letter-spacing: 1.5px;
    /* margin-left: 40px; */
  }
  
  .top-container .right-wrap .order-info-w .orderer-info .orderer-add .f3 {
    float: left;
    /* margin-left: 5px; */
    margin-right: 15px;
    width: 40%;
  }
  
  .top-container .right-wrap .order-info-w .orderer-info .orderer-add .f4 {
    float: left;
    width: 50%;
  }
  
  .top-container .right-wrap .order-info-w .orderer-info .orderer-add .city,
  .top-container .right-wrap .order-info-w .orderer-info .orderer-add .town {
    padding: 5px 0 5px 5px;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 1.5px;
    line-height: 2;
    text-align: left;
    margin-top: 5px;
    color: #444444;
    border-radius: 10px;
    border: 0.5px solid #444444;
    outline: none;
    margin-bottom: 10px;
    width: 100%;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .top-container .right-wrap .order-info-m .wrap {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    display: flex;
    border-bottom: 0.5px solid #444444;
    padding-bottom: 5px;
    margin-top: 10px;
    align-items: center;
  }
  
  .top-container .right-wrap .order-info-m .wrap .pic {
    width: 70%;
    align-items: center;
  }
  
  .top-container .right-wrap .order-info-m .wrap .pic img {
    width: 80%;
  }
  
  .top-container .right-wrap .order-info-m .wrap .txt {
    width: 100%;
    font-family: 'Noto Sans TC', sans-serif;
    letter-spacing: 1.5px;
    line-height: 1.8;
    color: #444444;
    /*margin-top: 10px;  */
  }
  
  .top-container .right-wrap .order-info-m .wrap .txt h3 {
    font-size: 0.9rem;
    font-weight: 400;
  }
  
  .top-container .right-wrap .order-info-m .wrap .txt h4 {
    font-size: 0.8rem;
    font-weight: 300;
  }
  
  .top-container .right-wrap .order-info-m .wrap .txt .stock,
  .top-container .right-wrap .order-info-m .wrap .txt .price {
    display: flex;
    margin: 0;
  }
  
  .top-container .right-wrap .order-info-m .area {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 30px;
    border-top: 1px solid #444444;
    /*border-bottom:  0.5px solid #444444;*/
    padding-top: 20px;
    /*padding-bottom: 20px; */
    display: flex;
  }
  
  .top-container .right-wrap .order-info-m .pay,
  .top-container .right-wrap .order-info-m .shipping {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    /*border-bottom:  0.5px solid #444444;*/
    padding-top: 20px;
    /*padding-bottom: 20px; */
    display: flex;
  }
  
  .top-container .right-wrap .order-info-m .area h3,
  .top-container .right-wrap .order-info-m .pay h3,
  .top-container .right-wrap .order-info-m .shipping h3 {
    width: 30%;
    font-family: 'Noto Sans TC', sans-serif;
    letter-spacing: 1.5px;
    line-height: 1.8;
    color: #444444;
    font-size: 0.9rem;
    margin-top: 5px;
  }
  
  .top-container .right-wrap .order-info-m .area h3:after,
  .top-container .right-wrap .order-info-m .pay h3:after,
  .top-container .right-wrap .order-info-m .shipping h3:after {
    content: '*';
    color: red;
  }
  
  .top-container .right-wrap .order-info-m .area .select-box {
    display: flex;
    width: 100%;
    /*margin-left: 5%; */
    /*margin-right: 5%;  */
    flex-wrap: wrap;
    flex-direction: column;
    /*margin-top: 30px; */
    align-items: center;
  }
  
  .top-container .right-wrap .order-info-m .area .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: 2px;
    border-radius: 10px;
    overflow: hidden;
    order: 1;
  }
  
  .top-container .right-wrap .order-info-m .area .select-box .selected {
    width: 72%;
    background: #fff;
    border: 0.5px solid #444444;
    border-radius: 10px;
    margin-bottom: 5px;
    position: relative;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: 2px;
    order: 0;
  }
  
  .top-container .right-wrap .order-info-m .area .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;
  }
  
  .top-container .right-wrap .order-info-m .area .select-box .option-container.active {
    max-height: 240px;
    opacity: 1;
    overflow-y: scroll;
  }
  
  .top-container .right-wrap .order-info-m .area .select-box .option-container.active+.selected:after {
    transform: rotateX(180deg);
    top: -9px;
    /*right: 20px;*/
  }
  
  
  .top-container .right-wrap .order-info-m .area .select-box .selected {
    font-family: 'Noto Sans TC', sans-serif;
    padding: 10px 0 10px 16px;
    cursor: pointer;
    color: #444444;
  }
  
  .top-container .right-wrap .order-info-m .area .select-box .option {
    padding: 15px 15px;
    cursor: pointer;
  }
  
  .top-container .right-wrap .order-info-m .area .select-box .option-container .option:hover {
    background: #444444;
    color: #fff;
  }
  
  .top-container .right-wrap .order-info-m .area .select-box label {
    cursor: pointer;
  }
  
  .top-container .right-wrap .order-info-m .area .select-box .option .radio {
    display: none;
  }
  
  .top-container .right-wrap .order-info-m .pay .select-box-pay {
    display: flex;
    width: 100%;
    /*margin-left: 5%; */
    /*margin-right: 5%;  */
    flex-wrap: wrap;
    flex-direction: column;
    /*margin-top: 30px; */
    align-items: center;
  }
  
  .top-container .right-wrap .order-info-m .pay .select-box-pay .pay-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: 2px;
    border-radius: 10px;
    overflow: hidden;
    order: 1;
  }
  
  .top-container .right-wrap .order-info-m .pay .select-box-pay .pay-selected {
    width: 72%;
    background: #fff;
    border: 0.5px solid #444444;
    border-radius: 10px;
    margin-bottom: 5px;
    position: relative;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: 2px;
    order: 0;
  }
  
  .top-container .right-wrap .order-info-m .pay .pay-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;
  }
  
  .top-container .right-wrap .order-info-m .pay .select-box-pay .pay-option-container.active {
    max-height: 240px;
    opacity: 1;
    overflow-y: scroll;
  }
  
  .top-container .right-wrap .order-info-m .pay .select-box-pay .pay-option-container.active+.selected:after {
    transform: rotateX(180deg);
    top: -9px;
    /*right: 20px;*/
  }
  
  
  .top-container .right-wrap .order-info-m .pay .select-box-pay .pay-selected {
    font-family: 'Noto Sans TC', sans-serif;
    padding: 10px 0 10px 16px;
    cursor: pointer;
    color: #444444;
  }
  
  .top-container .right-wrap .order-info-m .pay .select-box-pay .pay-option {
    padding: 15px 15px;
    cursor: pointer;
  }
  
  .top-container .right-wrap .order-info-m .pay .select-box-pay .pay-option-container .pay-option:hover {
    background: #444444;
    color: #fff;
  }
  
  .top-container .right-wrap .order-info-m .pay .select-box-pay label {
    cursor: pointer;
  }
  
  .top-container .right-wrap .order-info-m .pay .select-box-pay .pay-option .radio {
    display: none;
  }
  
  .top-container .right-wrap .order-info-m .shipping .shipping-select-box {
    display: flex;
    width: 100%;
    /*margin-left: 5%; */
    /*margin-right: 5%;  */
    flex-wrap: wrap;
    flex-direction: column;
    /*margin-top: 30px; */
    align-items: center;
  }
  
  .top-container .right-wrap .order-info-m .shipping .shipping-select-box .shipping-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: 2px;
    border-radius: 10px;
    overflow: hidden;
    order: 1;
  }
  
  .top-container .right-wrap .order-info-m .shipping .shipping-select-box .shipping-selected {
    width: 72%;
    background: #fff;
    border: 0.5px solid #444444;
    border-radius: 10px;
    margin-bottom: 5px;
    position: relative;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: 2px;
    order: 0;
  }
  
  .top-container .right-wrap .order-info-m .shipping .shipping-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;
  }
  
  .top-container .right-wrap .order-info-m .shipping .shipping-select-box .shipping-option-container.active {
    max-height: 240px;
    opacity: 1;
    overflow-y: scroll;
  }
  
  .top-container .right-wrap .order-info-m .shipping .shipping-select-box .shipping-option-container.active+.shipping-selected:after {
    transform: rotateX(180deg);
    top: -9px;
    /*right: 20px;*/
  }
  
  
  .top-container .right-wrap .order-info-m .shipping .shipping-select-box .shipping-selected {
    font-family: 'Noto Sans TC', sans-serif;
    padding: 10px 0 10px 16px;
    cursor: pointer;
    color: #444444;
  }
  
  .top-container .right-wrap .order-info-m .shipping .shipping-select-box .shipping-option {
    padding: 15px 15px;
    cursor: pointer;
  }
  
  .top-container .right-wrap .order-info-m .shipping .shipping-select-box .shipping-option-container .shipping-option:hover {
    background: #444444;
    color: #fff;
  }
  
  .top-container .right-wrap .order-info-m .shipping .shipping-select-box label {
    cursor: pointer;
  }
  
  .top-container .right-wrap .order-info-m .shipping .shipping-select-box .shipping-option .radio {
    display: none;
  }
  
  .top-container .right-wrap .order-info-m .shipping {
    margin-bottom: 5px;
  }
  
  .top-container .right-wrap .order-info-m span p {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 300;
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    color: #444444;
    padding-top: 10px;
    line-height: 1.5;
    text-align: left;
    border-bottom: 1px solid #444444;
    padding-bottom: 15px;
  }
  
  .top-container .right-wrap .order-info-m .price,
  .top-container .right-wrap .order-info-m .shipping-fee,
  .top-container .right-wrap .order-info-m .total {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 20px;
    display: flex;
  }
  
  .top-container .right-wrap .order-info-m .price h3,
  .top-container .right-wrap .order-info-m .shipping-fee h3,
  .top-container .right-wrap .order-info-m .total h3 {
    width: 50%;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    color: #444444;
    text-align: left;
  }
  
  .top-container .right-wrap .order-info-m .price p,
  .top-container .right-wrap .order-info-m .shipping-fee p,
  .top-container .right-wrap .order-info-m .total p {
    width: 50%;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    color: #444444;
    text-align: right;
  }
  
  .top-container .right-wrap .order-info-m .total {
    border-top: 0.5px solid #444444;
    padding-top: 15px;
  }
  
  .top-container .right-wrap .order-info-m input[type="submit"] {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 40px;
    margin-bottom: 30px;
    background: #444444;
    color: #fff;
    border: none;
    outline: none;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    border-radius: 10px;
    padding: 8px 0;
  }
  
  @media screen and (min-width: 768px) {
    .line {
      width: 98%;
      margin-left: 1%;
      margin-right: 1%;
      border-top: 0.5px solid #aaaa;
      display: flex;
      margin-top: 1%;
    }
  
    .top-container {
      /*width: 70%;
      margin-left: 10%;
      margin-right: 20%;
      display: flex;
      margin-top: 3%;*/
      width: 90%;
    margin: 0 auto;
    /*display: flex;*/
    margin-top: 3%;
    max-width: 1440px;
      
    }
    .top-container .cart-title{
      letter-spacing: 3px;
      font-size: 2rem;
      text-align: center;
      margin: 3% auto;
    }
  
    .top-container .left-wrap {
      width: 20%;
      margin: 0;
    }
  
    .top-container .left-wrap .step-bar {
      margin-top: 30px;
      margin-bottom: 40px;
    }
  
    .top-container .left-wrap .step-bar ol {
      width: 100%;
      display: block;
      justify-content: center;
    }
  
    .top-container .left-wrap .step-bar li {
      width: 150px;
      height: 100px;
      margin-bottom: 30px;
    }
  
    .top-container .left-wrap .step-bar .first {
      background: #444444;
      vertical-align: middle;
    }
  
    .top-container .left-wrap .step-bar .second,
    .top-container .left-wrap .step-bar .third {
      border: 0.5px solid #444444;
      vertical-align: middle;
      justify-content: center;
    }
  
    .top-container .left-wrap .step-bar .first h3 {
      width: 100%;
      font-family: 'Noto Sans TC', sans-serif;
      letter-spacing: 1.5px;
      font-weight: 400;
      font-size: 1.5rem;
      text-align: center;
      color: #fff;
      line-height: 2;
      margin-top: 5px;
    }
  
    .top-container .left-wrap .step-bar .second h3,
    .top-container .left-wrap .step-bar .third h3 {
      width: 100%;
      font-family: 'Noto Sans TC', sans-serif;
      letter-spacing: 1.5px;
      font-weight: 400;
      font-size: 1.5rem;
      text-align: center;
      color: #444444;
      line-height: 2;
    }
  
    .top-container .left-wrap .step-bar .third h3 {
      margin-top: 5px;
    }
  
    .top-container .left-wrap .step-bar h4 {
      width: 100%;
      font-family: 'Noto Sans TC', sans-serif;
      letter-spacing: 1.5px;
      font-weight: 300;
      font-size: 1.1rem;
      line-height: 1.5;
      text-align: center;
      color: #444444;
    }
  
    .top-container .left-wrap .step-bar .first h4 {
      color: #ffff;
    }
  
    .top-container .right-wrap {
      width: 90%;
      margin-left: 5%;
      margin-right: 5%;
    }
  
    .right-wrap-m {
      display: none;
    }
  
    .top-container .right-wrap .order-info-m {
      display: none;
    }
  
    .top-container .right-wrap .order-info-w {
      width: 100%;
      display: block;
    }
  
    .top-container .right-wrap .order-info-w .item {
      width: 100%;
      display: flex;
      margin-top: 35px;
      border-top: 2px solid #444444;
      border-bottom: 2px solid #444444;
      padding-top: 10px;
      padding-bottom: 10px;
    }
  
    .top-container .right-wrap .order-info-w .item .pic-name,
    .top-container .right-wrap .order-info-w .item .product-name,
    .top-container .right-wrap .order-info-w .item .product-price,
    .top-container .right-wrap .order-info-w .item .stock,
    .top-container .right-wrap .order-info-w .item .total-price,
    .top-container .right-wrap .order-info-w .item .delet {
      width: 100%;
      margin-right: 10px;
      text-align: center;
      flex: 1;
    }
    .top-container .right-wrap .order-info-w .item .product-name{
      flex: 2;
    }
  
    .top-container .right-wrap .order-info-w .item .pic-name h3,
    .top-container .right-wrap .order-info-w .item .product-name h3,
    .top-container .right-wrap .order-info-w .item .stock h3,
    .top-container .right-wrap .order-info-w .item .total-price h3,
    .top-container .right-wrap .order-info-w .item .delet h3 {
      color: #444444;
      font-family: 'Noto Sans TC', sans-serif;
      font-size: 1.1rem;
      font-weight: 400;
      letter-spacing: 1.5px;
    }
    
  
    .top-container .right-wrap .order-info-w .order-info {
      width: 100%;
      display: flex;
      border-bottom: 0.5px solid #444444;
      padding: 5px 0;
      align-items: center;
    }
  
    .top-container .right-wrap .order-info-w .order-info .pic {
      width: 100%;
      text-align: left;
      vertical-align: middle;
      flex: 1;
    }
    .top-container .right-wrap .order-info-w .order-info .text {
      display: contents;
    }
  
  
    .top-container .right-wrap .order-info-w .order-info .product,
    .top-container .right-wrap .order-info-w .order-info .price,
    .top-container .right-wrap .order-info-w .order-info .total,
    .top-container .right-wrap .order-info-w .order-info .stock,
    .top-container .right-wrap .order-info-w .order-info .delet {
      width: 100%;
      text-align: center;
    }
  
    .top-container .right-wrap .order-info-w .order-info .pic img {
      width: 80%;
      margin: 30px 0;
    }
  
    .top-container .right-wrap .order-info-w .order-info .product h3,
    .top-container .right-wrap .order-info-w .order-info .price h3,
    .top-container .right-wrap .order-info-w .order-info .total h3,
    .top-container .right-wrap .order-info-w .order-info .stock h3,
    .top-container .right-wrap .order-info-w .order-info .delet h3 {
      width: 100%;
      color: #444444;
      font-family: 'Noto Sans TC', sans-serif;
      font-size: 1.3rem;
      font-weight: 400;
      text-decoration: none;
      letter-spacing: 1.5px;
      line-height: 1;
    }
  
    .top-container .right-wrap .order-info-w .order-info .total h3 {
      text-align: center;
      width: 100%;
      padding: 30px 0;
    }
  
    .top-container .right-wrap .order-info-w .order-info .stock h3,
    .top-container .right-wrap .order-info-w .order-info .delet h3 {
      width: 100%;
      padding: 30px 0;
    }
  
    .top-container .right-wrap .order-info-w .order-info .product h3 {
      /*padding-top: 25px;*/
    }
  
    .top-container .right-wrap .order-info-w .order-info .total h3,
    .top-container .right-wrap .order-info-w .order-info .stock h3,
    .top-container .right-wrap .order-info-w .order-info .delet h3 {
      margin-top: 10px;
    }
  
    .top-container .right-wrap .order-info-w .order-info .stock h3 input {
      /*border: none;*/
      text-align: center;
      color: #444;
      font-weight: 500;
      font-size: 24px;
      width: 50%;
    }
    .top-container .right-wrap .order-info-w .order-info .price h3 .price-m,
    .top-container .right-wrap .order-info-w .order-info .stock h3 .stock-m,
    .top-container .right-wrap .order-info-w .order-info .total h3 .total-m{
      display: none;
    }
    .top-container .right-wrap .order-info-w .order-info .product h4 {
      color: #444444;
      font-family: 'Noto Sans TC', sans-serif;
      font-size: 1rem;
      font-weight: 300;
      text-decoration: none;
      letter-spacing: 1.5px;
      /*padding-bottom: 20px;*/
      line-height: 1.8;
    }
  
    .top-container .right-wrap .order-info-w .order-info .product,
    .top-container .right-wrap .order-info-w .order-info .price,
    .top-container .right-wrap .order-info-w .order-info .total,
    .top-container .right-wrap .order-info-w .order-info .stock,
    .top-container .right-wrap .order-info-w .order-info .delet {
      padding: 10px 0;
      flex: 1;
    }
    .top-container .right-wrap .order-info-w .order-info .product{
      flex: 2;
    }
  
  
    .top-container .right-wrap .order-info-w .order-info .delet {
      font-family: 'Noto Sans TC', sans-serif;
      font-size: 1.5rem;
      font-weight: 400;
      color: #444444;
      padding: 100px 0;
      text-align: center;
    }
  
    .top-container .right-wrap .order-info-w .area,
    .top-container .right-wrap .order-info-w .pay,
    .top-container .right-wrap .order-info-w .shipping {
      width: 100%;
      display: flex;
      margin-bottom: 40px;
    }
  
    .top-container .right-wrap .order-info-w .area {
      border-top: 1px solid #444444;
      padding-top: 40px;
      margin-top: 40px;
    }
  
    .top-container .right-wrap .order-info-w .area h3,
    .top-container .right-wrap .order-info-w .pay h3,
    .top-container .right-wrap .order-info-w .shipping h3 {
      width: 15%;
      font-family: 'Noto Sans TC', sans-serif;
      font-size: 1.3rem;
      font-weight: 400;
      text-decoration: none;
      letter-spacing: 1.5px;
      margin-top: 5px;
    }
  
  
    .top-container .right-wrap .order-info-w .area h3:after,
    .top-container .right-wrap .order-info-w .pay h3:after,
    .top-container .right-wrap .order-info-w .shipping h3:after {
      content: '*';
      color: red;
    }
  
    .top-container .right-wrap .order-info-w .area .w-select-box {
      display: flex;
      width: 60%;
      /*margin-left: 5%; */
      /*margin-right: 5%;  */
      flex-wrap: wrap;
      flex-direction: column;
      /*margin-top: 30px; */
      /*align-items: center;*/
    }
  
    .top-container .right-wrap .order-info-w .area .w-select-box .w-option-container {
      width: 63%;
      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: 2px;
      /*border-radius: 10px;*/
      overflow: hidden;
      order: 1;
    }
  
  
    .top-container .right-wrap .order-info-w .area .w-select-box .w-selected {
      width: 60%;
      background: #fff;
      border: 0.5px solid #444444;
      /*border-radius: 10px;*/
      margin-bottom: 5px;
      position: relative;
      font-family: 'Noto Sans TC', sans-serif;
      font-weight: 400;
      font-size: 1rem;
      letter-spacing: 2px;
      order: 0;
    }
  
    .top-container .right-wrap .order-info-w .area .w-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;
    }
  
    .top-container .right-wrap .order-info-w .area .w-select-box .w-option-container.active {
      max-height: 240px;
      opacity: 1;
      overflow-y: scroll;
    }
  
    .top-container .right-wrap .order-info-w .area .w-select-box .w-option-container.active+.selected:after {
      transform: rotateX(180deg);
      top: -9px;
      /*right: 20px;*/
    }
  
  
    .top-container .right-wrap .order-info-w .area .w-select-box .w-selected {
      font-family: 'Noto Sans TC', sans-serif;
      padding: 10px 0 10px 16px;
      cursor: pointer;
      color: #444444;
    }
  
    .top-container .right-wrap .order-info-w .area .w-select-box .w-option {
      padding: 15px 15px;
      cursor: pointer;
    }
  
    .top-container .right-wrap .order-info-w .area .w-select-box .w-option-container .w-option:hover {
      width: 100%;
      background: #444444;
      color: #fff;
    }
  
    .top-container .right-wrap .order-info-w .area .w-select-box label {
      cursor: pointer;
    }
  
    .top-container .right-wrap .order-info-w .area .w-select-box .w-option .radio {
      display: none;
    }
    .select-1{
      padding: 5px 0 5px 16px;
      cursor: pointer;
      width: 60%;
      background: #fff;
      color: #444444;
      border: 0.5px solid #444444;
      margin-bottom: 5px;
      position: relative;
      font-family: 'Noto Sans TC', sans-serif;
      font-weight: 400;
      font-size: 1rem;
      letter-spacing: 2px;
      order: 0;
      border-radius: 10px;
    }
    .top-container .right-wrap .order-info-w .pay .w-select-box-pay {
      display: flex;
      width: 60%;
      /*margin-left: 5%; */
      /*margin-right: 5%;  */
      flex-wrap: wrap;
      flex-direction: column;
      /*margin-top: 30px; */
      /*align-items: center;*/
    }
  
    .top-container .right-wrap .order-info-w .pay .w-select-box-pay .w-pay-option-container {
      width: 63%;
      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: 2px;
      /*border-radius: 10px;*/
      overflow: hidden;
      order: 1;
    }
  
    .top-container .right-wrap .order-info-w .pay .w-select-box-pay .w-pay-selected {
      width: 60%;
      background: #fff;
      border: 0.5px solid #444444;
      /*border-radius: 10px;*/
      margin-bottom: 5px;
      position: relative;
      font-family: 'Noto Sans TC', sans-serif;
      font-weight: 400;
      font-size: 1rem;
      letter-spacing: 2px;
      order: 0;
    }
  
    .top-container .right-wrap .order-info-w .pay .w-pay-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;
    }
  
    .top-container .right-wrap .order-info-w .pay .w-select-box-pay .w-pay-option-container.active {
      max-height: 240px;
      opacity: 1;
      overflow-y: scroll;
    }
  
    .top-container .right-wrap .order-info-w .pay .w-select-box-pay .w-pay-option-container.active+.w-selected:after {
      transform: rotateX(180deg);
      top: -9px;
      /*right: 20px;*/
    }
  
  
    .top-container .right-wrap .order-info-w .pay .w-select-box-pay .w-pay-selected {
      font-family: 'Noto Sans TC', sans-serif;
      padding: 10px 0 10px 16px;
      cursor: pointer;
      color: #444444;
    }
  
    .top-container .right-wrap .order-info-w .pay .w-select-box-pay .w-pay-option {
      padding: 15px 15px;
      cursor: pointer;
    }
  
    .top-container .right-wrap .order-info-w .pay .w-select-box-pay .w-pay-option-container .w-pay-option:hover {
      background: #444444;
      color: #fff;
    }
  
    .top-container .right-wrap .order-info-w .pay .w-select-box-pay label {
      cursor: pointer;
    }
  
    .top-container .right-wrap .order-info-w .pay .w-select-box-pay .w-pay-option .radio {
      display: none;
    }
  
    .top-container .right-wrap .order-info-w .shipping .w-shipping-select-box {
      display: flex;
      width: 60%;
      /*margin-left: 5%; */
      /*margin-right: 5%;  */
      flex-wrap: wrap;
      flex-direction: column;
      /*margin-top: 30px; */
      /*align-items: center;*/
    }
  
    .top-container .right-wrap .order-info-w .shipping .w-shipping-select-box .w-shipping-option-container {
      width: 63%;
      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: 2px;
      /*border-radius: 10px;*/
      overflow: hidden;
      order: 1;
    }
  
    .top-container .right-wrap .order-info-w .shipping .w-shipping-select-box .w-shipping-selected {
      width: 60%;
      background: #fff;
      border: 0.5px solid #444444;
      /*border-radius: 10px;*/
      margin-bottom: 5px;
      position: relative;
      font-family: 'Noto Sans TC', sans-serif;
      font-weight: 400;
      font-size: 1rem;
      letter-spacing: 2px;
      order: 0;
    }
  
    .top-container .right-wrap .order-info-w .shipping .w-shipping-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;
    }
  
    .top-container .right-wrap .order-info-w .shipping .w-shipping-select-box .w-shipping-option-container.active {
      max-height: 240px;
      opacity: 1;
      overflow-y: scroll;
    }
  
    .top-container .right-wrap .order-info-w .shipping .w-shipping-select-box .w-shipping-option-container.active+.w-shipping-selected:after {
      transform: rotateX(180deg);
      top: -9px;
      /*right: 20px;*/
    }
  
  
    .top-container .right-wrap .order-info-w .shipping .w-shipping-select-box .w-shipping-selected {
      font-family: 'Noto Sans TC', sans-serif;
      padding: 10px 0 10px 16px;
      cursor: pointer;
      color: #444444;
    }
  
    .top-container .right-wrap .order-info-w .shipping .w-shipping-select-box .w-shipping-option {
      padding: 15px 15px;
      cursor: pointer;
    }
  
    .top-container .right-wrap .order-info-w .shipping .w-shipping-select-box .w-shipping-option-container .w-shipping-option:hover {
      background: #444444;
      color: #fff;
    }
  
    .top-container .right-wrap .order-info-w .shipping .w-shipping-select-box label {
      cursor: pointer;
    }
  
    .top-container .right-wrap .order-info-w .shipping .w-shipping-select-box .w-shipping-option .radio {
      display: none;
    }
  
    .top-container .right-wrap .order-info-w span p {
      border-bottom: 1px solid #444444;
      width: 100%;
      font-family: 'Noto Sans TC', sans-serif;
      font-weight: 300;
      font-size: 1.2rem;
      /*padding-bottom: 30px;*/
      letter-spacing: 2px;
      margin-bottom: 30px;
    }
  
    .top-container .right-wrap .order-info-w .price,
    .top-container .right-wrap .order-info-w .shipping-fee,
    .top-container .right-wrap .order-info-w .total {
      width: 100%;
      display: flex;
    }
  
    .top-container .right-wrap .order-info-w .price h3,
    .top-container .right-wrap .order-info-w .shipping-fee h3,
    .top-container .right-wrap .order-info-w .total h3 {
      width: 50%;
      font-family: 'Noto Sans TC', sans-serif;
      font-weight: 400;
      font-size: 1.2rem;
      text-align: left;
      letter-spacing: 1.5px;
      line-height: 2;
    }
  
    .top-container .right-wrap .order-info-w .price p,
    .top-container .right-wrap .order-info-w .shipping-fee p,
    .top-container .right-wrap .order-info-w .total p {
      width: 50%;
      font-family: 'Noto Sans TC', sans-serif;
      font-weight: 300;
      font-size: 1.2rem;
      text-align: left;
      letter-spacing: 1.5px;
      line-height: 2;
      text-align: right;
    }
  
    .top-container .right-wrap .order-info-w input[type="submit"] {
      width: 100%;
      margin-top: 50px;
      background: #aaaa;
      color: #444444;
      border: none;
      outline: none;
      font-family: 'Noto Sans TC', sans-serif;
      font-weight: 400;
      font-size: 1.2rem;
      letter-spacing: 1.5px;
      line-height: 2;
      transition: .25s;
    }
  
    .top-container .right-wrap .order-info-w input[type="submit"]:hover {
      background: #444444;
      color: #fff;
    }
  
  
    .top-container .right-wrap .order-info-w .orderer {
      width: 100%;
      border-top: 2px solid #444444;
      border-bottom: 0.5px solid #444444;
      margin-top: 40px;
      padding-top: 25px;
      padding-bottom: 25px;
      margin-bottom: 20px;
      display: flex;
    }
  
    .top-container .right-wrap .order-info-w .orderer .title h3,
    .top-container .right-wrap .order-info-w .recipient .title h3,
    .top-container .right-wrap .order-info-w .invoice h3 {
      /* width: 100%; */
      text-align: left;
      font-family: 'Noto Sans TC', sans-serif;
      font-size: 1.3rem;
      font-weight: 400;
      letter-spacing: 1.5px;
      color: #444444;
    }
  
    .top-container .right-wrap .order-info-w .orderer .title,
    .top-container .right-wrap .order-info-w .recipient .title {
      width: 100%;
    }
  
    .top-container .right-wrap .order-info-w .orderer-info {
      width: 100%;
    }
  
    .top-container .right-wrap .order-info-w .orderer-info .orderer-name,
    .top-container .right-wrap .order-info-w .orderer-info .orderer-phone,
    .top-container .right-wrap .order-info-w .orderer-info .orderer-email {
      /*width: 100%;
      margin-top: 40px;
      margin-bottom: 20px;*/
      /* display: flex; */
    }
  
    .top-container .right-wrap .order-info-w .orderer-info h3 {
      text-align: left;
      font-family: 'Noto Sans TC', sans-serif;
      font-size: 1.1rem;
      font-weight: 400;
      letter-spacing: 1.5px;
      margin-top: 18px;
    }
  
    .top-container .right-wrap .order-info-w .orderer-info input[type="text"],
    .top-container .right-wrap .order-info-w .orderer-info input[type="password"] {
      width: 98%;
      outline: none;
      border-radius: 10px;
      background: none;
      display: block;
      border: 0.5px solid #444444;
      padding: 5px 0px 5px 10px;
      margin-top: 10px;
      font-family: 'Noto Sans TC', sans-serif;
      color: #444444;
      font-weight: 400;
      font-size: 1.2rem;
      letter-spacing: 1.5px;
      /* margin-left: 40px; */
    }
  
    .top-container .right-wrap .order-info-w .orderer-info .orderer-add .f3 {
      float: left;
      /* margin-left: 5px; */
      margin-right: 15px;
      width: 20%;
    }
  
    .top-container .right-wrap .order-info-w .orderer-info .orderer-add .f4 {
      float: left;
      width: 45%;
    }
  
    .top-container .right-wrap .order-info-w .orderer-info .orderer-add .city,
    .top-container .right-wrap .order-info-w .orderer-info .orderer-add .town {
      padding: 5px 0 5px 5px;
      font-family: 'Noto Sans TC', sans-serif;
      font-size: 1.1rem;
      font-weight: 400;
      letter-spacing: 1.5px;
      line-height: 2;
      text-align: left;
      margin-top: 5px;
      color: #444444;
      border-radius: 10px;
      border: 0.5px solid #444444;
      outline: none;
      margin-bottom: 10px;
      width: 100%;
    }
  
    /*webkit瀏覽器專用*/
    ::-webkit-input-placeholder {
      color: #bbb;
      font-weight: 300;
    }
  
    /*Firefox 4-18瀏覽器專用*/
    input::-moz-placeholder {
      color: #bbb;
      font-weight: 300;
    }
  
    /*Firefox 19+瀏覽器專用*/
    input::-moz-placeholder {
      color: #bbb;
      font-weight: 300;
    }
  
    /*IE10瀏覽器專用*/
    :-ms-input-placeholder {
      color: #bbb;
      font-weight: 300;
    }
  
  
  }