/* ***************************************** 分店主色 ***************************************** */
.bg_store_G1{background:#B38564;} /* 南港車站 */
.bg_store_A1{background:#E4C988;} /* 新北中和 */
.bg_store_B1{background:#DD9655;} /* 板橋車站 */
.bg_store_A5{background:#9C8B8A;} /* 林口A9 */
.bg_store_A4{background:#EAB4AA;} /* 桃園A8 */
.bg_store_A6{background:#C8C0DA;} /* 桃園A19 */
.bg_store_C1{background:#A6B260;} /* 新左營車站 */
.bg_store_A2{background:#A6B398;} /* 屏東市 */
.bg_store_EC{background:#f1776d;} /* Global Online */
.div_store_tag{padding:2px 5px; font-size:12px; border-radius:5px;}
.div_store_tag a{color:#ffffff;}
.div_store_tag a:hover{color:#ffffff!important;}
.slick-slide {padding:5px;}
/* ***************************************** 顏色  ***************************************** */
.gold-color{
	color:#B38564;
}
/* ***************************************** 麵包屑  ***************************************** */
.breadcrumb {
    text-align: left;
    padding: 0;
    background-color: transparent;
    color: #b5b5b4;
    font-weight: 500;
    padding:15px 0;
    margin-bottom:unset;
}
.breadcrumb img {
	width:12px;
}
.breadcrumb ul li, .breadcrumb ul li a h2 {
    font-size: 14px;
    font-weight: 400;
    display: inline-block;
    position: relative;
}
@media(max-width:991px){
	.breadcrumb {padding:20px 0;}	
}
/* ***************************************** 標題造型 *****************************************  */
.h2_title_bdb{
	border-bottom:2px dashed #cccccc;
	margin-top:30px;
	margin-bottom:40px;
	letter-spacing: 3px;
}
@media (max-width: 575px) {
	.h2_title_bdb{
		font-size:20px;
		margin-bottom:24px;
	}
}
.h2_title_fit_width{
	width:fit-content;
}
.h2_title_block{
    width: 100%;
    text-align: -webkit-center;
}
.h2_title_bdl{
	font-weight:300!important;
	position:relative;
	border-bottom:1px dashed #cccccc;
	padding-right:5px;
	letter-spacing: 3px;
	font-size:20px;
	width:100%;
	padding-bottom:10px;
}
.h2_title_bdl:after{
	position:absolute;
	content:"";
	left:0;
	bottom:-1px;
	height:3px;
	width:15%;
	background:#B38564;
}
.h2_title_block h1{
	font-size:32px;
}
@media(max-width:767px){
	.h2_title_block h1{
	font-size:22px;
}
}
/* ***************************************** Header ***************************************** */
.header__mobile ul{
	list-style:none;
}
.sticky-header{
	position:sticky;
}
.sticky-header.is-sticky{
  box-shadow: 0px 63px 6px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0px 63px 6px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0px 63px 6px rgba(0, 0, 0, 0.05);
  -ms-box-shadow: 0px 63px 6px rgba(0, 0, 0, 0.05);
  animation-duration: 0.1s;
  transition: all 0.1s;
}
.hero_h100.pt0{
	margin-top:0;
}
.head_mode_btn{
    border: 1px solid #dddddd;
    padding: 6px 10px 6px 10px;
    text-align: center;
    float:left;
    width:45%;
}
.head_mode_btn.active{
    background:var(--header_sub_bg_color);
}
.head_mode_btn.active a{
    color:#ffffff;
}
.head_mode_btn.active a:hover{
    opacity:0.75;
}
.head_mode_btn a{
	display:block;
	color: #999999;
}  

.head_mode_btn a:hover{
    opacity:0.75;
}       			
.head_mode_line{
	width: 1px;
    height: 24px;
    border-left: 1.5px dashed #CCCCCC;
}
.div_searh_width{
	display:grid;
	grid-template-columns: 35px 1fr;
	width:130px;
}
.div_searh{
	border-bottom: 1px solid #DADADA;
    border-left: none;
    border-top: none;
    border-right: none;
    border-radius: 0px;
}
.header__search-input input{
	height:auto;
	padding: 0 0 5px 6px;
}
/* .header__search-input button{
	margin-top:8px;
} */
@media(max-width:767px){
	.div_searh_width{width:28px;}
	.div_searh{border-bottom:0;}
}
.div_searh_style{
	color:#181818;
	width:auto;
	display:grid;
	grid-template-columns: auto 1fr;
}
.div_searh_style i:hover {
	color:var(--header_sub_bg_color);
}
.header__mobile{
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
    -ms-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
}
.header__mobile i{
	font-size:28px;
	display:flex;
}
.header-user-sidebar i{
	font-size:24px;
}
.div_searh_style i{
	font-size:26px!important;
}
.header__user-action-icon li{
	margin-right:20px;
	line-height:1.4;
}
.expand-menu{
	background:#ffffff;
    color: #181818 !important;
    border-top:none;
    padding: 10px 0px !important;
}
.header__nav-link--white{
	color:#181818 !important;
}
.header__mobile-logo{
	max-width:220px;
	width:100%;
}
.header__user-action-icon i{
	font-size:26px !important;
}
.header__user-action-icon .fal.fa-user-circle{
	font-size:21px!important;
}
.menu-container {
	padding-top:0;
}
.header__mobile{
	padding:11px 0;
}
.hero_h100{
	margin-top: 110px;
}
.header__mobile--rightside li, .header__mobile--leftside li{margin-right: 20px;}
@media(max-width:575px){
	.div_searh_style{width:18px;}
	.header-add-cart i{align-items: center; display: flex;}	
	.header__mobile i{font-size:20px;}
	.header-user-sidebar i{font-size:16px;}
	.div_searh_style i{font-size:20px!important;}
    .div_searh{border:none;}
    .head_mode_btn{ width:45%; padding:2px 0; font-size:12px;white-space: nowrap;}
    .header__mobile--rightside li, .header__mobile--leftside li{margin-right: 14px;}
}
@media (max-width: 575px) {
	.div_searh_style{width:26px;}
}
@media(max-width:991px){
	.hero_h100{margin-top: 66px;}
	.div_searh_style{
		display:flex;
		margin-top:-1px;
	}
}
.header__mobile--rightside li a:hover,
.header__mobile--leftside li a:hover{
	color:var(--header_sub_bg_color);
}
.header__user-action-icon li a:hover{
	color:var(--header_sub_bg_color)!important;
}
.flex-btn{
	display:flex;
	gap:5%;
	align-items:center;
}
/*** 會員分級 ***/
.member-grade-area{
	top:42px;
}
.member_name{
	color:#fff;
}
.member_grade{
	color:#fff;
}
.member_period{
	color:#fff;	
}
.font_14{
	font-size:14px !important;
}
/* ************************************** header menu效果 ************************************* */
.cbp-hrmenu a::before{
  transform-origin: 50% 50%;
  background: var(--header_sub_bg_color);
}
.cbp-hrmenu a{
  text-transform: uppercase;
  text-decoration: none;
  display: block;
  position: relative;
  letter-spacing: 2.2px;
}
.cbp-hrmenu a::before{
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: -6px;
  z-index:9;
  background: var(--header_sub_bg_color);
  transition: 0.5s transform ease;
  transform: scale3d(0,1,1);
  transform-origin: 0 50%;
}
.cbp-hrmenu a:hover::before{
  transform: scale3d(1,1,1);
}
.dropdown__menu,
.dropdown__submenu {
    box-shadow: 0 2px 2px 3px rgba(0, 0, 0, 0.18);
    border-radius:10px;
    z-index:0;
}
.header__nav-link{
	margin-bottom:10px;
}
.dropdown__list a::before{
	display:none;
}
.dropdown__list {
	padding:8px 12px;
}
.dropdown__list a {
	border-bottom:1px solid transparent;
}
.dropdown__list a:hover {
	border-bottom:1px dashed #181818;
	color:inherit;
}
.dropdown__menu, .dropdown__submenu{
	padding:10px;
}
/* ************************************** footer上方的距離 ************************************* */
.main{
	padding-bottom: 370px;
}
/* ***************************************** Footer ***************************************** */
.footer_border{ border-top:none !important;}
.footer{background:#f9f9fa !important;}
.footer_copyright{background:#ffffff;}
.footer__nav-title{
	font-size:17px;
	font-weight:400;
	letter-spacing: 1.5px;
}
.footer__nav-title--b_bottom::after{top:25px;}
.footer_followus_hint img{max-width:145px;}
.footer{padding-bottom:0;}
.footer__list{letter-spacing: 1.2px;}
.footer_copyright img{width:150px!important;}
@media(max-width:575px){
.footer_copyright img{width:120px!important;}
}
ul.footer__nav{
	list-style:none;
}
@media(max-width:575px){
.footer__link{
	font-size:13px;
}
}
/* ************************************ Footer聯絡我們 **************************************** */
.container_FollowUs ul{
	display:flex;
	align-items:baseline;
	gap:16px;
}
/* ***************************************** 側選單 *****************************************var(--header_sub_bg_color) */
.btn_menu_send{
	border:1px solid var(--header_sub_bg_color);
	color:var(--header_sub_bg_color);
	padding:10px 30px;
	border-radius:0px !important;
	font-size:14px;
}
@media(max-width:575px){
.btn_menu_send{
	height:auto;
}
}
.btn_menu_send:hover{
	color:var(--header_sub_bg_color);
}
.sidebar__tag li a {
	border-radius:0px !important;
	border:0;
	background:#f9f9f9;
	color:#666666;
	font-size:14px;
}
.sidebar__tag li a.search-block{
	padding-bottom:0.375rem !important;
}
.sidebar__tag li a:hover {
	font-size:14px;
	border:0;
}
.offcanvas{
	background:#ffffff;		
}
.offcanvas .product__img-area{
	padding:0!important;
}
.product__img-area a:hover{
	opacity:0.75;
}
.page__img-block {
	background: #ffffff;
/* 	margin:10px 0px; */
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
}
.page__img{
	position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    margin-bottom:16px;
}
.offcanvas__top{
	padding-right:12px;
}
.offcanvas__menu-expand::after{
	font-family: 'icomoon' !important;
	content: "\e902";
	display:flex;
	width:100%;
	justify-content:end;
	top: 6px;
	padding: 0 12px;
}
.offcanvas-menu .active > .offcanvas__menu-expand::after, .sub-menu > .active .offcanvas__menu-expand::after, .sub-menu ul.sub-menu > .active .offcanvas__menu-expand::after{
    content: "\e900";
    position: absolute;
    font-family: 'icomoon' !important;
    transform: rotate(0);
}
/* ***************************************** 區域間距 ***************************************** */
.block_p_b{padding-bottom:40px;}
.block_m_b{padding-bottom:20px;}
.align-items-center{
	display:flex;
	align-items:center;
}
.justify-between{
	justify-content:space-between;
}
.justify-center{
	justify-content:center;
}
@media (max-width: 768px) {
	.block_p_b{padding-bottom:20px;}
}
.filter-block{
	padding:12px 16px 10px;
	border-bottom:1px solid #dddddd;
}
.filter-block-p8{
	padding:0 8px;
}
.filter-block-p8 .search-block{
	border-bottom:1px dashed #dddddd;
}

/* ***************************************** 按鈕造型 ***************************************** */
.div_view_all{
	text-align:right;
	margin:-20px 0px 20px 0px;
}
.a_view_all{
	color:#181818;
	border-bottom:1px solid #cccccc;
}
.btn_view_all{
	display:block;
	width:fit-content;
	color: var(--header_sub_bg_color);
	border:1px solid var(--header_sub_bg_color);
	padding:10px 40px;
	margin:auto;
}
.btn_view_all:hover{
	color: var(--header_sub_bg_color)!important;
	opacity:0.75;
}
@media(max-width:767px){
	.div_view_all{margin:-10px 0px 10px 0px;}
}
@media(max-width:575px){
	.btn_view_all{
		padding:6px 40px;
		font-size:12px;
	}
	.div_view_all{margin:-10px 0px 5px 0px;}
}
.btn_border{
	display:block;
	width:fit-content;
	color: var(--header_sub_bg_color);
	border:1px solid var(--header_sub_bg_color);
	padding:10px;
	margin:auto;
}
.btn_border:hover{
	color: var(--header_sub_bg_color)!important;
	opacity:0.75;
}
.btn_border img{
	width:50px;
}
@media(max-width:767px){
	.btn_border img{width:20px;}
}
/* *************************************** 頁面區塊第一個 *************************************** */
.block-content-first-banner{
	margin-top:60px;
}
@media(max-width:991px){
.block-content-first-banner{
	margin-top:80px;
}
}
@media(max-width:575px){
.block-content-first-banner{
	margin-top:20px;
}
}
.block-content-first{
	margin-top:60px;
	text-align: -webkit-center;
}
.page--h1{
	border-bottom: 2px dashed #cccccc;
	margin-bottom: unset;
	letter-spacing: 5px;
	font-weight: 300;
	text-align:center;
	width: fit-content;
	margin-bottom:50px;
	font-size:32px;
}
@media(max-width:767px){
	.page--h1{
		font-size:22px;
		margin-bottom:38px;
	}
}
@media(max-width:991px){
/* 	.block-content-first-banner{margin-top:0px;} */
	.block-content-first{margin-top:61px;}
}
/* *************************************** Swiper_area *************************************** */
.swiper_area{
    border-bottom: 0 !important;
    margin-top:20px;
}
.block-content .swiper_area{
    border-bottom: 2px solid #d9d9d9 !important;
    margin-top:20px;
}
#div_page_list_category_list .swiper_area{
    border-bottom: 1px solid rgb(217, 217, 217) !important;
    margin-top:20px;
}
.tab-menu-swiper .swiper-slide.selected a{
	padding:14px!important;
}
.tab-menu-swiper .swiper-slide.selected a:after{
	display:none;
}
.tab-menu-swiper .swiper-slide.selected a {
    color: var(--header_sub_bg_color)!important;
    padding: 0 26px 10px;
    border-bottom: 2px solid var(--header_sub_bg_color)!important;
}
.tab-menu-border{
	border-bottom:0!important;
	margin-top: -8px;
}
.tab-menu-swiper .swiper-slide a{
	font-size:15px;
	font-weight:400!important;
	padding:14px!important;
}
.swiper-grid .tab-menu-swiper01 .swiper-slide a{
	border-right:1px solid transparent!important;
}
/* *************************************** 側選單 *************************************** */
.div_menu_2_grid{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:8px;
}
.div_menu_2_grid a:hover{
	opacity:0.75;
}
.div_menu_2_grid .product__box{
	padding:0!important;
}
/* *************************************** 常用元件 *************************************** */
hr{
	background:#cfcfcf;
}
.page_title{
	padding:0px;
	border-bottom:2px dashed #cccccc;	
	letter-spacing: 5px;
    font-size:20px;
}
.page_title > h1 {    
    padding-top: 0px;
    padding-bottom: 0px;
    border-bottom: unset;
    font-size:20px;
}
.w-50p{
	width:50px;
}
.m-l-0{
	margin-left:0!important;
}
.underline{
	text-decoration:underline;
}
.gray-bg{
	background-color: #f9f9fa;
}
.hover-style:hover{
	opacity:0.8;
	transition: .5s;
}
.btn_center{
	text-align:center;
	margin-top:40px;
	margin-bottom:40px;
}
@media(max-width:575px){
.btn_center{
	margin-top:20px;
	margin-bottom:20px;
}
}
a.product__link > h3{
	margin-bottom:0;
}
.filter-grid2{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:24px;
	align-items: end;
}
@media(max-width:768px){
.filter-grid2{
	grid-template-columns:1fr;
	gap:0;
}
}
/* *************************************** 頁碼 *************************************** */
.page-pagination__link{
	border:1px solid transparent!important;
}
.page-pagination__link:hover{
	border: 1px solid #f1f1f1;
	background:#ffffff;
}
.page-pagination__link.active{
    background: transparent!important;
    border: 1px solid var(--header_sub_bg_color)!important;
    color: var(--header_sub_bg_color)!important;
}
/* *************************************** 表單 *************************************** */
input[type="checkbox"]:checked::after{
	padding: 3px;
    top: 1px;
    position: absolute;
    height: 22px;
    width:22px;
    display:flex;
    align-items:center;
    margin-top:-1px;
}
/* *************************************** 商品頁 *************************************** */
@media(min-width:768px){
.hit_brand_product .row{
	margin:0;
}
}
.hit_brand_product .row{
	margin-right: calc(var(--bs-gutter-x) / -2);
    margin-left: calc(var(--bs-gutter-x) / -2);
}
.topic-block .product__box{
	padding:0!important;
}
.div_prdlist[class *='col-'],
#div_init_page_hot .slick-slide {
	padding:0!important;
}
.div_prdlist .product__box{
	padding:8px 1.5px!important;
}
#div_init_page_hot .product__box{
	padding:8px!important;
}
/* *************************************** TAB *************************************** */
.member_card_tab_area{
    text-align: center;
    font-size: 15px;
    letter-spacing: 4px!important;
}
/* *************************************** 跟屁蟲 *************************************** */
#material-sidemenu{
	bottom:6.5%;
	right:14px;
  	display:flex;
  	gap:10px;
  	flex-direction:column;
  	position: fixed;
    z-index: 10;
    gap:10px;
}
#gooey-menu{
	position:relative;
	display: flex;
	align-items:center;
	justify-content:center;
    width: 48px;
    height: 48px;
    cursor: pointer;
    border-radius: 50%;
    background:#ffffff;
    border:2px dashed #cccccc;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);
    -ms-transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);
    -moz-transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);
    -o-transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);
    transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);
}
#gooey-menu i{
	font-size:20px;
	color:#666666;
}
@media(max-width:743px){
#gooey-menu i{
	font-size:16px;
}
}
.right-nav-item{
    position: fixed;
	bottom: 4.5%; 
  	right: 70px; 
    display:flex;
    padding:14px 22px 10px 22px;
    border:1px solid #D1D1D1;
    background:#ffffff;
    width:180px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    z-index: 9;
}
@media(max-width:743px){
	.right-nav-item{top:inherit;bottom:2.5%;padding:14px 18px 10px 18px;}
}
.right-nav-item .slick-slide{
	padding:0;
}
.material-scrolltop.reveal.ns{
	bottom:1%!important;
}
@media(max-width:743px){
	#material-sidemenu{
	  	display:flex;
	  	gap:5px;
	  	flex-direction:column;
	  	position: fixed;
	  	top:initial;
	  	right:8px;
	  	bottom:6%;
	  	transform:initial;
	}
	#gooey-menu{
		width: 38px!important;
	    height: 38px!important;
	    font-size:16px;
	}
	.material-scrolltop{
		width: 40px!important;
	    height: 40px!important;
	    font-size:16px;
	    bottom:auto!important;
	}
	.right-nav-item{
		right:55px!important;
	}
}
.right-nav-item ul,.view-area ul,.right-btn-area ul{
    padding:0;
    width:100%;
    margin:0;
}
.right-nav-item li,.view-area li,.right-btn-area li{
    list-style: none;
    cursor:pointer;
}
.right-nav-item ul{
    display:flex;
    flex-direction: column;
    gap:4px;
}

.float_ad_review.hero-slider__arrow--right {
    right: -29px;
}
.float_ad_review.hero-slider__arrow--left {
    left: -29px;
}
.view-title{
	font-size:14px;
	padding-bottom:8px;
	border-bottom: 1px dashed #cccccc;
	margin-bottom:8px;
	letter-spacing: 5px;
}
.hero-slider__arrow{
	width: 35px;
    height: 35px;
    background:transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
     box-shadow: none;
}
#a_popup_ad_close{
	z-index:1 !important;
}
#a_float_ad_close{
	opacity:1;
	color:#666666;
}
.side_ad_block #close{
    border:2px dashed #cccccc;
    background:#ffffff;
}
.side_ad_block #close i{
	position: absolute;
    left: 8px;
    top: 5px;
}
@media (max-width: 991px) {
    .material-scrolltop {
        right: 11px!important;
    }
}
@media (max-width: 767px) {
    .material-scrolltop {
        right: 5px!important;
    }
}
#div_float_ad {
        right: 70px;
    }
@media (max-width: 991px) {
    #div_float_ad {
        right: 7px;
    }
}
@media (max-width: 991px) {
	.side_ad_block #close{
	right:5px;
	}
}
@media (max-width: 767px) {
	.side_ad_block #close{
	right:0px;
	}
}
#span_float_img img{
	width:auto;
}
#ContactUsModal .modal-header {
    background: #FFFFFF !important;
    border-bottom: 0;
    z-index:9;
}
#ContactUsModal .modal-header button {
    background: transparent !important;
    position: absolute;
    right: 10px;
    top: 10px;
    padding: 10px;
    color: #6c6c6c !important;
}

/*****************************
ERROR PAGE
*****************************/
.empty_img  img{
	max-width:260px;
	width:100%;
}
.error_img2 img{
	max-width:220px;
	width:100%;
}
.empty_img,
.error_content {
    display:flex;
    flex-direction:column;
    gap:8px;
    color:#333333;   
}
.empty_img img{
    margin:auto;
    margin-bottom:20px;  
}
.empty_img  h4,
.error_content h4{
    font-size: 22px;
    margin-bottom:0;
}
.empty_img h6,
.error_content h6{
    font-size: 18px;
    font-weight:400;
    margin-bottom:0;
}
@media (max-width: 767px) {
	.empty_img  h4{
	    font-size:16px; 
	    gap:4px;
	}
    .empty_img {
        width: 90%;
    }
    .empty_img  h4,
    .error_content h4{
    	font-size: 20px;
}
	.error_content h6,
	.error_content h6{
	    font-size: 16px;
	}
}
/* 空白頁的撐起高度 */
.min-vh-70{
	min-height: 70vh;
}
@media(max-width:767px){
	.min-vh-70{
		margin-top:60px;
	}
}