@charset "utf-8";

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

a:link 		{ font-size:14px; line-height:24px; color:var(--pic-color-grey-100); text-decoration: none;}
a:visited 	{ font-size:14px; line-height:24px; color:var(--pic-color-grey-100); 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;}

.mp-pusher{ background-color: #F6F6F6;}
.FOR_TOP{ width:100%; background-color: #fff; border-bottom:1px solid #dedede;}
.FOR_MAIN{ max-width:1200px; width:100%; margin: 0 auto;}
#index .FOR_MAIN{ max-width:100%; width:100%;}

.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: 10px auto ; max-width: 1200px;}
.L_item_name{ font-size: 28px; line-height: 34px; text-align: center; background-color: #F6F6F6; display: inline-block; z-index: 1; position: relative; padding: 0 20px;}
.Page_Litem_title:after { content: ''; width: 100%; height: 1px; background-color: #d6d6d6; position: absolute; top:50%; top:50%; transform: translateY(-50%); left:0;}

/****************************************************************************** header ******************************************************************************/
/* logo */
.header_box{ width:100%; height: 180px; max-width:1200px; margin: 0 auto; position: relative;}
.header_box .header_logo{ position: absolute; top: 30px; left:30px; width:80px; height:80px;border-radius:100%; overflow:hidden; border:3px solid #ececec; z-index:1; background:#fff;}
.header_box .header_logo a{ display: block; width: 100%; height: 100%;}
.header_box .header_logo img{ object-fit: contain;border-radius:100%; width:100%; height:auto;}
/* 店家名稱 */
.header_box .header_name{display:flex;align-items: center;font-size: 18px;line-height: 24px;height: 48px;overflow: hidden;}
h2{overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;font-weight: 500;font-size: 18px;line-height: 24px;display: -webkit-box;}
/* 店家介紹 */
.header_box .header_spec{position: absolute; top: 30px; left:440px; width:400px;font-size: 13px;line-height: 24px; display:flex;flex-wrap: wrap; color:#a5a5a5;}
.header_box .header_spec li{ width:50%; margin:10px 0;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical; padding-left:24px;}
.header_box .header_spec li:nth-child(1){background:url(shop.svg) no-repeat 0 50%; background-size:20px;}
.header_box .header_spec li:nth-child(2){background:url(add-group.svg) no-repeat 0 50%; background-size:20px;}
.header_box .header_spec li:nth-child(3){background:url(badge.svg) no-repeat 0 50%; background-size:20px;}
.header_box .header_spec li:nth-child(4){background:url(shopping-bag.svg) no-repeat 0 50%; background-size:20px;}
.header_box .header_spec li span{ color:var(--pic-orange);}
.header_bc{position: absolute; top: 20px; left:20px; width:370px; height:100px; background:none!important;border-radius:8px; padding:26px 15px; padding-left:100px; }
/* 會員選單 */
.header_box ul.header_mem_func{ position: absolute; height: 40px; right:20px; top:20px;}
.header_box ul.header_mem_func > li{ position:relative; float:left; margin:0 4px; 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_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:250px; height: 36px; background: #fff;  position: absolute; top:0; right: 0; z-index: 3; overflow: hidden; border: 2px solid #ddd; box-sizing: content-box; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; display: -ms-box; display: -moz-webkit-flex; display: -webkit-flex; display: -ms-flexbox; display: flex;}
.search_open .search_text{ width: 200px; height: 100%; text-transform: uppercase; font-size:14px; line-height:36px; color: #aaa; background:none; padding: 0 5px 0 15px; 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:20px; text-indent:-9999px;}
/* 主選單 */
ul.header_menu { position: absolute; bottom: 0; left:50%; transform: translateX(-50%); width:100%; height:40px; 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 14px; 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;}
ul.header_menu > li:hover > a{ color:var(--pic-orange);}
ul.header_menu > li:after{width:100%; background-color:transparent; bottom:0; content:" "; height:2px; left:0; position:absolute; transform:scaleX(0); -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;}
ul.header_menu > li:hover:after{ transform: scaleX(1); background-color: var(--pic-orange);}
/* 第二層選單 */
.menu_open{ 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;}

/****************************************************************************** main ******************************************************************************/
.jooshop_btn_color>input, .jooshop_btn_color>a { background: var(--pic-orange); color: #fff; border: 0;}
.jooshop_btn_color>input:hover, .jooshop_btn_color>a:hover { background-color: var(--pic-light-orange-80);}
.jooshop_btn_color2>input, .jooshop_btn_color2>a { background: #fff!important; color: var(--pic-orange)!important; border: 1px solid var(--pic-orange)!important;}
.jooshop_btn_color2>input:hover, .jooshop_btn_color2>a:hover { background-color: var(--pic-light-orange-20)!important;}

/* 905 */
.it905-default .iopen-mall-item-title{display: none;}

/* product_detail */
.pd_dt_joo4_box.pd_detail_pic form .imageBox .big_product .button_lightbox{border:1px solid var(--pic-orange);}
.pd_dt_joo4_box.pd_detail_pic .icon-search-01:before{ color: var(--pic-orange);}
.pd_dt_joo4_box.pd_detail_pic form .imageBox .big_product .button_lightbox:hover{ background-color: var(--pic-orange); border-color: var(--pic-orange);}

/* 928 */
.it928-left{ background: none!important;}
.it928-left .it928-category-title-box{ border-top: 1px solid var(--pic-color-grey-20);}
.it928-left .it928-category li{ border-top: 1px solid var(--pic-color-grey-20);}
.it928-left .it928-category li:last-child{ border-bottom: 1px solid var(--pic-color-grey-20);}
.it928-left .it928-category div.it928-category-sm-2.prod_sort_active{background:var(--pic-orange) !important;}
.it928-left .it928-category div.it928-category-sm-2.prod_sort_active a{color: #fff;}
.it928-right .it928-sequence li.active{background:var(--pic-orange) !important;}

/* 分類原始樣式 */
.it928-default .it928-left .it928-category-title-box,
.it928-default .it928-left .it928-category div.it928-category-sm-2{ background:#fff;}/* 所有分類&第一層 */
.it928-default .it928-left .it928-category .it928-category-sm-3{background: #f1f1f1!important;}/* 第二層 */
.it928-left .it928-category li.it928-category-sm-3+div.it928-category-content.child li{background: #d7dde7!important;}/* 第三層 */ 

/* 分類選取變色 依序為所有商,分類第一層,第二層,第三層*/
.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: var(--pic-orange) !important;color: #fff;}

/* it926 頁籤調整(含佈置頁)*/
/* 頁籤原始顏色 */
.it926-default .swiper-container .title,.it926-default .tabTit .swiper-pagination-bullet { background: #ffa666; color: #fff;}
/* 頁籤選取顏色 */
.it926-default .swiper-container .title:first-child,.it926-default .tabTit .swiper-pagination-bullet.swiper-pagination-bullet-active { color: #fff; background: #F37721;}
/* 底下商品背景色 */
.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: -28px; height: 28px;}  

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