@charset "utf-8";
/* @import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css); */
/* @import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css); */

/*
    Button CSS ----------------------------------------------- 2013-11-06
    日期：
    修改：2018-05-31
*/
.btn-close {
  margin-top: -5px;
}
.btn-disable {
  background: #666;
  border: 1px solid #666;
  color: #fff;
}
.btn-disable:hover {
  color: #fff;
  background: #333;
}
.btn-visit {
  background-color: #f60;
  border: 1px solid #f60;
  color: #fff;
}
.btn-visit:hover {
  color: #fff;
  background: #f30;
}
.btn-dark {
  background: #000;
  border: 1px solid #000;
  color: #fff;
}
.btn-dark:hover {
  color: #fff;
  background: #333;
  border: 1px solid #333;
}
.btn-purple {
  background: #724985;
  border: 1px solid #724985;
  color: #fff;
}
.btn-purple:hover {
  color: #fff;
  background: #69437a;
  border: 1px solid #69437a;
}
.btn-blue {
  color: #fff;
  background: #0a9cb0;
  border: 1px solid #0a9cb0;
}
.btn-blue:hover {
  color: #fff;
  background: #0baac0;
  border: 1px solid #0baac0;
}
/*DWL 2017 --------------------------------------*/
.btn-fix {
  background: #ff3300;
  color: #fff;
  border: 1px solid #ff3300;
}
.btn-fix:hover {
  color: #fff;
  background: #e62e00;
  border: 1px solid #e62e00;
}
.btn-green {
  background: #080;
  color: #fff;
  border: 1px solid #080;
}
.btn-green:hover {
  color: #fff;
  background: #006f00;
  border: 1px solid #006f00;
}
/*button --------------------------------------- 2018-10-29*/
button {
  border: none;
  background: none;
}
/*
    bg CSS ----------------------------------------------- 2018-05-31
    日期：
    修改：2018-05-31
*/
.bgColor {
  background: #055688;
}
.bgColor-light {
  background: #0775b9;
}
.bg-visit {
  background: #f60;
  color: #fff;
}
.bg-purple {
  background: #724985;
  color: #fff;
}
.bg-dark {
  background: #000;
  color: #000;
}
.bg-fix {
  background: #ff3300;
  color: #fff;
}
.bg-green {
  background: #080;
  color: #fff;
}
/* -------------------------------------------------------------------
    說明：fbox
    日期：
    修改：2018-05-31
*/
.fbox {
  position: absolute;
  top: 0px;
  left: 0px;
}
.fbox-body {
  margin: 0 auto;
  width: 100%;
}
.fbox-body-quick {
  margin: 0 auto;
  width: 80%;
}
.fbox-menu {
  overflow: hidden;
  border-bottom: 1px solid #d9d9d9;
  background: #f2f2f2;
}
.fbox-menu-nav {
  padding: 8px 8px 0 8px;
  margin-left: 5px;
  margin-bottom: -5px;
  font-size: 18px;
}
.fbox-body-content {
  padding: 5px 0;
  background: rgba(255, 255, 255, 0.1);
}
.fbox-body-inner {
  padding: 5px 0;
}
.fbox-body-left {
  background: #fff;
}
.fbox-body-right {
  padding: 10px 10px;
}
.fbox-version {
  text-align: center;
  color: #666;
}
.fbox_Manual {
  position: absolute;
  top: 0px;
  left: 0px;
}
.fbox-img-mask {
  position: absolute;
  top: 0px;
  left: 0px;
}
.fbox-float {
  position: absolute;
  top: 0px;
  left: 0px;
}
.fbox-shadow {
  box-shadow: 2px 2px 10px #000;
}
/*
	tip box ------------------------------
*/
.tipbox {
  position: absolute;
  top: 0px;
  left: 0px;
  background: #000;
  padding: 10px;
  color: #fff;
}
.tipbox-alert {
  background: #f30;
  color: #fff;
}
/*
	smallFBox ----------------------------------
*/
.smallfbox {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 400px;
  height: auto;
}
/*
	webMask ----------------------------------
*/
.webMask {
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  width: 100%;
  height: 100%;
}
/*
	FBox template ----------------------------- 2018-11-02
*/
.FBox-header {
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
}
.FBox-header-gray {
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  background: rgba(211, 211, 211, 0.3);
  border-bottom: 1px solid rgba(211, 211, 211, 0.1);
}
.FBox-body {
  padding: 10px;
  margin: 20px auto;
}
.FBox-footer {
  background: rgba(211, 211, 211, 0.2);
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}
/*
    font CSS ----------------------------------------------- 2013-11-06
    日期：
    修改：
        2022-04-01
        2018-05-31
*/
body {
  font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1800 - 320)));
  height:100vh;
  height: calc(var(--vh, 1vh) * 100);
  display: flex;
  flex-direction: column;  
  padding-top: constant(safe-area-inset-top); /* iOS 11.0-iOS 11.1 */
  padding-top: env(safe-area-inset-top); /*iOS 11.2 */
  padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0-iOS 11.1 */
  padding-bottom: env(safe-area-inset-bottom); /*iOS 11.2 */  
}


h1.font-Title {
  font-size: calc(21px + (40 - 21) * ((100vw - 320px) / (1800 - 320)));
  /* font-size:14px; */
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 700;  
}

h4,h3,h2 {
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 700;  
}

.font-xs {
  font-size: 10px;
}
.font-sm {
  font-size: 12px;
}
.font-mini {
  font-size: 13px;
}
.font-normal {
  font-size: 14px;
}
.font {
  font-size: 16px;
}
.font-sd {
  font-size: 18px;
}
.font-md {
  font-size: 20px;
}
.font-big {
  font-size: 24px;
}
.font-lg {
  font-size: 26px;
}
.font-hg {
  font-size: 30px;
}
.font-xl {
  font-size: 32px;
}
.font-xxl {
  font-size: 42px;
}
/*Bold -----------------------------------*/
.font-bold {
  font-weight: bold;
}
.foint-thin {
  font-weight: lighter;
}
/*Position -------------------------------*/
.font-center {
  text-align: center;
}
.font-left {
  text-align: left;
}
.font-right {
  text-align: right;
}
.font-tip {
  background: #000;
  padding: 10px 10px;
  color: #fff;
}
/*font-Extra -----------------------------*/
.font-ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.font-underline {
  text-decoration: none;
  border-bottom: 1px solid #000;
  padding-bottom: 1px;
}
/*
    text CSS ----------------------------------------------- 2018-05-31
    日期：
    修改：2018-05-31
*/
.text-white {
  color: #fff;
}
.text-green {
  color: #78bd78;
}
.text-gray {
  color: #d3d3d3;
}
/*
	text-shadow
*/
.text-shadow-dark {
  text-shadow: 0 1px 0 #666;
}
.text-shadow-dark2 {
  text-shadow: 0 2px 0 #333;
}
.text-shadow-light {
  text-shadow: 0 1px 0 #fff;
}
.text-justify {
  text-align: justify;
  text-justify: inter-ideograph;
}
/* -------------------------------------------------------------------
    說明：margin and pad
    日期：
    修改：2018-05-31
*/
.h {
  margin: 8px 0;
}
.mr {
  margin: 10px 0;
}
.mr-10 {
  margin: 10px 0;
}
.mr-t {
  margin-top: 5px;
}
.mr-t-10 {
  margin-top: 10px;
}
.mr-t-15 {
  margin-top: 15px;
}
.mr-b {
  margin-bottom: 5px;
}
.mr-b-10 {
  margin-bottom: 10px;
}
.mr-b-15 {
  margin-bottom: 15px;
}
.mr-all {
  margin: 5px;
}
.mr-all-10 {
  margin: 10px;
}
/* 
	Pad ----------------------------------	
*/
.pad {
  padding: 5px 0;
}
.pad-10 {
  padding: 10px 0;
}
.pad-top {
  padding-top: 5px;
}
.pad-top-10 {
  padding-top: 10px;
}
.pad-bot {
  padding-bottom: 5px;
}
.pad-bot-10 {
  padding-bottom: 10px;
}
/*Print*/
.Print {
  width: 100%;
  height: auto;
  border-collapse: collapse;
}
.Print-border {
  border: 1px solid black;
}
.Print-border-gray {
  border: 0px solid #ccc;
}
.Print tr {
  border: 1px solid black;
}
.Print th {
  text-decoration: none;
  padding: 2px;
  border: 1px solid black;
}
.Print td {
  padding: 2px;
  border: 1px solid black;
}
.Print-pages {
  page-break-after: always;
}
.Print-gray {
  width: 100%;
  height: auto;
  border-collapse: collapse;
}
.Print-gray th {
  border-top-style: none;
  border-bottom-style: double;
  border: 1px solid #ddd;
  padding: 1px;
}
.Print-gray tr {
  border: 0px solid #ccc;
}
.Print-gray td {
  padding: 1px;
  border: 0px solid #ccc;
}
.Print-none-border {
  width: 100%;
  height: auto;
  border-collapse: collapse;
}
.Print-none-border th {
  border: 1px solid #ddd;
  padding: 1px;
}
.Print-none-border tr {
  border: 0px;
}
.Print-none-border td {
  padding: 1px;
  border: 1px solid #ddd;
}
.Print-none-border tfoot {
  padding: 1px;
}
/*
    custom CSS ----------------------------------------------- 2018-05-31
    日期：
    修改：2018-10-19
*/
.productBox {
  overflow: hidden;
}
.productLabel {
  font-size: 11px;
  display: block;
  z-index: 1;
  position: absolute;
  padding: 12px 15px 1px 15px;
  top: -8px;
  left: -19px;
  transform: rotate(-45deg);
  /*置左時使用*/
}
.productBox-1 {
  overflow: hidden;
  z-index: 2;
}
.productBox-1::after {
  content: "產品";
  opacity: 1;
  background: #0088cc;
  color: #fff;
  font-size: 11px;
  display: block;
  z-index: 1;
  position: absolute;
  padding: 12px 15px 1px 15px;
  top: -8px;
  left: -19px;
  transform: rotate(-45deg);
  /*置左時使用*/
}
.productBox-3 {
  overflow: hidden;
  z-index: 2;
}
.productBox-3::before {
  content: "代銷";
  background: #f30;
  color: #fff;
  font-size: 11px;
  display: block;
  z-index: 1;
  position: absolute;
  padding: 12px 15px 1px 15px;
  top: -8px;
  left: -19px;
  transform: rotate(-45deg);
  /*置左時使用*/
}
.d100 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
html {
  letter-spacing: 1px;
  font-family: "cwTeXYen", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  font-family: "cwTeXYen", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.div-100 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: flex;
}
p {
  margin: 2px auto 25px auto;
}
.debug {
  word-break: break-all;
  padding: 5px;
  border: 1px solid #ddd;
  background-color: #eee;
  border-radius: 5px;
}
.debug::before {
  content: "Debug";
  display: block;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
  margin-bottom: 5px;
  color: #f30;
}
/*
	HR -----------------------------------
	修改：2018-05-31
*/
.hr {
  margin: 1px auto 5px auto;
}
.hr-red {
  border-top: 1px solid #f30;
  color: #f30;
}
.hr-year {
  border-top: 1px solid #055688;
}
/*
	alert box ------------------------------
*/
.alert-msg {
  text-align: center;
  font-size: 38px;
  font-weight: bold;
}
.ajaxProcessBox {
  font-size: 16px;
  position: absolute;
  top: 0px;
  padding: 8px 15px;
}
.zipCode-num {
  width: 70px;
  text-align: center;
  margin: 0 0 0 2px;
  border-radius: 6px;
  border: 1px solid #808080;
}
/*HTML Animation --------------------------------- 2014-06-22*/
.blink {
  /*for FireFox*/
  animation-duration: 1.2s;
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-timing-function: steps(2, start);
  /*for Safari*/
  animation: blink 0.6s infinite linear alternate;
  -webkit-font-smoothing: antialiased;
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  50.01% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
.circle-orange {
  width: 68px;
  height: 68px;
  border-radius: 99em;
  border: 5px solid #ffa600;
}
/*
	head -----------------------------------------------
*/
.head {
  width: 100%;
  z-index: 5;
  background: #0775b9;
  padding: 5px 5px;
}
.headBG {
  background-size: cover;
}
.floatNav {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 5;
  padding: 15px auto;
  -webkit-box-shadow: 0px 0px 8px #333;
  box-shadow: 0px 0px 8px #333;
  cursor: pointer;
}
.NavBuffer {
  margin-top: 48px;
}
.corner {
  padding: 5px 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-bottomleft: 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border-radius: 5px;
}
/*
	opacity ----------------------------------------------- 
*/
.op {
  opacity: 0.5;
}
.op-1 {
  opacity: 0.1;
}
.op-3 {
  opacity: 0.3;
}
.op-6 {
  opacity: 0.6;
}
.op-9 {
  opacity: 0.9;
}
.break {
  word-break: break-all;
  word-wrap: break-word;
  text-align: justify;
  text-justify: inter-ideograph;
}
.hand {
  cursor: pointer;
}
.hand:hover {
  color: #055688;
}
/*
	box -----------------------------------------------  2018-10-27
*/
.box {
  position: relative;
  word-break: break-all;
}
.box-float {
  position: absolute;
  word-break: break-all;
}
.box-flex {
  all: reset;
  display: flex;
  flex-direction: row;
}
.box-flex-center {
  align-items: center;
}
.box-flex-bottom {
  align-items: baseline;
}
.box-flex-content-center {
  text-align: center;
  justify-content: center;
}
.box-flex-content-right {
  text-align: right;
}
.box-flex-content-left {
  text-align: left;
}
.box-flex-1 {
  flex: 1;
}
.box-flex-2 {
  flex: 2;
}
.box-flex-3 {
  flex: 3;
}
.box-flex-4 {
  flex: 4;
}
.box-flex-5 {
  flex: 5;
}
.box-flex-6 {
  flex: 6;
}
.box-flex-7 {
  flex: 7;
}
.box-flex-8 {
  flex: 8;
}
.box-flex-9 {
  flex: 9;
}
.box-circle {
  border-radius: 999em;
  all: reset;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: center;
  justify-content: center;
  font-size: 16px;
}
.box-circle-center {
  align-items: center;
}
.box-circle-bottom {
  align-items: baseline;
}
.box-circle-content-center {
  text-align: center;
  justify-content: center;
}
.box-circle-content-right {
  text-align: right;
}
.box-circle-content-left {
  text-align: left;
}
.box-circle-important {
  background: #f30;
  color: #fff;
}
.box-circle-important:hover {
  background: #9b0606;
  cursor: pointer;
}
.box-circle-blue {
  background: #08c;
  color: #fff;
}
.box-circle-green {
  background: #78bd78;
  color: #fff;
}
.box-circle-green:hover {
  background: #437743;
  cursor: pointer;
}
/*
	關於 list 區，當被 hover 時候的設定 ------------------ 2018-10-31
*/
.menuToolsBar {
  margin: 10px -5px -5px -5px;
  background: rgba(211, 211, 211, 0.8);
  padding: 8px 0px;
}
.thumbBox {
  border-top: 4px solid #eee;
  border-bottom: 4px solid #ddd;
  margin-bottom: 10px;
}
.thumbBox:hover {
  border-top-color: #08c;
  opacity: 1;
}
.thumbBox .menuToolsBar {
  margin: 10px -5px -5px -5px;
  background: rgba(211, 211, 211, 0.2);
  padding: 5px 0px;
}
.thumbBox .menuToolsBar:hover {
  background: rgba(211, 211, 211, 0.3);
}
.thumbBox-focused {
  border-top-color: #900;
  opacity: 0.3;
}
.thumbBox-focused:hover {
  border-top-color: #900;
}
.hoverTable {
  border-left: 4px solid #fff;
}
.hoverTable:hover {
  border-left-color: #08c;
  background: rgba(211, 211, 211, 0.2);
}
.hoverTable-focused {
  border-left: 4px solid #080;
}
.hoverTable-focused--danger {
  border-left: 4px solid #f30;
}
.hoverTable-focused--disabled {
  border-left: 4px solid #900;
  opacity: 0.7;
}
.del {
  color: #999;
}
/*
	searchTab 公用搜尋區 ------------------------------- 2018-11-05
*/
.searchTabs {
  padding: 5px 0;
  border-bottom: 4px solid rgba(255, 255, 255, 0);
}
.searchTabs:hover {
  border-bottom: 4px solid #080;
  background: rgba(211, 211, 211, 0.2);
  cursor: pointer;
}
.searchTabs-focused {
  padding: 5px 0;
  font-weight: bold;
  border-bottom: 4px solid #f90;
  background: rgba(241, 213, 118, 0.2);
}
.menuTabs {
  all: reset;
  padding: 10px 0;
  border-bottom: 4px solid rgba(211, 211, 211, 0.2);
}
.menuTabs:hover {
  border-bottom: 4px solid #08c;
  background: rgba(211, 211, 211, 0.2);
  cursor: pointer;
  color: #08c;
}
.menuTabs-focused {
  padding: 10px 0;
  font-weight: bold;
  border-bottom: 4px solid #f90;
  background: rgba(241, 213, 118, 0.2);
}
/*
	goTop ------------------------------------------------
*/
#goTopBtn {
  position: fixed;
  right: 10px;
  bottom: 15px;
  z-index: 5;
  cursor: pointer;
  color: #FFE20A;
}
#goTopBtn:hover {
  color: #a39000;
}

.toolbar-DT{
  float: left;
}

/*
  custome -----------------------------------------------
*/
blockquote {
  font-style: italic;
  font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1800 - 320)));
  font-weight: bold;
  color:rgba(77,20,15,1);
}

.nav-sub-font {
  font-size: calc(13px + (16 - 13) * ((100vw - 320px) / (1800 - 320)));
}

.nav-bg-transparent {
  background: rgba(255,255,255,0);
}

.nav-bg-transparent:hover {
  background: rgba(255,255,255,0.5);
}

.nav-bg-white {
  background: rgba(255,255,255,1);
}

.btn-pufa {
  background: rgba(77,20,15,1);
  color: #fff;
}

.btn-pufa-light {
  background: rgba(133,36,30,1);
  color: #fff;
}

.bg-pufa{
  background: rgba(77,20,15,1);
}

.border-pufa{
  border: 1px solid rgba(77,20,15,1);
}

.bg-pufa-lighter{
  background: rgba(133,36,30,1);
}

.border-pufa-lighter{
  border: 1px solid rgba(133,36,30,1);
}

.bg-pufa-dark{
  background: rgba(49,13,10,1);
}

.bg-pufa-dark-op8{
  background: rgba(49,13,10,0.8);
}

.bg-karasumi {
  background: rgba(219,214,203,1);
}

.bg-karasumi-red {
  background: rgba(206,56,39,1);
}

.bg-visit {
  background: rgb(206, 92, 39);
}

.font-overflow{
    width: auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;    
}

.text-pufa {
  color:rgba(77,20,15,1);
}

.text-pufa-dark {
  color: rgba(49,13,10,1);
}

.text-pufa-light {
  color: rgba(133,36,30,1);
}


.show-content-box h1,h2,h3,h4,h5,h6 {
  /* font-weight: bold; */
  color: rgba(49,13,10,1);
  padding-bottom:10px;
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 700;    
}

.show-content-box h1 {
  font-size: 32px; 
}

.show-content-box h2 {
  font-size: 28px;
}

.show-content-box h3 {
  /* font-size: 24px; */
  font-size: calc(20px + (24 - 20) * ((100vw - 320px) / (1800 - 320)));
}

.show-content-box {
  word-break: break-all;
  text-align: justify;
}

.show-content-box table {
  border:none;
  border-collapse: collapse;
  border-spacing: 0px;
}

.FAQ-content-box li {
  margin-bottom:15px;
}

.bottom-box li {
  list-style: none;
}


.bottom-nav div{
  margin-bottom:5px;
}

a.skip-main {
  left:-999px;
  position:absolute;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  z-index:-99999;
}
a.skip-main:focus, a.skip-main:active {
  left: auto;
  top: auto;
  width: 30%;
  height: auto;
  overflow:auto;
  display: block;
  z-index:99999;
}

/* 內文區 mobile & web 轉換用 ---------------------- 2020-08-31*/
.content-photo-right {
  float: right;
  margin:2px 0px 2px 5px;
  width:auto;
  height:200px;
}

.img-right {
  float: right;
  padding-left:20px;
  padding-right:0px;
  margin-bottom:20px;
  display: block;
}

.img-left {
  float: left;
  padding-right:20px;
  padding-left:0px;
  margin-bottom:20px;
  display: block;
}

/* table 文字 */
table {
  font-size: calc(13px + (18 - 13) * ((100vw - 320px) / (1800 - 320)));
}

.money {
  background: rgb(11, 88, 107);
  color: #fff;
  padding:1px;
  border-radius: 5px;
  text-align:center;
}

/* Emmy 專區 -------------------------- 2022-11-20 */
.public-list-content-box {
  height: 150px;
}

.public-list-photo {
  width:auto;
  height:320px ; 
}

.HashTag {
  cursor: pointer;
}