@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');
/* 引入字體 */

html, body{ background-color: #fff;}

/* 版頭 */
.pet_TopBox{ position: fixed; background: #fff; z-index: 99;}
.FOR_MAIN,#index .FOR_MAIN{ padding-top: 108px;}

@media screen and (max-width: 720px) {
    .FOR_MAIN,#index .FOR_MAIN{ padding-top: 50px;}
    .Header .Header_in .Header_cart,
    .Header .Header_in .Header_cart_num,
    .member_btn{ display: none;}
    .Header .Header_in .Header_search{ right: 0;}
    .Header .Header_in .Header_logo{ margin: 0 auto;}
    .Header .Header_in .Header_logo a{ position: unset;}
}


/* 控制元件寬度 */
.it716_style_05_226670,.it716_style_04_226677,.it716_style_05_226678,.it716_style_04_226719,.of-wrap,.wrap,.of_mapbox{ max-width: 900px; margin: 0 auto;}
.it716_style_05_226670 h2.it716_style_05_title em,
.it716_style_04_226677 h2.it716_style_04_title em,
.it716_style_04_226719 h2.it716_style_04_title em{ font-family: "Noto Sans TC", sans-serif; font-weight: 500;}

/* 首頁中間內容 */
.it716_style_05_226671 .it716_style_05_R img{ display: block; max-width: 100%; height: auto!important; margin: 0 auto;}

.it716_style_05_226670 .it716_style_05_L.imgBox{ max-width: 285px;}

.it716_style_05_226678 .it716_style_05_L.imgBox{ max-width: 400px;}
.it716_style_05_226678 .font15,
.it716_style_05_226670 .font15{ line-height: 1.6;}

.it716_style_05_226678.it716_style_05 .it716_style_05_itemTitle{ font-size: 32px; font-weight: normal; line-height: 32px; font-family: "Noto Sans TC", sans-serif; margin-bottom: 20px;}

.of-right img{ margin: 0 2px;}
.of_mapbox ul{ display: flex; -ms-flex-pack: space-between; -webkit-justify-content: flex-start;-webkit-box-pack: flex-start; -moz-box-pack: flex-start; justify-content: flex-start;}
.of_mapbox ul li{ width: 50%; text-align: center;}
.of_mapbox ul li p{ display: block; width: 100%; text-indent: -9999px; height: 68px; margin-bottom: 15px;}
.of_mapbox ul li:nth-child(1) p{ background: url(https://rs.joo.com.tw/website/uploads/ckfinder/originsfoodist/images/index/icon_fb.png) center center no-repeat; background-size: 48px;}
.of_mapbox ul li:nth-child(2) p{ background: url(https://rs.joo.com.tw/website/uploads/ckfinder/originsfoodist/images/index/icon_map.png) center center no-repeat; background-size: 48px;}
.of_mapbox ul li iframe{ margin: 0 auto;}

@media screen and (max-width: 720px) {
    .of_mapbox ul{ -ms-flex-wrap: wrap; -moz-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
    .of_mapbox ul li{ width: 100%;}
}

/* 版頭 */
.pet_TopContents .pet_TopContents_T,.pet_TopShoppingcart{ display: none;}
.pet_TopContents_B.clearfix > ul{ display:flex; justify-content: end;}
.pet_TopContents_B > ul > li > a{ font-size: 18px;}
.pet_TopContents_B{ margin-top:30px;}

/* 版尾 */
.joo_normal_cr,.cr-bottom{ background:#d0bea9;}
.cr-bottom{ width: 100%; height: auto; padding: 30px 0;}
.cr-bottom-2{ width: 100%; height: auto; background-color: #978773; color: #222; font-size: 14px; line-height: 1.8; text-align: center;}
.cr-bottom-in{ display: flex; max-width: 900px; margin: 0 auto;}

.left-bottom{ display: flex; padding: 0 30px; -ms-flex-align: center; -webkit-align-items: center; align-items: center;}
.left-bottom li{ margin: 0 18px;}
.left-bottom a{ display: block; width: 67px; height: 67px; text-indent: -9999px; background-repeat: no-repeat; background-position: center; background-size: 67px;}

.left-bottom li:nth-child(1) a{ background-image: url(https://rs.joo.com.tw/website/uploads/ckfinder/originsfoodist/images/index/b-icon-1.png);}
.left-bottom li:nth-child(2) a{ background-image: url(https://rs.joo.com.tw/website/uploads/ckfinder/originsfoodist/images/index/b-icon-2.png);}
.left-bottom li:nth-child(3) a{ background-image: url(https://rs.joo.com.tw/website/uploads/ckfinder/originsfoodist/images/index/b-icon-3.png);}
.left-bottom li:nth-child(4) a{ background-image: url(https://rs.joo.com.tw/website/uploads/ckfinder/originsfoodist/images/index/b-icon-4.png);}
.right-bottom{ padding-left: 30px;}
.right-bottom h3{ font-size:30px; line-height: 1.5; margin-bottom: 10px; color:#515050;}
.right-bottom li{ font-size: 16px; line-height: 1.8; color:#515050;}

@media screen and (max-width: 720px) {
    .cr-bottom-in{ -ms-flex-wrap: wrap; -moz-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
    .right-bottom{ padding: 0;}
    .cr-bottom{ padding: 30px 0;}
    .left-bottom li{ margin: 0 15px;}
    .left-bottom{ margin-bottom: 20px; padding: 0; justify-content: center;}
    .left-bottom,.right-bottom{ width: 100%;}

}