@charset "utf-8";

/* 版頭 */
.gh_TopBox{ width:100%; height:auto; background:#FFF;}
.gh_container{width:1200px;height:100%;margin: 0 auto;position: relative;display: -ms-box; display:-moz-webkit-flex; display: -webkit-flex; display: flex;}
.gh_container>ul{flex:1;}
.gh_TopContent{ width:100%; position:relative; height:auto;}
.common_top a{font-size:13px;line-height:24px;}
.common_top a:hover{color:#444;}
.common_top > ul{ float:left;}
.common_top > ul > li{ font-size:13px;line-height:33px;; color:#fff; background:url(gh_Top_menu_line.png) right center no-repeat;}
.common_top > ul > li:nth-child(1){background: none;}
.common_top > ul > li > a{ font-size:13px;line-height:33px;;}
/* (區塊1)common_top */
.common_top{ width:100%; height:28px; margin: 0 auto;background:var(--pic-color-grey-5); z-index: 99999;position: fixed; top: 0; left: 0;}
.common_top .container{ max-width: 1200px; width: 100%; height: 100%; margin: 0 auto; position: relative;display: -ms-box; display: -moz-webkit-flex; display: -webkit-flex; display: -ms-flexbox; display: flex; -ms-flex-align: center; -webkit-align-items: center; align-items: center;}
/* common_top - Logo標誌 */
.common_top .logo_box{height: 24px; display: -ms-box; display:-moz-webkit-flex; display: -webkit-flex; display: -ms-flexbox; display: flex; -ms-flex-align: center; -webkit-align-items: center; align-items: center; border-right: 1px solid var(--pic-color-grey-40); padding-right: 10px; }
.common_top .logo_box > a{display: block; max-width:100%; width: 80px; height: 24px; position: relative;background: url(iopen_logo.png) no-repeat center center; background-size: 100%;}
/* common_top - 分館 */
.common_top .branch_library{display: -ms-box; display: -moz-webkit-flex; display: -webkit-flex; display: -ms-flexbox; display: flex;}
.common_top .branch_library a{ padding:0 5px;width:auto;height:100%;display: inline-block;line-height: 28px; position: relative;font-size: 14px;}
.common_top .branch_library a img{width: 100%; height: auto; position: relative; top: 3px;}
/* common_top - 會員功能 */
.common_top .user_func{ display: -ms-box; display: -moz-webkit-flex; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100%; position: absolute; right: 0;}
.common_top .user_func > li{ padding: 0 12px 0 28px; font-size: 14px; position: relative;  background-repeat: no-repeat; line-height: 28px;}
.common_top .user_func > li:not(:last-of-type):after{content:''; background-color:var(--pic-color-grey-40); width: 1px; height: 12px; display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.common_top .user_func > li a {display: inline-block; line-height: 28px; vertical-align: bottom; color:var(--pic-color-grey-100)}
.common_top .user_func > li span{ color:var(--pic-orange);}
.common_top .user_func > li.member_center{background-image: url(user.svg); background-position: 5px -6px; background-size: 20px;}
.common_top .user_func > li.logout { background-image: url(logout.svg); background-position: 5px -6px; background-size: 20px;}
.common_top .user_func > li.login { background-image: url(login.svg); background-position: 5px -6px; background-size: 20px;}
.common_top .user_func > li.trace { background-image: url(trace.svg); background-position: 7px -6px; background-size: 20px;}
.common_top .user_func > li.noti { background-image: url(noti.svg); background-position: 7px -6px; background-size: 20px;}
.common_top .user_func > li.cart { background-image: url(cart.svg); background-position: 5px -6px; background-size: 20px; display: -ms-box; display: -moz-webkit-flex; display: -webkit-flex; display: -ms-flexbox; display: flex; -ms-flex-align: center; -webkit-align-items: center; align-items: center;}
.common_top .user_func > li:hover{ background-position-y: -46px;}
.common_top .user_func > li.gh_Top_cart{position:relative; line-height: 28px; padding-right: 0;}
.common_top .user_func > li.gh_Top_cart > a.go_to_cart { padding: 5px; background-color: var(--pic-primary); color: #fff; font-size: 14px; line-height: 14px; display: inline-block; height: 24px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; margin-left: 5px; }
/* common_top - 購物車展開 */
.gh_Top_cartOpen{ position:absolute; right:12px; top:28px; width:350px; height:auto; background: #fff; z-index:3; display:none; border:2px solid var(--pic-green); box-sizing: content-box;}
.gh_Top_cartOpen:after{content: ''; width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent var(--pic-green) transparent; display: block; position: absolute; top: -10px; right:66px;}
.gh_Top_cartOpen ul:hover{ background:var(--pic-color-grey-5);}
.gh_Top_cartOpen ul li{ float:left; display:block; font-size:13px;}
.gh_Top_cartOpen ul{ border-bottom:1px solid var(--pic-color-grey-10); display: flex; align-items: center;}
.gh_Top_cartOpen ul li.cartOpen_name{ width:128px; padding:0 5px;}
.gh_Top_cartOpen ul li.cartOpen_name a{ display:block; width:100%; height:40px; font-size:13px;line-height:40px; text-align:left; overflow:hidden;}
.gh_Top_cartOpen ul li.cartOpen_num{ width:30px; text-align:center;}
.gh_Top_cartOpen ul li.cartOpen_price{ width:90px; padding:0 5px; text-align:right;}
.gh_Top_cartOpen ul li.buy_cart { padding:0 5px; }
.gh_Top_cartOpen ul li.buy_cart a{ display: block; width: 45px; background:var(--pic-orange); color: #fff; text-align: center;}
.gh_Top_cartOpen ul li.buy_cart a:hover{  background: var(--pic-light-orange);}
.gh_Top_cartOpen ul li.delete_cart a{ display: block; width: 45px; background: var(--pic-color-grey-100); color: #fff; text-align: center;}
.gh_Top_cartOpen .cartOpen_btn{margin-right: 3px;}
.gh_Top_cartOpen .cartOpen_btn a{display: inline-block; width: 70px; height: 30px; line-height: 30px; font-size: 15px; color: #fff; text-align: center;}
.gh_Top_cartOpen .cartOpen_btn.cartOpen_normal a{background-color: #ef901a;}
.gh_Top_cartOpen .cartOpen_btn.cartOpen_fridge a{background-color: #02B347;}
.gh_Top_cartOpen .cartOpen_btn.cartOpen_freeze a{background-color: #0cb4f0;}
.gh_Top_cartOpen .cartOpen_btn.cartOpen_delete a{background-color: #2f2f2f; width: 36px;}
/* common_top - 搜尋欄 / 關鍵字 */
.common_top .search_box { width: 300px; height: 24px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; border: solid 1px #eaeaea; background-color: #fff; overflow: hidden; position: relative; left: 30px;}
.common_top .search_box select { vertical-align: top; width: 80px; height: 100%; line-height:17px; padding:0 0 0 10px !important; border: 0; font-size: 14px; color: #2f2f2f; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance:none; background:linear-gradient(45deg, transparent 50%, #2f2f2f 50%),linear-gradient(135deg, #2f2f2f 50%, transparent 50%),transparent; background-position:calc(100% - 6px) calc(1em + -6px),calc(100% - 0px) calc(1em + -6px); background-size:6px 6px,6px 6px; background-repeat: no-repeat;}
.common_top .search_box select:focus {outline: none!important;-webkit-box-shadow: 0;box-shadow: 0;}
select:-moz-focusring {color: transparent;text-shadow: 0 0 0 #000;}
.pretty-select::-ms-expand { display: none; }
.common_top .search_box input.search_bar_txt { border:0; vertical-align:top; width: calc(100% - 140px); height: 100%; border: 0; padding: 3px 0 3px 10px; font-size: 14px; letter-spacing: 0.75px; color: #2f2f2f; }
.common_top .search_box input.search_bar_submit { vertical-align: top; width: 50px; height: 100%; background-image: url(search.svg); background-color: transparent; background-size: 44px; background-repeat: no-repeat; background-position: center -8px; border: 0; cursor: pointer; }
.common_top .search_box input.search_bar_submit:focus{outline: none!important;-webkit-box-shadow: 0;box-shadow: 0;}

.lightbox_Product_range .box .Product_range_button .addToCart{background: rgba(0,160,65,.7);}
.lightbox_Product_range .box .Product_range_button .addToCart:hover{background: rgba(0,160,65,1);}

.common_top_L{ display: -ms-box; display:-moz-webkit-flex; display: -webkit-flex; display: flex;}
.common_top_L li{ float:left; height:40px;}
.common_top_L li a{ padding:0 10px;width:auto;height:40px;display: inline-block;line-height: 40px;}
.common_top_L li:nth-child(1) a{ background: url(logo.svg) no-repeat center center;background-size: auto;width: 140px;height: 40px;background-size: 100%;display: inline-block;}
.common_top_L li:nth-child(3) a{ display:block; width:100%; height:20px; padding:0 10px; background:#ff9b11; color:#FFF; margin-top:7px; line-height:20px; border-bottom:1px #ddd solid;}
.common_top_L li:nth-child(2),.common_top_L li:nth-child(3){ background:none;}
.common_top_R > li{ float:right;font-size:13px;line-height:40px;;transition: all 0.3s;height:40px;}
.common_top_R > li > a{ padding:0 10px;transition: all 0.3s;line-height: 40px;display: inline-block;}
.common_top_R > li > a:hover{ color:#444;background: #ddd;}
.common_top_R > li > a > span{ color:#fff;transition: all 0.3s;}
.common_top_R > li > a.openstore_btn{display: block;;border-radius: 14px;border: solid 1.5px #008cd6;background-color:#fff;font-size: 15px;font-weight: bold;text-align: center;color: #008cd6;max-height: 31px; vertical-align: middle; line-height: 25px; margin: 6px 7px 6px 0; padding: 0 15px; transition: all .3s;}
.common_top_R > li:hover > a.openstore_btn{background-color:#008cd6; color:#fff;}
.common_top_R > li:nth-child(1) > a{ display: block; padding:0 10px 0 30px; background:url(cart_w.svg) 5px center no-repeat; background-size:18px ; line-height: 38px; color: #fff;}
.common_top_R > li:nth-child(1):hover > a{ padding-top:0!important; border-top: 0!important; display: block; padding:0 10px 0 30px; background:url(cart_b.svg) #fff 5px center no-repeat; background-size:18px ; line-height: 38px;display: block; color: #008cd6;}
.common_top_R > li:nth-child(1):hover > a  > span{ color:#e70014;transition: all 0.3s;}
.common_top_R > li:nth-child(2){height:40px;}
.common_top_R > li:nth-child(2) > a { transition: all 0.3s;}

/* 店家首頁隱藏共同版頭 */
.mp-pusher{ padding-top: 28px;}

/* 店家介紹 */
.header_box .header_spec_v2{font-size: 13px;line-height: 28px; display:inline-block; color:var(--pic-color-grey-40);}
.header_box .header_spec_v2 li i{ color:var(--pic-color-grey-100); font-size: 28px; vertical-align: bottom;}
.header_box .header_spec_v2 li span{ color:var(--pic-orange);}
.header_box .header_spec_v2.header_bg_color,
.header_box .header_spec_v2.header_bg_color li i,
.header_box .header_spec_v2.header_bg_color li span{ color:#fff;}

/* 版頭層級統一修正 */
.FOR_TOP{ z-index: 501;}