/* 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;
    }

    .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;
    }

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

    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 {
      cursor: not-allowed;
      pointer-events: all !important;
    }

    .grecaptcha-badge {
      display: none;
    }

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

    .alert,.activity .alert {
      position: absolute;
      top: 0px;
      left: 0;
      width: 100%;
    }
    .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;
    }


    .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: 133px;
      width: 30px;
      background-color: #979797ee;
      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;
    }

    /* 表單用 */
    .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;
    }

    .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;
    }

    .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 {
      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;
      margin-left: 0;
      margin-bottom: 0;
    }

    .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;
    }

    /* 商品頁專用 */
    header.shopping {
      background-color: #fff;
      padding: 2rem;
    }

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

    .shopping .prd_pic img {
      width: 100%;

    }

    .prd_box {
      justify-content: stretch;
    }

    .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;
      border-color: #e7e7e7;
      border-width: 1px;
      border-style: solid;
      border-top: 0px;
      border-left: 0;
      border-right: 0;
    }

    .moreinfo_box .title {
      width: 18%;
      padding: 16px;
      color: #979797;
    }

    .moreinfo_box .infolist {
      width: 82%;
      padding-top: 16px;
      padding-bottom: 16px;
    }

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

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

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

    .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;
    }

    .text p.prd_highlight {
      font-size: 12px;
      font-weight: 700;
      color: #D4601D;
    }

    .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;
    }

    .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;
    }

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

    }

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

    }

    .text .product_count p {
      font-size: 12px;
      color: #979797;
    }

    .text .product_count p:first-child {
      width: 12%;

    }

    .count .btn.btn-outline {
      border: 1px solid #e7e7e7;
    }

    .shopping_count {
      background-color: #F5F8FA;
      padding: 8px;
      border-radius: 6px;
      border: 1px solid #e7e7e7;
      line-height: 30px;
      text-align: center;
    }

    .count .btn {
      font-size: 20px;
      padding: 8px 1.5rem;
    }

    .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: fill;
      object-position: center;
      text-align: center;
      width: 100%;
      padding: 1rem;
    }

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

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

    }

    .cart_box .logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .cart_title {
      display: flex;
      align-self: center;
    }

    .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;
    }

    ul.cart_list li {
      display: flex;
      justify-content:
        space-around;
      width: 100%;
      flex-direction: row;
      margin: auto;
      padding: 16px 20px;
      align-items: start;
      border-bottom: 1px solid #E5EAEE;
    }

    .cart_list li div:first-child {
      display: flex;
    }

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

    .cart_list li .text {
      width: 75%;
      padding-right: 8px;
    }

    .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;
    }

    .cart_list .prd_price span {
      font-size: 12px;
    }

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

    .prd_type_detail {
      font-size: 12px;
    }

    .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: #F5F5F5;
      padding: 16px;
    }

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

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

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

    .order_summary div {
      text-align: right;
      border-bottom: 1px solid #E5EAEE;
      padding: 8px;
    }

    .order_summary p {
      margin-bottom: 0;
      font-size: 18px;
    }

    .moveend {
      background-color: #D4601D;
      color: #fff;
      padding: 8px;
      font-size: 16px;
      color: #fff;
      text-align: center;
      font-weight: 700;
    }

    /* 申請會員專用 */
    .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: 1.5rem;
    }

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

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

    .how_to_apply ul,
    .how_to_apply div,
    .offline_pay_box,
    .online_pay_box,
    .status .info_box {
      text-align: left;
      padding: 1rem 2rem;
      background-color: #fff;
    }

    .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_box p,
    .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 {
      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 {
      outline: 2px solid #E4E6EF;
      background-color: #fff;
      padding: 1rem 1.5rem;
      text-align: center;
      border-radius: 6px;
      cursor: pointer;
    }


    .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;
    }

    .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"] {
      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 {
      outline: 3px solid #5463A5;
    }

    .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-all;
    }

    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;
    }

    .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: 4;
      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;
    }

    .auto_button:last-child {
      /* margin-left: 3rem; */
    }

    .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-width: 1px;
      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 {
      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 {
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 3;
    }
    .activity .warm_up_banner,
    .activity .expired_banner{
      position: relative;
    }

    .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);
    }

    .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;
    }

    .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 {
      padding-bottom: 50px;
    }

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

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

    .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_text {
      /* position: absolute; */
      /* top:50%; */
      /* left: 50%; */
      /* transform: translate(-50%, -50%); */
      /* display: flex; */
      /* background-color: #f77; */
    }

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

    :root {
      /* --bs-body-font-size: 1.2rem; */
    }

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

    .imgcontain {
      object-fit: contain;
      /* 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);
    }

    .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;
    }

    .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%;

      /* margin-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,
    .query .form_box {
      background-color: #f5f8fa;
      padding: 2rem 2rem 1rem;
      border-radius: 12px;
    }

    .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: #EDEDED;
    }

    .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-bottom-style: solid;
      border-width: 1px;
      border-color: rgba(0, 0, 0, 0.301);
      padding-top: 2%;
      padding-bottom: 2%;
      display: flex;
      align-items: flex-start;
    }

    .info:last-child {
      border-width: 0;
    }

    .info span {
      width: 70%;
      margin-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;
    }

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

    .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 button img,
    .pay_check div img {
      width: 48px;
      height: 32px;
      display: inline-block;
      object-fit: contain;
    }

    .tabet_phone-only {
      display: none;
    }

    /* 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;
    }

    textarea {
      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;
    }

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

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

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

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

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

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

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

    .donate .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 .mapicon::before{
     content: '';
      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 {
      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;
    }

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

    .activity .info span {
      margin-right: 16px;
      width: auto;
      min-width: 60px;
      color: #888;
    }

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

    .activity .form_box p {
      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 {
      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>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_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{
      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{
      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;
    }

 
    .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 {
      margin-bottom: 2rem;
    }

    .activity section.form .form_box div.mb-3 {
      padding-left: 24px;
    }
    .activity section.form .form_box div.mb-3.selected{
      padding-left: 0;
    }
    

    .activity 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 {
      background-color: #e57738;
    }

    .activity .modal .btn.btn-outline-primary:hover {
      background-color: #e57738;
    }


    .activity.thankyou .highlight_bg,
    .activity.check_in .highlight_bg,
    .service_page .highlight_bg {
      background-color: #3082b910;
    }

    /* .activity.thankyou.check_in .highlight_bg{
      background-color: #0BB783;
    } */
    .activity.thankyou .status,
    .activity.check_in .status,
    .service_page .status {
      text-align: center;
      padding: 2rem;
      border-radius: 12px;
    }

    .activity.thankyou .status h1,
    .activity.check_in .status h1,
    .service_paget .status h1 {
      color: #5E5E5E;
      display: inline-block;
    }

    .activity.thankyou .status h1 span,
    .activity.check_in .status h1 span,
    .service_page .status h1 span {
      color: #3351a2;

    }

    .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;
    }

    .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;
    }

    /* 查詢 */
    .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 {
      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: 28px;
    }

    .catalog_list .pic {
      width: 180px;
      height: 180px;
      overflow: hidden;
      position: relative;
    }

    .catalog_list .pic img {
      transition: .5s;
      position: absolute;
    }

    .catalog_text_box {
      padding-bottom: 20px;
      position: relative;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      gap: 10px;
    }

    .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;
    }

    .catalog_list .member_level {
      background-color: #084298;
      position: absolute;
      padding-bottom: 2px;
      padding-top: 2px;
      width: 120px;
      color: #fff;
      top: 0;
      right: 40px;
      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%;
    }

    .catalog_list .contact_info li:first-of-type {
      width: 35%;
    }

    .catalog_list li a {
      color: #979797;
    }

    .contact_career::before,
    .contact_phone::before,
    .contact_person::before,
    .contact_mail::before,
    .contact_web::before {
      content: '';
      width: 20px;
      height: 20px;
      background-image: url('../img/catalog/member/bxs-briefcase.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_web::before {
      background-image: url('../img/catalog/member/bxs-window-alt.svg');
    }

    .contact_mail::before {
      background-image: url('../img/catalog/member/bx-envelope.svg');
    }

    .catalog_list .contact_info ul.long {
      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;
    }

    .catalog_desc .d-flex span {
      color: #6e6e6e;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -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_list.xcard:hover .catalog_desc .text-end{
      animation: slideInLefta 1s ;
      -webkit-animation-name: slideInLefta 1s;
    } */
    @-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 .form-control {
      border-radius: 0;
      height: 42px;
      /* width: auto; */
    }

    .search .form-select {
      width: 30%;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      height: 42px;
    }

    .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;
    }

    .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: #fff;
      overflow: hidden;
      padding-left: 1rem;
      padding-right: 1rem;
      width: 100%;
      border-radius: 12px;
      box-shadow: 0px 0px 30px rgba(56, 71, 109, 0.09);
      position: sticky;
      top: 20px;
    }

    .catalog_detail .catalog_main .pic {
      border-radius: 50%;
      overflow: hidden;
      width: 50%;
      height: 0;
      padding-bottom: 50%;
      position: relative;
      margin: 3rem auto 0 auto;
    }

    .catalog_detail .catalog_main .pic img {
      position: absolute;
    }

    .catalog_detail .catalog_main .name {
      border-bottom: 1px dashed #ddd;
      text-align: center;
    }

    .catalog_detail .catalog_main .member_level {
      color: #fff;
      background-color: #084298;
      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_title.d-flex {
      gap: 8px;
      align-items: center;
    }

    .catalog_detail .contact_info {
      padding: 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;
      }

      .sticky-top.tabet_phone-only {
        padding: 0 0 0 1rem;
      }

      .sticky-top.tabet_phone-only div.stickybar_btn {
        width: 80%;
      }

      .pc-only {
        display: none;
      }

      .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: 5;
        display: flex;
        flex-direction: row;
        background-color: #fae5d9;
        padding: .35rem 1rem .35rem .35rem;
        gap: 0.5rem;
        align-items: center;
      }

      .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;
      }

    }

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

    @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;
      }

    }


    @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;
      }

      .catalog_desc .d-flex span {
        -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;
      }

      .count_box {
        width: 40px;
      }

      .deco_img {
        max-width: 150px;
      }

      .warm_up_banner .count_dot {
        display: none;
      }

      .count_box::before {
        content: ':';
        position: absolute;
        left: -8px;
        top: 25%;
        color: rgba(255, 255, 255, .7);
      }

      .warm_up_banner .count_box:nth-child(2)::before {
        content: '';
      }

      .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;
      }

      #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: 2px 2px 0 0;
        top: -22px;
        left: 0px;
      }

      .catalog_list ul li {
        padding-top: 3px;
        padding-bottom: 3px;
        ;
      }

      .catalog_list ul,
      .catalog_list .contact_info ul.long {
        flex-direction: column;
        padding-left: 4px;
      }

      .catalog_list .contact_info li:first-of-type {
        width: 100%;
      }

      header.catalog .container {
        padding-left: 1rem;
        padding-right: 1rem;
      }

      .catalog_detail {
        padding-right: 9px;
      }

      .catalog_detail .catalog_main {
        padding-right: 0;
        padding-left: 0;
      }
      .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%;
      }

    }

    @media screen and (max-width:393px) {
      .session_choice .option div.opt_line {
        flex-wrap: wrap;
      }

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