@charset "utf-8";
/*康普頓生技20220113修改*/
.ctrl{display: flex;flex-wrap: wrap;align-items: center;justify-content: center;}

/*預設解除背景輪播*/
#content_main {background-color: #fff; margin-top: 0;}
.bannerindex { height:auto;z-index: 1;top: 0;left: 0;width: 100%;overflow: hidden; position: relative;}
/*.bannerindex:before{content: ''; background: url(../images/ind_ba.png) no-repeat center; background-size: cover; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; height: 20vw; max-height: 199px; min-width: 50px; z-index: 9;}*/
.swiper-banner { position:static; margin:0; height:auto;} 
.swiper-slide img { height:auto;}
.pageIndex .main_part{border-top: none;}

/*購物車+會員暫時隱藏*/

.me_tp_features{min-width: 150px !important;}
.me_tp_features a{display: none !important;}
.right_member_in ul{display: none !important;}
.fix_ri_btn_20220525{display: none !important;}
.action-button{display: none;}

/*隱藏首頁編輯器部分
.pageIndex .main_part { border-top: 0px solid #ccc!important;}
.pageIndex .main_part:nth-child(1) { display: none!important;}
.pageIndex .main_part .products-list { width: 100% !important;  padding: 7% 0 3%;}*/

/*-------------------------------------------------------------------------------------------------*/
/*header*/
/* 
.main_header_area {
	background: linear-gradient(to bottom,#f5f5f5 0%,rgb(255 255 255 / 80%) 100%);
	background: linear-gradient(to bottom,#ffffff 0%,rgb(255 255 255 / 85%) 100%);
	box-shadow: 0px 5px 10px rgb(0 0 0 / 20%);
}
.header_area{width: 100%;border-top:5px solid #00a1d8;box-shadow: 1px 1px 10px rgba(0,0,0,0.2);}
.pageIndex .header_area{position: fixed;top: 0;left: 0;}
.submenu-indicator-chevron{width: 6px;height: 6.5px;}

.nav-header{padding: 0;left: 50%;transform: translateX(-50%);}
.nav-brand img { margin: 10px 0 0;}
.nav-dropdown>li:hover>a .submenu-indicator-chevron, .nav-dropdown>.focus>a .submenu-indicator-chevron {
    border-color: transparent #fff #fff transparent;
} */
/*下拉選單顏色
.nav-dropdown>li:hover>a, .nav-dropdown>li.focus>a { color: #ffffff;  background: #00a1d8;}
.nav-menu>li:hover>a, .nav-menu>li.active>a, .nav-menu>li.focus>a {color: #00a1d8;}
.tp_links a{display: none !important;}
.nav-menu { margin: 90px 0 10px 0; width: 100%; text-align: center; padding: 0;}
.nav-menu>li {margin: 0 10px;}
.nav-menu>li>a { padding: 0px 15px; color: #555555; letter-spacing: 0px; margin: 10px 0px 0;}*/

.pageIndex{max-width:100%; padding:0;}
.edit, .edit_part{width:100%; max-width: 100%; padding: 0;}
.edit *{word-break: normal;}
.path{display: none;}

.box_container {width:100%; max-width:2000px; font-family:"微軟正黑體",Microsoft JhengHei; font-size:var(--font17); color:#323232; letter-spacing: .5px; border:0; text-decoration:none; overflow:hidden; background:#FFFFFF; margin: auto;}
.box_container img{width:auto; max-width:100%;}
.box_container * {box-sizing: border-box; max-width:100%;  padding:0; margin:0; line-height:170%;}
.box_container a{text-decoration:none;}
.box_container ul{list-style:none;}
.box_container i, .box_container em, .box_container dfn, .box_container var{font-style: normal;line-height: 0px;}
.box_container u{text-decoration:none;}

/*Animations*/
[data-animate-in] { opacity: 0; transition: transform 0.8s ease, opacity 0.8s ease;}
[data-animate-in="up"] { transform: translate3d(0, 20%, 0);}/*由下往上*/
[data-animate-in="left"] { transform: translate3d(-30%, 0, 0);}/*由左往右*/
[data-animate-in="right"] { transform: translate3d(30%, 0, 0);}/*由右往左*/
[data-animate-in="down"] { transform: translate3d(0, -20%, 0);}/*由上往下*/
[data-animate-in="fadeIn"] { transform: translate3d(0, 0, 0);}/*淡入*/
[data-animate-in="scaleIn"] {transform: scale(.3);}/*放大淡入*/
[data-animate-in].in-view { opacity: 1; transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0); transition: transform 1.2s ease, opacity 1s ease;}
.fade-in { opacity: 0; transition: opacity 1s ease; }

.content_flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.box_container{
    --font60: 60px;
    --font35: 35px;
    --font30: 30px;
    --font25: 25px;
    --font22: 22px;
    --font20: 20px;
    --font18: 18px;
    --font17: 17px;
    --font15: 15px;
    --colorG: #44921E;
    --colorG01: #679979;
    --pad: 100px 3%;
    --font: 'Noto Sans CJK TC Regular';
}
.box_container h5{
    color: var(--colorG01);
    font-size: var(--font25);
    line-height: 150%;
    font-family: var(--font);
    font-weight: normal;
}

/*header*/
.main_header_area{background: #fff;}
.main_header_area .container{width: 100%; max-width: 100%; margin: 0 auto;padding: 0 2.5vw;}
.tp_links{display: none !important;}

.nav-brand,
.nav-brand img{width: auto; max-width: 100%;}

.navigation{display: flex; justify-content: space-between; align-items: center;}
.m_button{display: flex; justify-content: flex-end; align-items: center;}
.nav-menu{padding: 0; margin: 35px auto; flex-wrap: wrap; display: flex; justify-content: flex-end; align-items: flex-start; width: 100%;}
.nav-menu>li{display: block;position: relative;}
.nav-menu>li:before{
  content: "";
  position: absolute;
  background-color: #C1C1C1;
  width: 1px;
  height: 18px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}


.nav-menu>li:first-child:before{display: none;}
.nav-menu>li>a{padding: 8px 2vw;margin: 2px 0.75vw;line-height: 120%;font-size: 1rem;color: #25251D;font-family: 'Noto Sans CJK TC Regular';transition: 0.5s;}

.nav-menu > li > a span{display: none;}
.nav-menu>li:hover>a,
.nav-menu>li.active>a,
.nav-menu>li.focus>a{color: #FFF;background-color: #207B54;border-radius: 50px;}
.nav-dropdown>li:hover>a,
.nav-dropdown>li.focus>a{background: #68997A; color: #fff;}
.nav-dropdown>li:hover>a .submenu-indicator-chevron{
    border-color: transparent #fff #fff transparent;
}
.nav-menu>li>a>b{font-weight: normal;}

.nav-header,
.me_tp_features{position: unset;}
.nav-header{width: 300px; padding: 0; line-height: 0;}
.me_tp_features{display: flex; justify-content: flex-end; align-items: center; min-width: 370px; width: unset;}

.me_tp_features a{font-size: 16px; display: flex; align-items: center;position: relative;}
.me_tp_features a span em{font-style: normal;background-color: #D90000;font-size: 12px;color: #FFF;border-radius: 50%;position: absolute;right: -10px;top: -10px;width: 18px;height: 18px;display: flex;align-items: center;justify-content: center;}
.fa-shopping-cart{content: ''; background: url(../images/t_icon01.png) no-repeat; width: 24px; height: 23px;}
.fa-shopping-cart:before{display: none;}

/*購物車匯款/搜尋列*/

/*-------------------------------------------------------------------------------------------------*/
/*footer*/
.footer {padding: 0;background: #203F25;}
.footer_logo{width: 340px;}
.footer_logo a img{width: 100%;max-width: 100%;}
.footer_line{
    font-size: 16px;
    color: #FFF;
}
.footer_line a img{ 
    width: 170px;
    display: block;
    margin-top: 5px;
}

.footer_info{max-width: 1440px;width: 100%;padding: 0;margin: 0 auto; display: flex;flex-wrap: wrap;justify-content: space-between; align-items: flex-start;}
.footer_info ul {width: 100%;padding: 0;display: flex; justify-content: space-between; align-items: flex-start;}
.footer_info ol{align-self: stretch; width: 1px; background: #FFFFFF; margin: 0 20px;}
.footer_info li{padding: 0;}
.footer_logo{display: block;margin-bottom: 10px;}
.footer_info li:nth-child(1){width: 540px;}
.footer_info li:last-child {width: 380px;}
.footer_info li h6{font-size: 16px; color: #fff;margin-bottom: 10px;margin-left: 12px;}
.footer_info li p{color: #fff; vertical-align: middle; font-size: 16px;position: relative;padding: 0 0 0 30px;margin-bottom: 5px;}
.footer_info li p.f_text{padding-left: 0;}
.footer_info li p:before{display: inline-block;line-height: 0;position: absolute;left: 0;top: 3px;}
.footer_info li p.tel:before,
.footer_info li p.phone:before{content: url(../images/f_icon01.png);}
.footer_info li p.taxid:before{content: url(../images/f_icon02.png);}
.footer_info li p.mail:before{content: url(../images/f_icon03.png);}
.footer_info li p.add:before{content: url(../images/f_icon04.png);}
.footer_info li p.f_line:before{content: url(../images/f_icon05.png);}
.footer_menu{flex-wrap: wrap; display: flex; justify-content: space-between; align-items: flex-start;}
.footer_info li p a{color: #fff;transition: 0.5s;}
.footer_info li p a:hover{color: #52AB27;}

.footer_menu{width: 240px;}
.footer_menu a:nth-child(11) { display: none!important;}
.footer_menu a {color: #fff;background: none;padding: 7px 12px;margin-top: 5px;width: calc(50% - 5px);font-size: 15px;border: none;}
.footer_menu a:hover{background: #36731A;}

.copy {color: #464637; background: #E7E7E7;font-size: 13px; border-top: none; padding: 15px 10px; margin-top: 0;}
.copy a{color: #fff;font-size: 13px;color: #464637;}
.box_link{ display:none;}

.copyright{background: #BEECA8; color: #357219; font-size: 16px; padding: 10px; margin-bottom: 55px; text-align: center; letter-spacing: .5px; font-family: 'Noto Sans CJK TC Regular';}


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

  .footer .center{padding: 50px 20px 40px 20px;}
  .footer_logo{width: 100%;display: block;margin-bottom: 15px;}
  .footer_logo a img{width: auto;}
  .footer_info li:nth-child(1){width: 380px;}
  .footer_info li:last-child{width: 280px;}

}

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

  .nav-menu>li>a {
    padding: 6px 13px;
    margin: 2px 8px;
  }

}

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

  .m_button{flex-wrap: wrap;}

  .nav-menus-wrapper{width: 100%;}
  .nav-menu{justify-content: center;margin: 10px auto;}

  .me_tp_features{justify-content: center;min-width: 100%;width: 100%;}

}

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

    .footer_info{max-width: 380px;width: 100%;}
    .footer_info ul{flex-wrap: wrap;}
    .footer_info li{width: 100%}    
    .footer_info ol{display: none;}
    .footer_menu{width: 100%;justify-content: center;}
    .footer_menu a{width: auto;padding: 5px;margin: 2px;}

    .footer_info li h6{width: 100%;margin: 20px auto 10px auto;text-align: center;}

    .footer_info li:last-child{width: 100%;}
    .footer_line a img{margin: 0 auto;}

}

@media screen and (max-width: 800px) {
  
  .nav-menu>li>a{margin: 10px auto;}
  .nav-menu>li{padding: 0 20px;}

}



/*-------------------------------------------------------------------------------------------------*/
/*內頁BANNER 設定*/
.banner {
    background: url(../images/banner.jpg) no-repeat center;
    background-size: cover !important;
    height: 30vw;
    max-height: 529px;
    min-height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5%;
}
.banner h5 {
	color: #fff;
	font-size: 45px;
	text-shadow: 0px 0px 4px rgba(0,0,0,0.5);
    text-align: left;
    width: 100%;
    max-width: 1140px;
    padding-left: 15px;
    line-height: 110%;
    font-family: var(--font);
    letter-spacing: 1px;
    position: relative;
    font-weight: normal;
    display: none;
}
.banner h5:before{
    content: '';
    background: #9FE27E;
    width: 6px;
    height: 40px;
    position: absolute;
    left: 0;
    top: 0;
    text-shadow: none;
}
.banner h5:after {
    content: "品懿為人們的健康和幸福努力 "!important;
    display: block;
    color: #ffffff;
    font-size: 16px;
    margin-left: -18px;
}

/*商品頁  q&a隱藏*/
.qaform {
    display: none;}
.prod-thumb{display: none;}
.prod-panel br{display: none;}
.prod-panel img{
    width: 100%;
    display: block;
    margin: 10px auto;
}
/*-------------------------------------------------------------------------*/
/*(新)文章分類*/
.blog_search input[type=search] { border-radius: 12px;}
.blog_le .accordion { border-radius: 0px; font-family: 'Noto Sans CJK TC Regular';}
.blog_le .accordion li{border-top: 1px solid #D5D5D5;}
.blog_le .accordion li:first-child{border-top: none;}
.blog_le .accordion > li:hover, .blog_le .accordion > li.on_this_category {
    background: #00723A !important;
}

.subbox_item a:after {background: rgb(255 255 255 / 52%);border: none;}
.blog_list_ri{
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 15px 10px;
    margin: 0 auto;
    text-align: left;
}
.blog_list_ri h5 {
  font-size: 20px;
  color: #669979;
  font-weight: 600;
  font-family: 'Noto Sans CJK TC Regular';
}
.blog_subbox {
    display: flex;
    flex-wrap: wrap;
    padding: 40px 3.5vw;
    background-color: #FFF;
    min-height: 80vh;
}

.blog_box {
    min-height: 20vw;
    padding: 7px;
}


.blog_in_page .blog_ri{
    max-width: 885px;

}
h4.blog_category_title {
    font-family: 'Noto Sans CJK TC Regular';
    margin-bottom: 25px;
    color: #669979;
    font-size: 20px;
}
.blog_page h4.blog_category_title{
  width: 100%;
  padding: 0;
  margin: 0;
  border-bottom: none;
  font-size: 21px;
  color: #669979;
}
	
.subbox_item a {
    background: #FFF;
    float: none;
    padding: 5px;
    border: 1px solid #D3E4DC;
}
.blog_list_le {
    width: 100%;
    padding: 0;
}

.blog_box_edit p {
    line-height: 180%;
    font-size: 17px;
    margin: 15px 0;
}


/*-------------------------------------------------------------------------------------------------*/
/* 購物車/
/*選單放在左邊*/
.product_page .show_content, .product_info_page .show_content{ width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;}
.product_page .show_content{
    align-items: flex-start;
}
.product-layer{
    width: 20%;
}
.product-layer-two{
    overflow: hidden;
}
.product-layer-two > li:first-child,
.pro_search b{
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: bold;
}

.pro_search h5{
  display: block;
  font-size: 26px;color: #464637;margin-bottom: 30px;
}

.product-layer-two li:first-child span,
.pro_search b span{
    display: block;
    font-weight: 400;
    font-size: 22px;
    margin-bottom: 5px;
}
.search_txt, #menuTop li ul, .product-layer-two li a { border: 0px !important;}
.product-layer-two{}
.product-layer-two > li { width: 100%; max-width: 100%; padding: 0px; margin: 0; text-align: center; border-top: 1px solid #ccc;}
.product-layer-two li a {font-size: 14px;color: #464637;font-family: 'Noto Sans CJK TC Regular';background-color: #EFEFEF;text-align: center;background-image: url(../images/img_arrow.png);background-repeat: no-repeat;background-position: 90% center;}
.product-layer-two li.active a {}
.product-layer-two li ul { position: unset; width: 100%; margin-left: 0;}
.product-layer-two li:hover ul {  border: none !important;}
.product-layer-two li li{ display: block;transition: all ease .3s; border-top: 1px solid #ddd;}
.product-layer-two li li:hover a{background-color: #E8FFF3;}
.products-list, .product-wrapper {width: 80%;display: flex;flex-wrap: wrap;padding: 0 0 0 5vw;}
.page{ width: 100%;}

.product-layer-two > li:first-child > a .active{background-color: #00723A;color: #FFF;text-align: center;background-image: url(../images/img_arrow.png);background-repeat: no-repeat;background-position: 90% center;}
.close{background-color: #00723A !important;color: #FFF !important;}
.pro_search{
    overflow: hidden;
    margin-top: 80px;
}
.pro_search b{
    display: block;
}
.pro_search .box_search{
    width: 100%;
    max-width: 100%;
    display: block;
    margin: 20px auto;
}
.pro_search .shop_search_btn{
    display: block;
    background-image: url(../images/search-icon.png);
    background-repeat: no-repeat;
    background-position: center;
    background-color: inherit;
}
.pro_search .shop_search_txt{
    position: initial;
}
.pro_search .box_search input[type=text]{
    width: 100%;
    -webkit-box-sizing: border-box;
}

/*樣式調整*/
.product_main{width: 100%;}
.prod_in{display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 30px;}
.action-button {background: #68997A;}
.action-button:hover { background: #424242;}	
.block { background: #A1A1A1;}
.product_pic {width: 50%;}
.bxslider{overflow: hidden;}
.bxslider li{border: 1px solid #fff; max-width: 100%;}
.product_pic #bx-pager {position: unset; left: 0; top: 0; width: 100%;}
.sidebarBtn {width: 50%; border: none; padding: 5px 5px 5px 2vw;}
.sidebarBtn h2 {color: #669979;}
.sidebarBtn .price {color: #50A725; border-bottom: 1px solid #e6e6e6; width: 100%; font-size: 18px;display: none;}
span.ori_price { color: #777;font-weight: normal;}

.products-list .name{height: 45px;}
.products-list .more {margin-top: 30px;border: 1px solid #dddddd!important; color: #464637; font-size: 14px; font-weight: normal;padding: 15px;}
.products-list .more:hover { background-color: #014C2B !important; border: 1px solid #014C2B !important;color: #fff;}
.products-list .price b { color: #50A725; font-size: 16px;}
.products-list .price span{display: inline-block;}
.products-list .price span.sp_price{color: #50A725;}
.products-list a:hover .more { background: #014C2B; border-color: #014C2B; color: #fff;}
.lastPage { background: #50A725;}
.nextaction {background-color: #50A725;}
.lastaction { background-color: #50A725;}

.sidebarBtn .price span:first-child{text-decoration:line-through;}

.product_main{width: 100%;}

/*會員系統*/
.right_member_in {
    position: fixed;
    bottom: 25%;
    right: 0;
    width: 80px;
    border: none;
    background: none;
    padding: 0;
    top:auto;
}

.fix_ri_btn_20220525{width: 50px;}


.right_member_in a{
    display: block;
    width: 50px;
    margin: auto;
    color: #fff;
    background-color: #52AB27;
    padding: 15px 5px;

}
.right_member_in a p{
    width: 23px;
    padding: 10px 0;
    margin: 0 auto;
    font-size: 14px;
}
.fix_ri_btn_20220525{
    width: unset;
    height: unset;
    border-radius: 50px;
}
.fix_ri_btn_20220525 img {
    max-width: 18px;
    -webkit-filter:grayscale(1) brightness(10);
}
.right_member_in ul {
    display: block;
    width: 50px;
}
.right_member_in li {
    display: block;
    font-size: 14px;
    word-break: break-word;
    background-color: #FFBF00;
    border-radius: 100px;
    padding-bottom: 7px;
    overflow: hidden;
}

.fix_ri a {
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin-top:10px;
    background: #45695B; 
    width: 80px; 
    height: 80px;
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
    transition: 0.5s;
}
.fix_ri a:nth-last-child(2):before{
  content: '索取體驗包';
  padding: 5px 8px;
  color: #323232;
  font-size: 14px;
  line-height: 130%;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #D5D5D5;
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: all .4s;
}
.fix_ri a b{width: 100%;font-size: 14px;color: #FFF;margin-top: 5px;}
.fix_ri a:hover{background: #78BA5E;}


/*-------------------------------------------------------------------------------------------------*/
/*購物車付款*/
/*最下方聯絡資訊隱藏*/
.car_page .list_before li.btn{display: none;}

/*-------------------------------------------------------------------------------------------------*/
/*匯款通知*/
.rewrite_simple{background-color: #EFE2CB;color: #464637;}
.send_simple{background-color: #007239;}

/*-------------------------------------------------------------------------------------------------*/
/*聯絡資訊*/
.animated-arrow { background: #00723A;}
.noborder { background: #eeeeee;}
.contact_form li { border-bottom: 1px solid #ffffff;}

/*隱藏帳戶訊息*/
.contact_page .list_before.account { display: none;}

/*.contact_content .information_left {width: 695px;}
.contact_content .information_right{width: calc(100% - 700px);}
*/


/*-------------------------------------------------------------------------------------------------*/
/*會員登入頁面*/
.login_mem_submit { background: #679979;}
.login_mem_other_link a { color: #555555; }
.mem_box2 input.bbtn01{background: #EFE2CB;color: #464637;}
.mem_box2 input.bbtn02{background: #007239;}

/*index*/
.keyword{
    height: 0;
    max-height: 0;
    overflow: hidden;
}
.abg01{
    width: 94%;
    max-width: 1400px;
    padding: 80px 0 130px;
    margin: 0 auto;
}
.abg01 li{
    max-width: 1290px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: auto;
}
.abg01 li figure{
    width: 500px;
    margin-right: 3%;
    position: relative;
}
.abg01 li figure:before{
    content: '';
    background: url(../images/abg_01.png) no-repeat;
    width: 147px;
    height: 232px;
    position: absolute;
    left: -215px;
    top: 50%;
    transform: translateY(-50%);
}
.abg01 li figure h4{
    font-size: var(--font30);
    color: #000000;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    line-height: 130%;
    font-family: var(--font);
    font-weight: normal;
}
.abg01 li figure h4 img{
    margin-right: 15px;
}
.abg01 li figure p{
    padding-left: 35px;
    margin: 20px 0 0 25px;
    width: calc(100% - 25px);
    border-left: 1px solid #E4E4E4;
}
.abg01 li figure p span{
    display: block;
    font-size: var(--font20);
    color: #679979;
    margin-top: 20px;
    font-family: var(--font);
}
.abg01 li dl{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    column-gap: 3%;
    width: 728px;
}
.abg02{
    background: #F0FAD3;
    padding: 0 3% 70px;
    position: relative;
}
.abg02 dl{
    max-width: 1400px;
    margin: 0 auto;
}
.abg02 dl dd{
    position: relative;
    line-height: 0;
    top: -50px;
    margin-bottom: -50px;
}
.abg02 dl dt{
    width: 520px;
    padding-top: 50px;
    margin-left: 3%;
}
.abg02 dl dt h5{
    color: var(--colorG);
}
.abg02 dl dt p{
    margin: 20px 0;
}
.abg02 dl dt figure{
    width: 365px;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}
.abg02 dl dt figure a{
    display: block;
    width: calc(100%/2 - 7px);
    max-width: 165px;
    text-align: center;
    background: #fff;
    color: #7D7D7D;
    font-size: var(--font15);
    border-radius: 50px;
    padding: 10px;
    margin-top: 10px;
    font-family: var(--font);
    transition: all .4s;
}
.abg02 dl dt figure a:hover{
    background: var(--colorG01);
    color: #fff;
}
.abg02 i{
    width: 30vw;
    max-width: 376px;
    position: absolute;
    right: 0;
    bottom: -9.5vw;
    pointer-events: none;
}
.abg03{
    padding: 55px 3%;
}
.abg03 li{
    max-width: 1400px;
    margin: 0 auto;
}
.abg03 dl{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 65px 0;
    border-top: 1px solid #D5D5D5;
}
.abg03 li dl:first-child{
    border-top: none;
}
.abg03 dl dd{
    width: 620px;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.abg03 dl dd figure{
    text-align: center;
}
.abg03 dl dd a{
    display: block;
    margin-left: 3%;
    line-height: 0;
    overflow: hidden;
}
.abg03 dl dd a img{
    transition: all .4s;
}
.abg03 dl dd a:hover img{
    transform: scale(1.07);
}
.abg03 dl dd p{
    color: var(--colorG);
    font-size: var(--font35);
    line-height: 120%;
    writing-mode:tb-rl;
    margin-bottom: 12px;
}
.abg03 dl dt{
    width: 715px;
    margin-left: 3%;
}
.abg03 dl dt h5{
    padding-left: 15px;
    margin-bottom: 20px;
    border-left: 5px solid #9FE27E;
    line-height: 120%;
}
.abg04{
    padding: 90px 3%;
    text-align: center;
}
.abg04 h4{
    font-size: var(--font60);
    color: #E4F4AE;
    line-height: 110%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: normal;
}
.abg04 h4 p{
    font-size: var(--font30);
    color: #6C6C6C;
    line-height: 120%;
    margin-top: -25px;
    font-family: var(--font);
}
.abg04 figure{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin: 30px auto auto;
    max-width: 1400px;
}
.abg04 figure a{
    width: calc(100%/4 - 7px);
    max-width: fit-content;
    background: #50A725;
    color: #fff;
    margin-top: 20px;
    transition: all .4s;
}
.abg04 figure a section{
    position: relative;
    line-height: 0;
}
.abg04 figure a section span{
    width: 100%;
    height: 100%;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0,0,0,.7);
    opacity: 0;
    transition: all .4s;
}
.abg04 figure a section span:before{
    content: url(../images/abo_19.png);
}
.abg04 figure a:hover section span{
    opacity: 1;
}
.abg04 figure a p{
    padding: 10px 5px;
    font-size: var(--font18);
    font-family: var(--font);
}
.abg05{
    background: url(../images/abg_02.jpg) no-repeat center;
    background-size: cover;
    padding: 90px 3% 180px;
}
.abg05 ul{
    max-width: 1100px;
    margin: 0 auto;
}
.abg05 ul li{
    max-width: 723px;
}
.abg05 ul li p{
    margin: 30px 0 40px;
}
.abg05 ul li p span{
    display: block;
    font-size: var(--font20);
    font-family: var(--font);
    margin-top: 25px;
}
.abg05 ul li dl{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.abg05 ul li dl dt{
    margin-right: 3.5%;
}
.abg05 ul li dl dt:last-child{
    margin-right: 0;
}

/*購物須知*/
.nbg01{
    background: url(../images/nbg_01.jpg) no-repeat center;
    background-size: cover;
    padding: 45px 3%;
}
.nbg01 li{
    max-width: 1400px;
    padding: 50px 0;
    margin: 0 auto;
    border-top: 1px solid #D5D5D5;
}
.nbg01 li:first-child{
    border-top: none;
}
.nbg01 li h6{
    font-size: var(--font22);
    color: var(--colorG01);
    font-family: var(--font);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 7px;
    font-weight: normal;
}
.nbg01 li h6:before{
    content: url(../images/not_01.png);
    margin-right: 10px;
}

/*聯絡我們*/

.information_title{width: 100%;text-align: center;margin-bottom: 40px;}
.information_title h4{font-size: 35px;color: #00723A;}

.contact_content form{display: flex;flex-wrap: wrap;}
.contact_content .information_left{width: 320px;}
.note{display: inline-block;}
.list_before{
    margin-bottom: 0;
}
.list_before.info{
    width: 100%;
    max-width: 100%;
    margin-right: 0;
}
.list_before.info li{
    padding-left: 30px;
    margin-bottom: 10px;
    font-size: 17px;
    color: #464637;
}
.information_left li:before{
    position: absolute;
    left: 0;
}
.information_left li b{
    display: block;font-size: 17px;color: #444;margin-bottom: 5px;
}
.information_left li a:hover{
    color: #00723A;font-weight: bold;
}

.information_left .TEL:before,
.information_left .phone:before{content: url(../images/con_01.png)}
.information_left .taxid:before{content: url(../images/con_02.png)}
.information_left .mail:before{content: url(../images/con_03.png)}
.information_left .ADD:before{content: url(../images/con_04.png)}
.list_before.info ol{
    margin-top: 30px;
}
.contact_content .information_right{
    width: calc(100% - 320px);
}
.contact_form li .form__label{
    white-space: nowrap;
}
.contact_form li{
    padding: 5px 0 5px 90px;
}
.blank_letter{font-weight: normal;}
.blank_letter b{
    display: block;
    font-size: 15px;
    color: #464637;
    line-height: 160%;
    letter-spacing: 1px;
    font-weight: normal;
    margin-top: 10px;
}

@media screen and (max-width: 1200px){
    .box_container{
        --font60: 50px;
        --font35: 31px;
        --font30: 26px;
    }

    /*head*/
    .navigation{flex-direction: column;}
    .nav-header{padding-top: 15px;}

}

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

  .nav-brand, .nav-brand img{width: 300px;}

  .main_header_area .container{padding: 0;}

}

@media screen and (max-width: 1024px){
.bannerindex {height: auto;position: relative;}
#content_main {margin-top: 0vh;}
.pageIndex .header_area{position: relative;}

/*inden*/
.abg01{padding: 70px 0 100px;}
.abg01 li{flex-direction: column;}
.abg01 li figure{margin: 0 auto 70px;}
.abg02{padding: var(--pad);}
.abg02 dl{flex-direction: column-reverse;}
.abg02 dl dt{padding: 0; margin: 0 auto 70px;}
.abg02 dl dd{top: 0; margin-bottom: 0;}
.abg03 dl dd{flex-direction: column;}
.abg03 dl dd figure{display: flex; align-items: center; margin-bottom: 10px;}
.abg03 dl dd figure p{writing-mode: unset; margin: 0 10px 0 0;}

/*購物車樣式*/
.prod_in{flex-direction: column;}
.product_pic,
.sidebarBtn{width: 100%; margin-bottom: 20px;padding: 5px;}

}

@media screen and (max-width: 980px){
    .product_pic #bx-pager a{
        float: unset;
    }
}

@media screen and (max-width: 900px){
    .m_button{flex-direction: column;}
    .me_tp_features{padding-bottom: 15px;}
    .product_pic #bx-pager { margin: 0px; display: block; position: relative;}
    .bxslider li{padding-right: 0;}
}


@media screen and (max-width: 768px) {
.box_container{
    --pad: 70px 5%;
}

.information_title{margin-bottom: 20px;}
.information_title h4{font-size: 26px;}

/*banner*/
.banner{min-height: auto;height: 35vw;}
.banner h5{font-size: 35px;}
.banner h5:before{height: 35px; width: 5px;}

/*head*/
.nav-header{width: 100%; padding: 10px 50px;}
.navigation-portrait{height: unset;}

.bannerindex { padding:0; margin:0;}
#to_top { bottom:60px;}
#bottom_menu {display: block; }
#bottom_menu li{width: 33.33%;}
#bottom_menu li .fa{margin: 0 auto;}
.fa-home:before,
.fa-credit-card:before{color: #689A7A;}
.header_area{position: relative;}
.nav-header {transform: translateX(0%);}
.nav-menu{margin: 0;}
.nav-dropdown > li > a { width: 100%;}

.m_button{width: 100%;}
.me_tp_features{min-width: unset; width: 100%; padding: 0 0 10px 0;}
.me_tp_features > a{display: none;}

.products-list, .product-wrapper { width: 100%;padding: 0;}
.product-layer,
.product-layer-two,
.pro_search {display: none; }


/*index*/
.abg01{padding: 70px 0;}
.abg03{padding: 50px 5% 0;}
.abg03 dl{flex-direction: column-reverse;}
.abg03 dl dt{margin: 0 auto 50px; width: 100%; max-width: 600px;}
.abg03 dl dd{flex-direction: row; width: 100%; max-width: 600px;}
.abg03 dl dd figure{flex-direction: column;}
.abg03 dl dd figure p{margin: 0 auto 10px; writing-mode:tb-rl; letter-spacing: 0; line-height: 100%;}
.abg03 dl dd a{max-width: calc(97% - 63px);}
.abg04{padding: var(--pad);}
.abg04 figure{flex-wrap: wrap; justify-content: space-evenly;}
.abg04 figure a{width: calc(100%/2 - 7px);}
.abg05{padding: 70px 5% 100px;}

/*購物須知*/
.nbg01{padding: 20px 5%;}

/*聯絡我們*/
.contact_content .information_left,
.contact_content .information_right{width: 100%;}

}

@media screen and (max-width: 600px) {
    .right_member_in{top: unset; bottom: 110px;}

    .subbox_item{width: 49%;}
}

@media screen and (max-width: 480px) {
.box_container{
    --font60: 40px;
    --font35: 26px;
    --font30: 22px;
    --font25: 20px;
    --font20: 18px;
    --font18: 17px;
    --font17: 16px;
    --pad: 50px 5%;
}

.nav-header{width: 100%; padding: 15px 50px 15px 5px;}
.nav-toggle{right: 0;}
.nav-toggle:after{bottom: -5px;}

/*會員系統*/
.right_member_in{right: 5px;}
.right_member_in a p{font-size: 15px;}
.fix_ri a{border-bottom-left-radius: 15px;border-top-left-radius: 15px;width: 80px;height: 80px;}

/*banner*/
.banner{background-position: 30% center;}
.banner h5{font-size: 28px;}
.banner h5:before{height: 27px;}
.banner h5:after{margin-top: 5px;}

/*購物車*/

.sidebarBtn{padding-right: 10%;}


.nav-menu>li { margin: 0 0px;}

.footer_menu a {margin: 10px 5px 0 0;}
.footer.with_shopping_mode { padding:0 0 70px; }
.copyright{margin-bottom: 35px;}
.footer_menu { padding: 0px 0px 0;}

.copy {  margin-top: 0px;}

/*index*/
.abg01{padding: 50px 0;}
.abg01 li figure
,.abg02 dl dt{margin-bottom: 50px;}
.abg01 li figure p{padding-left: 15px; margin: 20px 0 0 15px;}
.abg03{padding: 30px 5% 0;}
.abg03 dl{padding: 50px 0;}
.abg04 figure a{width: 100%;}
.abg05{padding: 50px 5% 70px;}

/*購物須知*/
.nbg01{padding: 15px 5%;}
.nbg01 li{padding: 35px 0;}

}

@media screen and (max-width: 400px) {
    /*新文章分類*/
    .blog_subbox{justify-content: center;}
    .subbox_item {width: 100%; margin: 0px 0px 40px 0;}

    /*聯絡我們*/
    .contact_form li{padding-left: 0;}
    .contact_form li .form__label{margin-left: 0; text-align: left; margin-bottom: 5px;}
    .contact_form li .form__insert{display: block;}
}

/* 右側按鈕 */
/* 20241001 */
.link_all {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    background: #BFBFBF;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    position: relative;
    padding:0;
    background-color: transparent;
    transition: 0.5s;
  }

  .link_all p img{
    max-width: 50px;
    filter: unset;
  }

  .link_all:hover h4{
    transition: 0.5s;
    opacity: 1;
  }

  .link_all h4{
    width: 105px;
    position: absolute;
    left: -105px;
    top:50%;
    transform: translateY(-50%);
    opacity: 0;
  }

  /* .link_all h4::after{
    content:"";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 8.7px 5px 0;
    border-color: transparent #535353 transparent transparent;
    position: absolute;
    right:8px;
    top:50%;
    transform: translateY(-50%);
  } */

  .link_all h4 a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: unset;
    margin:0;
    background-color: unset;
    color:#ffffff;
    letter-spacing: 0.15em;
    text-indent: 0.15em;
    text-align: center;
    padding:5px;
    background-color: #78BA5E;
    transition: 0.5s;
  }

  .link_all h4 a+a{
    margin-top: 5px;
  }

  .link_all h4 a:hover{
    transition: 0.5s;
    color:#FFBF00;
  }

  @media (max-width:480px) {
    /* .link_all{
        width: 35px;
        height: 35px;
    }

    .link_all p img{
        max-width: 35px;
    } */

    .link_all h4 a{
        font-size: 15px;
    }
  }

    /*產品內容*/
    .product_info01{
        font-family: 'Roboto', 'sans-serif', '微軟正黑體', 'Microsoft JhengHei';
        font-size: 15px;
        color:#777;
        line-height: 130%;
    }
    .product_info01 img{
        width: auto;
        max-width: 100%;
    }
    .product_info01 ul{
        list-style:none;
    }
    .product_info01 ul li{
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .product_info01 ul li:before{
        content: url(https://image-cdn-flare.qdm.cloud/q58be7c3a6f76a/image/data/2017/04/25/cdaefb6b6e01ac5d7029ce40e32a5160.jpg);
        margin: 0 3px 0 0;
    }
    .product_info01 ul li b{
        min-width: 75px;
    }
    .product_info01 ul li b,
    .product_info01 dl dt b{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
    }
    .product_info01 ul li b:after{
        content: '-';
        margin: 0 5px;
    }
    .product_info01 dl dt{
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: 5px;
    }
    .product_info01 dl dt b:before{
        content: url(https://image-cdn-flare.qdm.cloud/q58be7c3a6f76a/image/data/2017/04/25/5e1acbff09edd4023d27328b25ae4267.jpg);
        margin: 2px 1px 0 0;
    }
    .product_info01 dl dt b:after{
        content: '｜';
        position: absolute;
        right: 1px;
        top: 0;
    }
    .product_info01 dl dt b{
        min-width: 90px;
    }