@import "../plugin/css/swiper-bundle.min.css" layer(plugin);

/* ========================= ========================= ========================= ========================= ========================= =========================
***
* please make sure all components css inside @layer components 
***
* please make sure all components css inside @layer components 
* please make sure all components css inside @layer components 
* Use CSS @layer
* Use CSS @layer
* Use CSS @layer
***
 ========================= ========================= ========================= ========================= ========================= =========================*/

@layer components {

  /* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR document icon 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/
  .pdfonlyicon {
    font-size: 0;
    display: inline-block;
    vertical-align: middle;
  }

  .document_icon,
  .iconExtlink {
    width: 1.5rem;
    height: 1.75rem;
    margin-left: 5px;
    margin-right: 5px;
    vertical-align: text-bottom;
    position: relative;
    display: inline-block;
  }

  .iconExtlink {
    width: 1.75rem;
  }

  .document_icon:before,
  .document_icon:after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .document_icon:after {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .3s ease-in-out;
  }

  .iconPdf:before {
    background-image: url("../images/icon/icon_pdf.svg");
  }

  .iconDoc:before {
    background-image: url("../images/icon/icon_doc.svg");
  }

  .iconDoc:after {}

  .iconXls:before {
    background-image: url("../images/icon/icon_xls.svg");
  }



  .iconPpt:before {
    background-image: url("../images/icon/icon_ppt.svg");
  }


  .iconCsv:before {
    background-image: url("../images/icon/icon_csv.svg");
  }


  .iconExtlink:before {
    background-image: url("../images/icon/icon_extlink.svg");
    filter: var(--grey_600_filter);
  }

  .pdfa:hover .iconPdf::after,
  .pdfa:focus .iconPdf::after,
  .doca:hover .iconDoc::after,
  .doca:focus .iconDoc::after,
  .xlsa:hover .iconXls::after,
  .xlsa:focus .iconXls::after,
  .ppta:hover .iconPpt::after,
  .ppta:focus .iconPpt::after,
  .csva:hover .iconCsv::after,
  .csva:focus .iconCsv::after,
  .extlink_withtext:hover .iconExtlink::after,
  .extlink_withtext:focus .iconExtlink::after {
    opacity: 1;
  }
}


@layer components {

  /* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR swiper slider 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/
  .swiperhugecontainer {
    --swiper_btn_size: 1rem;
    --swiper_btn_gap: 1rem;
  }

  .swiperbigcontainer {
    position: relative;
  }

  .swiper_nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
  }

  .swiper_nav:has(.swiper-pagination-lock) {
    display: none;
  }

  .swiperpaginwrapper {
    display: inline-block;
  }

  .swiper_nav .swiper-pagination {
    position: static;
    width: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 1rem;
  }

  .swiper-button-prev,
  .swiper-button-next {
    background: none;
    font-size: 0;
    display: inline-block;
    margin-top: 0;
    width: var(--swiper_btn_size);
    height: 2.25rem;
  }

  .swiper-button-prev:before,
  .swiper-button-next:before {
    content: "";
    background-image: url("../images/icon/icon_prev.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 100%;
    height: 100%;
    display: block;
  }

  .swiper-button-next:before {
    transform: rotate(180deg);
  }

  .swiper-button-next:after,
  .swiper-button-prev:after {
    content: "";
  }

  .swiper_nav .swiper-button-prev,
  .swiper_nav .swiper-button-next {
    position: static;
  }

  .swiper-button-pause {
    display: inline-block;
    position: relative;
    font-size: 0;
    vertical-align: middle;
    height: 1rem;
  }

  .swiper-button-pause:hover,
  .swiper-button-pause:focus {
    cursor: pointer;
  }

  .swiper-button-pause:before,
  .swiper-button-pause:after {
    content: "";
    width: .25rem;
    height: 1rem;
    display: inline-block;
    margin-left: 2.5px;
    margin-right: 2.5px;
    background: #000;
  }

  .paused .swiper-button-pause:before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .5rem 0 .5rem 1rem;
    /*border-color: transparent transparent transparent #00335b;*/
    border-color: transparent transparent transparent #000;
    background: transparent;
    margin-top: 1px;
  }

  .paused .swiper-button-pause:after {
    display: none;
  }


  .swiper-pagination-horizontal .swiper-pagination-bullet {
    --bullet_visible_size: max(0.75rem, 12px);
    box-shadow: none;
    /*dpo w3c requirement at least 24px * 24px*/
    width: var(--dpo_minimum_require_btn_size);
    height: var(--dpo_minimum_require_btn_size);
    border-radius: 0;
    position: relative;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    margin-left: 0;
    margin-right: 0;
  }

  .swiper-pagination-horizontal .swiper-pagination-bullet::before {
    content: '';
    display: block;
    width: var(--bullet_visible_size);
    height: var(--bullet_visible_size);
    background: var(--grey_600);
    border-radius: 50%;
  }

  .swiper-pagination-horizontal .swiper-pagination-bullet-active::before {
    background: var(--orange_400);
  }

  .swiper-slide {
    height: auto;
  }

  .swiper-fade .swiper-slide {
    opacity: 0 !important;
    /*transition: opacity .4s ease-in-out;*/
  }

  .swiper-fade .swiper-slide-active {
    opacity: 1 !important;
  }

  .swiper-slide .card {

    display: grid;
    grid-template-rows: max-content 1fr;
    height: 100%;
  }

  .swiper-slide .card_content {
    display: grid;
    grid-template-rows: max-content 1fr;
  }

  .swiper-slide .card_content .btn_row {
    align-items: flex-end;
  }

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

  .swiper_style1 .swiper {
    order: 2;
    max-width: calc(100% - calc(var(--swiper_btn_size) * 2) - calc(var(--swiper_btn_gap) * 2));
  }

  .swiper_style1 .swiper-slide {
    display: flex;
    justify-content: center;
  }

  .swiper_style1 :where(.swiper-button-prev, .swiper-button-next) {
    position: static;
  }

  .swiper_style1 .swiper-button-next {
    order: 3;
  }

  .swiper_prev_btn1,
  .swiper_next_btn1 {
    --swiper_btn_size: 2.5rem;
    width: var(--swiper_btn_size);
    height: var(--swiper_btn_size);
    background: rgba(0, 0, 0, .7);
    border-radius: var(--border_radius1);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .swiper_prev_btn1:before,
  .swiper_next_btn1::before {
    width: 45%;
    height: 45%;
    filter: var(--white_filter);
    background-image: url('../images/icon/icon_arrow2.svg');
  }

  .swiper_nav1 {
    column-gap: 1rem;
    justify-content: center;
    display: grid;
    grid-template-columns: 1fr max-content 1fr;

    row-gap: 1rem;
  }

  .swiper_nav1 .swiper-pagination {
    grid-column: 2 / 3;
  }

  .swiper_nav1 .swiper-pagination-horizontal .swiper-pagination-bullet::before {
    background: #fff;
  }

  .swiper_nav1 .swiper-pagination-horizontal .swiper-pagination-bullet-active::before {
    background: var(--grey_100);
  }

  .swiper_nav1 .swiper_nav_btns {
    /*position: absolute;
    right: 0;
    left: auto;
    top: 0;*/
    column-gap: 1rem;
    display: flex;
    justify-content: flex-end;
  }
}

@layer components {

  /* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR button 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/
  .btn {
    background: var(--btn_bg_color);
    color: var(--btn_text_color);
    text-align: center;
    display: inline-block;
    font-size: 1rem;
    padding-top: .625rem;
    padding-bottom: .625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: var(--border_radius1);
    border: 0;

  }

  .btn:hover,
  .btn:focus {
    cursor: pointer;
    color: var(--btn_hover_text_color);
    background: var(--btn_hover_bg_color);
  }

  .btn1 {
    border-radius: 100vw;
    font-weight: 600;

  }

  .chineseVersion .btn1 {}

  .btn_1 {
    --btn_bg_color: var(--light_green_400);
    --btn_text_color: var(--main_blue_400);
    --btn_hover_bg_color: var(--light_green_500);
    --btn_hover_text_color: var(--main_blue_400);
  }

  .btn_2 {
    --btn_bg_color: var(--main_blue_450);
    --btn_text_color: #fff;
    --btn_hover_bg_color: var(--main_blue_600);
    --btn_hover_text_color: #fff;
  }

  .btn_3 {
    --btn_bg_color: var(--blue_50);
    --btn_text_color: var(--blue_250);
    --btn_hover_bg_color: var(--main_blue_150);
    --btn_hover_text_color: var(--blue_250);
  }

  .btn_4 {
    --btn_bg_color: var(--light_green_300);
    --btn_text_color: var(--blue_250);
    --btn_hover_bg_color: var(--light_green_400);
    --btn_hover_text_color: var(--blue_250);
  }

  .btn_5 {
    --btn_bg_color: var(--light_red_100);
    --btn_text_color: var(--blue_250);
    --btn_hover_bg_color: var(--light_red_200);
    --btn_hover_text_color: var(--blue_250);
  }

  .btn_6 {
    --btn_bg_color: var(--blue_250);
    --btn_text_color: #fff;
    --btn_hover_bg_color: var(--main_blue_150);
    --btn_hover_text_color: #000;
  }

  .cross_btn a {
    color: var(--main_text_color);
    font-size: 1.125rem;
    text-transform: uppercase;
    line-height: 1;
    display: flex;
    align-items: center;
    column-gap: .5rem;
  }

  .cross_btn a>span:first-child {
    display: inline-block;
  }

  .cross_btn a>span:last-child {
    position: relative;
    min-width: 20px;
    min-height: 20px;
    display: inline-block;
    font-size: 0;
  }

  .cross_btn a>span:last-child:before,
  .cross_btn a>span:last-child:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    width: 26px;
    height: 2px;
    background: var(--main_text_color);
  }

  .cross_btn a>span:last-child:before {
    transform: translate(0, -50%) rotate(45deg);
    margin-left: -2px;
  }

  .cross_btn a>span:last-child:after {
    transform: translate(0, -50%) rotate(-45deg);
    margin-left: -2px;
  }
}

@layer components {
  .map_btn {
    background: var(--light_red_400);
    color: #fff;
    display: grid;
    grid-template-columns: 1fr max-content;
    column-gap: .5rem;
    padding-top: .625rem;
    padding-bottom: .625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: var(--border_radius1);
    width: fit-content;
  }

  .map_btn>span {
    display: flex;
    align-items: center;
    column-gap: .5rem;
  }

  .map_btn>span::after {
    content: '';
    display: block;
    width: 1rem;
    height: .7rem;
    background-image: url('../images/icon/icon_arrow2.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: rotate(-235deg);
    filter: var(--white_filter);
    flex-shrink: 0;
    flex-grow: 0;
  }

  .map_btn::after {
    content: '';
    display: block;
    width: 2rem;
    height: 2rem;
    background-image: url('../images/icon/icon_baidu_map.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
}

@layer components {
  .icon_btn {
    width: 2rem;
    height: 2rem;
    border: 0;
    padding: 0;
    background: transparent;
  }

  .icon_btn::before {
    content: '';
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    display: block;

  }
}


@layer components {

  /* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR accordion 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/
  .big_accordion {
    list-style-type: none;
    padding-left: 0;
    display: grid;
    row-gap: 1rem;
  }

  .big_accordion .expand_all_btn {
    font-size: 1rem;
    display: block;
    text-align: right;
    margin-bottom: .5rem;
  }

  .big_accordion .accordion_item {
    border: 1px solid var(--grey_100);
    border-radius: .875rem;
    overflow: hidden;
    background: #fff;
  }

  .big_accordion .under_r {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all .3s ease-in-out;
  }

  .big_accordion .under_r:has(.item_highlight) {
    overflow: visible;
  }

  .big_accordion :where(.top_r, .under_r) {}

  .big_accordion .top_r {
    display: grid;
    grid-template-areas: 'stack2';
  }

  .big_accordion .top_r a:not(.icon) {
    color: var(--main_text_color);
    font-size: 1.25rem;
    font-weight: 900;
    display: block;
    position: relative;
    text-decoration: none;
    background: #f8fbff;
  }

  .big_accordion .top_r a:not(.icon) {
    width: 100%;
    padding-top: 1.125rem;
    padding-bottom: 1.125rem;
    padding-left: 1.2rem;
    padding-right: 3rem;
    color: var(--blue_550);
    grid-area: stack2;
  }


  .big_accordion .top_r .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 100%;
    grid-area: stack2;
    z-index: 99;
    margin-left: auto;
    padding: 0;
  }

  .big_accordion .accordion_item .top_r .icon:before,
  .big_accordion .accordion_item .top_r .icon:after {
    content: "";
    display: block;
    background-color: var(--blue_500);
  }

  .big_accordion .accordion_item .icon:before {
    width: 1rem;
    height: 2px;
  }

  .big_accordion .accordion_item .icon::after {
    content: "";
    display: block;
    width: 2px;
    height: 1rem;
    position: absolute;
    right: auto;

  }

  .big_accordion .top_r :is(a:hover, a:focus) {
    text-decoration: none;

  }

  .big_accordion .accordion_item .top_r:has(a:hover, a:focus) .icon::after {}

  .big_accordion .cont {
    /* padding-top: 1rem; */
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    padding-bottom: 1.2rem;
    width: 100%;
  }

  .big_accordion .cont *:first-child {
    margin-top: 0;
  }


  .big_accordion .cont *:last-child {
    margin-bottom: 0;
  }


  .big_accordion .accordion_item.active {}

  .big_accordion .accordion_item.active .top_r a {}

  .big_accordion .accordion_item .top_r .icon::after {
    filter: var(--green_400_filter)
  }

  .accordion_item.active .top_r .icon::after {
    width: 0;
    height: 0;
  }

  .big_accordion .accordion_item.active .under_r {
    padding-top: 1rem;
    max-height: 10000px;
    opacity: 1;
  }

}


@layer components {
  /* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR alert 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/

}

@layer components {
  /* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR badge 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/

}

@layer components {


  /* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR card 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/
  .card {
    background: #fff;
    overflow: hidden;
    display: block;
    width: 100%;
    box-shadow: var(--shadow1);
    transition: all .3s ease-in-out;
    border-radius: var(--border_radius2);
  }

  .card:hover,
  .card:focus {
    text-decoration: none;
    box-shadow: var(--shadow2);
  }


  .card .img_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 302 / 170;
  }

  .card .img_wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .card .img_wrap:not(.full_bg) {
    padding-top: 1.3rem;
    padding-bottom: 1.3rem;
    padding-left: .75rem;
    padding-right: .75rem;
    border-bottom: 1px solid var(--grey_100);
  }



  .card .card_content {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .card .card_content *:first-child {
    margin-top: 0;
  }

  .card .card_content *:last-child {
    margin-bottom: 0;
  }

  .card .card_title {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--blue_600);
  }


  .card .card_sub_title {
    color: var(--blue_400);
    font-weight: 600;
  }

  .card .card_sub_title:has(+*) {
    margin-bottom: .8rem;
  }
}

@layer components {
  .card2 {
    --skew_x_deg: -10deg;
    --reverse_skew_x_deg: calc(var(--skew_x_deg) * -1);
    width: fit-content;
    display: grid;
    grid-template-areas: 'card_element';
    transform: skewX(var(--skew_x_deg));
    color: #000;
    font-size: 1.3rem;
    font-weight: 600;
    padding-bottom: 3rem;
  }

  .card2:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: var(--main_blue_100);
    border-radius: var(--border_radius2);
    grid-area: card_element;
    z-index: 10;
    margin-top: 3rem;
    margin-left: 3rem;
  }

  .card2::after {
    content: '';
    display: block;
    width: 50%;
    height: 50%;
    background: var(--blue_50);
    border-radius: var(--border_radius2);
    grid-area: card_element;
    z-index: 3;
    margin-bottom: -1rem;
    align-self: flex-end;
  }

  .card2 .card_element1 {
    width: 7rem;
    aspect-ratio: 115/41;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../images/card_element1.svg');
    grid-area: card_element;
    z-index: 999;
    margin-right: -5rem;
    margin-top: 4rem;
    justify-self: flex-end;
  }

  .card2 .card_element2 {
    width: 4rem;
    aspect-ratio: 66/78;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../images/card_element2.svg');
    grid-area: card_element;
    z-index: 999;
    align-self: flex-end;
    margin-bottom: -2.5rem;
  }

  .card2 .card_element3 {
    width: 3rem;
    aspect-ratio: 46/49;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../images/card_element3.svg');
    grid-area: card_element;
    z-index: 999;
    transform: skew(var(--reverse_skew_x_deg));
    margin-top: 3rem;
  }

  .card2 .card_inner {
    border-radius: var(--border_radius2);
    grid-area: card_element;
    z-index: 777;
    overflow: hidden;
    margin-left: 1rem;
    width: 17.8125rem;
    display: grid;
    grid-template-rows: max-content 1fr;
  }

  .card2 .card_top_element {
    background: var(--green_50);
    display: flex;
    column-gap: .5rem;
    padding-left: .8rem;
    padding-right: .8rem;
    padding-top: .3rem;
    padding-bottom: .3rem;
  }

  .card2 .card_top_element span {
    width: .875rem;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #fff;
    transform: skewX(var(--reverse_skew_x_deg));
  }

  .card2 .card_inner_inner {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 2.2rem;
    padding-bottom: 3rem;
    background: #fff;
  }

  .card2 .deep_inner {
    transform: skewX(var(--reverse_skew_x_deg));
  }

  .card2 .img_wrap {

    text-align: center;
    margin-bottom: 1rem;
  }

  .card2 .card_content {}

  .card2 .card_title {
    text-align: center;
    line-height: 1.4;
  }

  .card2:hover,
  .card2:focus {
    text-decoration: none;
    color: var(--blue_200);

  }
}

@layer components {
  .card3 {
    box-shadow: var(--shadow1);
    width: fit-content;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    padding-top: 1.7rem;
    padding-bottom: 2.1rem;
    border-radius: var(--border_radius2);
    background: #fff;
  }

  .card3 .card_inner {}

  .card3 *:first-child {
    margin-top: 0;
  }

  .card3 *:last-child {
    margin-bottom: 0;
  }

  .card3 .card_title {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--blue_600);
    margin-bottom: .75rem;
  }

  .card3 .card_title a {
    color: inherit;
  }

  .card3 .img_big_wrap {
    margin-bottom: 1.3rem;
  }

  .card3 .img_wrap img {
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
  }

  .card3 .card_img {
    margin-left: auto;
    margin-right: auto;
    display: block;
    height: 7rem;
    width: 100%;
    max-width: none;
    object-fit: contain;
  }

  .card3 .card_btn_row {
    margin-top: 2rem;
  }

  .card3 .card_inner_section {}

  .card3 .card_inner_section:not(:first-child) {
    padding-top: 1.3rem;
  }

  .card3 .card_inner_section:not(:last-child) {
    border-bottom: 1px solid var(--grey_100);
    padding-bottom: 1.3rem;
  }

  .card3 .card_sec_title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--grey_700);

  }

  .card3 .card_sec_title:has(+*) {
    margin-bottom: .5rem;
  }

  .card3 .card_inner_section2 {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
  }

  .card3 .qr_code_section {
    display: flex;
    justify-content: center;
  }

  .card3 .qr_code_section img {
    width: 35%;
    border: 1px solid var(--grey_100);
  }
}

@layer components {
  .card4 {
    text-decoration: none;
  }

  .card4 .img_wrap {
    background: var(--main_blue_100);
    margin-bottom: 1.2rem;

  }

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

  .card4 .has_bg {
    display: grid;
    grid-template-areas: 'stack';
    align-items: center;
    justify-content: center;
    font-size: 2.7rem;
    font-weight: 600;
    text-align: center;
    color: var(--red_400);
  }

  .card4 .has_bg img {
    grid-area: stack;
    z-index: 29;

  }

  .card4 .has_bg .inner_content {
    grid-area: stack;
    z-index: 80;
    margin-left: auto;
    margin-right: auto;
  }

  .card_grid.card_grid3.card_subgrid_row_section .card4 .has_bg .inner_content {
    display: none
  }

  .card4 .card_title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--grey_900);
    line-height: 1.4;
  }

  .card4 .card_title:has(+*) {
    margin-bottom: .5rem;
  }

  .chineseVersion .card4 .card_title {
    -webkit-text-stroke: clamp(.35px, .2vw, .5px) currentColor;
  }

  .card4 .card_sub_title {
    font-size: 1.25rem;
    color: var(--main_blue_500);
    line-height: 1.4;
  }

}

@layer components {
  .gallery_card {
    display: grid;
    grid-template-areas: 'gallery_element';
    background: var(--blue_50);
  }



  .gallery_card .img_big_wrap {
    grid-area: gallery_element;
    z-index: 15;
  }



  .gallery_card .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #fff;
    grid-area: gallery_element;
    z-index: 80;
    margin-top: .6rem;
    margin-left: .6rem;
  }

  .gallery_card .icon::before {
    content: '';
    display: block;
    width: 97%;
    aspect-ratio: 1 / 1;
    background-image: url('../images/icon/icon_enlarge.svg');
    background-position: center;
    background-size: 50%;
    background-repeat: no-repeat;
  }

  .gallery_card::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .4);
    grid-area: gallery_element;
    z-index: 65;
    opacity: 0;
    transition: all .3s ease-in-out;
    pointer-events: none;
  }

  .gallery_card:hover .icon,
  .gallery_card:focus .icon {
    background: var(--main_blue_400);
  }

  .gallery_card:hover .icon::before,
  .gallery_card:focus .icon::before {
    filter: var(--white_filter);
  }

  .gallery_card:hover::after,
  .gallery_card:focus::after {
    opacity: 1;
  }
}

@layer components {


  .img_bg_card:not(:has(.vertical_img_wrap)) .img_bg {
    display: none;
  }

  .img_bg_card .vertical_img_wrap img {
    height: 100%;
    object-fit: contain;
  }

  .img_bg_card:has(.horizontal_img_wrap) {}

  .img_bg_card img {
    width: 100%;
  }

  .img_bg_card .horizontal_img_wrap img {
    height: 100%;
    object-fit: cover;
  }

  .img_bg_card .img_wrap {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
    width: 100%;
    height: 100%;
  }

  .img_bg_card .img_bg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    background-size: cover;
    background-position: center center;
    filter: blur(.3rem);
    width: 100%;
    height: 100%;
  }

  .img_bg_card .img_big_wrap {
    position: relative;

    background: var(--blue_50);
  }

  .img_bg_card__1 .img_big_wrap {
    aspect-ratio: 6 / 4;

  }

  .img_bg_card__2 .img_big_wrap {
    /*aspect-ratio: 453 / 341;*/
    width: 100%;
    height: 16.5vw;
    min-height: 200px;
  }
}

@layer components {

  /* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR pagination 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/

}

@layer components {

  /* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR preloader spinner 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/
  .preloader_wrapper {
    width: 100vw;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 4000;
    overflow: hidden;
    opacity: 1;
    transition: opacity .7s ease;
  }

  .preloader_wrapper.removing {
    opacity: 0;
  }

  .preloadernotshow .preloader_wrapper {
    display: none;
  }

  .ellipsis {
    display: inline-block;
    position: relative;
    height: 40px;
  }

  .ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--main_theme_color);
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
  }

  .ellipsis div:nth-child(1) {
    left: 8px;
    animation: ellipsis1 .6s infinite;
  }

  .ellipsis div:nth-child(2) {
    left: 8px;
    animation: ellipsis2 .6s infinite;
  }

  .ellipsis div:nth-child(3) {
    left: 32px;
    animation: ellipsis2 .6s infinite;
  }

  .ellipsis div:nth-child(4) {
    left: 56px;
    animation: ellipsis3 .6s infinite;
  }

  @keyframes ellipsis1 {
    0% {
      transform: scale(0);
    }

    100% {
      transform: scale(1);
    }
  }

  @keyframes ellipsis3 {
    0% {
      transform: scale(1);
    }

    100% {
      transform: scale(0);
    }
  }

  @keyframes ellipsis2 {
    0% {
      transform: translate(0, 0);
    }

    100% {
      transform: translate(24px, 0);
    }
  }

  .loading_text {
    font-size: 1.2rem;
    text-align: center;
    display: block;
    margin-top: 1.5rem;
    font-family: "Microsoft JhengHei", "微軟正黑體", "Arial", sans-serif;
    font-weight: 600;
  }

  @keyframes passing {
    0% {
      transform: translateX(-50%);
      opacity: 0;
    }

    50% {
      transform: translateX(0);
      opacity: 1;
    }

    100% {
      transform: translateX(50%);
      opacity: 0;
    }
  }

  .preloadernotshow .wrap {
    visibility: visible;
  }
}

@layer components {
  /* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR tab 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/

}

@layer components {

  /* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR component table
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/
  .table_wrapper1 {
    position: relative;
  }

  .table_wrapper1::before {
    content: "";
    display: block;
    width: 100%;
    height: calc(100% - 1px);
    border: var(--main_table_border);
    border-radius: var(--main_table_borderradius);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 90;
    pointer-events: none;
  }

  .table_wrapper1 table {
    overflow: hidden;
    border-radius: var(--main_table_borderradius);
  }

  .table_wrapper1 th {
    --th_color: #fff;
    font-size: 1rem;
    font-weight: 700;
    color: var(--th_color);
    background: var(--grey_600);
  }

  .table_wrapper1 thead th {
    padding: .5rem;
    border: 1px solid #fff;
  }

  .table_wrapper1 th a {
    color: #fff;
  }

  .table_wrapper1 tbody :where(th, td) {
    /*padding-left: 1.5rem;
  padding-right: 1.5rem;*/
    padding-left: var(--main_table_td_pad_left);
    padding-right: var(--main_table_td_pad_right);
    padding-top: var(--main_table_td_pad_top);
    padding-bottom: var(--main_table_td_pad_bottom);
  }

  .table_wrapper1 td {
    font-size: 1rem;
    color: #333;
  }

  .table_wrapper1 :where(th, td) {
    /*text-align: center;*/
  }

  .table_wrapper1 :where(th, td) {
    border: 1px solid #d4d4d4;
  }

  .table_wrapper1 tbody tr:nth-child(even) td {
    background: #f3f3f3;
  }
}

@layer components {

  /* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR popup modal 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/
  .modal {
    position: fixed;
    z-index: 9000;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;
    pointer-events: none;
    background: transparent;
  }

  .modal_box {
    transition: all .4s ease-in-out;

    /*transform: none;*/
    width: min(calc(100% - 40px), 800px);
    max-height: 80dvh;
    border-radius: .5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.3rem;
    padding-bottom: 1.5rem;
    background: #fff;
    z-index: 5000;
    pointer-events: none;
    position: absolute;
    display: none;

    transform: translateY(0);
    opacity: 1;

    @starting-style {
      transform: translateY(110dvh);
      opacity: 0;
    }
  }

  .modal_title {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 1rem;
  }

  .modal_box .modal_content:focus {
    outline: none;
  }

  .modal_box .close_wrapper {
    /* width: 100%; */
    position: absolute;
    right: 0;
    top: -2.25rem;
    /* background: #fff; */
    /* border-radius: 50%; */
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modal_box .close_wrapper a {
    display: inline-block;
    position: relative;
    font-size: 0;
    /* border-radius: 50%; */
    /* border: 2px solid #000; */
    width: 100%;
    height: 100%;
  }

  .modal_box .close_wrapper a:hover,
  .modal_box .close_wrapper a:focus {
    color: #a1fba3;
  }

  .modal_box .close_wrapper a:before,
  .modal_box .close_wrapper a:after {
    content: "";
    display: block;
    width: 80%;
    height: 2px;
    background: #fff;
    top: 45%;
    position: absolute;
    left: 10%;
  }

  .modal_box .close_wrapper a:before {
    transform: rotate(45deg);
  }

  .modal_box .close_wrapper a:after {
    transform: rotate(-45deg);
  }

  .modelopen {
    overflow: hidden;
  }

  .show_modal_box .modal_box {
    display: block;
  }

  .modal.modalopen {}

  .modal.modalopen .modal_box {
    pointer-events: auto;
    display: block;

  }

  .modalopen .modal_bg {
    display: block;
    background: rgba(0, 0, 0, .7);
    width: 100%;
    height: 100%;
    pointer-events: auto;
    cursor: pointer;
    z-index: 100;
    position: absolute;
  }

  .modal_img a:has(img) {
    display: block;
  }

  .modal_img p:has(img) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .exceed_height .modal_img * {
    height: 100%;
  }

  .modal_footer_center {
    padding-top: 1rem;
    display: flex;
    justify-content: center;
  }
}

@layer components {

  .popup1 .modal_big_content {
    max-height: calc(80dvh - 1.3rem - 1.5rem);
    overflow-y: auto;
  }
}

@layer components {
  .gallery_modal .modal_box .close_wrapper {
    position: static;
    margin-left: auto;
    grid-area: close;
  }

  .gallery_modal.modalopen .modal_box {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-template-rows: max-content 1fr;
    column-gap: 1rem;

    grid-template-areas:
      "pagin close"
      "gallery_content gallery_content";
  }

  .gallery_modal .modal_box {
    transform: none;
    max-height: none;
    height: 100dvh;
    width: 100%;
    padding: 0;
    background: transparent;
  }

  .gallery_modal .swiper-pagination {
    grid-area: pagin;
    display: flex;
    column-gap: .3rem;
    color: #fff;
    padding-top: .5rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
    position: static;
    font-size: 1rem;
  }




  .gallery_modal .modal_content {
    min-width: 100%;
    grid-area: gallery_content;
    display: grid;
    grid-template-rows: 1fr max-content;
  }

  .gallery_modal .swiperhugecontainer {
    min-width: 100dvw;
  }

  .gallery_modal .swiper_nav {
    position: absolute;
    width: 100%;
    margin-top: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    justify-content: space-between;
  }

  .gallery_swiper_in_modal .img_caption {
    margin-top: 12px;
    margin-bottom: 12px;
    color: #fff;
    width: 100%;
  }


  .gallery_swiper_in_modal img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .gallery_swiper_in_modal .gallery_img {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .gallery_swiper_in_modal .gallery_img.horizontal_img_wrap {}

  .gallery_swiper_in_modal .slide_inner {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    display: flex;

    align-items: center;
    padding-left: 12px;
    padding-right: 12px;
  }

  .gallery_swiper_in_modal .inner_inner {
    height: 100%;
  }

  .gallery_swiper_in_modal .vertical_img_wrap img {}

  .thumb_swiper {
    padding-left: 12px;
    padding-right: 12px;

  }

  .thumb_swiper .swiper-wrapper {

    padding-bottom: 12px;

  }

  .thumb_swiper img {
    width: 100%;
    object-fit: contain;
    height: 100%;
    max-width: none;
    max-height: 15dvh;
  }

  .thumb_swiper .img_wrap {
    background: var(--grey_800);
  }

  .thumb_swiper .vertical_img_wrap img {
    height: 100%;
    object-fit: contain;
  }
}

@layer components {
  .btn_row {
    margin-top: 3rem;
  }

  .btn_row_center {
    display: flex;
    justify-content: center;
  }

  .btn_row_right {
    display: flex;
    justify-content: flex-end;
  }
}

@layer components {
  .btn_row2 {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1rem;
    row-gap: 1rem;
  }

  .btn_row2:has(+*) {
    margin-bottom: 2rem;
  }
}


@layer components {
  .info_list {
    display: grid;
    grid-template-columns: 30% 1fr;
    column-gap: 1.5rem;
    row-gap: 1.125rem;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
  }

  .info_list>li {
    margin-bottom: 0;
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 2;
  }

  .info_list .label {
    font-weight: 600;
    color: var(--grey_500);
  }

  .info_list .value>ul {
    list-style: disc;
  }
}

@layer components {
  .icon_list {
    padding-left: 0;
    margin-bottom: 0;
    margin-top: 0;
    list-style: none;
    display: grid;
    row-gap: 1rem;
  }

  .icon_list>li {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: .75rem;
    align-items: center;
    margin-bottom: 0;
  }

  .icon_list>li::before {
    content: '';
    display: block;

    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .icon_list2 {}

  .icon_list2>li {
    align-items: flex-start;
  }

  .icon_list2>li::before {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .25rem;
  }

  .icon_list3 {}

  .icon_list3>li {
    align-items: center;
  }

  .icon_list3>li::before {
    width: 1.5rem;
    height: 1.5rem;

  }

  .icon_list3 a {
    color: inherit;
  }
}

@layer components {
  .catergory_list {
    padding-left: 0;
    list-style-position: inside;
  }

  .catergory_list *:last-child {
    margin-bottom: 0;
  }

  .catergory_title {
    font-weight: 600;
  }

  .catergory_list>li {
    counter-reset: section 1;
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: .3rem;
  }

  .catergory_list>li::before {
    content: counter(section) ".";
    font-weight: 600;
  }

  .catergory_list .inside_list {
    list-style: none;
    display: grid;
    margin-top: .4rem;
    padding-left: 0;
  }

  .catergory_list .inside_list>li {
    counter-increment: subsection 1;
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 2;
    column-gap: .3rem;
  }

  .catergory_list .inside_list>li::before {
    content: counter(section) "." counter(subsection) " ";
    font-weight: bold;
  }

  .catergory_list>li .inside_list *:first-child {
    margin-top: 0;
  }


  .catergory_list1 {
    font-size: 1.125rem;
  }
}


@layer components {
  .normal_list>li:not(:last-child) {
    margin-bottom: 1.5rem;
  }

  .normal_list>li p {
    margin-top: 0;
    margin-bottom: 0.5rem;
  }
}

@layer components {
  .result_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 1rem;
    row-gap: 1rem;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1.2rem;
  }
}

@layer components {
  .section_wrapper {

    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--grey_100);
  }

  .section_wrapper:not(:first-child) {
    padding-top: 1.5rem;
  }

  h2+.section_wrapper:not(:first-child) {
    padding-top: 0;
  }

  .section_wrapper *:last-child {
    margin-bottom: 0;
  }

  .section_wrapper :where(section, .inner_section):not(:last-child) {
    margin-bottom: 3rem;
  }

  .section_wrapper :where(.inner_section2):not(:last-child) {
    margin-bottom: 1.5rem;
  }
}

@layer components {
  .shortcut_wrapper {
    display: flex;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 8200;
    height: 100dvh;
    pointer-events: none;
  }

  .shortcut_wrapper button {
    background: var(--blue_250);
    color: #fff;
    padding: 1rem .5rem;
    border-radius: 0 .75rem .75rem 0;
    cursor: pointer;
    border: 0;

    transition: all .3s ease-in-out;

    font-size: 1.125rem;
    pointer-events: all;
  }

  .shortcut_wrapper button span {
    display: block;
  }

  .shortcut_wrapper:not(.shortcut_active) button {
    transform: translateX(-100%);
  }

  .shortcut_wrapper button:hover,
  .shortcut_wrapper button:focus {
    padding-left: .75rem;
    padding-right: .75rem;
  }

  .englishVersion .shortcut_wrapper button {
    transform: rotate(-90deg);
    /* transform-origin: left center; */
    margin-left: -2.5rem;
    padding: .5rem 1rem;
    border-radius: 0 0 .75rem .75rem;
  }
}

@layer components {
  .no_list_style {
    list-style: none;
    padding-left: 0;
  }
}

@layer components {
  .statement {
    position: relative;
    max-width: 1100px;

    padding-top: 2.125rem;
  }

  .statement::before {
    content: "“";
    position: absolute;
    top: -4px;
    left: 2.125rem;
    z-index: 2;
    color: #74c9b5;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
  }

  .statement blockquote {
    position: relative;
    margin: 0;
    padding: 4.5rem 3.1rem;
    border-left: 5px solid #6fc7b2;
    border-bottom: 5px solid #8d8d8d;
    background: linear-gradient(110deg, #d5f8f5 0%, #fffed6 100%);
    color: #555;
    font-size: 2rem;
    font-style: italic;
    line-height: 1.45;
    box-shadow: 5px 0 0 #8d8d8d;
  }

  .statement blockquote a {
    text-decoration: underline;
  }
}

/* ========================= ========================= ========================= ========================= ========================= =========================
***
* please make sure all components css inside @layer components 
***
* please make sure all components css inside @layer components 
* please make sure all components css inside @layer components 
* Use CSS @layer
* Use CSS @layer
* Use CSS @layer
***
 ========================= ========================= ========================= ========================= ========================= =========================*/