@charset "UTF-8";
/*
@import "compass/reset";
@import "compass/css3/border-radius";
*/
.nav-sprite, .nav-about, .nav-about_over, .nav-contact, .nav-contact_over, .nav-lion, .nav-news, .nav-news_over, .nav-product, .nav-product_over, .nav-selection, .nav-selection_over {
  background-image: url('../images/nav-s1e5249515a.png');
  background-repeat: no-repeat;
}

.nav-about {
  background-position: 0 0;
}

.nav-about_over {
  background-position: 0 -43px;
}

.nav-contact {
  background-position: 0 -86px;
}

.nav-contact_over {
  background-position: 0 -128px;
}

.nav-lion {
  background-position: 0 -170px;
}

.nav-news {
  background-position: 0 -773px;
}

.nav-news_over {
  background-position: 0 -815px;
}

.nav-product {
  background-position: 0 -857px;
}

.nav-product_over {
  background-position: 0 -899px;
}

.nav-selection {
  background-position: 0 -941px;
}

.nav-selection_over {
  background-position: 0 -983px;
}

.icon-sprite, .icon-cas, .icon-dot1, .icon-dot2, .icon-gmp, .icon-haccp, .icon-sgs {
  background-image: url('../images/icon-sd33207d9d7.png');
  background-repeat: no-repeat;
}

.icon-cas {
  background-position: 0 0;
}

.icon-dot1 {
  background-position: 0 -36px;
}

.icon-dot2 {
  background-position: 0 -48px;
}

.icon-gmp {
  background-position: 0 -60px;
}

.icon-haccp {
  background-position: 0 -96px;
}

.icon-sgs {
  background-position: 0 -132px;
}

/*製板測試用*/
/*灰階三色*/
/*亮色三色*/
.clearfix {
  clear: both;
}

.guide {
  border: 1px solid #85D0CB;
}

.float-left {
  float: left;
  display: inline-block;
}

.float-right {
  float: right;
  display: inline-block;
}

/***HACK******************************************************************/
.pagination li.active a {
  background: #333;
}

.pagination li a:hover {
  background: #333 !important;
  border-color: transparent;
}

.fancybox-overlay {
  background: rgba(0, 3, 5, 0.75);
}

.fancybox-title {
  font-size: 12px;
}

.fancybox-title-float-wrap .child {
  background: none;
}

.form-horizontal > .ctrl-group > .ctrl-label,
.form-horizontal > .ctrl-group > .ctrls {
  vertical-align: top;
}

.fancybox-close {
  top: -15px;
  bottom: auto;
  left: auto;
  right: -17px;
  opacity: .7;
}

.checkbox-switch input:checked + .switch {
  background-image: -ms-linear-gradient(bottom, #45484d 0%, #000 100%);
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #45484d), color-stop(100%, #000000));
  background-image: -webkit-linear-gradient(bottom, #45484d 0%, #000000 100%);
  background-image: -moz-linear-gradient(bottom, #45484d 0%, #000000 100%);
  background-image: -o-linear-gradient(bottom, #45484d 0%, #000000 100%);
  background-image: linear-gradient(bottom, #45484d 0%, #000000 100%);
}

/*********************************************************************/
body {
  margin: 0;
  padding: 0;
  background-image: url("/images/frame/bg.jpg");
}

.debug {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 3px;
  bottom: 0;
  z-index: 99999;
  color: #fff;
  #display: none;
}

.mask {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
}

.wrapper {
  position: relative;
  width: 960px;
  margin: 0 auto;
  display: block;
}

header {
  width: 165px;
  margin-top: 10px;
}

section {
  width: 785px;
  margin-top: 10px;
}

footer {
  padding-top: 10px;
}

nav {
  background: white;
  height: 464px;
  padding: 10px;
}

.fbapi {
  #margin-left: -15px;
  height: 60px;
}

.page {
  position: relative;
  background: white;
  width: 100%;
  min-height: 620px;
  padding: 43px 77px 33px 33px;
  background-repeat: no-repeat;
  background-position: left bottom;
}
.page.about, .page.news {
  font-size: 15px;
}
.page.about {
  background-image: url("/images/frame/bg_about.jpg");
}
.page.contact {
  background-image: url("/images/frame/bg_contact.jpg");
}

h1 {
  position: absolute;
  width: 30px;
  height: 250px;
  right: 17px;
  top: 23px;
  text-indent: -9999px;
  background-repeat: no-repeat;
  background-position: right top;
}
h1.about {
  background-image: url("/images/h1/about.png");
}
h1.product {
  background-image: url("/images/h1/product.png");
}
h1.selection {
  background-image: url("/images/h1/selection.png");
}
h1.news {
  background-image: url("/images/h1/news.png");
}
h1.contact {
  background-image: url("/images/h1/contact.png");
}

/*********************************************************************/
/***TEXT************************************/
.kai {
  font-family: dfkai-sb, stkaiti, "標楷體", "华文楷体";
}

.ming {
  font-family: "新細明體", PMingLiu;
}

.date {
  text-align: right;
  font-size: .9em;
  color: #d3d3d3;
}

.nowrap {
  white-space: nowrap;
}

a {
  #text-decoration: underline;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

h2 {
  font-size: 1.5em;
  margin: 0.75em 0;
}

h3 {
  font-size: 1.17em;
  margin: 0.83em 0;
}

table {
  display: table;
}

tr {
  display: table-row;
}

thead {
  display: table-header-group;
}

tbody {
  display: table-row-group;
}

tfoot {
  display: table-footer-group;
}

col {
  display: table-column;
}

colgroup {
  display: table-column-group;
}

td, th {
  display: table-cell;
}

caption {
  display: table-caption;
}

#th {
  font-weight: bolder;
  text-align: center;
}

table {
  border-spacing: 2px;
}

thead, tbody, tfoot {
  vertical-align: middle;
}

td, th {
  vertical-align: inherit;
}

thead {
  display: table-header-group;
}

tbody {
  display: table-row-group;
}

tfoot {
  display: table-footer-group;
}

h1, h2, h3, h4, h5, h6, b, strong {
  font-weight: bolder;
}

pre {
  font-size: .9em;
  background: none;
}

strong {
  color: #343434;
}

thead, tbody {
  width: 100%;
}
thead th,
thead td, tbody th,
tbody td {
  padding: 3px 7px;
}
thead th, tbody th {
  font-weight: bold;
}

label {
  #font-weight: bold;
}

hr {
  display: block;
  clear: both;
  margin: 13px 0;
}
hr.dashed {
  border-top: 1px dashed #d3d3d3;
}

/*******************************************************************/
/*規則*/
.shy {
  opacity: 0;
  pointer-events: none;
}

/*******************************************************************/
/*公版*/
body {
  font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
  font-size: 13px;
  line-height: 2.2em;
  color: #787878;
  background-color: white;
  min-width: 980px;
}

a {
  color: inherit;
}
a:hover {
  color: #a40d10;
}

h1,
h2 {
  font-weight: bold;
  font-family: "標楷體", DFKai-sb, BiauKai;
}

h1,
h2,
h3 {
  line-height: 44px;
  margin: 0;
}

h4,
h5,
h6 {
  line-height: 22px;
  margin: 0;
}

p {
  margin: 0 0 1em 0;
  line-height: 2.2em;
}

h2 {
  color: #a40d10;
  font-size: 24px;
}

h3 {
  color: #468290;
  font-size: 18px;
}

h4 {
  color: #343434;
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: bold;
  font-family: "新細明體", PMingLiu;
}

h5 {
  color: #468290;
  font-size: 18px;
}

h6 {
  color: #787878;
  font-size: 16px;
}

h2 + p {
  margin-top: 1em;
}

.small {
  font-weight: normal;
  font-size: .9em;
}

.xxxsmall {
  font-size: .5em;
  line-height: 1em;
}

.big {
  font-size: 1.5em;
}

.xbig {
  font-size: 2em;
}

.highlight {
  font-size: 3em;
  line-height: .8em;
  margin: 0 0 7px 0;
  font-family: "Arial Black","微軟正黑體","蘋果儷中黑","Lucida Sans Unicode","Lucida Grande",sans-serif;
}

hr {
  height: 3px;
  background-repeat: no-repeat;
  border: none;
}
hr.clear {
  background-image: none;
  height: 30px;
}
hr.index {
  background-image: none;
}

.white {
  color: white;
}

.green {
  color: #03ba08;
}

.gold {
  color: #81765b;
}

/********************************************************************************************/
.slider {
  width: 785px;
  height: 431px;
  overflow: hidden;
  background-color: #d3d3d3;
  position: relative;
}
.slider ul {
  width: 9999px;
  font-size: 0;
}
.slider ul li {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 785px;
  height: 464px;
  vertical-align: top;
}

.slider-footer {
  position: relative;
  width: 785px;
  height: 33px;
  background-image: url("/images/frame/slider-footer.jpg");
  margin-bottom: 13px;
}
.slider-footer .sliderNav {
  position: absolute;
  margin: 11px 0 0 7px;
}
.slider-footer .sliderNav a {
  display: inline-block;
  text-indent: -9999px;
  width: 12px;
  height: 12px;
  margin: 0 5px 0 0;
  background-image: url("../images/icon/dot1.png");
  background-repeat: no-repeat;
  background-position: center center;
}
.slider-footer .sliderNav a.active {
  background-image: url("../images/icon/dot2.png");
}

nav {
  position: relative;
}
nav > a {
  margin: 0 auto;
  display: block;
  width: 128px;
  height: 42px;
  text-indent: -9999px;
}
nav > a.logo {
  width: 137px;
  height: 148px;
  margin-bottom: 24px;
  background-image: url("/images/frame/logo.png");
}
nav > a.logo:hover {
  background-color: transparent;
}
nav > a#about {
  height: 43px;
  background-image: url("/images/nav/about.png");
}
nav > a#about:hover, nav > a#about.active {
  background-image: url("/images/nav/about_over.png");
}
nav > a#product {
  background-image: url("/images/nav/product.png");
}
nav > a#product:hover, nav > a#product.active {
  background-image: url("/images/nav/product_over.png");
}
nav > a#selection {
  background-image: url("/images/nav/selection.png");
}
nav > a#selection:hover, nav > a#selection.active {
  background-image: url("/images/nav/selection_over.png");
}
nav > a#news {
  background-image: url("/images/nav/news.png");
}
nav > a#news:hover, nav > a#news.active {
  background-image: url("/images/nav/news_over.png");
}
nav > a#contact {
  background-image: url("/images/nav/contact.png");
}
nav > a#contact:hover, nav > a#contact.active {
  background-image: url("/images/nav/contact_over.png");
}
nav > a:hover {
  #background-color: #efefef;
}
nav .lang {
  width: 80px;
  display: block;
  position: absolute;
  bottom: .5rem;
  left: 50%;
  transform: translateX(-50%);
}

menu.product {
  width: 665px;
  display: block;
  margin: 0 auto 23px auto;
  font-size: 0;
}
menu.product > a {
  text-indent: -9999px;
  display: inline-block;
  height: 56px;
  background-image: url("/images/frame/p_menu.png");
}
menu.product > a:hover, menu.product > a.active {
  background-image: url("/images/frame/p_menu_over.png");
}
menu.product > a#kantoni {
  width: 121px;
}
menu.product > a#shabushabu {
  width: 128px;
  background-position: -130px center;
}
menu.product > a#kamamoko {
  width: 129px;
  background-position: -258px center;
}
menu.product > a#tamako {
  width: 128px;
  background-position: -387px center;
}
menu.product > a#specialSelected {
  width: 159px;
  background-position: -515px center;
}

h2 + .product-list {
  margin-top: 13px;
}

.product-list .thumb {
  width: 100%;
  margin: 0 0 13px 0;
}

.auth-list .thumb {
  width: 100%;
}
.auth-list a {
  display: inline-block;
  padding: 5px;
  background-image: url("/images/frame/bgPattern1.png");
  background-color: #bbc3c0;
}
.auth-list a:hover {
  background-color: #eeb6b9;
}
.auth-list p {
  margin-top: .3rem;
  line-height: 1.717;
}

.logo-list .thumb {
  width: 100%;
}
.logo-list a {
  display: inline-block;
  margin: 0 0 13px 0;
  padding: 4px;
  background-color: #fafafa;
  border: 1px solid #d3d3d3;
}
.logo-list a:hover {
  background-color: #81c0b2;
}

aside {
  width: 160px;
}
aside p {
  border-top: 1px solid #d3d3d3;
  border-bottom: 1px solid #d3d3d3;
  letter-spacing: 1px;
  padding: 7px 0;
}
aside p.tel {
  border: none;
  text-indent: -9999px;
  width: 157px;
  height: 19px;
  background-image: url("/images/frame/tel.png");
}
aside p.tel.tel_en {
  width: 161px;
  height: 15px;
  background-image: url("/images/frame/tel_en.png");
}
aside a {
  display: inline-block;
}
aside a.contact {
  text-indent: -9999px;
  width: 160px;
  height: 25px;
  background-image: url("/images/frame/b_form.png");
}

nav + aside {
  margin-top: 33px;
}

.slider + .banners {
  margin-top: 13px;
}

.banners {
  width: 800px;
}
.banners h4 + img {
  margin: 0 0 .5em .5em;
}
.banners .banner {
  display: inline-block;
}
.banners .banner a {
  display: inline-block;
  padding: 5px;
  background-image: url("/images/frame/bgPattern1.png");
  background-color: #bbc3c0;
}
.banners .banner a:hover {
  background-color: #eeb6b9;
}

footer {
  line-height: 36px;
}
footer .float-right {
  margin-top: 2px;
  text-align: right;
}
footer .icon {
  display: inline-block;
}
footer .icon a {
  display: inline-block;
  text-indent: -9999px;
  width: 36px;
  height: 36px;
}
footer .icon a#cas {
  background-image: url("/images/icon/cas.png");
}
footer .icon a#gmp {
  background-image: url("/images/icon/gmp.png");
}
footer .icon a#sgs {
  background-image: url("/images/icon/sgs.png");
}
footer .icon a#haccp {
  width: 50px;
  background-image: url("/images/icon/haccp.png");
}

.news-list h2 {
  margin-bottom: .5em;
}

.contact-form > .ctrl-group > .ctrl-label {
  min-width: 70px;
}

dl.dl-horizontal dt {
  width: 90px;
}
dl.dl-horizontal dd {
  margin-left: 90px;
}
dl.dl-horizontal dd + dt {
  margin-top: .2em;
}
dl.dl-horizontal dd + dt + dd {
  margin-top: .2em;
}

#gmap {
  width: 100%;
  height: 140px;
  background: #d3d3d3;
}

.button {
  padding: 7px 17px;
  background: #343434;
  color: white;
  font-weight: bold;
}
.button:hover {
  color: white;
  background: #a40d10;
}

.checkbox-switch .switch::before {
  color: white;
  content: "EN";
}

.checkbox-switch .switch::after {
  color: white;
  content: "繁中";
}

.product h2.hide + img {
  margin: 0 0 1em .5em;
}

h2.hide + img {
  margin: 0 0 1em 0;
}

.aside-label {
  display: inline-block;
  width: 158px;
  height: 15px;
  background-image: url("/images/frame/aside.png");
  background-position: center center;
  background-repeat: no-repeat;
  border: none !important;
}

.bannerSlider > ul {
  position: relative;
}
.bannerSlider > ul > li {
  position: absolute;
}

/****language**************************************************************/
body .lang-ch {
  display: block;
}
body .lang-en {
  display: none;
}

body.en p {
  line-height: 1.6em;
}
body.en .about p {
  line-height: 2.2em;
}
body.en .lang-ch {
  display: none;
}
body.en .lang-en {
  display: block;
}
body.en nav > a#about {
  height: 39px;
  background-image: url("/images/nav/en/about.png");
}
body.en nav > a#about:hover, body.en nav > a#about.active {
  background-image: url("/images/nav/en/about_over.png");
}
body.en nav > a#product {
  height: 42px;
  background-image: url("/images/nav/en/product.png");
}
body.en nav > a#product:hover, body.en nav > a#product.active {
  background-image: url("/images/nav/en/product_over.png");
}
body.en nav > a#selection {
  height: 42px;
  background-image: url("/images/nav/en/selection.png");
}
body.en nav > a#selection:hover, body.en nav > a#selection.active {
  background-image: url("/images/nav/en/selection_over.png");
}
body.en nav > a#news {
  height: 41px;
  background-image: url("/images/nav/en/news.png");
}
body.en nav > a#news:hover, body.en nav > a#news.active {
  background-image: url("/images/nav/en/news_over.png");
}
body.en nav > a#contact {
  height: 40px;
  background-image: url("/images/nav/en/contact.png");
}
body.en nav > a#contact:hover, body.en nav > a#contact.active {
  background-image: url("/images/nav/en/contact_over.png");
}
body.en menu.product > a {
  background-image: url("/images/frame/p_menu_en.png");
}
body.en menu.product > a:hover, body.en menu.product > a.active {
  background-image: url("/images/frame/p_menu_en_over.png");
}
body.en aside .aside-label {
  background-image: url("/images/frame/aside_en.png");
}
body.en aside a.contact {
  background-image: url("/images/frame/b_form_en.png");
}
body.en h1.about {
  background-image: url("/images/h1/en/about.png");
}
body.en h1.product {
  background-image: url("/images/h1/en/product.png");
}
body.en h1.selection {
  background-image: url("/images/h1/en/selection.png");
}
body.en h1.news {
  background-image: url("/images/h1/en/news.png");
}
body.en h1.contact {
  background-image: url("/images/h1/en/contact.png");
}

.btn-lang {
  display: inline-block;
  zoom: 1;
  *display: inline;
  overflow: hidden;
  background-repeat: no-repeat;
  width: 74px;
  height: 26px;
  background-image: url("/images/frame/btn-switch.png");
}
.btn-lang.en {
  background-position: left bottom;
}

.download {
  display: block;
  width: 100%;
}
.download > img {
  width: 100%;
}

p {
  line-height: 1.717;
}