/* reset theme css */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: inherit;
    }


    body {
      font-family: "微軟正黑體", "Microsoft JhengHei", "Segoe UI Semibold", "Segoe UI", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif
    }

    .badge-secondary {
      color: #fff;
    }

    .badge-outline.badge.bg-secondary {
      background-color: white !important;
    }

    .navbar {
      padding-bottom: 4px;
      padding-top: 4px;
    }

    .navbar-brand {
      height: 44px;
    }

    .nav-link:hover,
    .nav-link:focus {
      color: #F0762F;
    }

    html,
    body {
      font-size: 15px !important;
    }

    body {
      height: auto;
      min-height: 100%;
    }

    p:last-child {
      margin-bottom: 0;
    }

    .ol_li_reset {
      list-style: none;
      margin-bottom: 0;
    }
    .blur3px{
      backdrop-filter: blur(3px);
    }
    .borr6 {
      border-radius: 6px;
    }

    .borr12 {
      border-radius: 12px;
    }
    .x_overlay.overlay .overlay-layer{
      background-color: #ffffff86;
    }
    .x_overlay.overlay.overlay-block{
      cursor: help;
    }

    .borr0_top {
      border-top-left-radius: 0 !important;
      border-top-right-radius: 0 !important;
    }

    .borr0_start {
      border-top-left-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
    }

    .borr0_end {
      border-top-right-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
    }

    .borr0_bottom {
      border-bottom-left-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
    }

    .fz12 {
      font-size: 12px;
    }
    .w-22px{
      width: 22px;
    }
    .w-70 {
      width: 70%;
    }
    .mw-60{
      max-width: 60% !important;
    }
    .mw-70{
      max-width: 70% !important;
    }
    .minfit{
      min-width: fit-content;
    }
    .h20px{
      height: 20px;
    }
    .col-1m {
      width: 12.5%;
    }
    .gap1r{
      gap: 1rem;
    }
    .ellipsis {
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      white-space: normal;
      overflow: hidden;
    }

    .ellipsis1 {
      -webkit-line-clamp: 1;
    }

    .ellipsis2 {
      -webkit-line-clamp: 2 !important;
    }

    .ellipsis3 {
      -webkit-line-clamp: 3;
    }

    .ellipsis4 {
      -webkit-line-clamp: 4;
    }

    hr {
      color: #979797;
    }
    .lh-reset{
      line-height: initial;
    }

    .text-fade {
      color: #c9c9c9 !important;
    }

    .cut_img,
    .toast_img {
      position: relative;
      height: 0;
      overflow: hidden;
    }

    .cut_img img,
    .uncut_img img {
      position: absolute;
    }

    .cut_img img {
      width: 100%;
    }

    .uncut_img img {
      object-fit: contain;
      object-position: center;
      max-width: 100%;
      width: 100%;
      height: 100%;
    }

    .uncut_img {
      position: relative;
      height: 0;
      overflow: hidden;
    }

    .circle_pic,
    .border_pic {
      width: 100%;
      height: 0;
      padding-bottom: 100%;
      overflow: hidden;
      border-radius: 50%;
      position: relative;
    }

    .border_pic {
      border-radius: 12px;

    }

    .toast_img img,
    .pic_67 img,
    .circle_pic img,
    .border_pic img,
    .pic_169 {
      object-fit: cover;
      object-position: top;
      max-width: 100%;
      width: 100%;
      height: 100%;
      position: absolute;
    }

    .circle_pic img {
      object-position: center;
    }


    .toast_pic,
    .pic_67,
    .pic_169 {
      width: 100%;
      height: 0;
      padding-bottom: 66.6667%;
      overflow: hidden;
      position: relative;
    }

    .pic_169 {
      padding-bottom: 56.25%;
    }
    .w12px{
      width: 12px;
    }
    .w24px{
      width: 24px;
    }


    header,
    section {
      font-size: 1.2rem !important;
    }

    .container-fluid {

      margin-right: 0;
      margin-left: 0;
    }

    .container-fluid.warmup,
    .container-fluid.expired {
      padding-top: 61px;
    }

    .py-md-5 {
      padding-top: 3rem !important;
      padding-bottom: 3rem !important;
    }

    .nav-line-tabs .nav-item .nav-link.active {
      color: #5463A5;
      font-weight: 700;
    }

    button:disabled,
    .btn.disabled,#right-buttons-div .disabled ,a.disabled{
      cursor: not-allowed;
      pointer-events: auto;
    }
   
    #right-buttons-div .disabled{
      filter: opacity(60%);
    }

    .grecaptcha-badge {
      display: none;
    }

    .w-80 {
      width: 80%;
      margin: auto;
      display: inline-block;
    }

    .alert,
    .activity .alert {
      position: absolute;
      top: 0px;
      left: 0;
      width: 100%;
    }

    .productpage .alert {
      position: relative;
    }
    /* zindex > getbutton */
    .productpage .offcanvas{
      z-index: 16000162;
    }

    .activity .alert {
      position: relative;
    }

    .flip {
      transform: scaleX(-1);
    }

    button a {
      color: #fff;
    }

    .text-right {
      text-align: right;
    }

    .text-gray {
      color: #888;
    }

    section.tab {
      background-color: #EBEDEF60;
      padding: 1rem 0;
    }

    .extend-via-border {
      border: 20px solid transparent !important;
      background-clip: padding-box;
    }

    .extend::after {
      content: '';
      position: absolute;
      top: -10px;
      left: 0px;
    }

    .back-to-top-link {
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      right: 10px;
      bottom: 2rem;
      background-color: #fff;
      border-radius: 50%;
      height: 42px;
      width: 42px;
      text-align: center;
      font-size: 24px;
      padding: 4px;
      z-index: 3;
      color: #5463A5;
      transition: .3s;
    }

    .back-to-top-link svg {
      fill: #5463A5;
    }

    .notice_head {
      background-color: #fff1ea;
      color: #888;
    }

    .em_bottom {
      border-bottom: 3px dashed #ffa068;
      padding: 0 .5rem;
    }




    .votepage .btn-danger {
      background-color: #d83030;
    }


    .votepage .btn-check:checked+.btn.btn-danger,
    .btn-check:active+.btn.btn-danger,
    .btn.btn-danger:focus:not(.btn-active),
    .btn.btn-danger:hover:not(.btn-active),
    .btn.btn-danger:active:not(.btn-active),
    .btn.btn-danger.active,
    .btn.btn-danger.show,
    .show>.btn.btn-danger {

      background-color: #D4601D !important;

    }

    .modal-header,
    .modal-footer {
      padding: .65rem 1.75rem;
    }

    .modal-dialog-scrollable .modal-body {
      overflow-y: auto;
      max-height: calc(100vh - 210px);
    }


    /* reset slick */
    .slick-prev,
    .slick-next {
      height: 100%;
      width: 30px;
      background-color: #d0d0d0ee;
      z-index: 99;
    }

    .slick-prev:hover,
    .slick-next:hover,
    .slick-prev:focus,
    .slick-next:focus {
      background-color: #979797ee;
    }

    .slick-prev {
      left: 0;
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
    }

    .slick-next {
      right: 0;
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
    }

    .slick-current {
      border-bottom: 3px solid #d0d0d0ee;
    }

    /* 表單用 */
    /*.required label::after {
      content: '*';
      position: relative;
      font-size: inherit;
      color: #f1416c;
      padding-left: 0.25rem;
      font-weight: 700;
    }*/

    .required .form-check-label::after {
      content: none;
    }

    .required::after {
      content: none;
    }

    /* 投票專用 */
    .rankbox a:hover {
      color: #aaa;
    }

    .rankbox a.tag_active:hover {
      color: #fff;
    }

    .votepage a.tag_active:hover {
      color: #fff;
    }


    .votepage .btn-check:checked+.btn.btn-primary,
    .btn-check:active+.btn.btn-primary,
    .btn.btn-primary:focus:not(.btn-active),
    .btn.btn-primary:hover:not(.btn-active),
    .btn.btn-primary:active:not(.btn-active),
    .btn.btn-primary.active,
    .btn.btn-primary.show,
    .show>.btn.btn-primary {
      color: #FFFFFF;
      border-color: #D4601D !important;
      background-color: #D4601D !important;
    }

    .productpage .btn.btn-outline-primary {
      color: #e57738;
      outline: 1px solid #e57738 !important;
    }

    .pop_up_pay .btn-outline-primary:hover {
      color: #FFFFFF;
      border-color: #e57738 !important;
      background-color: #e57738 !important;
    }


    .btn.btn-vote {
      color: #FFFFFF;
      background-color: #5463A5 !important;
    }

    .btn.btn-vote:hover,
    .btn.btn-vote:focus {
      background-color: #4658aa !important;
    }

    .btn.btn-secondary {
      color: #fff;
      background-color: #7C829B !important;
    }


    .btn.btn-outline-a {
      color: #5463A5;
      background-color: transparent;
      outline: 1px solid #5463A5 !important;
    }

    .btn.btn-outline-a:hover,
    .btn.btn-outline-a:focus,
    .stickybar .vote_step .btn.btn-outline-a:hover,
    .stickybar .vote_step .btn.btn-outline-a:focus {
      background-color: #5463A5;
      color: #fff;
    }

    .btn-secondary:hover {
      color: #fff;
      background-color: #7C829B;
      border-color: #7C829B;
    }


    .btn-check:checked+.btn.btn-secondary,
    .btn-check:active+.btn.btn-secondary,
    .btn.btn-secondary:focus:not(.btn-active),
    .btn.btn-secondary:hover:not(.btn-active),
    .btn.btn-secondary:active:not(.btn-active),
    .btn.btn-secondary.active,
    .btn.btn-secondary.show,
    .show>.btn.btn-secondary {
      color: #FFFFFF;
      border-color: #979EBD;
      background-color: #979EBD !important;

    }

    .productpage .btn-check:checked+.btn.btn-secondary,
    .productpage.btn-check:active+.btn.btn-secondary,
    .productpage .btn.btn-secondary:focus:not(.btn-active),
    .productpage .btn.btn-secondary:hover:not(.btn-active),
    .productpage .btn.btn-secondary:active:not(.btn-active),
    .productpage .btn.btn-secondary.active,
    .productpage .btn.btn-secondary.show,
    .productpage .show>.btn.btn-secondary {
      color: #FFFFFF;
      border-color: #e57738;
      background-color: #e57738 !important;
    }

    .votepage h1 {
      color: #084298;
    }

    .votepage .btn.change {
      color: #5463A5 !important;
      position: relative;
    }

    .votepage .btn.change::before {
      content: url('../img/hook/voting/bx-left-arrow-circle.svg');
      position: absolute;
      left: -4px;
      width: 24px;
      height: 24px;
    }

    .votepage .cta_box .text,
    .fit-y,
    .fit-xl-y {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .votepage .carousel-control-next-icon,
    .votepage .carousel-control-prev-icon,
    .catalog .carousel-control-next-icon,
    .catalog .carousel-control-prev-icon {
      background-color: #979EBD;
      border-radius: 10px;
      background-position: center;
      background-size: 75%;
      padding: 1rem;
    }

    .votepage small.num {
      display: flex;
      align-items: center;
    }

    .votepage small.num span {
      font-weight: 700;
      color: #181C32;
    }

    .item-desc {
      height: 100%;
      overflow: hidden;
      max-height: 104px;
    }

    .deco_img {
      max-width: 300px;
      width: 80%;
    }

    .social ul {
      display: flex;
      flex-direction: row;
      justify-content: start;
      align-items: center;
      gap: 1rem;
      padding-left: 0 !important;
      margin-left: 0;
      margin-bottom: 0 !important;
    }

    .social ul li {
      list-style: none;
      width: 100%;
      max-width: 42px;
    }

    .social img {
      max-width: 42px;
      width: 100%;
    }

    .footer .social ul li {
      max-width: 24px;
    }

    .footer .social img {
      max-width: 24px;
    }

    /* 商品頁專用 */
    .slick-slider div,
    .slick-list div {
      position: relative;
    }

    .productpage .btn.btn-secondary {
      background-color: #F99F19 !important;
    }

    .productpage .btn.btn-primary,
    .activity .btn.btn-primary {
      background-color: #e57738;
    }

    .slider-nav img {
      position: absolute;
    }

    .slick-slide div div {
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 66.6667%;
      overflow: hidden;

    }

    .slider div {
      cursor: pointer;
    }


    header.shopping {
      background-color: #fff;
      padding: 2rem;
    }

    .shopping p {
      margin-bottom: 0;
    }

    .shopping .prd_pic {
      width: 100%;
      height: 0;
      padding-bottom: 66.666667%;
      overflow: hidden;
      position: relative;
    }

    .shopping .prd_pic img {
      width: 100%;
      object-fit: contain;
      height: 100%;
      position: absolute;
    }

    .prd_box {
      justify-content: stretch;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }

    .prd_desc p {
      margin-bottom: 0;
    }

    .shopping .spec {
      border-radius: 12px;
      background-color: #F5F5F5;
      padding: 16px;
      gap: 12px;
    }

    .moreinfo_box {
      border-top: 1px solid #e7e7e7;
      margin-top: 10px;
    }

    .moreinfo_box>div {
      display: flex;
      font-size: 12px !important;
      border-color: #e7e7e7;
      border-width: 1px;
      border-style: solid;
      border-top: 0px;
      border-left: 0;
      border-right: 0;
      gap: 16px;
    }



    .moreinfo_box .infolist {
      width: 82%;
      flex-grow: 1;
    }
    .moreinfo_box .infolist ul::before{
        display: none;
    }

    .moreinfo_box ul,
    .campaign_box ul {
      width: 100%;
      margin-bottom: 0 !important;
    }

    .moreinfo_box ul,
    .campaign_box li {
      padding-left: 0;
      color: #3F4254;
    }

    .moreinfo_box li {
      list-style: none;
      margin-bottom: 6px;
    }

    .moreinfo_box li:last-child {
      margin-bottom: 0;
    }

    .shipping_fee,
    .pay,
    .shipping_area {
      padding-top: 16px;
      padding-bottom: 16px;
    }

    .infolist span.badge-outline {
      border: 1px solid #084298;
      background-color: transparent;
      color: #084298;
      font-size: 12px;
      padding-left: 6px;
      padding-right: 6px;
      padding-top: 2px;
      padding-bottom: 2px;
    }

    .infolist span,
    .prd_highlight span {
      margin-right: 8px;
    }

    .moreinfo_box>div:last-child {
      border-width: 0PX;
    }

    .prd_highlight {
      font-size: 12px;
      font-weight: 700;
      color: #D4601D;
      width: 100%;
    }

    .shopping .text p {
      font-size: 14px;
    }

    .choice_session {
      display: flex;
      background-color: #fff;
      border-radius: 12px;
      padding: 26px;
      padding-top: 13px;
      padding-bottom: 13px;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
    }

    .choice_session p span:first-child {
      font-weight: 700;
      color: #7C829B;
    }

    .text .choice_session p {
      margin-bottom: 0;
    }

    .team_buying {
      padding: 1rem;
      background-color: #fff1ea;
      border-radius: 12px;
      font-size: 12px;
      color: #e57738;
    }

    .team_buying p {
      margin-bottom: 0;
    }

    .team_buying_step {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
    }

    .stepper_item,
    .stepper_circle {
      justify-content: center;
      display: flex;
      flex-direction: column;
      text-align: center;
      flex: 1;
    }

    .stepper_item p:not(.team_buying_price) {
      color: #ddd;
      font-size: 12px;
    }

    .stepper_item p span {
      color: #f8dfd0;
    }

    .stepper_item.unreach span {
      color: #979797;
    }

    .stepper_circle:before {
      --size: 3rem;
      content: "";
      display: block;
      width: var(--circle-size);
      height: var(--circle-size);
      border-radius: 50%;

      background-color: #e57738;
      background-image: url('../img/other/tick.svg');
      background-position: center;
      background-size: 60%;
      background-repeat: no-repeat;
      margin: 10px auto;
    }

    .unreach .stepper_circle::before {
      background-image: url('../img/other/bx-lock.svg');
    }

    .stepper_circle:not(.circle_goal)::after {
      content: "";
      position: relative;
      top: calc(var(--circle-size) / 2 + 10px);
      width: calc(100% - var(--circle-size) - calc(var(--step_spacing) * 2));
      left: calc(50% + calc(var(--circle-size) / 2 + var(--step_spacing)));
      height: 4px;
      background-color: #e57738;
      opacity: .5;
      order: -1;
    }

    .unreach .stepper_circle::before {
      background-color: rgb(161, 161, 161);
    }


    .team_buying_price {
      font-weight: 900;
      font-size: 1rem;
      position: relative;
      color: #e57738;
      display: inline-block;
    }

    .team_buying_price .position-relative {
      color: #e57738;
    }

    .js_del::after {
      content: "";
      width: 100%;
      height: 1px;
      position: absolute;
      top: 50%;
      left: 0;
      background-color: #e57738;
    }

    .pricespan.js_del::after {
      background-color: #bbb;
    }



    .team_buying_step .stepper_wrapper {
      font-size: 1rem;
      color: #000;
      justify-content: space-between;
      font-weight: 700;
    }

    .prd_price {
      background-color: #fff;
    }

    .prd_price div {
      min-width: 60px;
      padding-right: 1rem;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
    }

    .prd_price p:not(.fs-3) {
      font-size: 1.1rem;
    }

    .prd_price div span:not(.pricespan) {
      color: #777;
      font-size: 1rem
    }

    .prd_price div p:not(.fw-bolder) {
      color: #bbb;
    }


    .prd_price div:not(:first-child) {
      border-left: 1px solid rgb(224, 224, 224);
    }


    .team_buying_title {
      border-bottom: 1px dashed #ddd;
      padding-bottom: .5rem;
    }

    .team_buying_title span {
      color: #979797;
    }

    .stepper_item:not(.unreach) .goal_num {
      color: #e59e75;
    }

    .goal_num {
      font-size: 14px;
      position: relative;
    }

    .goal_num::after {
      content: "\4ef6";
      position: absolute;
      right: -1rem;
      top: 2px;
      font-size: 10px;
      color: #f8dfd0;
    }

    .unreach .goal_num::after,
    .unreach .team_buying_price::after {
      color: #ddd;
    }

    .dollar_sign {
      position: absolute;
      font-size: 10px;
      top: 2px;
      right: 105%;
      display: inline-block;
      width: max-content;
    }

    .stepper_item.unreach .dollar_sign {
      color: #ddd;
    }

    .productpage section.form {
      padding-top: 0;
    }

    .productpage .accordion-button,
    .acc_detail .accordion-button {
      color: #666;
    }

    .productpage .accordion-button:not(.collapsed),
    .acc_detail .accordion-button:not(.collapsed) {
      background-color: #ffe8d99d;
      color: #000;
      font-weight: 700;
    }

    .productpage .accordion-button .badge-circle.badge-primary,
    .acc_detail .accordion-button .badge-circle.badge-primary {
      background-color: #666;
    }

    .productpage .accordion-button:not(.collapsed) .badge-circle.badge-primary,
    .acc_detail .accordion-button:not(.collapsed) .badge-circle.badge-primary {
      background-color: #000;
    }

    .spec_line {
      display: flex;
      flex-wrap: nowrap;
      border: 1px solid #eee;
      align-items: stretch;
      color: #777;
      font-size: .9rem;
    }

    .spec_subtitle {
      width: 20%;
      min-width: 100px;
      background-color: #f5f5f5;
      padding: 4px 1rem;
      font-weight: 700;
    }

    .spec_text {
      background-color: #fff;
      flex: 1;
      padding: 4px 1rem;

    }


    .spec .btn {
      padding-top: 4px !important;
      padding-bottom: 4px !important;
      background-color: #F0762F;
      color: #fff;
    }

    .spec>div {
      border-bottom: 1px solid #e7e7e7;
      padding-bottom: 8px;
      padding-top: 8px;
    }

    .spec>div:last-child {
      border-bottom: 0px;
    }

    .promo_price {
      border-radius: 12px;
      background-color: #fff;
      padding: 12px;
      margin-top: 12px;
    }

    .currency {
      color: #979797;
    }

    .pricing {
      font-weight: 700;
    }

    .prd_real_pricing {
      font-size: 32px;
      margin-right: 16px;
      line-height: 32px;
    }

    .discount_pirce {
      display: flex;
      gap: 8px;
      align-items: flex-end;
    }

    .discount_info {
      display: flex;
      flex-direction: column;
      font-size: 12px;
      color: #979797;
    }

    .discount_pirce .time {
      font-size: 14px;
    }

    ul.campagin li {
      list-style: none;
    }

    .campaign_box {
      border-bottom: 1px solid #e7e7e7;
      display: flex;
      font-size: 12px;
      padding-top: 8px;
      padding-bottom: 8px;
      margin-top: 8px;
      margin-bottom: 8px;
      align-items: baseline;
      gap: 16px;
    }

    .campaign_box div {
      width: 12%;
      color: #979797;

    }

    .product_count,
    .u_price {
      display: flex;
      padding: 16px;
      padding-left: 0;
      gap: 16px;
      border-bottom: 1px solid #e7e7e7;
      align-items: baseline;

    }

    .product_count .form-select {
      max-width: 150px;
      /* width: 40%; */
      padding-top: .5rem;
      padding-bottom: 0.5rem;
    }

    .product_count .count,
    .list_count .count {
      display: flex;
      align-items: stretch;
      gap: 4px;
    }

    .product_count p,
    .campaign_box p,
    .u_price p:not(.u_price_final) {
      font-size: 12px;
      color: #979797;
      margin-bottom: 0 !important;
    }

    .product_count .d-inline-flex {
      gap: 8px;
    }

    .u_price_final {
      font-size: 22px;
      color: #e57738;
      font-weight: 900;
      font-family: Arial Black;
    }

    .action_title,
    .moreinfo_title {
      max-width: 18%;
      min-width: 72px;
    }

    .moreinfo_title,
    .action_title {
      width: 14%;
      color: #979797;
      font-size: 12px;
    }

    .count span {
      cursor: pointer;
    }

    .minus,
    .plus {
      background: #f2f2f2;
      border-radius: 4px;
      border: 1px solid #ddd;
      display: inline-flex;
      text-align: center;
      padding: 6px 1rem;
      align-items: center;
    }

    .count input[type=number] {
      width: 60px;
      text-align: center;
      font-size: 1rem;
      border: 1px solid #ddd;
      border-radius: 4px;
      display: inline-block;
      vertical-align: middle;
      -moz-appearance: textfield;
    }

    .count input[type=number]::-webkit-inner-spin-button,
    .count input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }


    .shopping_count {
      width: 60px;
    }

    .shopping .button_area {
      display: flex;

    }

    .shopping .button_gap {
      display: block;
    }

    .shopping .button_gap button {
      width: 100%;
    }

    .slider-for {
      margin-bottom: 16px;
    }

    .slider-nav div {
      width: 100%;
      height: 100%;
    }

    .slider-nav img {
      object-fit: contain;
      object-position: center;
      text-align: center;
      width: 100%;
      padding: 1rem;
      height: 100%;
    }

    .cart_box {
      display: flex;
      align-items: center;
    }

    .cart_box .logo {
      width: 100px;
      height: 40px;
      margin-right: 16px;
      border-right: 1px solid #7C829B;
      overflow: hidden;
      padding-right: 1rem;
    }

    .cart_box .logo .pic {
      width: 100%;
      padding-bottom: 50%;
    }

    .cart_title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }

    .cart_title h3 {
      margin-bottom: 0;
    }

    .cart_head {
      display: flex;
      justify-content:
        space-around;
      width: 100%;
      background-color: #F3F6F9;
      color: #979797;
      font-size: 12px;
      font-weight: 600;
      line-height: 16px;
      align-items: center;
      padding: 12px 20px;
      margin: auto;
    }

    .cart_head p {
      margin-bottom: 0;
    }

    ul.cart_list {
      padding-left: 0;
      margin-bottom: 0;
    }



    .list_head {
      display: flex;
      align-items: center;
      height: fit-content;
    }

    .cart_list li .pic {
      width: 25%;
      border-radius: 2px;
      margin-right: 1rem;
      display: inline-table;
    }

    .cart_pic {
      width: 100%;
      padding-bottom: 66.666667%;
    }

    .cart_list li .text {
      width: 75%;
      padding-right: 8px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    .cart_list li .dicount {
      margin-top: 4px;
    }

    .cart_list li .text .dicount p {
      font-size: 12px;
    }

    .cart_list li .text .dicount .badge {
      background-color: #FBF4E580;
      color: #F0762F;
      border-radius: 2px;
    }

    .prd_namem,
    .prd_type,
    .prd_price {
      font-weight: 700;
    }

    .cart_list .prd_price {
      font-size: 18px;
    }

    p.prd_type {
      margin-bottom: 4px;
    }

    .yousave {
      font-size: 12px;
      color: #979797;
    }

    .yousave span {
      color: #F0762F;
      font-weight: 700;
    }

    .cart_list li>div:nth-child(3) {
      color: #979797;
      font-size: 14px;
    }

    .cart_sum {
      background-color: #fcf3eb;
      padding: 16px;
      color: #666;
      font-size: 1rem;
      border-radius: 0 0 .625rem .625rem;
    }

    .cart_sum .button_area {
      display: flex;
      flex-direction: row;
    }
    

    .shopping_area {
      border-radius: 6px;
      padding: 16px;
      background-color: #fff;
      margin-bottom: 16px;
    }

    .deliver_form {
      gap: .5rem;
      max-width: 600px;
    }

    .deliver_ques p {
      flex-basis: 90px;
      flex-shrink: 0;
      flex-grow: 0;
      color: #979797;
    }

    .deliver_ques div {
      flex-grow: 1;
      flex-shrink: 1;
    }


    .shopping_fee_note,
    .coupon {
      padding: 6px 0;
      border-bottom: 1px solid #f7e0e0;
    }

    .coupon_input {
      align-items: stretch;
    }

    .coupon_input button.btn {
      padding-top: .2rem !important;
      padding-bottom: 0.2rem !important;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    .coupon_input .form-control {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      margin-top: 0;
      height: auto;
    }

    .order_summary div {
      border-bottom: 1px solid #f7e0e0;
      padding: 8px;
      max-width: 320px;
      width: 40%;
    }
    .order_summary div:last-of-type{
      border: 0px;
    }

    .order_summary p {
      margin-bottom: 0;
      font-size: 18px;
      display: flex;
      justify-content: space-between;
      width: 100%;
      color: #999;
    }

    .order_num_color {
      color: #000;
      font-size: 1.2rem;
      font-weight: 700;
    }

    .discount_color {
      color: #e57738;
    }

    .buyerhint {
      color: #979797;
      margin-bottom: 0.125rem;
    }

    .reminder_buying {
      background-color: #ffffff;
    }

    .reminder_buying .warm_up_banner {
      border-radius: 12px 12px 0 0;
    }

    .reminder_buying .shadow {
      box-shadow: 0px 0px 30px rgba(196, 160, 108, 0.301) !important;

    }

    .buying_bg {
      background-color: #fff0e7;
    }

    .note_hightlight {
      background-color: #f5f5f5;
      color: #666;
      border-radius: 4px;
      padding: 1rem;
    }

    .note_hightlight ol,
    .note_hightlight ul {
      margin-bottom: 0;
      color: #979797;
      font-size: 1rem;
    }
    .yed_t{
      display: block;
      height: 36px;
    }
    .yed_t img{
      object-position: left;
    }

    .reminder_buying p {
      margin-bottom: 0;
    }

    .reminder_buying_item {
      padding-bottom: 1rem;
      border-bottom: 1px dashed #ddd;
      align-items: center;
    }

    .list_head {
      grid-area: list_head;
      padding-right: 4px;
    }

    .list_spec {
      grid-area: list_spec;
      padding-right: 4px;
    }

    .list_price_o {
      grid-area: list_price_o;
      color: #888;
    }

    .list_price_f {
      grid-area: list_price_f;
    }

    .list_price_f .prd_price {
      background: none;
    }

    .list_count {
      grid-area: list_count;
    }

    .list_action {
      grid-area: list_action;
      display: flex;
      align-items: center;
    }

    .list_adj_box {
      grid-area: list_adj_box;
    }

    .cart_list_line {
      display: grid;
      grid-template-columns: 4fr 2fr 1fr 2fr 2fr 1fr;
      grid-template-rows: 100%;
      grid-template-areas: "list_head list_adj_box list_adj_box list_adj_box list_adj_box  list_action";
      width: 100%;
      margin: auto;
      padding: 16px 20px;
      border-bottom: 1px solid #E5EAEE;
    }

    .list_adj_box {
      display: grid;
      grid-template-columns: 1.5fr 1.5fr 2fr 2fr;
      grid-template-rows: 100%;
      grid-template-areas: "list_spec list_price_o  list_count list_price_f";
      align-items: center;
    }

    .price_check_f {
      padding: 1rem;
      border-radius: 12px;
      border: 1px solid #f5f5f5;
      margin-top: 8px;
    }

    .price_check_f span.pb-3 {
      color: #979797;
      display: inline-block;
    }

    .price_check_f h2 span {
      font-size: 12px;
      color: #ddd;
      padding-left: 4px;
    }

    .drawer_cart.cart_list {
      border-top: 1px solid #F5F5F5;
      padding-top: 8px;
    }

    .drawer_cart .cart_list_line {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 88px;
      grid-template-areas:
        "list_head list_head list_head list_head  list_action"
        "list_adj_box list_adj_box list_adj_box list_adj_box list_adj_box";
      grid-gap: 10px;
      padding: 8px;
      border: 1px solid #E5EAEE;
      border-radius: 12px;
      margin: 8px auto;
    }

    .drawer_cart .list_adj_box {
      background-color: #f5f5f5;
      border-radius: 12px;
      padding: 8px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: center;
      height: max-content;
    }

    .drawer_cart .list_spec {
      display: flex;
      order: 1;
      width: 50%;
      align-items: flex-start;
    }

    .drawer_cart .list_price_o,
    .drawer .list_price_f {
      text-align: right;
    }

    .drawer_cart .list_price_o {
      display: flex;
      align-items: flex-start;
      justify-content: end;
      order: 2;
      width: 50%;
    }

    .drawer_cart .list_count {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      order: 3;
      width: 50%;
    }

    .drawer_cart .list_price_f {
      display: flex;
      order: 4;
      width: 50%;
      flex-direction: column;
      align-items: flex-end;
      justify-content: flex-end;
    }

    .drawer_cart .list_action {
      display: flex;
      justify-content: end;
      padding-right: 8px;
    }

    .productpage .toast {
      width: 250px;
      z-index: 100;
    }

    .add_cart_toast {
      background-color: #fcece2;
      position: relative;
      z-index: 100;
    }

    .add_cart_toast .text {
      display: flex;
      align-items: center;
      padding: .5rem 1rem;
      color: #363535;
    }

    .add_cart_toast .btn-close {
      position: absolute;
      background-color: #f9d7c5;
      right: 0;
      top: -.25rem;
      padding: .5rem;
      color: #fff;
      background-image: url('../img/other/toast_cross.svg');
    }




    /* 申請會員專用 */
    .apply_member_page .modal-dialog {
      min-width: 55%;
    }

    .apply_member_page .user_bg {
      background-image: url('../img/bc.jpg');
    }

    .future_email_page .user_bg {
      background-image: url('../img/future_email/header.png');
    }

    .future_email_page .one_col .l_item {
      background-color: transparent;
      flex-direction: column;
      gap: 4rem;
    }

    .future_email_page .one_col .l_item .pic img {
      width: 65%;
    }

    .future_email_page .p_area {
      text-align: left;
      display: inline-block;
    }

    .apply_member_page .xbg4 {
      background-color: #FEDFB3;
      padding-bottom: 2rem;
      padding-top: 2rem;
    }

    section.apply {
      padding-top: 3rem;
      padding-bottom: 3rem;
    }

    .apply_member_page section.xbg4 h2 {
      color: #371e0f;
      margin-bottom: 0;
    }

    .apply_member_page section.xbg3 .titlebox .section_title,
    .apply_member_page section.xbg4 .titlebox .section_title {
      text-align: center;
    }

    .apply_member_page section.xbg4 .p_area p {
      color: #371e0f;

    }


    .apply_member_page section.user_bg2,
    .apply_member_page.thankyou header.user_bg2 {
      background-image: url('../img/go2.jpg');
      background-position: center;
    }

    .apply_member_page.thankyou header {
      height: 15vh;
    }

    .apply_member_page.thankyou .s_default .text {
      background-color: rgba(0, 0, 0, .3);
      color: #fff;
    }

    .apply_member_page.thankyou h1 {
      text-align: center;
    }

    .apply_member_page.thankyou .titlebox {
      text-align: center;
    }

    .apply_member_page.thankyou .titlebox div {
      display: inline-block;
    }

    .apply .status {
      margin: 3rem auto 1rem auto;
    }

    .apply .status.highlight_bg {
      background-color: #f5f8fa;
      padding: 2rem;
      border-radius: 6px;
      margin-bottom: 0;
    }

    .votepage.thankyou h1 {
      font-size: 3rem;
    }


    .trouble {

      position: relative;
    }

    .thrcol .trouble .l_item {
      background: transparent;
    }

    .trouble_list {
      background-color: #979797;
      color: #fff;
      padding: 1rem;
      border-radius: 6px;
      margin-top: 2rem;
      margin-bottom: 2rem;
      display: flex;
      flex-direction: row;
      align-self: stretch;
      gap: 8px;
    }

    .trouble_list .text {
      display: flex;
      flex-direction: column;
    }

    .trouble_list .straight {
      width: 4px;
      height: auto;
      background-color: #fff;

    }

    .apply_member_page .activity h3 {
      text-align: center;
      color: #084298;
      font-size: 2rem;
    }

    .apply_member_page .activity h3~.row {
      margin: 2rem auto;
    }

    .apply_member_page .activity h3 span {
      font-size: 4rem;
      font-style: italic;
      margin-right: 1rem;
    }

    .apply_member_page section.advantage {
      padding-top: 2rem;
      padding-bottom: 2rem;
    }

    .apply_member_page .advantage h3 span::after {
      content: '.';
      font-size: 2rem;
      right: -.5rem;
      position: relative;
    }

    .apply_member_page .activity .card {
      margin: 2rem auto;
      align-items: center;
    }

    .apply_member_page .activity .card .row {
      align-items: center;
    }

    .apply_member_page .activity .card .card-body {
      padding-right: 2.5rem;
      padding-left: 2.5rem;
    }

    .apply_member_page .xbg2 {
      background-color: #EEF0F8;
    }

    .apply_member_page .advantage .section_title {
      color: #084298;
    }

    .apply_member_page .advantage .l_item {
      background-color: #fff;
    }



    .apply_member_page section.s_default .text {
      background-color: rgba(0, 0, 0, .3);
      color: #fff;
    }

    .apply_member_page .recommend {
      padding-top: 5rem;
      padding-bottom: 5rem;
    }

    .apply_member_page .recommend .row {
      align-items: center;
    }

    .apply_member_page .recommend .pic {
      text-align: center;
    }

    .apply_member_page .recommend img {
      overflow: hidden;
      border-radius: 50%;
      margin-bottom: 1rem;
      width: 100px;
      height: 100px;
    }

    .apply_member_page .recommend .text {
      background-color: #fff;
      display: inline-block;
      padding: 2rem;
      border-radius: 12px;
    }

    .apply_member_page .recommend .text:after {
      content: '';
      position: absolute;
      right: 100%;
      top: 0px;
      width: 16px;
      height: 16px;
      border-width: 0;
      border-style: solid;
      border-color: transparent;
      border-bottom-width: 10px;
      border-bottom-color: currentColor;
      border-radius: 0 0 0 32px;
      color: #fff;
    }

    .apply_member_page .cta_area {
      padding-top: 8rem;
      padding-bottom: 8rem;
    }

    .apply {
      background-color: #fff;
    }

    .apply .row .titlebox {
      margin-left: auto;
      margin-right: auto;
    }

    .step_box {
      position: relative;
      padding: 1rem;
      gap: 1.5rem;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 1.5rem;
    }

    .step_box .content {
      display: inline-flex;
      justify-content: flex-start;
      flex-direction: row;
      flex-wrap:
        nowrap;
      position: relative;
      padding: 0 0;
      gap: 5rem;
    }

    .step_box .step {
      padding: .5rem 1rem;
      border-radius: 6px;
      position: relative;
      color: #979797;
      z-index: 3;

    }

    .step_box .step span {
      display: block;
    }

    .step_text {
      position: absolute;
      bottom: -30px;
      left: 50%;
      transform: translateX(-50%);
      vertical-align: top;
      white-space: nowrap;
      text-align: center;
    }

    .step_box .step.now {
      background-color: transparent;
      color: #5463A5;
      font-weight: 700;
    }

    .step .badge-circle {
      width: 42px;
      height: 42px;
      color: #fff;
      line-height: 42px;
    }

    .line {
      position: absolute;
      width: 80%;
      height: 4px;
      top: 50%;
      left: 10%;
      background-color: #5463A5;
      z-index: 1;
      border-radius: 5%;
      transform: scaleY(-50%);
    }

    .apply .row:nth-child(2)>div:nth-child(2) {
      background-color: #f5f8fa;
      padding: 2rem;
      border-radius: 6px;
    }

    .how_to_apply,
    .how_to_apply ul {
      border-radius: 6px;
    }

    .how_to_apply {
      background-color: #f5f8fa;
      padding: 1rem 2rem;
      text-align: center;
      margin: 2rem auto;
      margin-top: 0rem;
    }


    .how_to_apply:last-child {
      text-align: left;
    }

    .how_to_apply:last-child p {
      margin-bottom: 0;
    }

    .how_to_apply ul,
    .how_to_apply .pay_choice,
    .offline_pay_box,
    .online_pay_box,
    .status .info_box {
      text-align: left;
      padding: 1rem 2rem;
      background-color: #fff;
    }
    .nav-link.method{
      border: 1px solid #ddd !important;
      border-radius: 12px;
    }
    .nav-link.active.method{
      border:2px solid #5463A5 !important;

    }


    .productpage .how_to_apply {
      background-color: transparent;
    }

    .info_box {
      border-radius: 6px;
    }

    .offline_pay_box span,
    .online_pay_box span,
    .info_box span {
      font-size: 14px;
      color: #979797;
    }

    .online_pay_box a.button {
      display: block;
    }

    .offline_pay_box p,
    .online_pay_box p,
    .info_box p {
      font-weight: 700;
    }

    .flex_hor {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }

    p.checkout_hint {
      margin-bottom: 4px;
      font-size: 16px;
      color: #333;
    }


    .how_to_apply .pay_button {
      padding: 1rem 0;
    }

    .form.hor_form {
      padding-bottom: 0;
    }

    .hor_form_bg {
      background-image: url('../img/bc.jpg');
      background-size: cover;
      padding: 3rem 0;
      margin-top: 1rem;
    }

    .limit_con {
      height: 75vh;
    }

    .limit_con .button_area {
      position: sticky;
      width: 100%;
      bottom: 0;
      right: 0;
      background-color: #f5f8fa;
      margin: 0 !important;
      padding: 1rem 0;
      border-radius: 0 0 12px 12px;
    }

    .status .option p,
    p.guide {
      background-color: #E8ECFC99;
      padding: 8px 12px;
      color: #5463A5;
      font-weight: 700;
      border-radius: 6px;
      margin-top: 2.5rem ;
    }
    p.guide.subguide{
      margin-top: .5rem !important;
    }

    p.guide {
      display: flex;
      gap: 1rem;
      align-items: center;
    }

    span.guide {
      font-size: 14px;
      text-align: left;
    }

    .form_box p:first-child {
      margin-top: 0;
    }

    .status .option p:nth-child(2) {
      margin-top: 0.5rem;
    }

    .apply_member_page .form_box>div>.mb-3,
    .apply_checkbox {
      padding: 4px 24px;
      padding-right: 0;
    }

    .form_box .option,
    .status .option,
    .shopping_area .option {
      outline: 2px solid #E4E6EF;
      background-color: #fff;
      padding: 1rem 1.5rem;
      text-align: center;
      border-radius: 6px;
      cursor: pointer;
    }

    .shopping_area .option {
      color: #000;
      padding: .85rem 1rem;
    }


    .status .option {
      cursor: auto;
    }

    .donate .option,
    .pop_up_pay .option {
      padding: .25rem .75rem;
    }

    .status h1 {
      margin-bottom: 1rem;
    }

    .modal {
      font-size: 1.2rem;
    }

    .modal-body .pay_check,
    .modal-body .member_check {
      border-top: 1px solid #E4E6EF;
      margin-top: 10px;
      padding: 10px 0;
    }

    .modal-body p.check_title {
      margin-bottom: 8px;
      font-size: 14px;
      font-weight: 700;
      display: block;
    }

    .modal-body .text_hint {
      display: block;
      /* border-bottom: 1px solid #E4E6EF; */
      padding-bottom: 4px;
      font-size: 16px;
    }

    .modal-body .member_check {
      border: 0px;
      background-color: #e4e6ef25;
      padding: 4px 8px;
      border-radius: 6px;
    }

    .modal-body .member_check span {
      font-size: 12px;
      color: #979797;
    }

    .modal-body .member_check p {
      font-weight: 700;
      margin-bottom: 0;
    }

    .modal-body .pay_check div {
      background-color: #e4e6ef25;
      padding: 4px 8px;
      border-radius: 6px;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 1rem;
      font-size: 1.3rem;
      font-weight: 700;
    }

    .apply_member_page.thankyou .status .option {
      margin: 2rem auto 0 auto;
    }

    .member_choice,
    .donate_choice,
    .receipt_choice,
    fieldset.pay_choice {
      display: flex;
      gap: 1rem;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: stretch;
      padding-left: 24px;
    }


    .apply_member_page .member_choice label,
    .donate_choice label,
    .receipt_choice label {
      min-width: 25%;
      width: auto;
    }

    .shopping_area label {
      min-width: 80px;
    }

    .future_email_page .donate_choice label,
    .pop_up_pay label {
      min-width: 20%;
    }

    .apply_member_page .section_title>div {
      margin: .5rem auto;
    }

    .apply_member_page input[type="radio"],
    .donate_choice input[type="radio"],
    .session_choice input[type="radio"],
    .ticket_choice input[type="radio"],
    .pop_up_pay input[type="radio"],
    .receipt_choice input[type="radio"] {
      display: none;
    }

    .apply_member_page input[type="radio"]:checked+.option,
    .donate_choice input[type="radio"]:checked+.option,
    .pop_up_pay input[type="radio"]:checked+.option,
    .receipt_choice input[type="radio"]:checked+.option {
      outline: 3px solid #5463A5;
    }

    .productpage input[type="radio"]:checked+.option {
      outline: 3px solid #e57738;
      color: #e57738;
      font-weight: 700;
    }

    .apply_member_page input[type="checkbox"],
    .donate_choice input[type="checkbox"] {
      /* width: 24px; */
      /* height: 24px; */
      border-radius: 4px;
      border: 1px solid #E4E6EF;
      margin-right: 1rem;
    }

    .option span:nth-child(1) {
      display: block;
      font-size: 12px;
      color: #979797;
      /* display: none; */
    }

    .option p {
      margin-top: .5rem;
    }

    .member_choice .price {
      text-align-last: left;
    }

    .member_choice .price>span,
    .donate_choice .price>span,
    .pop_up_pay .price>span {
      font-size: 14px;
    }

    .member_choice .price div span,
    .donate_choice .price div span,
    .pop_up_pay .price div span {
      display: block;
      color: #5463A5;
      font-size: 18px;
      font-weight: 700;
    }

    .member_choice .price div .currency,
    .donate_choice .price div .currency,
    .pop_up_pay .price div .currency {
      color: #979797;
      font-size: 12px;
    }

    .checkbox span {
      display: inline-block;
      margin-bottom: 1.5rem;
    }

    .apply .badge-outline {
      color: #5463A5;
      background-color: #fff;
      border: 1px solid #5463A5;

    }

    .checkbox .form-check {
      display: flex;
      flex-direction: row;
      align-items: center;

    }

    .form_box .button_area {
      margin: 2rem auto;
      margin-bottom: 0;
      border-top: 2px dashed #ededed;
      padding: 2.5rem 1rem 0 1rem;
    }



    .form_box .button_area button {
      padding-top: 1rem !important;
      padding-bottom: 1rem !important;
    }

    .form_box .button_area button span {
      color: #fff;
      font-size: 1.2rem;
      font-weight: 700;
    }

    .form_box .button_area p {
      background-color: transparent;
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 14px;
      font-weight: 300;
    }



    /* xlead css */

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span {
      word-break: break-word;
    }

    h4 {
      font-size: 1.5rem;
    }

    .card .card-body {
      padding: 1rem;
    }

    .xcard {
      margin: 1.5rem auto;
    }

    .card-body h3 {
      font-size: 1.4rem;
    }


    .bg-white.bg-secondary {
      background-color: white !important;
    }



    .navbar-brand {
      display: flex;
      align-items: center;
      justify-content: start;
      flex-direction: row;
      flex-wrap: nowrap;
      width: 70%;
      position: relative;
      overflow: hidden;
    }

    .navbar-brand .pic {
      position: relative;
      display: block;
      max-width: 80px;
      height: 40px;
      margin-right: 8px;
      min-width: 40px;
    }

    .navbar-brand span {
      display: inline-block;
      white-space: nowrap;
      text-overflow: ellipsis;
      width: 65%;
      overflow: hidden;
      color: #fff;
    }

    .navbar-brand .pic img {
      object-fit: contain;
      object-position: center;
      display: block;
      height: 100%;
    }

    .future_email_page .navbar-brand {
      width: 60%;
    }

    nav.navbar {
      position: fixed;
      width: 100%;
      z-index: 100;
      top: 0;
    }

    header {
      margin-top: 52px;
      position: relative;
    }

    header .titlebox {
      text-align: left;
    }

    .links {
      display: flex;
    }

    .links .text_color .nav-link {
      color: #fff;
    }

    .logo {
      width: 100%;
      max-height: 40px;
    }

    /* user定義 */
    .t_bg_01 {
      background-image: url('../img/size.jpg');

    }

    .t_bg_02 {
      background-image: url('../img/TV-OLED-Z2-03-Self-Lit-Desktop.jpg');
    }


    .t_bg_03 {
      background-image: url('../img/TV-OLED-Z2-11-Cinema-Experience-Desktop.jpg');
    }

    .t_bg_04 {
      background-image: url('../img/d22eb_home-banner_desktop.webp');
    }

    header .titlebox {
      display: inline-block;
      margin: auto;
    }

    header.kv #s_p01_user,
    #s_p01_user02 {
      background-color: rgba(0, 0, 0, .3);
      color: #fff;
      text-align: left;
    }

    .button_gap {
      display: inline-block;
      padding: 1rem;
      padding-top: .5rem;
      padding-bottom: .5rem;
    }

    .auto_button {
      padding-left: 5rem;
      padding-right: 5rem;
    }



    .col001 {
      background-color: antiquewhite;

    }

    .col001>h3 {
      margin-top: 15px;
    }

    header .pic {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }

    header.hor_layout .text_box {
      margin-left: auto;
      margin-right: auto;
    }

    header.ver_layout .pic {
      max-height: 400px;
      overflow: hidden;
      /* width: 100%; */
    }

    header .pic img {
      max-width: 100%;
    }

    header.ver_layout .pic img {
      max-height: 400px;
      object-fit: contain;
      /* width: 100%; */
    }

    header.banner_layout .pic img {
      max-height: 700px;
      width: 100%;
    }

    header.banner_layout .pic picture {
      display: inline-block;
      max-width: 100%;
      object-fit: contain;
      max-height: 700px;
      overflow: hidden;
      border-radius: 10px;
    }

    header.kv_banner.banner_layout .pic picture {
      border-radius: 0px;
    }


    .banner_layout div.container {
      background-color: #fff;
      padding: 2rem;
      padding-bottom: 0;
      border-radius: 10px;
    }

    .ver_layout .carousel-inner {
      height: 400px;
    }

    header .ver_layout .carousel-inner .carousel-item>img {
      object-position: center;
    }

    .fix_pic .text p {
      margin: auto;
      text-align: left;
    }

    .text .subtilte p {
      text-align: center;
      margin-bottom: 1rem;
    }

    .text {
      border-radius: 8px;
      position: relative;
    }

    .down img {
      max-width: 100px;
    }

    .text_color {
      color: #084298;
    }


    .button_area {
      text-align: center;
      padding-left: 0;
    }

    .x_vote_nav_link {
      padding: 1.5rem;

    }

    .kv {
      width: 100%;
      min-height: calc(100vh - 52px);
      background-size: cover;
      background-position: center top;
      display: flex;
      /* background-position-y: center; */
    }

    .kv_banner {
      width: 100%;
      min-height: calc(70vh - 66px);
      background-size: cover;
      display: flex;
    }

    .user_bg {
      background-image: url('../img/good.jpg');
    }

    .ok_img {
      width: 100px;
      margin: auto;
    }

    .expired .ok_img {
      width: 200px;
    }

    .expired_banner,
    .warm_up_banner,
    .countdown_banner {
      padding-top: .5rem;
      padding-bottom: 0.5rem;
      background-color: #F0762F;
      color: #fff;
      width: 100%;
      text-align: center;
      position: absolute;
      top: 0px;
      left: 0;
      max-height: 61px;
    }
    

    .warm_up_banner,
    .expired_banner,.countdown_banner {
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 100;
    }

    .activity .warm_up_banner,
    .activity .expired_banner {
      position: relative;
    }
    .countdown_banner{
      top:52px;
      position: fixed;
      padding-left: 2rem;
      padding-right: 2rem;
      font-size: 13px;
    }
     .countdown_banner .count_box{
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 2px;
    }
     .countdown_banner ~ .container,.expired_banner ~.container{
      margin-top: 36px;
    }
   
    .expired_banner {
      padding-top: 1.2rem;
      padding-bottom: 1.2rem;
    }

    .expired_banner h2 {
      margin-bottom: 0;
    }

    .warm_up_banner>span {
      font-size: 1.2rem;
      margin-left: .5rem;
      margin-right: .5rem;
      font-weight: 800;
      color: rgba(255, 255, 255, .9);
    }
    .productpage .navbar .warm_up_banner > span{
      font-size: 0.9rem;
    }

    .count_box {
      position: relative;
      height: auto;
      width: 46px;
      text-align: center;
      display: flex;
      flex-direction: column;
      margin-left: .5rem;
      margin-right: .5rem;
      border-radius: 2px;
      color: #fff;
      background-color: rgba(255, 255, 255, .15);
      padding-top: .2rem;
      padding-bottom: .2rem;
    }
    .productpage .navbar .warm_up_banner .count_box{
      padding-top: 1px;
      padding-bottom: 1px;
    }

    .count_box .counter {
      font-weight: bolder;
      line-height: 24px;
    }

    .counter_unit {
      font-size: 10px;
      color: rgb(255, 240, 224);
      line-height: 16px;
    }

    .warm_up_banner .count_dot {
      margin-right: 0;
      margin-left: 0;
      color: rgba(255, 255, 255, .7);
      font-size: 12px;

    }

    .tooltip-inner {
      text-align: left;
    }

    .kv_thankyou {
      min-height: 35vh;
      width: 100%;
      background-size: cover;
      display: flex;
    }

    /* 調色樣式 */
    .s_default {
      background-color: #EEF0F8;
      color: #084298;
    }

    .s_default .text {
      background-color: #fff;
    }

    .s_default .subtitle {
      color: hsl(229, 100%, 77%);
    }





    .bg_overlay {
      background-blend-mode: darken;
      background-color: rgba(0, 0, 0, .35);
    }

    .bg_color_2 {
      background-color: #fff;
    }

    .bg_color_4 {
      background-image: url(https://picsum.photos/1920/1080?random=1);
    }

    .bg_color {
      background-image: url(https://picsum.photos/1920/1080?random=5);
    }

    .bg_color_3 {
      background-color: rgb(246, 224, 198);
    }

    .votepage header {
      background-color: #EEF0F8;
    }

    .votepage .carousel,
    .catalog .carousel {
      padding-bottom: 50px;
    }

    .votepage .carousel-indicators [data-bs-target],
    .catalog .carousel-indicators [data-bs-target] {
      background-color: #979797;
    }

    .votepage .carousel-item,
    .catalog .carousel-item {
      height: 0;
      padding-bottom: 66.6667%;
    }

    .catalog .carousel-item {
      padding-bottom: 56.25%;
    }

    .votepage .stickybar {
      position: fixed;
      z-index: 3;
      top: 52px;
      background-color: #fff;
      width: 100%;

      padding: .15rem 2rem;
      box-shadow: 0px 0px 30px rgba(90, 98, 117, 0.3);
    }

    .stickybar .vote_step {
      margin-bottom: 0;
      padding-bottom: 0;
      overflow-x: hidden;
      flex-wrap: nowrap;
      border: 0px;
    }

    .stickybar .vote_step .btn.btn-outline-a {
      background-color: #fff;
    }

    .stickybar_btn {
      padding-top: .5rem !important;
      padding-bottom: .5rem !important;
    }

    .stickybar.d-flex {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }

    .stickybar .btn.change {
      color: #5463A5
    }

    .stickybar .btn.change:hover,
    .stickybar .btn.change:focus {
      color: #D4601D;
    }




    .expired header {
      background-color: #EEF0F8;
    }

    .expired_box {
      background-color: #fff;
      box-shadow: 0px 0px 30px rgba(56, 71, 109, 0.09);
    }

    .votepage .fixtop:target:before {
      content: "";
      display: block;
      height: 130px;
      /* fixed header height*/
      margin: -130px 0 0;
      /* negative fixed header height */
    }

    a.fixtop:target {

      display: block;
      position: relative;
      top: -60px;
      visibility: hidden;
    }

    .vote_step {
      display: flex;
      margin: auto;
      justify-content: center;
      flex-wrap: wrap;
      padding-bottom: 1rem;
      border-bottom: 1px solid #EDEDED;
      align-items: stretch;
    }

    .stick-top {
      z-index: 3;
      left: 0 !important;
      display: block;
      text-align: center;
      padding-top: 6px;
      padding-bottom: 6px;
      background-color: white;
    }

    .sticky_center {
      max-width: 1320px;
      width: 100%;
      display: inline-flex;
      padding-bottom: 6px;
    }

    .vote_icon {
      width: 42px;
      height: 42px;
    }

    .vote_step div a {
      display: flex;
      justify-content: space-between;
      position: relative;
    }

    .vote_step div a.btn>div.w-100 {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      align-items: center;
    }

    .vote_step div a.btn>div.w-100 .mb-1.text-start>span {
      display: flex;
      gap: 8px;
    }

    .vote_step div a.btn>div.w-100 .mb-1.text-start span.badge-circle {
      min-width: 1.75rem;
      padding: 0;
    }

    .vote_step a.btn-outline-a .badge.badge-circle,
    .typetag .badge.badge-circle,
    .vote_step a.btn-vote .badge.badge-circle {
      outline: 1px solid #5463A5;
      color: #979EBD;
    }

    .vote_step a.btn-vote .badge.badge-circle {
      background-color: #fff;
    }

    .vote_step a.btn-outline-a:hover .badge.badge-circle,
    .vote_step a.btn-outline-a:focus .badge.badge-circle,
    .vote_step a.btn-vote:hover .badge.badge-circle,
    .vote_step a.btn-vote:focus .badge.badge-circle {
      color: #979EBD;
      outline: 0px;
      background-color: #fff;
    }

    .badge.vote_state {
      color: #D4601D;
      /* position: absolute;
      top: -20px;
      right: -5px; */
    }

    .vote_state.done,
    .vote_state.do {
      display: inline-flex;
      align-items: center;
    }

    .vote_state.do {
      color: #D4601D;
      background-color: #FFF1E8 !important;
    }

    .vote_state.done {
      color: #0BB783;
      background-color: #f7fcfa !important;
    }

    img.done {
      width: 12px;
      height: 12px;
      margin-right: 8px;
    }

    img.do {

      width: 12px;
      height: 12px;
      margin-right: 8px;
    }

    .fix_pic .text {
      text-align: center;
    }

    .fix_pic .text h1 {
      display: inline-block;
      text-align: left;
    }

    .fix_pic .pic img {
      width: 100%;
    }

    .kv_slider {
      width: 100%;
      min-height: 60vh;
      background-size: cover;
      background-color: #333;
      display: flex;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      background-repeat: no-repeat;
      -webkit-animation: slider 30s linear infinite alternate;
      animation: slider 30s linear infinite alternate;
      -webkit-transform-origin: center center;
      transform-origin: center center;
    }

    @keyframes slider {
      0% {
        background-image: url(https://picsum.photos/1920/1080?random=5);

      }

      25% {
        background-image: url(https://picsum.photos/1920/1080?random=6);

      }

      50% {
        background-image: url(https://picsum.photos/1920/1080?random=7);

      }

      75% {
        background-image: url(https://picsum.photos/1920/1080?random=8);

      }

      100% {
        background-image: url(https://picsum.photos/1920/1080?random=9);

      }
    }

    @-webkit-keyframes slider {
      0% {
        background-image: url(https://picsum.photos/1920/1080?random=5);

      }

      25% {
        background-image: url(https://picsum.photos/1920/1080?random=6);

      }

      50% {
        background-image: url(https://picsum.photos/1920/1080?random=7);

      }

      75% {
        background-image: url(https://picsum.photos/1920/1080?random=8);

      }

      100% {
        background-image: url(https://picsum.photos/1920/1080?random=9);

      }
    }


    .kv .text,
    .kv_banner .text {
      /* text-align: center; */
      border-radius: 8px;
      align-self: start;
    }

    .hor_layout .text p,
    .hor_layout .text .button_area,
    .hor_layout .text {
      text-align: left;
    }

    .hor_layout .text,
    header .text {
      display: inline-block;
    }

    .ver_layout .textbox {
      text-align: center;
    }

    .kv h1,
    .kv_banner h1,
    .kv_slider h1 {
      font-size: 3rem;
      font-weight: 900;
    }

    .l_item {
      background-color: darkgrey;
    }

    .l_item>p {
      padding: 5%;
      padding-top: 0;
    }

    .l_item>h3 {
      padding-left: 5%;
      padding-right: 5%;
      padding-top: 20px;
    }

    /* .ka-a{
            display: inline-block;
            width: 90%;
            height: 90px;
            font-size: 1.5rem;
            border-radius: 12px;
            position: relative;
        }
        .kaf{
            text-align: center;
        }
        .ka-a p{
            margin-top: 0;
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
        } */
    .one_col .l_item h2 {
      text-align: left;
    }

    .one_col .l_item {
      padding-left: 0;
      padding-right: 0;
      background-color: antiquewhite;
    }

    .one_col .pic img {
      width: 100%;
    }

    .text p {
      font-size: 1.2rem;
    }

    .videobox {
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 56.25%;
    }

    .videobox iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }



    .two_col {
      position: relative;
      background-color: #f77;
      padding-top: 15px;
    }

    :root {
      /* --bs-body-font-size: 1.2rem; */
      --circle-size: clamp(1.2rem, 1vw, 2rem);
      --step_spacing: clamp(0.25rem, 2vw, 0.5rem);
    }

    .imgfit,
    .imgcontain {
      object-fit: cover !important;
      width: 100% !important;
      height: 100% !important;
    }

    .imgcontain {
      object-fit: contain !important;
    }

    .obj_left {
      object-position: left;
    }


    section {
      padding-top: 3rem;
      padding-bottom: 3rem;
    }

    .xbg {
      background-color: cadetblue;
    }

    .xbg2 {
      background-color: darkslategrey;
    }

    .xbg4 {
      background-color: #f77;
    }

    .se_connect-t {
      padding-bottom: 0;
      margin-top: 0;
      margin-bottom: 0;
    }

    .se_connect-b {

      padding-top: 0;
      margin-top: 0;
      margin-bottom: 0;

    }

    .one_col .connect-t {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    .one_col .connect-b {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }

    .p_area p:last-child {
      padding-bottom: 0;
      margin-bottom: 0;

    }

    .xcard {
      border-radius: 10px;
      overflow: hidden;
    }

    .l_item.noshadow {
      box-shadow: none;
    }

    .l_item.noshadow:hover {
      box-shadow: none;
    }

    .card,
    .apply_member_page .l_item,
    .shadow {
      border: 0px;
      box-shadow: 0px 0px 30px rgba(56, 71, 109, 0.09);
    }

    .card:hover,
    .apply_member_page .l_item:hover {
      box-shadow: 0px 0px 30px rgba(82, 98, 138, 0.459);
    }

    .dl_detail .card:hover {
      box-shadow: 0px 10px 40px rgba(81, 76, 73, 0.127);

    }

    .card .pic img,
    .apply_member_page .l_item .pic img {
      transition: .3s ease-in-out;
      -webkit-transition: .3s ease-in-out;
      object-fit: cover;
    }

    .card:hover .pic img,
    .apply_member_page .l_item:hover .pic img {
      transform: scale(1.2);
      transition: .3s ease-in-out;
      -webkit-transition: .3s ease-in-out;
    }

    .download.card:not(:last-of-type) {
      margin-bottom: 1rem;
    }

    .download.card .dw_btn {
      color: #e59e75;
    }

    .download.card:hover .dw_btn {
      color: #e57738;
    }

    .download.card .dw_btn svg {
      fill: currentColor;
    }


    .votepage .card .pic {
      position: relative;
      overflow: hidden;
      height: 0;
      padding-bottom: 66.66667%;
    }

    .votepage .pic .card-img-top {
      border-radius: 0;
    }

    .card .pic,
    .l_item .pic {
      position: relative;
      overflow: hidden;
      height: auto;
    }

    .card .num {
      padding: 2px 10px;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
      font-size: 12px;
      display: inline-flex;
      align-items: center;
      color: #fff;
      background-color: #3f4254eb;
    }

    .card .num span {
      color: #fff;
      font-weight: 700;
    }

    .card .pic div.num {
      position: absolute;
      left: 10px;
      bottom: 10px;
      font-size: 12px;
      display: flex;
      align-items: center;
      border: 1px solid #084298;
      color: #6d7082;
    }

    .rank .text div.num {
      position: relative;
      border: 0px;
      padding-left: 0;
      display: block;
      font-weight: 700;
      margin-bottom: .25rem;
      font-size: 12px;
      color: #6d7082;
      z-index: 2;
      margin-top: -1.75rem;
    }

    .num>div {
      background-color: #fff;
      display: inline-flex;
      padding: .25rem .75rem .1rem 0.75rem;
      border-radius: 6px;
      align-items: center;


    }

    .num div>span,
    .num span {
      font-size: 1.4rem;
      color: #5463A5;

    }

    .accordion_row {
      margin-right: 0;
      margin-left: 0;
    }

    .cardbox {
      padding-top: 0%;
      padding-bottom: 2rem;
      padding-left: .25rem;
      padding-right: .25rem;
    }

    .cardbox .col {
      margin-top: 3rem;
      padding: 1.2rem;
      padding-bottom: 0;
    }

    .cardbox .col:nth-child(1),
    .cardbox .col:nth-child(2),
    .cardbox .col:nth-child(3) {
      margin-top: 1rem;
    }

    .subtilte {
      margin: auto;
    }

    .bebox {
      background-color: #fff;
      border-radius: 12px;
      padding: 1rem;
      margin-bottom: 3rem;
    }

    .votepage .btn-outline-secondary {
      border: 1px solid #979EBD;
    }

    .rankbox .subtitle,
    .vote_chart .subtitle {
      background-color: #2051a1;
      color: #fff;
      margin-right: 20px;
      font-size: 1rem;
      position: absolute;
      top: -15px;
      left: 15px;
      z-index: 3;
    }

    .rank .pic {
      box-shadow: 0px 0px 30px rgba(56, 71, 109, 0.09);
      position: relative;
      height: 0;
      padding-bottom: 66.6667%;
      overflow: hidden;
    }

    .rank .text {
      padding: .5rem 1rem .5rem 1rem;
      background-color: #fff;
      box-shadow: 0px 0px 30px rgba(56, 71, 109, 0.09);
      border-radius: 0 0px 6px 6px;
      position: relative;
    }


    .thankyou .titlebox div {
      display: flex;
    }

    .ranklive {
      margin-top: 1rem;
    }

    .rank_share {
      background-color: #e8ecfc7b;
      padding: 1rem;
      border-radius: 6px;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
    }

    .vote_title {
      padding: .3rem;
      /* padding-left: .5rem; */
      border-radius: 10px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      flex-direction: row;
      gap: .5rem;
    }

    .votetag_box {
      display: flex;
      flex-direction: row;
      gap: 0.5rem;
      flex-wrap: wrap;
    }

    .rankbox h2 {
      margin-top: .5rem;
    }

    .typetag {
      border-width: 1px;
      border-style: solid;
      border-color: #5463A5;
      color: #5463A5;
      padding-left: .8rem;
      padding-right: .8rem;
      padding-top: 10px;
      padding-bottom: 10px;
      border-radius: 6px;
      text-decoration: none;
      font-size: 1rem;
      background-color: #fff;
    }

    .typetag:hover,
    .typetag:focus {
      background-color: #5463a5;
      color: #fff;
    }

    .typetag:first-child {
      margin-left: 0;
    }

    .tag_active {
      background-color: #5463a5;
      border-width: 0;
      color: #fff;
    }

    .rankbox {
      border-radius: 10px;
      background-color: #fff;
      padding: 1rem;
      position: relative;
      box-shadow: 0px 0px 30px rgba(56, 71, 109, 0.09);
    }

    .rank_order {
      display: flex;
      flex-wrap: wrap;
    }

    .rank>div {
      border: 1px solid #1e3a67;
      border-radius: 6px;

    }

    .rank_no {
      background-color: #1e3a67;
      color: #fff;
      padding: 5px;
      padding-left: 10px;
      padding-right: 10px;
      font-size: 0.8rem;
    }

    .rank_no span {
      font-size: 1.2rem;
      font-weight: 700;
    }

    .rank>div.no1 {
      border: 3px solid #2051a1;
    }

    .rank_no.no1 {
      background-color: #2051a1;
    }

    .votepage .accordion-button:not(.collapsed) {
      background-color: #5463A5;
      color: #fff;
      font-weight: 700;
      font-size: 1.2rem;
    }

    .votepage .done.accordion-button:not(.collapsed),
    .votepage .done.accordion-button {
      background-color: #5463A5;
    }

    .accordion-button:not(.collapsed)::after {
      content: url('../img/down.svg');
    }

    .accordion-button::after {
      content: url('../img/down.svg');
      background-image: none;
    }

    .votepage .accordion-body h3.fw-bolder {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      color: #5463a5d5;
      justify-content: center;
    }

    .votepage .accordion-button {
      background-color: #6d7287eb;
      color: #fff;
      font-weight: 700;
      font-size: 1.2rem;
    }

    .vote_choice,
    .voted_reminder {
      padding: 2rem;
      background-color: #fff;
      border-radius: 10px;
      text-align: left;
    }

    .vote_choice h2.title,
    .status h2.title {
      text-align: left;
      margin: 1rem auto;
      padding-left: 2rem;
      padding-bottom: 1.5rem;
      font-size: 3rem;
      border-bottom: 1px solid #EDEDED;
      display: flex;
      align-items: center;
      gap: 8px;
      color: #084298;
    }

    .vote_choice h2.title span,
    .status h2.title span {
      padding-left: 1rem;
      border-left: 1px solid #EDEDED;
    }

    .voted_reminder {
      padding: 1rem;
      background-color: #E8ECFC80;
      color: #5463A5;
      display: flex;
      justify-content: space-around;
      box-shadow: 0px 0px 10px rgba(56, 71, 109, 0.09);
    }

    .voted_reminder .pic,
    .voted_reminder .text {
      text-align: center;
      padding-bottom: 0.5rem;
    }

    .voted_reminder .text {
      text-align: left;
    }

    .voted_reminder .pic {
      background-color: #FFF;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .voted_reminder .pic img {
      width: 50%;
    }

    .reminder_text {
      font-size: .8rem;
      margin-top: .5rem;
    }

    .vote_choice_title {
      display: flex;
      align-items: center;
      padding: .5rem;
      gap: 8px;
      background-color: #5463A5;
      border-radius: 6px;
      color: #fff;
    }

    .vote_type {
      text-align: left;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 1rem 4rem;
      justify-content: center;
    }

    h3.vote_type {
      font-size: 1.5rem;
      color: #FFF;
      background-color: #5463A5;
      display: inline-flex;
      margin-top: 1rem;
      margin-bottom: 15px;
      border-radius: 6px;
    }


    .vote_color {
      background-color: #EEF0F8;
    }

    .votepage .card-body {
      padding-bottom: 0.5rem;
      min-height: 190px;
    }

    .vote_me {
      text-align: center;
      padding: .5rem;
      padding-left: 1rem;
      padding-right: 1rem;
    }

    .vote_me .btn.btn-outline-secondary {
      outline: 1px solid #979EBD !important;
    }

    .vote_stat span {
      font-size: .8rem;
      color: #888;

    }

    .vote_stat {
      margin-top: 10px;
      padding-bottom: 0;
      margin-bottom: 0;
    }

    .vote_chart {
      border-radius: 10px;
      background-color: #fff;
      padding: 1rem;
      position: relative;
      margin-top: 2.75rem !important;
    }

    .votepage .status {
      background-color: #fff;
      margin: 0 auto 2rem auto;
      padding: 1.5rem 2rem;
      border-bottom: 1px solid #f5f5f5;

    }

    .cta_box {
      background-color: #e8ecfc7b;
      border-radius: 10px;
      align-items: stretch;
      margin-left: 1rem;
      margin-right: 1rem;
    }

    .votepage .cta_box {
      margin-left: auto;
      margin-right: auto;
    }

    .cta_box .pic img {
      border-radius: 10px;
      overflow: hidden;
      height: 170px;
    }

    .twocol .l_item {
      background-color: aliceblue;
      border-radius: .5rem;
      overflow: hidden;
    }

    .xbg3 {
      background-color: EDEDED;
    }

    .l_item {
      border-radius: .5rem;
      overflow: hidden;
    }

    .fou_col .l_item {
      background-color: rgba(0, 0, 0, .1);
    }

    .thrcol .l_item {
      background-color: rgba(0, 0, 0, .1);
    }

    .titlebox {
      text-align: center;
      /* height: 100%; */
    }

    .titlebox div {
      display: inline-block;
    }

    .titlebox .section_title {
      text-align: left;
    }

    .voted_cart {
      background-color: #e8ecfcd3;
      padding-top: 3rem;
      padding-bottom: 3rem;
    }

    .votepage .titlebox .section_title,
    .voted_item {
      text-align: left;
      display: flex;
      justify-content: center;
    }

    .voted_item {
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0px 0px 10px rgba(56, 71, 109, 0.09);
    }

    .voted_item .pic {
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      overflow: hidden;
      position: relative;
    }

    .voted_item .text,
    .voted_reminder .text {
      padding: .5rem 1rem;
      position: relative;
    }

    .voted_item .text span {
      margin-bottom: .5rem;
    }

    .del {
      position: absolute;
      right: -10px;
      top: -18px;
      width: 42px;
      height: 42px;
    }

    .del:hover img,
    .del:focus img {
      content: url('../img/hook/voting/xx_click.svg');
      transition: .1s;
    }

    .del img {
      max-width: 20px;
      content: url('../img/hook/voting/xx.svg');
    }



    .voted_item .pic img {
      width: 100%;
      position: absolute;
    }

    .votepage .section_title {
      padding: 2rem;
      background-color: #fff;
      border-radius: 10px;
    }

    .votepage .section_title.formtitle {
      background-color: inherit;
    }

    .voted {
      background-color: rgba(237, 237, 237, 0.3);
      border-radius: 10px;
      padding: 1rem 1.5rem;
    }

    .votepage section.form {
      background-color: #fff;
      padding-bottom: 1.5rem;
      padding-top: 1.5rem;
    }

    .votepage section.form .vote_choice h2.title {
      justify-content: center;
    }

    .votepage .form_box,
    .activity section.form .form_box,
    .productpage .form_box,
    .query .form_box {
      background-color: #f5f8fa;
      padding: 2rem 2rem 1rem;
      border-radius: 12px;
    }

    section.hor_form .limit_con .form_box {
      border-radius: 12px 12px 0 0;
    }


    .productpage .form_box {
      background-color: transparent;
      padding: 0;
    }

    .section_title h2 {
      font-size: 3rem;
      padding-bottom: 10px;
      text-align: left;
      /* color: #084298; */
    }

    .titleimg img {
      border-radius: 10px;
      overflow: hidden;
      /* height: auto; */
    }

    .section_title .p_area {
      text-align: left;
    }

    .section_title .p_area p {
      margin-bottom: 0;
    }

    .twocol .section_title .p_area,
    .twocol .section_title h2,
    .magcol .section_title {
      color: aliceblue;
    }

    .carousel_col {
      padding: 0;
      margin: 0;
    }

    .tablecol table {
      color: azure;
    }

    .user_color1 {
      color: azure;
    }

    /* 對話開始 */

    .dialogue {
      width: 100%;
      padding: 20px;
    }

    .user {
      display: flex;
      align-items: flex-start;
      margin-bottom: 20px;
    }

    .user .avatar {
      width: 60px;
      text-align: center;
      flex-shrink: 0;
    }

    .user .pic {
      border-radius: 50%;
      overflow: hidden;
    }

    .user .pic img {
      width: 100%;
      vertical-align: middle;
    }

    .user .name {
      color: #333;
    }

    .user .text {
      background-color: #aaa;
      padding: 16px;
      border-radius: 10px;
      position: relative;
    }

    .remote .text {
      margin-left: 20px;
      margin-right: 80px;
      color: #eee;
      background-color: #4179f1;
    }

    .remote .text::before {
      border-right: 10px solid #4179f1;
      left: -10px;
    }

    .local {
      justify-content: flex-end;
    }

    .local .text {
      margin-right: 20px;
      margin-left: 80px;
      order: -1;
      background-color: #fff;
      color: #333;
    }

    .local .text::before {
      border-left: 10px solid #fff;
      right: -10px;
    }

    .remote .text::before,
    .local .text::before {
      content: "";
      position: absolute;
      top: 20px;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
    }

    .remote .text,
    .local .text {
      font-weight: 300;
      box-shadow: 0 0 10px #888;
    }

    /* 對話結束 */

    .cta_content .text {
      display: inline-block;
      text-align: left;
    }

    .cta_content h2 {
      text-align: left;
    }

    .cta_content {
      text-align: center;
    }

    .phone,
    .verifybox {
      display: flex;
      flex-wrap: wrap;
    }

    .phone .form-select {
      width: 30%;
    }

    .phone .form-control {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      width: 70%;
    }

    .verifybox .form-control {
      width: 60%;
    }

    .verifybox .verify_button {
      width: 40%;
    }

    .verify_button {
      text-align: right;
    }

    .phone button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    .ful .pic img {
      width: 100%;
    }

    .footer {
      background-color: #f5f5f5;
    }

    .brand_logo {
      width: 40%;
      height: 0;
      padding-bottom: 20%;
      position: relative;
      margin-bottom: 10px;
    }

    .brand_logo img {
      width: 100%;
      position: absolute;
      object-position: left;
    }

    .info {
      border-top: 1px solid rgba(0, 0, 0, .301);
      padding-top: 2%;
      padding-bottom: 2%;
      display: flex;
      align-items: flex-start;
    }

    footer .info:first-of-type{
      border: 0;
    }
    footer .info.tax_id{
      border-top: 1px solid rgba(0, 0, 0, .301);
    }

    .info span {
      width: 70%;
      padding-right: 5%;
      font-size: 1rem;
    }

    .info.desc .context.xt_area span {
      width: 100%;
      margin-right: 0;
      font-size: inherit;
      color: inherit;
    }

    .info_subtitle {
      width: 30%;
      display: inline-block;
      margin-left: 0%;
      color: darkgrey;
      font-weight: 600;
    }

    #fixed-right-side-div {
      position: fixed;
      top: 300px;
      right: 0;
      width: 65px;
      z-index: 16000161;
    }

    #fixed-right-side-div .symbol-label img {
      max-width: 20px;
    }

    .addhint {
      background-color: #a72109;
      right: -10px;
      top: -10px;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      font-weight: 300;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .over99 {
      vertical-align: sub;
      position: absolute;
      top: -2px;
      right: -1px;
      font-weight: 600;
      font-size: 12px;
    }

    .rounded-bottom-start {
      border-bottom-left-radius: 0.475rem;
    }

    .copyright {
      background-color: rgba(84, 99, 165, 1);
      color: #fff;
      align-items: center;

    }

    .modal-body .pic {
      max-width: 900px;
      margin: auto;
      width: 80%;
    }

    .modal-body .pic img {
      width: 100%;
      position: absolute;
    }

    .modal-body .text {
      font-size: 1.2rem;
    }

    .modal-title .item-title-display {
      font-size: 1.7rem;
    }

    .modal-dialog {
      min-width: 45%;
    }

    .pay_button {
      display: flex;
      gap: 1rem;
      flex-direction: row;
      flex-wrap: wrap;
    }

    .pay_choice button {
      padding: 1rem 1.5rem;
      background-color: #fff;
      outline: 1px solid #979EBD;
      border: 0px;
      border-radius: 6px;
    }

    .pay_choice button:hover,
    .pay_choice button:focus {
      background-color: #f3f4f9;
      outline: 2px solid #5463A5;
      color: #5463A5;
    }
    .pay_choice .creditcard img,
    .pay_choice button img,
    .pay_check div img {
      width: 48px;
      height: 32px;
      display: inline-block;
      object-fit: contain;
      margin-right: 4px;
    }
    .pay_choice .onlinepay img{
      width: 62px;
      height: 42px;
      display: inline-block;
      object-fit: contain;
      margin-right: 4px;
    }

    .tabet_phone-only {
      display: none !important;
    }

    /* futuremail */

    .future_email_page {
      background-color: #FFDDCA;
    }

    .future_email_page a {
      color: #ff6f80;
    }

    .sound {
      display: flex;
      align-items: center;
    }

    .fixedbubble {
      position: absolute;
      top: 60px;
      right: 10px;
    }

    .future_email_page .bubble {
      padding: 1rem;
      color: #fff;
      position: relative;


      background: #f4a48c;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
    }

    .bubble:after {
      content: '';
      position: absolute;
      border-style: solid;
      border-width: 0 15px 15px;
      border-color: #f4a48c transparent;
      display: block;
      width: 0;
      z-index: 1;
      top: -15px;
      left: 190px;
    }

    .future_email_page .slogan {
      height: 14px;
      max-width: 60%;
      position: relative;
    }

    .future_email_page .navbar.shadow {
      box-shadow: 0.5rem 1.5rem 0.5rem rgba(236, 227, 227, 0.08) !important;
    }

    .future_email_page .campaign_bg,
    .future_email_page .campaign_bg2 {
      background-color: #FFDDCA;
      background-image: url('../img/future_email/bg_kv.png');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: left bottom;
    }

    .future_email_page .campaign_bg2.one_col,
    .future_email_page.thankyou .s_default {
      color: #5E5E5E;
    }

    .future_email_page .campaign_bg2 {
      background-image: url('../img/future_email/bg_hug.png');
      background-size: 100%;
      background-attachment: fixed;
      padding-top: 4rem;
      padding-bottom: 4rem;
      background-color: #FAD6C3;
    }

    .future_email_page .campaign_bg3 {
      background-image: url('../img/future_email/bg_life.png');
      background-repeat: repeat-x;
    }

    .future_email_page .campaign_bg4 {
      background-color: #f7c8b5;
    }

    .future_email_page section.campaign_bg3,
    .future_email_page section.campaign_bg4,
    section.compaign_share {
      padding-top: 4rem;
      padding-bottom: 4rem;
    }

    .future_email_page section.campaign_bg4 {
      padding-bottom: 0;
    }

    .future_email_page section.campaign_bg4 {
      padding-top: 4rem;
      padding-bottom: 4rem;
    }

    .future_email_page section.campaign_bg3 .row {
      margin: 4rem auto;
    }

    .future_email_page .btn.btn-primary {
      background-color: #FF9C7C;
      font-weight: 700;
    }

    .future_email_page .btn.btn-outline-secondary,
    .future_email_page .btn.btn-outline-notuse {
      border: 1px solid #FF9C7C !important;
      color: #FF9C7C;
      font-weight: 700;
    }

    .future_email_page .btn.btn-outline-notuse {
      cursor: not-allowed;
    }

    .future_email_page .btn.btn-outline-secondary:hover,
    .future_email_page .btn.btn-outline-secondary:focus,
    .future_email_page .btn.btn-outline-secondary:active,
    .future_email_page .btn.btn-outline-secondary:checked,
    .future_email_page .btn-check:checked+.btn.btn-outline-secondary {
      background-color: #FF9C7C !important;
      color: #fff;
    }

    .future_email_page .form_box .btn.btn-outline-secondary {
      background-color: #fff;
    }

    .future_email_page .arrow img {
      width: 50%;
    }

    audio {
      visibility: hidden;
      position: absolute;
    }

    .future_email_page .button_gap {
      padding-left: 0;
    }

    .future_email_page .button_gap button {
      padding-left: 3rem !important;
      padding-right: 3rem !important;
    }

    .future_email_page .button_gap button:first-child {
      margin-right: 20px;
    }

    .titlepic {
      width: 60%;
      margin: auto;
    }

    .future_email_page .form_box {
      background-color: #faded3;
      padding: 2rem;
      border-radius: 0 0 12px;

    }

    .future_email_page .form_box label {
      color: #5E5E5E;
    }

    .future_email_page .formhead p {
      background-color: transparent;
      padding-bottom: 0;
      font-weight: 700;
      color: #fff;
      margin-bottom: 0;
      font-size: 1.5rem;
    }

    .future_email_page .formhead a {
      color: #ffffffb8;
      border-bottom: 1px dashed;
      position: relative;
    }

    .future_email_page .formhead a:hover {
      color: #81001399;
    }

    .future_email_page .formhead a::before {
      content: url('../img/future_email/bx-bulb.svg');
      width: 24px;
      height: 24px;
      position: absolute;
      left: -28px;
    }

    .future_email_page .formhead {
      padding: .5rem 1rem;
      background-color: #f4a48c;
      align-items: center;
      border-radius: 6px 6px 0 0;
    }

    .future_email_page .form_box .time {
      display: flex;
      flex-direction: column;
      gap: .5rem;
      padding: .75rem 1rem;
      font-size: 14px;
      background-color: rgba(255, 255, 255, .35);
      border-radius: 6px;
    }

    .future_email_page .form_box .button_area {
      border-top: 1px solid #f9c7b5;
    }

    .future_email_page .footer {
      background-color: #fff;
      border-radius: 60px 60px 0 0;
    }

    .future_email_page .footer .brand_logo {
      width: 100%;
      padding-bottom: 50%;
      margin-bottom: 0;
    }

    .future_email_page .footer .copyright {
      background-color: #fff;
      color: #5463A5;
    }

    .txa_400px {
      height: 400px;
    }

    .donate textarea {
      height: 80px;
    }

    .future_email_page .accordion-button {
      font-weight: 700;
      font-size: 1.4rem;
    }

    .future_email_page .accordion-button img {
      width: 24px;
      height: 24px;
      margin-right: 8px;
    }

    .future_email_page .accordion-item {
      border: 0;
      border-bottom: 1px dashed #EFF2F5;
    }

    .future_email_page .accordion-button:hover,
    .future_email_page .accordion-button:not(.collapsed) {
      background-color: #fcecdf80;
    }

    .future_email_page .accordion-button:not(.collapsed) {
      color: #000;
    }

    .future_email_page .accordion-body {
      background-color: rgba(255, 250, 240, 0.62);
      color: #333;
    }

    .future_email_page .footer .pic img {
      max-width: 120px;
      margin-bottom: .5rem;
    }

    .future_email_page .user_bg {
      background-color: #F9C7B5;
      background-image: url('../img/future_email/thank_you.png');
      padding-top: 2rem;
      padding-bottom: 2rem;
      background-repeat: no-repeat;
      background-size: 100%;
    }

    .future_email_page.thankyou .status {
      padding: 2rem;
      border-radius: 12px;
    }

    .future_email_page.thankyou .status p.guide {
      color: #FFF;
      background-color: #f4a48c;
    }

    .future_email_page.thankyou .highlight_bg {
      background-color: rgba(255, 255, 255, 0.168);
    }

    .future_email_page label.note {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .future_email_page label.note a.badge {
      border: 1px solid;
    }

    .future_email_page section.feedback_bg,
    body.future_email_page.thankyou {
      background-color: #ffe3ce;
    }

    body.future_email_page.thankyou.pay {
      background-color: #F9C7B5;
      height: 100%;
    }

    .future_email_page section.feedback_bg {
      padding-top: 3rem;
      padding-bottom: 3rem;
    }

    .future_email_page div.feedback {
      border-radius: 12px;
      background-color: #ffffff46;
      padding: 2rem;
      flex-direction: row;
    }

    .future_email_page.thankyou section.campaign_share {
      background-color: #f0c9b570;
    }

    .future_email_page.thankyou #toastr_sent {
      padding: 3rem;
      background-color: #ffffffe0;
      z-index: 99;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: #0BB783;
      font-weight: 700;
      border-radius: 6px;
      box-shadow: 0px 0px 30px 20px #50505017;
    }

    .future_email_page.thankyou .feedback button img {
      width: 20px;
      margin-right: 4px;
    }

    .future_email_page .btn-outline-primary {
      background-color: transparent;
      color: #FF9C7C;
      outline: 1px solid #FF9C7C !important;
      position: relative;
    }

    .future_email_page .btn-outline-primary:hover {
      background-color: #FF9C7C !important;
      color: #fff;
      outline: 0px !important;
    }

    .future_email_page .feedback .btn-outline-primary svg {
      width: 20px;
      margin-right: 4px;
    }

    .future_email_page.thankyou .feedback button.btn-outline-primary {
      background-color: #fff;
    }

    .future_email_page .donate .form_box {
      padding: 0;
      background-color: transparent;
    }

    .manual,
    .productpage .manual {
      padding: 12px 1.5rem 12px 1.5rem;
      align-items: center;
      flex-wrap: wrap;
    }

    .manual .form-select:focus {
      border-right: 1px solid #5E6278;
    }

    .manual .form-select:focus~.form-control {
      border-left: 0px;
    }

    .manual .form-select {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-right: 1px solid transparent;
    }

    .manual .form-control {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    .manual span,
    .additional span {
      margin-right: 16px;
      color: #888;
    }

    .donate .option img,
    .productpage .option img {
      height: 20px;
    }

    .donate .auto,
    .productpage .auto {
      width: 100%;
      display: flex;
      justify-content: space-around;
      padding-bottom: 1rem;
      border-bottom: 1px dashed #ccc;
    }

    .donate .modal-body .form_box p {
      margin-top: .5rem;
    }

    .future_email_page .donate_choice {
      margin-left: 0;
    }

    .future_email_page .paypal_bottom,
    .pop_up_pay .paypal_bottom {
      margin-bottom: 18px;
    }

    .additional {
      display: flex;
      align-items: center;
      padding: 6px 1.5rem 6px 1.5rem;
      color: #888;
      flex-wrap: wrap;
    }

    #service_info {
      border-top: 1px dashed #dddddd89;
      padding-top: 6px;
      margin-top: 4px;
      padding-bottom: 4px;
    }

    #service_info div.w-100 {
      gap: 1rem;
    }

    #service_info div {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      gap: 4px;
      margin-bottom: 0;
      color: #999;
      font-size: 12px;
    }

    #service_info p {
      font-weight: 700;
      font-size: 12px;
      margin-bottom: 0;
    }

    #service_info .border_btm {
      border-top: 1px dashed #ddd;
      padding-top: .5rem;
    }

    #service_info span.fw-bolder:not(.d-inline) {
      display: flex;
      width: 100%;
    }

    #service_info .tel,
    #service_info .mapicon,
    #service_info .mail {
      position: relative;
      max-width: 50%;
      min-width: 15%;
      display: flex;
      align-items: baseline;
    }

    #service_info .tel {
      min-width: 20%;
    }

    #service_info .mapicon {
      min-width: 45%;
    }

    #service_info .tel::before,
    #service_info .mapicon::before,
    #service_info .mail::before {
      content: " ";
      background-image: url('../img/future_email/bxs-phone.svg');
      background-size: 100%;
      margin-right: 4px;
      width: 12px;
      height: 12px;
      left: -2px;
      top: 1px;
      display: flex;
      position: relative;
    }

    #service_info .tel::before svg #service_info .mapicon::before {
      background-image: url('../img/future_email/bxs-home.svg');
    }

    #service_info .mail::before {
      background-image: url('../img/future_email/bxs-envelope.svg');
    }


    /* 活動 */
    .activity header {
      padding-bottom: 3rem;
    }

    .activity .banner {
      border-radius: 12px 12px 0 0;
    }

    .activity .badge-outline-primary,
    .productpage .badge-outline-primary {
      border: 1px solid #e57738;
      color: #e57738 !important;
      background-color: #fff;
    }

    .activity .clipped .badge-outline-primary {
      border: 1px solid #e57738;
      color: #e57738;
      background-color: #fff;
      display: inline-block;
      margin-bottom: .5rem;

    }

    .activity .banner.auto_banner,
    .activity .banner.user_banner {
      background-color: #cccccc80;
      text-align: right;
      position: relative;
      border-radius: 12px 12px 0 0;
      overflow: hidden;
    }

    .activity .banner.auto_banner {
      margin-top: 1rem;
    }

    .activity .banner.auto_banner svg {
      position: absolute;
      left: 0;
      top: 0;
    }

    .activity .banner.auto_banner .clipped {
      position: absolute;
      background-color: #e57738;
      background-image: url('../img/hook/activity/autobanner_bg.svg');
      background-size: cover;
      color: #fff;
      height: 100%;
      padding: 2rem 8rem 2rem 2rem;
      width: 55%;
      text-align: left;
      display: flex;
      align-items: center;
      clip-path: url(#my-clip-path);
      -webkit-clip-path: url(#my-clip-path);
      z-index: 2;
    }

    .activity .banner.auto_banner .clipped div p {
      opacity: .85;
    }

    .activity .banner div h1 {
      font-weight: 700;
      font-size: 2.5rem;
    }

    .activity .banner.auto_banner .fix_img {
      width: 65%;
      height: 0;
      position: relative;
      padding-bottom: 36.5625%;
      left: 35%;
    }

    .activity .banner.auto_banner .fix_img img {
      position: absolute;
      left: 0;
    }

    .intro_bg {
      background-color: #fff;
      border-radius: 0 0 12px 12px;
      padding: 2rem;
    }

    .activity .info_area {
      width: 65%;
      padding: 0;
    }

    .activity .action_area {
      max-width: 365px;
    }

    .activity .info {
      justify-content: start;
      padding: 1rem 2rem 1rem 0;
      align-items: center;
    }

    .activity .info_area .info {
      border-color: #ddd;
    }

    .activity .info_area .info ul {
      margin-bottom: 0;
    }

    .context {
      padding-left: 1rem;
      padding-right: 1rem;
    }

    section.detail {
      background-color: #fff;
    }

    .detail.dl_detail {
      background-color: #fffdfd;
    }

    .detail.acc_detail {
      background-color: #fffcf9;
    }

    .detail.tec_detail {
      background-color: #f4f4f4;
    }

    .tec {
      padding: 1.5rem 0;

      border-bottom: 1px dashed #ddd;
    }

    .tec p {
      color: #666;
    }

    .tec_detail .tec:last-of-type {
      padding-bottom: 0;
      border: 0;
    }

    .activity .info.desc {
      align-items: flex-start;
      border: 0px;
    }

    .activity .info span {
      margin-right: 16px;
      width: auto;
      min-width: 60px;
      color: #888;
    }
    .activity .info_area .info span{
      padding-right: 0;
    }
    .activity .info_area .badge.badge-outline-primary{
      padding-right: 0.5rem;
    }

    .activity .main {
      padding: 2rem;
      margin-top: 1rem;
    }

    .activity .form_box p,
    .productpage .form_box  p.guide{
      background-color: #FBF4E5;
      color: #F99F19;
    }
    
  

    .form_box .badge.badge-outline-primary {
      color: #e57738;
      border-color: #e57738;
      background-color: #fff;
    }

    .form-label {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .nav_area.sticky {
      position: sticky;
      top: 60px;
      right: 0;
    }

    .activity.thankyou header,
    .contact header,
    .service_page header,
    .thankyou header {
      padding-top: 1rem;
      padding-bottom: 2rem;
    }

    .activity.check_in header {
      padding-top: 1.5rem;
      padding-bottom: 1.5rem;
    }

    .action {
      border: 1px solid #F0762F;
      background: rgba(240, 118, 47, 0.05);
      border-radius: 6px;
      padding: 1rem 1.5rem;
    }

    .activity .title {
      display: flex;
      gap: 8px;
      justify-content: center;
      align-items: flex-start;
    }


    .activity .title:first-of-type {
      margin: 1rem;
    }

    .activity .title.user_banner {
      justify-content: start;
      padding-left: 3rem;

      margin-left: 0;
      color: #666;
    }

    .activity .title.user_banner h2 {
      position: relative;
      display: flex;
      align-items: center;

    }

    .activity .title.user_banner h2::before {
      content: '';
      width: 32px;
      height: 32px;
      background-image: url('../img/hook/activity/highlight.png');
      background-size: 100%;
      display: inline-block;
      position: relative;
      left: -10px;

    }

    .activity .title.info_title {
      margin: 0;
      padding-bottom: 1rem;
      border-bottom: 1px dashed #ddd;
      justify-content: start;
    }

    .activity .title h1,
    .activity .title h2 {
      margin-bottom: 0;
    }

    .action span {
      font-size: 14px;
      color: #888;
    }

    .nav_area {
      background-color: #ffffff;
      padding: 0.5rem 1rem;
      border-radius: 6px;
      border: 1px solid #ddd;
    }

    section.map {
      padding: 2rem 0;
      background-color: rgb(238, 238, 238);
    }

    section .indication,
    .query .indication {
      display: flex;
      align-items: center;
      padding-bottom: .75rem;
      border-bottom: 1px dashed #ddd;
      justify-content: center;
      color: #666;
    }

    section .indication::before,
    .query .indication::before {
      content: url('../img/hook/activity/Calendar.svg');
      width: 24px;
      position: relative;
      left: 0;
      margin-right: 8px;
    }

    .gmap {
      padding: 0rem 2rem;
      min-height: 400px;
    }

    .map_info,
    .address_highlight {
      background-color: #cacaca15;
      padding: 1.5rem 1rem;
      border-radius: 6px;
    }

    .address_highlight {
      background-color: rgba(255, 255, 255, 0.603);
      padding: 1rem;
      margin-bottom: 1rem;
      border-left: 4px solid #e57738;
      border-radius: 0 6px 6px 0;
    }

    .map_info>div:not(.address_highlight) {
      padding: 1rem;
      background-color: rgba(255, 255, 255, 0.103);
    }

    .activity section.form,
    .form-check-input {
      background-color: #fff;
    }

    .activity section.form h3 {
      font-weight: 700;
      font-size: 2.5rem;
      margin: 1rem auto;
    }

    .session {
      border-bottom: 1px dashed #ddd;
      padding-bottom: 1.25rem;
    }

    .session span {
      font-size: 14px;
      color: #666;
      margin-bottom: 0.25rem;
    }
    .session.redeem_session{
      background-color: #fff;
      border-radius: .625rem;
      border-bottom: 0px;
      padding: 1rem;
    }

    .session>div {
      border-radius: 12px;
      padding: .65rem 2rem .65rem 1.5rem;
      justify-content: space-between;
    }


    .session button {
      padding-top: .25rem !important;
      padding-bottom: .25rem !important;
    }

    .session_name {
      position: relative;
      font-weight: 700;
      display: flex;
      align-items: center;
      margin-right: 1rem;
      color: #F0762F;
    }

    .selected .session_name {
      padding-left: 1rem;
    }

    .option .session_name::after {
      content: url('../img/hook/activity/bx-caret-right.svg');
      right: 0;
      top: 2px;
      margin-left: 8px;
      width: 16px;
      position: relative;
    }

    .session_hint div {
      color: #979797;
      font-size: 1rem;
      padding-left: 8px;
    }
    .session.redeem_session .session_hint div {
      padding-left: 0;
    }
    .session.redeem_session .session_hint{
      flex-direction: row-reverse;
    }

    .session_hint div:last-of-type:not(#urgency-div):before {
      content: url('../img/hook/activity/bx-user.svg');
      left: 0;
      margin-right: 8px;
      top: 2px;
      width: 16px;
      position: relative;
    }

    .session_hint span {
      position: relative;
      display: inline-flex;
      align-items: center;
      margin-bottom: 0;
      font-weight: 700;
    }

    .selected-session-remaining-display {
      font-weight: 500;
    }


    .session_hint.under span {
      color: #F0762F;
    }

    .session_hint.under span.hint::before {
      content: url('../img/hook/activity/bx-info-circle.svg');
      left: 0;
      margin-right: 8px;
      top: 2px;
      width: 16px;
      position: relative;
    }

    .session_hint.under span.hint {
      display: inline-block;

      border-radius: 4px;
      padding-left: 4px;
      padding-right: 4px;
    }

    section.service {
      padding-top: 1rem;
      padding-bottom: 1rem;
      background-color: rgb(246, 249, 255);

    }

    .service ul.nav {
      justify-content: space-around;
    }

    .service ul.nav li {
      flex: 1;
      text-align: center;
    }

    .service a {
      font-weight: 700;
    }

    .service a:hover {
      color: #e57738;
    }


    .session_choice {
      display: flex;
      flex-direction: column;
    }

    .session_choice .option {
      padding: .75rem 2rem;
      outline: 1px solid #ddd;
      border-radius: 6px;
      margin: .35rem auto;
    }

    .session_choice .option:hover {

      background-color: #F0762F10;
      cursor: pointer;
    }


    .session_choice input[type="radio"]:checked+.option {
      outline: 2px solid #F0762F;
      background-color: #F0762F10;
    }

    .session_choice .option div.opt_line {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }

    .session_choice .option .opt_line div {
      display: inline-block;
      color: #444;
    }

    .option.full,
    .session_choice input[type="radio"]:checked+.option.full {
      background-color: rgba(238, 238, 238, 0.452);
      cursor: not-allowed;
      outline: 1px solid #ddd;
    }

    .session_choice .option .opt_line div.session_time,
    .session .d-flex.selected div.session_time {
      display: flex;
      flex-direction: column;
      width: 40%;
      min-width: 280px;
    }

    .session .d-flex.selected div.session_time {
      width: 100%;
      min-width: 200px;
      padding: .5rem 1rem;
      background-color: #eeeeee26;
      border-radius: 12px;
    }


    .session_choice .option .opt_line div.session_time div,
    .session .d-flex.selected div.session_time div {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      color: #000;
      position: relative;
    }

    .session .d-flex.selected {
      flex-wrap: wrap;
      flex-grow: 1;
      padding-right: 2rem;
      border-right: 1px dashed #ddd;
      margin-right: 2rem;
    }

    .from_to {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 6px 6px 0 6px;
      border-color: #979797 transparent transparent transparent;
      position: absolute;

    }

    .session_time .from_to:first-child {
      left: 50px;
    }

    .session_time .from_to:last-child {
      right: 15px;
    }

    .context .session_time {
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
    }

    .context .session_time .d-flex {
      align-items: center;
      padding-right: 8px;
    }

    .context .session_time div.position-relative {
      width: 20px;
      height: auto;
      padding: 0 !important;
    }

    .context .session_time .from_to {
      border-width: 6px 0px 6px 6px;
      border-color: transparent transparent transparent #979797;
      position: static;
      margin: 0 auto;
    }

    .context .session_time .from_to:last-child {
      display: none;
    }

    .context .session_time span.badge {
      font-weight: 600;
    }

    .invitation {
      background-color: #fff;
      padding: 1rem 3rem 2rem;
      border-radius: 12px 12px 0 0;
      background-image: url('../img/hook/activity/inv_bg_top.webp'),
        url('../img/hook/activity/inv_bg_bottom.webp');
      background-size: 100%;
      background-position: top, bottom;
      background-repeat: no-repeat;
      text-align: center;
    }

    .activity.thankyou .invitation~.status {
      border-radius: 0 0 12px 12px;
      padding-top: 0;

    }

    .invitation h1 ,.redeem_ticket-body h1{
      font-weight: 700;
      font-size: 2rem;
      padding: 10px;
      display: inline-block;
      margin: 10px auto 2rem auto;
      position: relative;
      z-index: 2;
      top: 0;
      color: #5c5f93;
    }

    .invitation h1::after,.redeem_ticket-body h1::after {
      content: '';
      width: 100%;
      height: 10px;
      display: block;
      background-color: #DEE0EFaa;
      border-radius: 2px;
      position: absolute;
      left: 0;
      bottom: 6px;
      z-index: -1;

    }

    .invitation .text {
      padding: 0 4rem;
      text-align: left;
    }

    .invitation .pic {
      margin: 1.5rem auto 1rem auto;
      width: 20%;
      min-width: 120px;
    }
    .redeem_ticket{
      width: 100%;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: row;
      border-radius: 20px;
      box-shadow: 4px 4px 25px 2px #d1d1d142;
      margin-bottom: 2rem;
      margin-top: 2rem;
    }
    .redeem_ticket-head{
      padding: 1.5rem;
      color: #fff;
      background-color: #4179f1;
      position: relative;
      flex-direction: column;
      gap: 1rem;
      width: 60%;
    }

  
    
    .redeem_ticket-body,.redeem_ticket-head{
      display: flex;
      justify-content: center;
      align-items: center;
    }
    /* .redeem_ticket::after{
      content: '';
      width: 100%;
      height: 50%;
      position: absolute;
      background-color: #f56629;
      border-radius: 5rem 5rem 0 0;
      bottom: 0;
      left: 0;
      z-index: -1;
    } */
    .redeem_ticket-footer{
      position: relative;
      background-color: #f56629;
      padding: 1rem 2rem 4rem 2rem;
      color: #ffffffa2;
    }
    .redeem_ticket-footer::before{
      content: '';
      width: 100%;
      height: 10%;
      min-height: 50px;
      background-color: #f56629;
      top: -50px;
      left: 0;
      position: absolute;
      border-radius: 50% 50% 0 0;
      box-shadow: 4px -5px 10px -6px #3a3a3a40;
    }
    .redeem_ticket-body{
      padding: 2rem ;
      background-color: #fff;
      text-align: center;
      position: relative;
      flex-grow: 1;
      flex-direction: column;
      
      
    }
   
    .redeem_ticket-body .pic img{
      max-width: 220px;
    }

    .option.full:hover {
      background-color: rgba(238, 238, 238, 0.452);
      outline: 1px solid #ddd;
      cursor: not-allowed;
    }

    .option .opt_line p {
      margin-bottom: 0;
      display: inline-block;
      color: #F0762F;
    }

    .option .opt_line span,
    .session .d-flex.selected div.session_time div span,
    .context .session_time span {
      font-weight: 700;
      font-size: 1.2rem;
      display: inline-block;
      color: #333;
      margin-right: 8px;
    }

    .activity h5.modal-title {
      font-size: 1.4rem;
    }

    .activity h5.modal-title~p {
      font-size: 14px;
      color: #979797;
    }

    .opt_line p {
      margin-top: 0;
    }

    .activity .form_box .button_area,
    .productpage .form_box .button_area {
      margin-bottom: 2rem;
    }

    .activity section.form .form_box div.mb-3,
    .productpage .form_box .section.form .form_box div.mb-3 {
      padding-left: 24px;
    }

    .activity section.form .form_box div.mb-3.selected,
    .productpage section.form .form_box div.mb-3.selected {
      padding-left: 0;
    }


    .activity section.form .form_box .form-check.mb-3,
    .productpage section.form .form_box .form-check.mb-3 {
      padding-left: 2.25rem;
    }

    .activity .detail {
      overflow: hidden;
    }

    .form_box .checkbox_area {
      padding: 1rem;
      padding-left: 24px;
    }

    .checkbox_area .bg-white {
      padding: 1rem;
      padding-bottom: 0.55rem;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }

    .checkbox_area .form-check {
      margin-bottom: 0.45rem;
      width: 100%;
    }

    .checkbox_area .form-check.form-check-inline {
      width: auto;
      min-width: 25%;
      padding-right: 1rem;
    }

    .form_box .checkbox_area p {
      background-color: transparent;
      color: var(--kt-form-label-color);
      padding: 0;
      margin-bottom: 0;
    }

    .activity .modal .btn.btn-primary,
    .productpage .modal .btn.btn-primary {
      background-color: #e57738;
    }

    .activity .modal .btn.btn-outline-primary:hover,
    .productpage .modal .btn.btn-outline-primary:hover,
    .productpage .btn.btn-outline-primary:hover {
      background-color: #e57738;
    }

    .productpage .btn.btn-outline-primary:hover {
      color: #fff;
    }


    .thankyou .highlight_bg {
      background-color: #f5f5f5;
    }


    .productpage.thankyou .highlight_bg,
    .activity.thankyou .highlight_bg,
    .activity.check_in .highlight_bg,
    .service_page .highlight_bg {
      background-color: #3082b910;
    }

    .thankyou .status,
    .activity.thankyou .status,
    .activity.check_in .status,
    .service_page .status {
      text-align: center;
      padding: 2rem;
      border-radius: 12px;
    }

    .thankyou .status h1,
    .activity.thankyou .status h1,
    .activity.check_in .status h1,
    .service_paget .status h1 {
      color: #5E5E5E;
      display: inline-block;
    }

    .thankyou .status h1 span,
    .activity.thankyou .status h1 span,
    .activity.check_in .status h1 span,
    .service_page .status h1 span {
      color: #3351a2;

    }

    .thankyou .status p.guide,
    .activity.thankyou .status p.guide,
    .activity.check_in .status p.guide,
    .service_page .status p.guide {
      background-color: #3351a210;
    }

    .privacy .info_box p:not(.fw-bolder) {
      font-weight: 500;
      color: #333;
    }

    .contact .status .info {
      border-color: #eee;
    }

    .contact .status .info span {
      color: #444;
    }

    hr.dot {
      border: 1px dashed #7b9cc7 !important;
    }

    .thankyou .card-body p {
      margin-bottom: 0;
      color: #666;
    }

    .thankyou .card {
      box-shadow: 0px 0px 20px 0px #38476D0D;
    }

    .thankyou .card:hover {
      box-shadow: 0px 0px 20px 10px #38476D0D;
    }

    .thankyou .card-body p.card-text,
    .thankyou .card a h3,
    .thankyou .card-body p.card-text small {
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      white-space: normal;
      overflow: hidden;
    }

    .thankyou .card-body p.card-text small {
      -webkit-line-clamp: 1;
    }

    .thankyou .card a h3 {
      color: #333;
      -webkit-line-clamp: 1;
    }

    .thankyou .link_bg {
      background-color: #fafbff;
      padding-top: 3rem;
      padding-bottom: 3rem;
    }

    .link_pic {
      overflow: hidden;
      position: relative;
      height: 100%;
    }

    .link_pic img {
      left: 0;
      top: 0;
      position: absolute;
    }

    .thankyou .share_area,
    .check_in .check_in_area {
      padding: 2rem;
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0px 0px 20px 0px #38476D0D;
      display: flex;
      gap: 12px;
    }

    .thankyou.click_check .check_in_area {
      border-radius: 0 0 12px 12px;
    }

    .check_in .check_in_area {
      padding: 1rem;
      color: #555;
      gap: 8px;
      flex-wrap: wrap;
    }

    .check_in .check_in_area .act {
      gap: 8px;
    }

    .thankyou .share_area .text,
    .check_in .check_in_area .text {
      padding-left: 1rem;
      padding-right: 1rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .thankyou .share_area .pic,
    .check_in .check_in_area .pic {
      border-radius: 6px;
      overflow: hidden;
    }

    .check_in_area h1 {
      margin-bottom: 0.25rem;
      font-weight: 700;
      color: #5463A5;
    }

    .check_in_area h2 {
      border-bottom: 1px dashed rgb(221, 221, 221);
      padding-bottom: .5rem;
    }

    .check_in_area h2.title {
      border-bottom: 0px;
      padding-bottom: 0;
    }

    .check_in_area h2.title span {
      position: relative;
    }

    .check_in_area h2.title span::before {
      content: url('../img/hook/activity/qr-code.svg');
      position: absolute;
      left: -20px;
      top: 0px;
      width: 14px;
    }

    .check_in_input {
      background-color: #5463a520;
      padding: 1.5rem;
      border-radius: 6px;
      color: #000;
    }

    .activity_minititle {
      color: #aaa;
      font-size: 12px;
    }

    .thankyou.check_in .result {
      padding-left: 0;
      padding-right: 0;
      box-shadow: 0px 0px 30px 0px #38476D17;
    }

    .thankyou.check_in .check_in_result.success,
    .thankyou.check_in .check_in_result.wrong {
      background-color: #0BB78340;
      border-radius: 0 0 6px 6px;
      text-align: center;
      padding: 1.25rem;
    }

    .thankyou.check_in .check_in_result.wrong {
      background-color: #d8303020;
    }

    .thankyou.check_in .check_in_result img {
      width: 40%;
    }

    .thankyou.check_in p.result_type {
      padding: 0.25rem .75rem;
      color: #fff;
      margin-bottom: 0;
      border-radius: 6px 6px 0 0;
      font-weight: 700;
    }

    .thankyou.check_in p.result_type.success {
      background-color: #0BB783;
    }

    .thankyou.check_in p.result_type.wrong {
      background-color: #d83030;
    }

    .thankyou.click_check p.result_type.success {
      display: flex;
      align-items: center;
      gap: 16px;
      justify-content: center;
      box-shadow: 0px 0px 20px 0px #38476D0D;
    }

    .thankyou.click_check p.result_type.success img,
    .query p.result_type img {
      width: 40px;
    }

    .thankyou.check_in .check_in_result div.d-flex {
      background-color: #ffffff56;
      font-weight: 700;
      align-items: stretch;
      border-radius: 6px;
      overflow: hidden;
    }

    .thankyou.check_in .check_in_result.wrong div.d-flex {
      flex-direction: column;
      padding-top: 1rem;
      padding-bottom: 1rem;
    }

    .thankyou.check_in .check_in_result.wrong div.d-flex p:first-of-type {
      background-color: #d83030;
      color: #fff;
      display: inline-block;
      width: 60%;
      padding: 0.25rem;
      margin: 0 auto .5rem;
      border-radius: 6px;
    }

    .thankyou.check_in .ticket,
    .thankyou.check_in .seat {
      background-color: #faf8e4;
      border-right: 1px dashed #ccc;
      padding: .75rem 1rem;
    }

    .thankyou.check_in .seat {
      background-color: #fff;
      border-right: 0px;
    }

    .thankyou.check_in .seat span,
    .thankyou.check_in .ticket span {
      font-size: 12px;
      color: #888;
      font-weight: 300;
      display: block;
    }

    .prd_shareimg {
      width: 100%;
      height: 0;
      padding-bottom: 66.66667%;
      overflow: hidden;
      position: relative;
    }

    .prd_shareimg img {
      object-fit: cover;
      position: absolute;
    }

    .prd_share_price {
      background-color: #e57738;

      padding: 4px 12px;
      color: #fff;
      position: absolute;
      bottom: 1rem;
      right: 1rem;
      font-size: 1.4rem;
      font-weight: 700;
    }

    /* 查詢 */
    .query header {
      padding-top: 3rem;
      padding-bottom: 3rem;
      background-color: rgb(248, 248, 248);
    }

    .query .form_box {
      background-color: #3082b910;
    }

    .query .indication::before {
      content: url('../img/other/Calendar.svg');
    }

    .query .form_box .button_area {
      padding-top: 0;
      padding-bottom: 0.5rem;
      border: 0px;
    }

    .query_result_list {
      display: flex;
      background-color: #fff;
      border-radius: 6px;
      flex-wrap: wrap;
    }

    .query_result_list h2 {
      padding: 1rem 0rem .5rem 0;
      margin-bottom: 0.75rem;
      border-bottom: 1px dashed #ddd;
      display: flex;
      align-items: center;
      gap: .75rem;
    }

    .query_result_list .pic {
      border-radius: 6px;
      overflow: hidden;
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 56.25%;
    }

    .query_result_list .pic img {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
    }

    .query_result_list p {
      background-color: transparent;
      padding-bottom: 0;
      margin-top: 0;
      margin-bottom: 0;
    }

    .query .query_result_list .button_area {
      border-top: 1px dashed #ccc;
      padding: 1rem 0;
      margin: .75rem auto 0 auto;
      gap: 16px;
    }

    .query .btn-outline-primary {
      background-color: transparent;
      color: #5463A5;
      outline: 1px solid #5463A5 !important;
      position: relative;
    }

    .query .btn-outline-primary:hover {
      background-color: #5463A5 !important;
      color: #fff;
      outline: 0px !important;
    }

    .query_result_box {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .query .result {
      padding: 1rem 0;
    }

    .query .result_type {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding-top: 12px;
      padding-bottom: 4px;
      border-top: 1px dashed #ccc;
      justify-content: center;
    }

    .query .result_type.success {
      color: #0bb783d2;
    }

    .query .result_type.wrong {
      color: #d83030d2;
    }

    .pay .form_box {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
    }

    .pay_bg {
      background-color: rgba(221, 221, 221, 0.178);
      padding: .5rem 1.5rem;
      border-radius: 6px;
    }

    #resize1 {
      width: 50%;
      padding: .5rem .75rem .5rem 0;
    }

    #resize2 {
      width: 50%;
    }

    .modal-body {
      padding-top: 1rem;
      padding-bottom: 1rem;
    }

    /* 票種 */
    fieldset.ticket_choice {
      display: flex;
      gap: 1rem;
      flex-direction: column;
    }

    .ticket_choice label {
      display: block;
    }

    .ticket_choice .option {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      border-left: 5px solid #E4E6EF;
      align-items: center;
      padding: .5rem 1.5rem;
    }

    .ticket_choice .option .price {
      text-align: right;
    }

    .ticket_choice .option .price .fw-bolder span {
      font-weight: 400;
    }

    .ticket_choice input[type="radio"]:checked+.option {
      border-left: 5px solid #F0762F;
      outline: 2px solid #F0762F;
    }

    .ticket_choice .option .more {
      font-size: 12px;
    }

    .ticket_choice .add_choice {
      margin-top: 0.5rem;
      font-size: 12px;
      width: 100%;
      text-align: left;
      border-top: 1px dashed #ccc;
      padding-top: 8px;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
    }

    .ticket_choice .add_choice span {
      display: inline-block;
      margin-bottom: 0;
    }

    .ticket_choice .add_choice p {
      display: inline-block;
      margin-top: 0;
      margin-bottom: 0;
    }

    .ticket_choice .add_choice .badge.badge-outline-primary {
      font-size: 12px;
      padding-top: 2px;
      padding-bottom: 2px;
    }

    .pay .info_box {
      padding: 0 1.5rem;
    }

    .future_email_page.pay .info_box {
      padding: 1.5rem;
    }

    .pay .info_box p {
      background-color: transparent;
      color: rgb(70, 70, 70);
      padding: 0;
    }

    .pop_up_pay #resize2 {
      padding-left: 1rem;
    }

    /* catalog */
    header.catalog {
      padding-top: 1rem;
      padding-bottom: 0.5rem;
      background-color: #fff;
      box-shadow: 0px 0px 30px rgba(56, 71, 109, 0.09);
    }

    .catalog.member_list_page header {
      margin-top: 0;
    }

    body.catalog.member_list_page,main.catalog.member_list_page {
      background-color: #EEF0F8;
    }

    .catalog_title h2 {
      margin-bottom: 0.25rem;
    }

    .catalog_title p {
      font-size: 13px;
      color: #979797;
    }

    .catalog_list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      background-color: #F5F5F5;
      box-shadow: 0px 0px 30px rgba(56, 71, 109, 0.09);
      transition: .5s;
      position: relative;
    }

    .catalog_list.xcard {
      border-radius: 12px;
      margin: 10px auto;
    }

    .catalog_list.xcard:hover {
      box-shadow: 10px 10px 50px rgba(27, 32, 45, 0.09);
      cursor: pointer;
      /* background-color: #EEF0F8; */
      background-color: #fff;
      transition: .5s;
    }

    .catalog_list.xcard:hover .pic img {
      transform: scale(1.1);
      transition: .5s;
    }

    .catalog_main {
      display: flex;
      flex-direction: row;
      background-color: #fff;
      box-shadow: 0px 0px 30px rgba(56, 71, 109, 0.09);
      border-radius: 12px;
      width: 70%;
      gap: 12px;
    }

    .catalog_list .pic {
      width: 184px;
      height: 184px;
      overflow: hidden;
      position: relative;
    }

    .catalog_list .pic img {
      transition: .5s;
      position: absolute;
      padding: 1rem;
    }

    .catalog_text_box {
      padding-bottom: 20px;
      position: relative;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      gap: 10px;
    }

    .catalog_detail .catalog_text_box {
      gap: 0;

    }

    .catalog_list .name {
      padding-top: 33px;
      border-bottom: 1px dashed #ddd;
      width: 100%;
    }

    .catalog_list .name p,
    .catalog_detail .catalog_main .name p {
      font-size: 22px;
      font-weight: 900;
      margin-bottom: 4px;
      line-height: 20px;
    }

    .catalog_list .name span,
    .catalog_detail .catalog_main .name span {
      color: #979797;
      font-size: 14px;
      display: inline-block;
      min-height: 14px;
    }

    .catalog_list .member_level {
      background-color: #084298;
      position: absolute;
      display: inline-block;
      padding-bottom: 2px;
      padding-top: 2px;
      width: 120px;
      color: #fff;
      top: 0;
      LEFT: 0;
      text-align: center;
      border-radius: 0 0 4px 4px;
    }

    /* .catalog_list .member_level.level1,
    .catalog_detail .catalog_main .member_level.level1 {
      background-color: #dddddd;
      color: rgb(114, 113, 113);
    }

    .catalog_list .member_level.level2,
    .catalog_detail .catalog_main .member_level.level2 {
      background-color: #5463A5aa;
    }

    .catalog_list .member_level.level3,
    .catalog_detail .catalog_main .member_level.level3 {
      background-color: #5463a5cc;
    }

    .catalog_list .member_level.level4,
    .catalog_detail .catalog_main .member_level.level4 {
      background-color: #5463a5ee;
    }

    .catalog_list .member_level.level5,
    .catalog_detail.catalog_main .member_level.level5 {
      background-color: #5463a5ff;
    } */

    .catalog_list ul,
    .catalog_detail .catalog_main ul {
      display: flex;
      padding-left: 0;
      margin-bottom: 0;
      color: #979797;
      width: 100%;
      justify-content: space-between;
    }

    .catalog_list li,
    .catalog_detail .catalog_main li {
      list-style: none;
      display: inline-flex;
      flex-direction: row;
      gap: 4px;
      line-height: 20px;
      font-size: 14px;
      width: 65%;
      align-items: start;
    }

    .catalog_list .contact_info ul li:first-of-type {

      width: 70%;
    }

    .catalog_list .contact_info ul:first-of-type li {
      font-weight: 700;
    }

    .catalog_list .contact_info ul:first-of-type li span {
      font-weight: 500;
    }

    .catalog_list li a {
      color: #979797;
    }

    .contact_career::before,
    .contact_phone::before,
    .contact_person::before,
    .contact_mail::before,
    .contact_web::before,
    .contact_position::before,
    .contact_member::before {
      content: '';
      width: 20px;
      height: 20px;
      background-image: url('../img/catalog/member/bxs-business.svg');
      background-repeat: no-repeat;
      background-position: center;
      display: inline-flex;
    }

    .contact_phone::before {
      background-image: url('../img/catalog/member/bxs-phone.svg');
    }

    .contact_person::before {
      background-image: url('../img/catalog/member/bxs-user-circle.svg');
    }

    .contact_position::before {
      background-image: url('../img/catalog/member/bxs-briefcase.svg');
    }

    .contact_web::before {
      background-image: url('../img/catalog/member/bxs-window-alt.svg');
    }

    .contact_mail::before {
      background-image: url('../img/catalog/member/bx-envelope.svg');
    }

    .contact_member::before {
      background-image: url('../img/catalog/member/houseuser.svg');
    }

    .contact_member {
      color: #5463A5;
    }

    .catalog_list .contact_info ul.middle {
      padding-top: 4px;
      padding-bottom: 4px;
      display: flex;
      flex-direction: row;
      width: 100%;
      justify-content: space-between;
    }

    .catalog_list .catalog_desc {
      width: 30%;
    }

    .catalog_desc {
      padding: 35px 20px 0 20px;
    }

    .catalog_desc .d-flex {
      position: relative;
      padding-left: 34px;
    }

    .quo_brief {
      overflow: hidden;
      max-height: 90px;
    }

    .catalog_desc .d-flex span,
    .catalog_desc .quo_brief p,
    .quo_brief div {
      color: #6e6e6e;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      white-space: normal;
      overflow: hidden;
    }

    .catalog_desc p {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 4px;
      line-height: 16px;
      width: 100%;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      white-space: normal;
      overflow: hidden;

    }

    .catalog_desc .quo_brief p {
      font-size: 15px;
      font-weight: 400;
      line-height: 22px;
    }


    @-webkit-keyframes slideInLefta {
      0% {
        -webkit-transform: translate3d(-40%, 0, 0);
        transform: translate3d(-40%, 0, 0);
        visibility: visible
      }

      to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
      }
    }

    @keyframes slideInLefta {
      0% {
        -webkit-transform: translate3d(-40%, 0, 0);
        transform: translate3d(-40%, 0, 0);
        visibility: visible
      }

      to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
      }
    }

    .catalog_desc .text-end {
      transition: 1s;
    }

    .quotation {
      width: 30px;
      height: 30px;
      position: absolute;
      left: -4px;
      top: -10px;
    }

    .search {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
    }

    .search .btn {
      width: 15%;
      height: 42px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      background-image: url('../img/catalog/member/bx-search-alt-2.svg');
      background-position: center;
      background-repeat: no-repeat;
    }

    .search .searchbar {
      font-size: 12px;
      height: 42px;
    }

    .search .form-select {
      max-width: 50%;
      height: 42px;
      font-size: 12px;
    }

    .search .reset_btn {

      display: flex;

      flex-basis: 15%;

      align-items: center;

      justify-content: center;
    }

    .catalog_detail {
      margin: 1rem auto;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: stretch;
      padding-right: 0;
      overflow: visible;
      position: relative;
      min-height: 83vh;
    }

    .catalog_detail article {
      padding: 1rem 2rem;
      background-color: #fff;
      box-shadow: 0px 0px 30px rgba(56, 71, 109, 0.09);
      border-radius: 12px;

    }

    .catalog_detail article .pic {
      margin: 1rem auto;
    }

    .catalog_detail .catalog_main {
      flex-direction: column;
      flex-grow: 1;
      background-color: transparent;
      overflow: hidden;
      /* padding-left: 1rem;
      padding-right: 1rem; */
      width: 100%;
      border-radius: 12px;
      box-shadow: none;
      position: sticky;
      top: 20px;
      gap: 0;
    }

    .catalog_detail .catalog_main .bg-white {
      border-radius: 12px;
    }

    .catalog_detail .catalog_main .position-relative {
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 10px 10px 30px rgb(0, 0, 0);
      margin-top: 20px;
    }

    .catalog_detail .logo {
      width: 100%;
      height: auto;
      max-height: inherit;
      position: relative;
      overflow: hidden;
      margin: 10px auto 4px auto;
      /* padding-bottom: 10px; */
      /* border-bottom: 1px dashed #ddd; */
      padding: 4px 16px 8px 16px;
    }

    .catalog_detail .catalog_main .pic {
      overflow: hidden;
      width: 50%;
      height: 0;
      padding-bottom: 50%;
      position: relative;
      margin: 20px auto;

    }

    .catalog_detail .catalog_main .pic img {
      position: absolute;
      border-radius: 50%;
      top: 0;

    }

    .catalog_detail .catalog_main .name {
      border-bottom: 1px dashed #ddd;
      text-align: center;
      padding-bottom: 20px;
    }

    .catalog_detail .catalog_main .member_level {
      color: #fff;
      background-color: #5463A5;
      text-align: center;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding-top: 4px;
      padding-bottom: 4px;
    }


    .catalog_detail .catalog_main ul {
      flex-direction: column;
      color: #979797;

    }

    .catalog_detail .catalog_main li {
      width: 100%;
      list-style: none;
      padding: 2px;
      border-bottom: 1px dashed rgba(221, 221, 221, 0.548);
    }

    .catalog_detail .catalog_main ul:last-child li {
      border-bottom: none;
    }

    .catalog_detail .catalog_main .company {
      padding: 20px 0 0 0;
      color: rgb(165, 165, 165);

    }

    .catalog_detail .catalog_main .company h3 {
      margin-bottom: 0;
      color: #666;
    }



    .catalog_title.d-flex {
      gap: 8px;
      align-items: center;
    }

    .contact_info {
      position: relative;
    }

    .contact_info .member_level {
      position: static;
      display: inline-block;
      height: auto;
      border-radius: 4px;
      background-color: #5463A5;
      ;

      width: auto;
      padding-left: 8px;
      padding-right: 8px;
      padding-top: 1px;
      padding-bottom: 1px;
      position: relative;
      margin-right: 0.5rem;
    }

    /* .contact_info .member_level::after{
      
      content: '';
      display: inline-block;
      width: 20px;
      height: 20px;
      border-style: solid;
      border-width: 10px 0 10px 10px;
      border-color: transparent transparent transparent #5463A5;
      position: absolute;
      right: -14px;
      top: 1px;
    
  } */

    .catalog_detail .contact_info {
      padding: 4px 0.5rem;
      width: 100%;
    }

    .catalog_title .back {
      width: 42px;
      height: 42px;
    }

    .catalog .btn.btn-outline-primary {
      border: 1px solid #5463A5 !important;
      color: #5463A5;
    }

    .catalog .btn.btn-outline-primary:hover {
      color: #fff;
    }

    @media screen and (min-width: 1280px) and (min-height:768px) {
      .pay.modal-dialog {
        max-width: 80%;
      }


    }

    @media screen and (max-width: 1280px) and (min-height:576px) {
      .activity .modal-dialog {
        max-width: 65%;
        max-width: 700px;
      }
    }

    @media screen and (max-width:1280px) {
      .sticky_center {
        padding-left: 1rem;
        padding-right: 1rem;
      }

      .modal-dialog {
        margin-top: 1rem;
        margin-bottom: 1rem;
      }

      .pay.modal-dialog {
        max-width: 45%;
      }

      #resize1 {
        width: 100%;
      }

      #resize2 {
        width: 100%;
      }

      .pop_up_pay #resize2 {
        padding-left: 0;
      }

      .future_email_page .footer {
        border-radius: 55px 55px 0 0;
      }
    }

    @media screen and (max-width:1024px) {
      .pay.modal-dialog {
        max-width: 80%;
      }

      .tabet_phone-only {
        display: flex !important;
      }

      .sticky-top.tabet_phone-only {
        padding: 0 0 0 1rem;
      }

      .sticky-top.tabet_phone-only div.stickybar_btn {
        width: 80%;
      }

      .pc-only {
        display: none !important;
      }

      .vote_me a.btn-outline-secondary,
      .vote_me a.btn.btn-primary {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
      }

      .vote_choice .accordion-body {
        padding: 1.5rem 0;
      }

      .cardbox {
        padding-bottom: 1rem;
      }

      .rank_share {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
      }

      .activity .banner.auto_banner .clipped {
        background-image: url('../img/hook/activity/autobanner_bg2.svg');
        clip-path: url(#my-clip-path2);
        -webkit-clip-path: url(#my-clip-path2);
      }

      .activity .banner.auto_banner .clipped {
        width: 100%;
        position: relative;
        padding-right: 2rem;
        padding-bottom: 3rem;
      }

      .activity .banner.auto_banner .fix_img {
        width: 100%;
        padding-bottom: 56.25%;
        left: 0;
        margin-top: -40px;
        position: relative;
      }

      .activity .info_area {
        width: 100%;
      }

      .activity .info {
        align-items: baseline;
      }

      div.session_hint {
        flex-direction: column;
        justify-content: end;
        align-items: flex-start !important;
      }

      .activity section.form .form_box div.mb-3.selected {
        padding-left: 24px;
      }

      .bottom_line {
        width: 100%;
        position: fixed;
        bottom: 0;
        z-index: 100;
        display: flex;
        flex-direction: row;
        background-color: #fae5d9;
        padding: .35rem 1rem .35rem .35rem;
        gap: 0.5rem;
        align-items: center;
        left: 0;
      }

      .bottom_line .d-flex {
        width: 25%;
        /* outline: 1px solid; */
      }

      .minibutton {
        width: 50%;
        padding: 0 .5rem;
        text-align: center;
        /* outline: 1px solid; */
      }

      .minibutton:first-child {
        border-right: 1px solid rgb(252, 169, 44);
      }

      .minibutton img {
        width: 18px;
      }

      header.banner_layout .pic picture {
        max-height: 665px;
      }

      .cardbox .col:nth-child(1),
      .cardbox .col:nth-child(2),
      .cardbox .col:nth-child(3) {
        margin-top: 3rem;
      }

      .votepage .card-body {
        min-height: 190px;
      }

      .future_email_page .one_col .l_item .pic img {
        width: 70%;
      }

      .future_email_page section.campaign_bg3 {
        padding-bottom: 2rem;
      }

      .form .session .bg-white {
        padding-right: 0;
        padding-left: 0;
        gap: .5rem;
      }

      .future_email_page .campaign_bg3 .row:nth-child(2) {
        margin-bottom: 0;
      }

      .form .session .bg-white div.d-flex {
        width: 100%;
        padding-bottom: .5rem;
        border-bottom: 1px dashed #ddd;
      }

      .pop_up_pay #resize2 {
        padding-left: 0;
      }

      .checkbox_area .form-check-inline {
        min-width: 50%;
      }

      .checkbox_area .form-check {
        margin-right: 0;
      }

      .activity .action_area {
        width: 100%;
        max-width: 100%;
      }

      .session .d-flex.selected {
        border: 0;
        padding-right: 0;
      }

      .catalog_detail .catalog_main ul li {
        word-break: break-all;
      }

      .future_email_page .footer {

        border-radius: 50px 50px 0 0;
      }

      #service_info {
        margin-top: 8px;
        padding-top: 4px;
      }

      .cart_list {
        border-top: 1px solid #F5F5F5;
        padding-top: 8px;
      }
      .order_box + .cart_sum{
        border-radius: .625rem;
        margin-top: 1rem;
      }

      .cart_list_line {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 88px;
        grid-template-areas:
          "list_head list_head list_head list_head  list_action"
          "list_adj_box list_adj_box list_adj_box list_adj_box list_adj_box";
        grid-gap: 10px;
        padding: 8px;
        border: 1px solid #E5EAEE;
        border-radius: 12px;
        margin: 8px auto;
      }

      .list_adj_box {
        background-color: #f5f5f5;
        border-radius: 12px;
        padding: 8px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: center;
        height: max-content;
      }

      .list_spec {
        display: flex;
        order: 1;
        width: 50%;
        align-items: flex-start;
      }

      .list_price_o,
      .list_price_f {
        text-align: right;
      }

      .list_price_o {
        display: flex;
        align-items: flex-start;
        justify-content: end;
        order: 2;
        width: 50%;
      }

      .list_count {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        order: 3;
        width: 50%;
      }

      .list_price_f {
        display: flex;
        order: 4;
        width: 50%;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-end;
      }

      .list_action {
        display: flex;
        justify-content: end;
        padding-right: 8px;
      }

      .campaign_box {
        /* border-top: 1px solid #ececec; */
        margin-top: 0;
      }

      .limit_con {
        height: 40vh;
      }
      .productpage:not(.thankyou) .footer{
        padding-bottom: 62px;
      }
      .productpage .maxbutton{
        display: flex;

      }
      .bottom_line_tb .d-flex{
        width: 10%;
        min-width: 32px;
      }
      .bottom_line_tb .minibutton:first-child{
        border: 0;
      }
      .swal2-container{
        z-index:16000165 ;
      }
      .redeem_ticket{
        flex-direction:column-reverse
      }
      .redeem_ticket-head{
        width: 100%;
      }

      
    }

    @media screen and (max-width:768px) {
      .list_last {
        order: 1;
      }

    }

    @media screen and (max-width:767px) {

      html,
      body {
        font-size: 12px !important;
      }

      p {
        font-size: 1.25rem;
      }

      .rwd_pic {
        max-height: 350px;
      }

      .votepage .section_title {
        padding: 1rem;
      }

      .rank_order {
        gap: 20px;

      }

      .rank_share {
        flex-direction: column;
        align-items: flex-start;
      }

      .votepage .card {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
      }

      .votepage .card .pic .num {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        border: 0px;
      }

      .votepage .card .pic {
        width: 43%;
        height: 0;
        padding: .5rem;
        padding-top: 0;
        display: flex;
        flex-direction: column-reverse;
        border-radius: 0;
        padding-bottom: 28.6667%;
        position: relative;
      }

      .votepage .card .pic img {
        position: absolute;
        top: 0;
        left: 6px;
      }

      .vote_choice,
      .thankyou .status {
        padding-left: 2%;
        padding-right: 2%;
      }

      .vote_choice .accordion-body {
        padding-left: .2rem;
        padding-right: .2rem;
        padding-bottom: 0;
      }

      .votepage .card .pic img {
        object-fit: cover;
        width: 100%;
        border-radius: 0px;
        overflow: hidden;
      }

      .votepage .card .card-body {
        width: 57%;
        padding: .5rem;
        padding-top: 1rem;
      }

      .votepage p.card-text {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        white-space: normal;
        overflow: hidden;
      }

      .votepage .stickybar {
        padding-right: 0.25em;

      }

      .stickybar .btn.change {
        padding-left: 0;
        padding-right: 0;
      }

      .stickybar .tabet_phone-only.vote_step {
        justify-content: start;
        margin-left: 0;
        margin-right: 0;
      }

      .cart_box {
        padding-left: .25rem;
        padding-right: 0.25em;
      }

      .card .vote_me {
        width: 100%;
        padding-left: .5rem;
        padding-right: .5rem;
        margin-left: auto;
        margin-right: auto;
      }

      .vote_me p {
        padding-bottom: .5rem;
      }

      .card .pic span {
        top: 5px;
        right: 5px;

      }


      .card:hover .pic img {
        transform: scale(1);
        transition: .3s ease-in-out;
        -webkit-transition: .3s ease-in-out;
      }

      .vote_choice h2.title,
      .status h2.title {
        font-size: 2.2rem;
      }

      .future_email_page .footer {
        border-radius: 50px 50px 0 0;
      }

      header.shopping {
        padding: .5rem .5rem;
      }

    }


    @media screen and (max-width:990px) {
      .navbar-brand {
        width: 80%;
      }

      .catalog_main {
        width: 100%;
      }

      .catalog_list .catalog_desc {
        width: 100%;
        padding-top: 20px;
        padding-bottom: 10px;
      }

      .catalog_list .pic {
        border-bottom-left-radius: 12px;
      }

      .quo_brief {
        max-height: 45px;
      }

      .catalog_desc .d-flex span,
      .catalog_desc .quo_brief p {
        -webkit-line-clamp: 2;
      }

    }

    @media screen and (max-width:720px) {

      .kv h1 {
        font-size: 2rem;
      }

      .kv_banner h1 {
        font-size: 2rem;
      }

      .copyright div,
      .copyright span {
        text-align: center;
      }

      .cardbox .col:nth-child(1),
      .cardbox .col:nth-child(2),
      .cardbox .col:nth-child(3) {
        margin-top: 0.5rem;
      }

      .cardbox .col {
        margin-top: .5rem;
      }

      .vote_step {
        flex-direction: column;
        align-items: center;
      }

      .cardbox .col {
        padding: 0.5rem;
      }


    }

    @media screen and (max-width:576px) {

      header.banner_layout .pic picture {
        max-height: 350px;
      }

      .votepage .card-body {
        min-height: auto;
      }

      .votepage .btn.change::before {
        width: 20px;
        height: 20px;
      }

      nav ul li:not(.nav-item) {
        margin-top: 1rem;
      }

      .verifybox .form-control {
        width: 40%;
      }

      .verifybox .verify_button {
        width: 60%;
      }

      .future_email_page .form_box {
        padding-left: 1rem;
        padding-right: 1rem;
      }
      .countdown_banner{
        padding: 4px 2rem;
      }
      .count_box {
        width: 40px;
        padding: 0;
        background-color:initial;
      }
      .counter{
        font-size: 12px;
      }

      .deco_img {
        max-width: 150px;
      }

      .warm_up_banner .count_dot,.countdown_banner .count_dot {
        display: none;
      }

      .count_box::before {
        content: ':';
        position: absolute;
        left: -8px;
        top: 25%;
        color: rgba(255, 255, 255, .7);
      }

      .count_box:first-of-type:before {
        content: '';
      }
      .countdown_banner .count_box::before{
        top: 2px;
      }

      .step_box {
        margin-left: 0;
        margin-right: 0;
      }

      .step_box .content {
        justify-content: flex-start;
        gap: 2rem;

      }

      .checkbox .form-check {
        align-items: flex-start;
      }

      .item-desc {
        max-height: inherit;
      }

      .footer .xlead_logo {
        max-width: 80px;
      }

      #fixed-right-side-div {
        background-color: transparent !important;
        width: 42px;
        top: 60%;
        transform: translateY(-60%);
      }

      #fixed-right-side-div>div:first-child {
        position: relative;
      }

      #fixed-right-side-div .menu_button {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      #powered-by-btn {
        border-radius: 50%;
        margin-top: 16px;
      }

      #powered-by-btn p {
        display: none;
      }

      .future_email_page .one_col .l_item .pic img {
        width: 85%;
      }

      .future_email_page .footer {
        border-radius: 50px 50px 0 0;
      }

      .future_email_page nav ul li {
        margin-top: 0;
      }

      .future_email_page .footer .pic {
        text-align: center;
      }

      .link_pic {
        height: 0;
        padding-bottom: 57.201%;
      }

      .activity.check_in.clerk_scan .status {
        padding: 1rem;
      }

      .activity .info_area {
        width: 100%;
      }

      .activity .banner.auto_banner {
        display: flex;
        flex-direction: column;
      }

      .activity .banner.auto_banner .clipped {
        width: 100%;
        position: relative;
        padding-right: 2rem;
        padding-bottom: 3.5rem;
      }

      .activity .banner.auto_banner .fix_img {
        width: 100%;
        padding-bottom: 56.25%;
        left: 0;
        margin-top: -30px;
        position: relative;
      }

      .activity .title.info_title,
      .activity .info_area .info {
        flex-direction: column;
        align-items: flex-start;
      }

      .activity .info {
        padding-left: 0;
        padding-right: 1rem;
      }

      .activity .info .context {
        padding-left: 0;
        width: 100%;
      }

      .context .session_time {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        padding-top: 4px;
        width: 100%;
        gap: 6px;
      }

      .context .session_time .d-flex {
        padding-top: 4px;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        min-width: 300px;
        width: 100%;
      }

      .context .session_time .d-flex div {
        display: flex;
        justify-content: space-between;
      }

      .context .session_time .from_to {
        border-width: 6px 6px 0px 6px;
        border-color: #979797 transparent transparent transparent;
        position: relative;
        margin: 0;

      }

      .context .session_time .from_to:last-child {
        display: block;
        right: 12px;
      }

      .context .session_time div span {
        display: inline-block;
      }

      .context .session_time .d-flex div.position-relative {
        display: flex;
        justify-content: space-between;
        height: 10px;
        width: 100%;
      }

      .context .session_time span.badge {
        width: auto;
        display: block;
      }

      .option .session_name::after {
        content: '';
      }

      .session_choice .option {
        padding: .75rem 1.5rem;
      }

      .activity section.form .form_box div.mb-3.selected {
        margin-right: 0;
        padding-left: 1rem;
        padding-right: 1rem;
      }

      .activity section.form h3 {
        font-size: 2rem;
      }

      .form .session .bg-white {
        padding-right: 0;
        padding-left: 0;
      }

      .form .session .bg-white div.d-flex {
        width: 100%;
        padding-bottom: 1rem;
        border-bottom: 1px dashed #ddd;
      }

      .activity .footer {
        padding-bottom: 4rem;
      }

      .intro_bg {
        padding-top: 1rem;
      }

      .activity section {
        padding-top: 2rem;
        padding-bottom: 2rem;
      }

      .activity section.form .form_box {
        border-radius: 0;
      }

      .query_result_list h2 {
        padding-left: .5rem;
        padding-right: 0.5rem;
        margin-bottom: 0;
        align-items: flex-start;
        border: 0px;
      }

      .query_result_list .pic {
        border-radius: 0px;
      }

      .query .query_result_list .button_area {
        gap: 8px;
      }

      .pay.modal-dialog {
        max-width: 100%;
      }

      .donate_choice .price div span,
      .pop_up_pay .price div span {
        font-size: 16px;
      }

      .catalog_list .catalog_main {
        flex-wrap: wrap;
        gap: 0;
      }

      .catalog_list .pic {
        width: 100%;
        height: 0;
        padding-bottom: 50%;
        border-radius: 0;
      }

      .catalog_list .name {
        padding-top: 10px;
      }

      .catalog_text_box {
        padding: 0 10px 10px;

      }

      .catalog_list .member_level {
        border-radius: 4px;
        top: 0;
        left: 0px;
      }

      .catalog_list ul li {
        padding-top: 3px;
        padding-bottom: 3px;
        ;
      }

      .catalog_list ul,
      .catalog_list .contact_info ul.middle {
        flex-direction: column;
        padding-left: 4px;
      }

      .catalog_list .contact_info ul.middle {
        padding-top: 0;
        padding-bottom: 0;
      }

      .catalog_detail .catalog_main .member_level {
        font-size: 1.2rem;
      }


      .catalog_list .contact_info li:first-of-type {
        width: 100%;
      }

      .catalog_list.xcard:hover .pic img {
        transform: scale(1.1);
        transition: .5s;
        padding: 1rem;
      }

      header.catalog .container {
        padding-left: 1rem;
        padding-right: 1rem;
      }

      .catalog_detail {
        padding-right: 9px;
      }

      .catalog_detail .catalog_main {
        padding-right: 0;
        padding-left: 0;
      }

      .catalog_detail .catalog_main .company,
      .catalog_detail .catalog_main .logo {
        padding-left: 16px;
        padding-right: 16px;
      }

      .session_choice .option div.opt_line {
        flex-wrap: wrap;
      }

      .session_choice .option .opt_line div.session_time {
        width: 100%;

      }

      .invitation .text {
        padding: 0 2rem;
      }

      #service_info div.w-100 {
        flex-wrap: wrap;
        gap: 2px;
      }

      #service_info div.w-100 p {
        width: 100%;

      }

      #service_info .mapicon {
        max-width: 100%;
      }

      .back-to-top-link {
        opacity: .75;
      }

      .order_summary div {
        width: 100%;
        max-width: 100%;
      }

      .product_count .form-select {
        width: 100%;
        min-width: 240px;
      }

      .goal_num {
        font-size: 13px;
      }

      .team_buying_price {
        font-size: 1.2rem;
      }

      .prd_price p:not(.fs-3) {
        font-size: .8rem;
      }

      .product_count,
      .u_price,
      .shipping_fee,
      .pay,
      .shipping_area {
        padding-top: 12px;
        padding-bottom: 12px;
      }

      .infolist li,
      .campaign_box {
        margin-bottom: 0;
      }

      .limit_con {
        height: 100%;
      }

      .catalog_desc .quo_brief p {
        font-size: 12px;
      }
      
      .productpage:not(.thankyou) .footer{
        padding-bottom: 52px;
      }
      .pay_choice .onlinepay img{
        width: 36px;
        height:24px;
       
      }
      #yedpay-CC + label.p-5{
        padding: .7rem !important;
      }
      .deliver_ques{
        flex-wrap: wrap;
        margin-bottom: .5rem;
      }
      .form_box .shopping_area .deliver_ques  p{
        flex-basis: 100%;
        padding-bottom: .5rem;
      }
      .additional span{
        width: 100%;
        display: inline-block;
      }




    }

    @media screen and (max-width:393px) {
      .session_choice .option div.opt_line {
        flex-wrap: wrap;
      }

      .auto_button {
        padding-left: 2rem;
        padding-right: 2rem;
      }
    }

    @media (any-hover: hover) {

      .back-to-top-link:hover {
        background-color: #5463A5;
        transition: .3s;
      }

      .back-to-top-link:hover svg {
        fill: #fff;
        color: #fff;
      }
    }