@charset "utf-8";

/****************************************************************************** common ******************************************************************************/
html, body	{ font-family:var(--font-text); font-size:14px; color:var(--pic-color-grey-80); line-height:24px; min-width: 1200px;}

a:link 		{ font-size:14px; line-height:24px; color:var(--pic-color-grey-80); text-decoration: none;}
a:visited 	{ font-size:14px; line-height:24px; color:var(--pic-color-grey-80); text-decoration: none;}
a:hover 	{ font-size:14px; line-height:24px; color:var(--pic-color-grey-90); text-decoration: none;}
a:active 	{ font-size:14px; line-height:24px; color:var(--pic-color-grey-90); text-decoration: none;}

#index .FOR_TOP{ position:fixed; z-index:20;}
.FOR_TOP{ width:100%; padding-top:15px; margin-bottom:15px; position: relative; z-index: 501!important;}
.iopen-layout-center-content .FOR_TOP {
    z-index: 20 !important;
}
.FOR_MAIN{ width:100%; max-width:1200px; margin: 0 auto;}
#index .FOR_MAIN{width:100%; max-width:100%; background-color: #F8F8F8;}

.main_content_left{ width:200px; float:left;}
.main_content_right{ width:200px; float:right;}
.main_content_l_center{ margin-left:210px;}
.main_content_r_center{margin-right:210px;}
.main_content_center{ margin-left:210px; margin-right:210px;}
.main_content_no_center{ width:100%;}

.Page_Litem_title{position: relative; text-align: center; margin-bottom: 10px; max-width:1200px;margin: 0 auto 10px;}
.L_item_name{ font-size: 28px; line-height: 34px; text-align: center; background-color: #F8F8F8; display: inline-block; z-index: 1; position: relative; padding: 0 20px;}
.Page_Litem_title:after { content: ''; width: 100%; height: 1px; background-color: #c1c1c1; position: absolute; top:50%; top:50%; transform: translateY(-50%); left:0;}

/****************************************************************************** header ******************************************************************************/
/* logo */
.header_box{ width:100%; height: 80px; max-width:1200px; margin: 0 auto; position: relative;box-shadow: 0px 0px 1px rgba(18, 18, 23, 0.1), 0px 26px 80px rgba(18, 18, 23, 0.1);
border-radius: 18px; background:#fff;}
.sticky {position: fixed; top: 28px; max-width:100%; border-radius: 0; z-index: 20;}
.header_box .header_logo{ position: absolute; top: 5px; left:20px;}
.header_box .header_logo a{ display: block;}
.header_box .header_logo img{ object-fit: contain;}
/* 店家介紹 */
.header_box .header_spec_v2{position: absolute; top: 26px; left:50%; transform: translateX(-350%);}
.header_box .header_spec_v2 li {width: 110px;}
/* 會員選單 */
.header_box ul.header_mem_func{ position: absolute; height: 40px; right:20px; top:23px;}
.header_box ul.header_mem_func > li{ position:relative; float:left; margin:0 2px; width:36px; height: 36px; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; }
.header_box ul.header_mem_func > li:hover { background-color: #f5f5f5; }
.header_box ul.header_mem_func > li > a { transform: scale(.8); }
.header_box ul.header_mem_func > li.top_search:hover{ background:none;}
/* 社群 */
.header_box ul.header_mem_func > li.top_facebook > a{display:block; width:36px; height:36px;background:url(fb.svg) no-repeat 50% 50%; background-size:32px; text-indent:-9999px;}
.header_box ul.header_mem_func > li.top_line > a{display:block; width:36px; height:36px;background:url(line.svg) no-repeat 50% 50%; background-size:36px; text-indent:-9999px;}
/* 語系 */
.header_box ul.header_mem_func > li.top_lang { position:relative;display:block; width:36px; height:40px;background:url(global.svg) no-repeat center top; background-size:36px; cursor:pointer;}
.header_box ul.header_mem_func > li.top_lang > .lang_box{ display:none; position:absolute; width:150px; background: rgba(255,255,255,1); z-index: 998; border:1px solid #ddd; right:-60px; top:40px;}
.header_box ul.header_mem_func > li.top_lang > .lang_box li{ display:block; width: 100%;  font-size:13px; line-height:30px; text-align:center;color:#fff;}
.header_box ul.header_mem_func > li.top_lang > .lang_box li a{ display:block; width: 100%; font-size:13px; line-height:30px; color:#5e5e5e;padding:0 15px;}
.header_box ul.header_mem_func > li.top_lang > .lang_box li:hover a{ background:#e5e5e5;}
/* 搜尋 */
.header_box ul.header_mem_func > li.top_search > a{display:block; width:36px; height:36px;background:url(search.svg) no-repeat 50% 50%; background-size:28px; text-indent:-9999px;}
.search_open{ width:140px; height: 30px; background: #EAEAEA;  position: absolute; top:3.5px; right: 10px; z-index: 3; overflow: hidden; box-sizing: content-box; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 20px; display: -ms-box; display: -moz-webkit-flex; display: -webkit-flex; display: -ms-flexbox; display: flex;}
.search_open.active{ -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; opacity: 1;}
.search_open .search_text{ width: 100px; height: 100%; text-transform: uppercase; font-size:14px; line-height:36px; color: #aaa; background:none; padding: 0 5px 0 10px; border: 0;}
.search_open .search_text::placeholder { color: #aaa; opacity: 1; }
.search_open .search_text:-ms-input-placeholder { color: #aaa; }
.search_open .search_text::-ms-input-placeholder { color: #aaa; }
.search_open .search_text::-webkit-input-placeholder { color: #aaa; }
.search_open .search_text:-moz-placeholder { color: #aaa; }
.search_open .search_text::-moz-placeholder { color: #aaa; }
.search_open .search_sumbit{ width: 50px; height: 100%; cursor: pointer; border-radius: 0 !important; color:#999; border: 0;background: url(search.svg) no-repeat 50% 50%;background-size: 18px;text-indent: -9999px;}
/* 主選單 */
ul.header_menu { position: absolute; top:19px; left:52%; transform: translateX(-46%); width:780px; height:55px; display: -ms-box; display: -moz-webkit-flex; display: -webkit-flex; display: -ms-flexbox; display: flex; -ms-flex-pack: center; -webkit-justify-content: center;-webkit-box-pack: center; -moz-box-pack: center; justify-content: center;}
ul.header_menu > li{ padding:0 5px; position:relative;}
ul.header_menu > li > a{ display:block; font-size:16px; font-weight: 700; line-height:40px; text-align:center; letter-spacing: .5px; padding:0 15px; border-bottom: 0;color:#595959;}
ul.header_menu > li:hover > a{ color:#218989;}
ul.header_menu > li:after{width: 0;height: 0;border-style: solid;border-width: 10px 5px 0 5px;border-color: #979797 transparent transparent transparent; bottom:0; content:" "; left: 50%;transform: translateX(-50%); position:absolute;  -webkit-transition:all 0.6s ease 0s;-moz-transition:all 0.6s ease 0s; -ms-transition:all 0.6s ease 0s; transition:all 0.6s ease 0s; z-index: 2; opacity:0; bottom:10px;}
ul.header_menu > li:hover:after{ opacity:1;}

/* 第二層選單 */
.menu_open{ display:none; width: 160px;position: absolute; left:50%; transform: translateX(-50%); background: rgba(255,255,255,1); z-index: 998;  border:1px solid #ddd;top:50px;}
.menu_open .menu_open_in li{ display:block; width: 100%;  font-size:13px; line-height:30px; text-align:center;color:#fff;}
.menu_open .menu_open_in li a{ display:block; width: 100%; font-size:13px; line-height:30px; color:#5e5e5e;padding:0 15px;}

.menu_open{ top: 50px;display:none; width: 179px;position: absolute; left:50%; transform: translateX(-50%); background: rgba(255,255,255,1); z-index: 998;  border:1px solid #ddd; max-height: 265px; overflow-y: auto;}
.menu_open .menu_open_in li{ display:block; width: 100%;  font-size:13px; line-height:18px; text-align:left; color:#fff;}.menu_open .menu_open_in li a{ display:block; width: 100%; font-size:13px; line-height:18px; color:#5e5e5e; padding:8px 15px;}

.menu_open .menu_open_in li:hover a{ background:#e5e5e5;}
.menu_open .menu_open_in li a{ display:block; width: 100%; font-size:13px; color:#5e5e5e;}
/*佈置功能用
.admweb-v2-layout-head .admweb-v2-EditItemBox:has(.header_box){ width: 148px; height: 100vh; position: fixed;}
.admweb-v2-layout-head .admweb-v2-EditItemBox::before{ z-index: 17!important;}
.admweb-v2-layout-head .admweb-v2-EditItemBox.click_active::after{ z-index: 16!important;}*/
#index .iopen-layout-center-content-box .FOR_TOP ,#index .iopen-layout-center-content-box .FOR_TOP .header_box{ height: 80px;}
#index .iopen-layout-center-content-box .FOR_TOP{ padding: 0;}
#index .iopen-layout-center-content-box .FOR_TOP .sticky{ top: unset; z-index: 8; height: 80px; position: relative;}
#index .iopen-layout-center-content-box .FOR_MAIN{ padding-top: 80px;}

/****************************************************************************** main ******************************************************************************/
.jooshop_btn_color>input, .jooshop_btn_color>a { background: #218989 ; color: #fff; border: 0;}
.jooshop_btn_color>input:hover, .jooshop_btn_color>a:hover { background-color: #3bb7b7 ;}
.jooshop_btn_color2>input, .jooshop_btn_color2>a { background: #999; color: #fff; border: 0;}
.jooshop_btn_color2>input:hover, .jooshop_btn_color2>a:hover { background-color: #666;}

.it928-right .it928-sequence li.active {background: rgba(33, 137, 137, 0.3) !important;}

.it928-left { background: #f6f6f6 !important;}
#pic-list-1 { background: #fff;}
/* it928 */
.it928-left .it928-category-title-box.active{background:#fff !important;}

/* 928 有原始狀態與選取狀態顏色需要調整 */
/* 分類原始樣式 */
.it928-default .it928-left .it928-category-title-box,
.it928-default .it928-left .it928-category div.it928-category-sm-2{ background:transparent !important;}/* 所有分類&第一層 */
.it928-default .it928-left .it928-category .it928-category-sm-3{background: #f1f1f1;}/* 第二層 */
.it928-left .it928-category li.it928-category-sm-3+div.it928-category-content.child li{background: #fafafa;}/* 第三層 */ 

/* 分類選取變色 依序為所有商,分類第一層,第二層,第三層*/
.it928-default .it928-left .it928-category-title-box.active,
.it928-default .it928-left .it928-category div.it928-category-sm-2.activation,
.it928-default .it928-left .it928-category .it928-category-sm-3.activation,
.it928-default .it928-left .it928-category li.it928-category-sm-3+div.it928-category-content.child li.activation{ background:#fff !important;}

/* it926 頁籤調整(含佈置頁)*/
/* 頁籤原始顏色 */
.it926-default .swiper-container .title,.it926-default .tabTit .swiper-pagination-bullet { background: rgb(15, 182, 182); color: #fff;}
/* 頁籤選取顏色 */
.it926-default .swiper-container .title:first-child,.it926-default .tabTit .swiper-pagination-bullet.swiper-pagination-bullet-active { color: #fff; background: rgb(33, 137, 137);}
/* 底下商品背景色 */
.it926-default .swiper-container-autoheight, .it926-default .swiper-container-autoheight .swiper-slide{ background: #fff;}

/* 選單展開效果 */
ul.header_menu > li:hover .menu_open{ display: block;}

/* 錨點 */
#it928-default:before{ content:''; display:block; margin-top: -88px; height: 88px;}


/*購物車*/
#shopping_checkout_2 .fancybox-overlay{ z-index:99999;}

/* 版頭層級統一修正 */
.FOR_TOP{position: relative}