/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

.material-symbols-outlined {
    vertical-align: bottom;
}
table.ingr td:first-child {
    width: 15%;
}
/* 選單 ============================================== */
li.menu-item-9738 a:before,
li.menu-item-9615 a:before,
li.menu-item-9169 a:before {
    display: none;
}

li.menu-item-9604>a,
li.menu-item-9635>a {
    background-image: url(https://healthtake.com.tw/wp-content/uploads/2025/06/global.svg);
    background-position: center;
    background-repeat: no-repeat;
    color: transparent !important;
    font-size: 1px !important;
    background-size: contain;
}

/* 首頁 ============================================== */
body.home .elementor-video {
    object-fit: contain !important;
}

@media (max-width: 768px) {
    body.home .elementor-widget-video .e-hosted-video .elementor-video {
        object-fit: contain;
    }

    body.home .elementor-element-4871023 {
        height: auto;
    }

    body.home .elementor-element.elementor-element-bcf5541.e-con-full.e-flex.e-con.e-child {
        top: 0;
        display: block;
        height: auto !important;
    }
}

/* .elementor-element-4871023 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100vw;
  height: 110vh; 
  overflow: hidden;
}

.elementor-element-4871023 video {
  /* Make video to at least 100% wide and tall */
/*min-width: 100vw; */
/*min-height: 100vh; */
/*   width: auto !important;
  height: auto !important;
  position: absolute;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%,-60%) !important;
} */

/* 搜尋結果 ============================================== */
.searchResultTaxList {
    background-color: #f5f5f5;
    padding: 40px;
}

.searchResultTaxList .srItem {
    font-family: "Noto Sans TC", Sans-serif;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
}

.searchResultTaxList .srItem a {
    font-size: 16px;
}

.searchResultTaxList .srItem a span.count {
    color: #333;
}

.searchResultsList .resultItem {
    margin-bottom: 24px;
}

.searchResultsList .resultItem a {
    display: block;
    background-color: #f5f5f5;
    padding: 40px 40px;
}

.searchResultsList .resultItem a h3 {
    font-family: "Noto Sans TC", Sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #000000;
    margin: 0 0 16px;
}

.searchResultsList .resultItem a p {
    font-family: "Noto Sans TC", Sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #7A7A7A;
}

/* 平板手機語言選單 ============================================== */
.contactForm .elementor-field-group:not(:first-child) {
    display: block;
}

.contactForm .elementor-field-group:not(:first-child) label {
    width: 100%;
}

.contactForm .elementor-field-group-salutation {
    top: 125px;
}


/* 平板手機語言選單 ============================================== */
.mobileLang nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
    z-index: 1;
    overflow: visible;
}

.mobileLang li.trp-language-switcher-container a {
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}



/* 機能原料 ============================================== */
.catalogDetailList {
    display: flex;
    flex-wrap: wrap;
    gap: 100px;
}

.catalogDetailList .cdItem {
    width: calc((100% - 200px) / 3);
    box-sizing: border-box;
    text-align: center;
}

.catalogDetailList .cdItem .img {
    margin: 0 auto 30px;
    padding: 0 6%;
}

/* .catalogDetailList .cdItem .img img {
	width: 320px;
	height: 320px;
} */
.catalogDetailList .cdItem h3 {
    font-family: "genryumin-b", Sans-serif;
    color: #666;
    font-size: 30px;
    margin: 0 0;
}

.catalogDetailList .cdItem:hover h3 {
    color: #55B100;
}

@media (max-width: 768px) {
    .catalogDetailList .cdItem {
        width: 100%;
    }

}

.catalogTaxPostList {
    padding-left: 20%;
}

.catalogTaxPostList .ctTitle {
    margin-bottom: 16px;
}

.catalogTaxPostList .ctTitle a {
    display: block;
    /*   font-family: "genryumin-b"; */
    font-family: Helvetica, Arial, "微軟正黑體", Heiti TC, "メイリオ", sans-serif;
    font-weight: 600;
    color: #036A26;
    font-size: 18px;
    width: 100%;
    padding: 4px 10px 4px 10%;
    margin-right: 8px;
}

.catalogTaxPostList .ctTitle.active a,
.catalogTaxPostList .ctTitle:hover a {
    /*   color: #55B100; */
    background-color: #AAE15A;
}

@media (max-width: 768px) {
    .catalogTaxPostList {
        padding-left: 0%;
    }
}

.postNav {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
    gap: 24px;
}

.postNav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-radius: 100px;
    background-color: #AAE15A;
    color: #2F5D2F;
    font-size: 18px;
}

.postNav a.nextPost svg {
    margin: 0 0 0 16px;
    height: 18px;
}

.postNav a.prevPost svg {
    margin: 0 16px 0 0;
    height: 18px;
}

@media (max-width: 768px) {
    .postNav {
        display: block;
    }

    a.prevPost {
        margin-bottom: 24px;
    }
}

.catalogSingle>img {
    width: 150px;
}

/* 品牌原料 ============================================== */
.brandIngredientsList {
    display: flow-root;
}

@media (max-width: 768px) {
    .brandIngredientsList {
        /*     grid-template-columns: 1fr; */
    }
}

.biItemList {
    max-width: 1200px;
    margin: auto;
}

@media (max-width: 767px) {
    .biItemList {
        max-width: 100%;
    }
}

.brandIngredientsList .biItem {
    width: calc(100% / 4 - 80px);
    float: left;
    clear: right;
    margin: 80px 80px 0px 0;
	transition: all 0.3s ease-in-out; 
	cursor: pointer; 
}

.brandIngredientsList .biItem:hover{
	transform: scale(1.08);
}

@media only screen and (min-width: 768px) and (max-width: 1180px) {
    .brandIngredientsList .biItem {
        width: calc(100% / 4 - 60px);
    }

    .brandIngredientsList .biItem:nth-child(4n+4) {
        margin-right: 0;
    }

    .biItemList {
        max-width: 90%;
    }
}

@media (max-width: 767px) {
    .brandIngredientsList .biItem {
        width: calc(100% / 2 - 40px);
        margin: 40px 20px 0 20px;
        height: auto;
    }
}

.brandIngredientsList .biItem>.img {
    background-color: #f2f2f2;
    height: auto;
    width: auto;
    margin: auto;
    text-align: center;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 19% 0;
}

@media (max-width: 768px) {
    .brandIngredientsList .biItem>.img {
        height: 120px;
        width: 120px;
    }
}

.brandIngredientsList .biItem>.img img {
    width: 70%;
}

.brandIngredientsList .biItem:first-child .img img {
    width: 70%;
}

.brandIngredientsList .biItem:not(:first-child) .img img {
    width: 70%;
}

.brandIngredientsList .biItem>.content {
    margin-top: 24px;
}

.brandIngredientsList .biItem>.content h3 {
    text-align: center;
    color: #4D4D4D;
    font-family: "genryumin-b", Sans-serif;
    font-size: 24px;
    height: 87px;
}

.brandIngredientsList .biItem>.content h3 span {
    display: block;
}

.brandIngredientsList .biItem>.content h3 span.en {
    font-size: 18px;
    margin-bottom: 8px;
}

.brandIngredientsList .biItem .arrow {
    justify-content: center;
    display: none;
}

.brandIngredientsList .biItem .arrow svg {
    width: 24px;
    height: auto;
}

.brandIngredientsList .biItem.active .arrow {
    display: flex;
}

.biContentList {
    display: none;
    background-color: #f2f2f2;
    text-align: center;
    width: 100%;
}

.biContentList.active {
    display: inline-block;
}

.biSubContent {
    /*    display: inline-flex; */
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 32px 0;
}

@media (max-width: 768px) {
    .biSubContent {
        max-width: 100%;
    }

    .brandIngredientsList .biItem>.content h3 {
        font-size: 15px;
        height: auto;
    }

    .brandIngredientsList .biItem>.content h3 span.en {
        font-size: 15px;
        height: auto;
    }
}

.biSubContent.active {
    display: inline-flex;
}

@media (max-width: 768px) {
    .biSubContent.active {
        display: block;
    }
}

.biSubContent .col-6 {
    width: 50%;
}

.biSubContent .col-6:last-child {
    text-align: left;
}

.biSubContent .col-6:last-child img {
    height: 80px;
    width: auto;
}

.biSubContent .col-6:last-child .mainContent {
    font-size: 18px;
    line-height: 1.6;
    color: #4d4d4d;
}

.biSubContent .col-6:last-child .mainContent h3 {
    margin-top: 24px;
}

.biSubContent .col-6:last-child .mainContent ul {
    padding: 0 0 0 22px;
}

.biSubContent .col-6:last-child .mainContent ul li {
    margin-bottom: 16px;
}

.biSubContent .col-6 img {
    width: 90%;
}

@media (max-width: 768px) {
    .biSubContent .col-6 {
        width: 100%;
        padding: 20px;
    }
}

span.q10 {
    background: linear-gradient(180deg,
            #ffe27a 0%,
            #ffc226 50%,
            #f29700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #ffc226;
}

span.citrus {
    background: linear-gradient(180deg,
            #fff6c5 0%,
            #ffe27a 60%,
            #d4a641 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #d4a641;
}

span.bitter {
    background: linear-gradient(180deg,
            #7be495 0%,
            #37d16e 55%,
            #08954b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #37d16e;
}

span.aga {
    background: linear-gradient(180deg,
            #6b8ce6 0%,
            #3046a6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #3046a6;
}

span.purple {
    background: linear-gradient(180deg,
            #e4a5e3 0%,
            #a349a4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #a349a4;
}

span.muzuku {
    background: linear-gradient(180deg,
            #65d6a2 0%,
            #179964 55%,
            #166c67 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #179964;
}

span.turmeric {
    background: linear-gradient(180deg,
            #ffe7a0 0%,
            #d4a641 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #d4a641;
}

span.maca {
    background: linear-gradient(180deg,
            #e85757 0%,
            #d13c43 60%,
            #9c3b29 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #d13c43;
}

span.lacto {
    background: linear-gradient(180deg,
            #1ca6e8 0%,
            #1d3188 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #1d3188;
}

span.naticol {
    background: linear-gradient(180deg,
            #3cd2d7 0%,
            #185793 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #185793;
}

span.phy {
    background: linear-gradient(180deg,
            #e89bb7 0%,
            #b88fc7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #b88fc7;
}

span.ptc {
    background: linear-gradient(180deg,
            #2495db 0%,
            #1c3786 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #1c3786;
}

span.probio {
    background: linear-gradient(180deg,
            #3eb4f6 0%,
            #1444a3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #1444a3;
}

span.alga {
    background: linear-gradient(180deg,
            #54d442 0%,
            #a3e654 55%,
            #22933c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #54d442;
}

span.kd {
    background: linear-gradient(180deg,
            #33b7f1 0%,
            #43a1e4 55%,
            #153997 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #33b7f1;
}

/* 寵愛一生 ============================================== */
.petCareList {
    display: flow-root;
}

.petCareList .petItem {
    width: calc(100% / 5 - 44px);
    float: left;
    clear: right;
    text-align: center;
    margin: 0 55px 80px 0;
}

.petCareList .petItem h3 {
    font-size: 22px;
    margin-top: 20px;
}

.petCareList .petItem:nth-child(5),
.petCareList .petItem:last-child {
    margin-right: 0;
}

.petCareList .petItem>.img {
    background-color: #f5b48f;
    border-radius: 100%;
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.petCareList .petItem>.img img {
    height: 180px;
}

.mainInt {
    display: none;
    gap: 24px;
}

.mainInt .miItem {
    padding: 12px 15px;
    border-radius: 50px;
    font-size: 18px;
    width: calc(100% / 5);
    text-align: center;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.archive.post-type-archive.post-type-archive-petcare .elementor-location-footer {
    margin-top: -150px;
}

.mainInt,
body.archive.post-type-archive.post-type-archive-petcare .e-loop-item {
    display: none;
}

body.archive.post-type-archive.post-type-archive-petcare .e-loop-item.show {
    display: block !important;
}

.mainInt.show {
    display: flex;
}

@media screen and (min-width: 769px) and (max-width: 1280px) {
    .petCareList .petItem {
        margin-bottom: 24px;
    }

    .petCareList .petItem>.img img {
        height: 120px;
    }

    .petCareList .petItem>.img {
        width: 120px;
        height: 120px;
    }

    /* 	.petCareList .petItem:nth-child(5), .petCareList .petItem:last-child {
	  margin-right: 24px;
	}
	.petCareList .petItem:nth-child(3n+3) {
		margin-right: 0;
	} */

    .elementor-element.elementor-element-b7db7dd svg {
        width: 50%;
        height: auto;
    }

    .elementor-element.elementor-element-9f7eb78 svg {
        width: 120px;
        height: auto;
        position: absolute;
        right: 0;
        bottom: 0;
        display: block;
        top: 0;
        margin: 150px 0 0px 0;
    }

    .petCareList .petItem h3 {
        font-size: 18px;
    }

    .mainInt .miItem {
        font-size: 14px;
    }

    svg#Layer_2 {
        width: 120px;
    }
}

@media (max-width: 768px) {
    .petCareList .petItem {
        width: calc(100%/2 - 12px);
        margin: 0 24px 24px 0;
    }

    .petCareList .petItem>.img img {
        height: 100px;
    }

    .petCareList .petItem>.img {
        height: 120px;
        width: 120px;
        margin: auto;
    }

    .petItem h3 {
        font-size: 18px;
    }

    .petCareList .petItem:nth-child(5),
    .petCareList .petItem:last-child {
        margin-right: 24px;
    }

    .petCareList .petItem:nth-child(2n+2) {
        margin-right: 0;
    }

    .mainInt.show {
        display: block;
    }

    .mainInt .miItem {
        width: 100%;
        float: none;
        clear: both;
        margin-bottom: 24px;
    }

    .elementor-element.elementor-element-b7db7dd svg {
        width: 30%;
        height: auto;
    }

    .elementor-element.elementor-element-9f7eb78 svg {
        width: 60px !important;
        height: 120px;
        position: absolute;
        right: 0;
        bottom: 0;
        display: block;
        top: 0;
        /*         margin: 150px 0 0px 0; */
    }
}

/* 影片匡線 */
.elementor-wrapper video {
    background-color: transparent !Important;
}

/* 首頁header */
/* --- Revised CSS --- */

/* Define transition on the ACTUAL sticky element */
.elementor-14 .elementor-element-3246f557 {
    /* Target inner sticky header */
    transition: background-color 0.2s ease;
    /* Ensure base state is transparent */
    background-color: rgba(255, 255, 255, 0);
}

/* Apply OPAQUE background to the INNER sticky header when scrolled/paused */
.elementor-14.elementor-14-visible .elementor-element-3246f557 {
    background-color: rgba(255, 255, 255, 0.95);
    /* Use desired opaque color (0.95 is slightly transparent white) */
    /* background-color: #FFFFFF; */
    /* Or fully opaque white */
}

/* --- Inner Element Opacity Rules (Keep these, but maybe make slightly more robust) --- */

/* Hide elements inside header - Target based on outer container class */
.elementor-14.elementor-14-hidden .elementor-element-626f5c3a,
.elementor-14.elementor-14-hidden .elementor-element-548a48c,
.elementor-14.elementor-14-hidden .elementor-element-8cbc6f1 {
    opacity: 0;
    visibility: hidden;
    /* Add visibility for better accessibility/interaction */
    pointer-events: none;
    /* Prevent clicking hidden items */
    transition: opacity 0.2s ease, visibility 0s linear 0.5s;
    /* Delay visibility change */
}

/* Show elements inside header - Use :not() for default state */
.elementor-14:not(.elementor-14-hidden) .elementor-element-626f5c3a,
.elementor-14:not(.elementor-14-hidden) .elementor-element-548a48c,
.elementor-14:not(.elementor-14-hidden) .elementor-element-8cbc6f1 {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.2s ease, visibility 0s linear 0s;
}

/* --- IMPORTANT: REMOVE or COMMENT OUT OLD Background Rules ---
   You might need to remove these from wherever you added them
   (Custom CSS, Elementor Custom CSS field, etc.)

.elementor-14 {
  background-color: rgba(255, 255, 255, 0); // REMOVE THIS
}

.elementor-14-visible {
  background-color: rgba(255, 255, 255, 1); // REMOVE THIS
}
--- */

.elementor-sticky__spacer.elementor-element-3246f557 {
    opacity: 0;
}

@media only screen and (min-width: 820px) and (max-width: 1180px) {
    body.home header.elementor-element.elementor-element-3246f557.e-con-full.e-flex.e-con.e-parent.e-lazyloaded.elementor-sticky.elementor-sticky__spacer {
        display: none;
    }
}

.elementor-element-1641cea nav.elementor-nav-menu--main {
    margin-bottom: 5px;
}

@media screen and (min-width: 1181px) and (max-width: 1210px) {
    .elementor-element.elementor-element-0c72652.petMainContent {
        margin-top: -30%;
    }

    .elementor-element-0ba756e {
        --content-width: 900px !important;
    }

    .elementor-element-d314ffa {
        --content-width: 900px !important;
    }

    .elementor-element-29d197f h3.elementor-heading-title.elementor-size-default {
        font-size: 24px ! Important;
    }
}

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

    .elementor-2227 .elementor-swiper-button.elementor-swiper-button-prev svg,
    .elementor-2227 .elementor-swiper-button.elementor-swiper-button-next svg {
        display: none;
    }

    .elementor-2227 .elementor-swiper-button.elementor-swiper-button-prev {
        background-image: url('https://healthtake.com.tw/wp-content/uploads/2025/04/資產-7ht_news.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 40px !important;
        height: 40px;
    }

    .elementor-2227 .elementor-swiper-button.elementor-swiper-button-next {
        background-image: url('https://healthtake.com.tw/wp-content/uploads/2025/04/資產-8ht_news.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 40px !important;
        height: 40px;
    }
}

.elementor-6098 .elementor-element.elementor-element-551fba2 .elementor-heading-title {
    font-size: 22px;
}

.elementor-element.elementor-element-6ad7b68 .elementor-spacer-inner {
    height: 50px !important;
}

.probiotical-video {
   display: block;
  width: 100%;
  max-width: 800px;
  height: 100%;
  max-height: 450px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
}