@charset "utf-8";
/* CSS Document */
/*// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }


// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC|Source+Code+Pro&display=swap');
.container {
   transition: all 0.9s ease 0s;
   -webkit-transition: all 0.9s ease 0s;
   -moz-transition: all 0.9s ease 0s;
   -o-transition: all 0.9s ease 0s;
   -ms-transition: all 0.9s ease 0s;
}
/*去除按鈕框線*/
.button:active, button:active, .button:focus, button:focus, .button:hover, button:hover {
   outline: none !important;
}
html {
   font-size: 100%;
}
body {
   font-family: "Source Code Pro", "蘋果儷中黑", "Apple LiGothic Medium",'Noto Sans TC', "Microsoft JhengHei", "微軟正黑體", sans-serif;
   font-size: 1rem;
   line-height: 1.8;
   letter-spacing: 1.2;
   /*   overflow-x: hidden;
*/ color: #4b453b;
}
/*全選底色*/ ::selection {
   background: #e83428;
   color: #FFF;
}
main {
   position: relative;
   margin-bottom: 100px;
   overflow: hidden;
}
main p {
   text-align: justify;
}
hr {
   margin-top: 1.5rem;
   margin-bottom: 1.5rem;
}
.carousel-indicators {
   bottom: -20px;
}
.logo {
   margin-bottom: 30px;
}
header {
   overflow: hidden;
}
@media (max-width: 991.98px) {
   header {
      overflow: visible;
   }
}
.top-menu {
   background: #e83428;
   width: 100vw;
}
.fb-icon {
   font-size: 30px;
   padding-top: 15px;
}
a .fb-icon {
   color: #FFF;
}
/*手機選單*/
@media (max-width: 991.98px) {
   /*手機固定上選單*/
   .sticky-top-moblie {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 1020;
   }
   .top-menu {
      background: #e83428;
      height: 100vh;
   }
   .logo {
      max-width: 140px;
      margin-bottom: 10px;
   }
}
/*理念*/
.index-about-bg {
   background: url("../images/aboutus-bg.jpg");
   height: 670px;
   background-position: 35% 0;
   background-repeat: no-repeat;
}
.index-about h3 {
   color: #231815;
   font-weight: bold;
   font-size: 2.5em;
}
.index-about p {
   color: #4b453b;
   font-size: 1.125em;
}
.point-3 {
   word-break: keep-all;
   display: inline-block;
}
@media (max-width: 991px) {
   .index-about h3 {
      color: #231815;
      font-weight: bold;
      font-size: 1.875em;
   }
   .index-about p {
      color:#4b453b;
      font-size: 1.125em;
   }
}
@media (min-width: 576px) and (max-width: 767.98px) {
   .index-about-bg {
      background: url(../images/aboutus-bg.jpg);
      background-repeat: no-repeat;
      background-size: 180%;
      height: auto;
   }
   .index-about-text {
      padding: 28em 0 4em 0;
   }
}
@media (max-width: 575.98px) {
   .index-about-bg {
      background: url(../images/aboutus-bg.jpg);
      background-repeat: no-repeat;
      background-size: 100%;
      height: auto;
   }
   .index-about-text {
      padding: 10em 0 4em 0;
   }
}
/*回到最上*/
a.to-top i {
   width: 50px;
   height: 50px;
   background: #FFF;
   color: #E83428;
   border: solid 1px #E83428;
   align-items: center;
   justify-content: center;
   display: flex;
   text-decoration: none;
   transition: all 0.9s ease 0s;
   border-radius: 0%;
}
a.to-top i:hover {
   background: #E83428;
   color: #FFF;
   text-decoration: none;
   border-radius: 50%;
}
/*版權宣告*/
footer {
   padding: 1em 0;
   position: relative;
}
footer::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 1px;
   background: linear-gradient(to right, rgba(221, 221, 221, 0) 0%, rgba(221, 221, 221, 0.13) 1%, rgba(221, 221, 221, 1) 10%, rgba(221, 221, 221, 1) 90%, rgba(221, 221, 221, 0) 100%);
}
footer p {
   font-size: 0.875em;
   margin-bottom: 0;
   line-height: 1.4;
}
/*------------ 漸層按鈕 ------------*/
.btn-hover {
   color: #fff;
   background-size: 300% 100%;
   border-radius: 35px;
   transition: all .4s ease-in-out;
   padding: 5px 20px;
}
.btn-hover:hover {
   background-position: 100% 0;
   color: #fff;
}
.btn-hover:focus {
   outline: none;
   color: #fff;
}
.btn-hover.color-red {
   background-image: linear-gradient(to right, #e83428, #ed723c, #e83428, #ed723c);
}
/*首頁產品*/
.c-ed723c {
   color: #ed723c;
   font-weight: bold;
}
.c-01a24e {
   color: #01a24e;
   font-weight: bold;
}
.c-0095a8 {
   color: #0095a8;
   font-weight: bold;
}
.gray {
   color: #d5d1d1;
   position: relative;
}
.gray:before {
   content: '';
   border-bottom: solid 7px #d5d1d1;
   position: absolute;
   top: 11px;
   width: calc(100% - 220px);
   right: 0;
}
.gray-2 {
   color: #d5d1d1;
   position: relative;
}
.gray-2:before {
   content: '';
   border-bottom: solid 7px #d5d1d1;
   position: absolute;
   top: 11px;
   width: calc(100% - 180px);
   right: 0;
}
.gray-3 {
   color: #d5d1d1;
   position: relative;
}
.gray-3:before {
   content: '';
   border-bottom: solid 7px #d5d1d1;
   position: absolute;
   top: 11px;
   width: calc(100% - 280px);
   right: 0;
}
.br-gray {
   font-weight: 300;
   border: solid #4b453b 1px;
   border-radius: 30px;
   padding: 2px 10px;
   word-break: keep-all;
   margin: 5px 0;
}
.product-box {
   padding-top: 5%;
   padding-bottom: 250px;
}
/*.product-box {
   padding-top: 15%;
    padding-bottom: 250px;
}
.index-product-img {
   position: absolute;
   z-index: 1;
   width: 75%;
   margin-left: 11%;
   bottom: 60%;
}
.circle-skincare {
   position: relative;
   border-radius: 50%;
   width: 100%;
   height: auto;
   padding-top: 100%;
   background: rgba(234, 114, 60, .2);
}
.circle-gutcare {
   position: relative;
   border-radius: 50%;
   width: 100%;
   height: auto;
   padding-top: 100%;
   background: rgba(1, 162, 78, .2);
}
.circle-jointcare {
   position: relative;
   border-radius: 50%;
   width: 100%;
   height: auto;
   padding-top: 100%;
   background: rgba(0, 149, 168, .2);
}*/
.index-product-text {
   margin-top: 50px;
}
@media (min-width: 1199.98px) {
   .product-box {
      background: url("../images/pr-bg.jpg") no-repeat center center;
   }
   /*.bg-left img{
    position: fixed;
    width: 338px;
    height: auto;
    left: 0;
    top: 285px;
    z-index: -1;
}
.bg-right img{
    position: fixed;
    width: 201px;
    height: auto;
    right: 0;
    top: 100px;
    z-index: -1;
}*/
}
@media (max-width: 767.98px) {
   .product-img {
      width: 70%;
   }
   .index-product-text {
      margin-top: 20px;
   }
   .product-box {
      padding-bottom: 100px;
   }
}
.c-e83428 {
   color: #e83428;
}
.aboutus h3 {
   font-weight: bold;
   font-size: 1.563em;
}
/*路徑背景色*/
.breadcrumb {
   background-color: transparent;
}
.breadcrumb-item a {
   color: #4b453b;
}
.breadcrumb-item.active {
   color: #e83428;
}
.breadcrumb {
   margin-bottom: 70px;
}
/*主標區*/
.ibg {
   color: #FFF;
   background: url("../images/inner-bn.jpg");
   background-position: top center;
   background-size: cover;
   height: 250px;
   justify-content: center;
   align-items: center;
   position: relative;
   overflow: hidden;
}
.inner-bn-cd {
   position: absolute;
   right: 0;
   bottom: 0;
   z-index: 1;
   width: 35vw;
}
.inner-title {
   z-index: 2;
}
.inner-title h2 {
   margin: 0;
   font-size: 3.5em;
   font-weight: 600;
   letter-spacing: 2px;
   text-align: center;
   line-height: 1;
   margin-bottom: 40px;
}
.inner-title h3 {
   margin: 0;
   font-size: 2.250em;
   font-weight: 600;
   letter-spacing: 2px;
   text-align: center;
   line-height: 1em;
   position: relative;
}
.inner-title h3:before {
   content: '';
   border-bottom: solid 5px #FFF;
   width: 50px;
   position: absolute;
   left: calc(50% - 28px);
   top: -27px;
}
@media (max-width: 991.98px) {
   .ibg {
      height: 130px;
   }
   .inner-title h2 {
      font-size: 2.5em;
      line-height: 1em;
      margin-bottom: 25px;
   }
   .inner-title h3 {
      font-size: 1.5em;
      line-height: 1em;
   }
}
/*關於我們*/
.about-icon-bg {
   background: url("../images/about-bg-black.jpg") center center;
   height: 650px;
}
@media (max-width: 991.98px) {
   .about-icon-bg {
      background: url("../images/about-bg-black.jpg") center center;
      height: 250px;
   }
}
/*產品*/
.product_point {
   padding-bottom: 50px;
}
.inner-product-text .bg-ed723c, .inner-product-text .bg-01a24e, .inner-product-text .bg-0095a8 {
   border-radius: 40px 0 0 40px;
}
.inner-product-text h2 {
   font-size: 1.9em;
}
.care-bg-l {
   position: absolute;
   top: 0;
   left: 0;
   width: 42vw;
   z-index: -9999;
}
.care-bg-r {
   position: absolute;
   top: 550px;
   right: 0;
   width: 6vw;
}
@media (min-width: 1200px) {
   .feature-bg {
      background: url("../images/featureofproduct.jpg") no-repeat 30% bottom #f8f8f8;
      min-height: 600px;
   }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
   .feature-bg {
      background: url("../images/featureofproduct.jpg") no-repeat left bottom #f8f8f8;
      min-height: 400px;
      background-size: contain;
   }
}
@media (min-width: 768px) and (max-width: 991.98px) {
   .feature-bg {
      background: url(../images/featureofproduct.jpg) no-repeat left bottom #f8f8f8;
      height: auto;
      padding-bottom: 420px;
      background-size: 160%;
   }
   .feature-content {
      padding-top: 50px;
   }
   .skincare-bg-r {
      top: 550px;
      width: 10vw;
   }
}
@media (min-width: 576px) and (max-width: 767.98px) {
   .feature-bg {
      background: url(../images/featureofproduct.jpg) no-repeat left bottom #f8f8f8;
      height: auto;
      padding-bottom: 320px;
      background-size: 160%;
   }
   .feature-content {
      padding-top: 50px;
   }
   .skincare-bg-r {
      top: 650px;
      width: 10vw;
   }
}
@media (max-width: 575.98px) {
   .feature-bg {
      background: url(../images/featureofproduct.jpg) no-repeat left bottom #f8f8f8;
      height: auto;
      padding-bottom: 250px;
      background-size: 200%;
   }
   .feature-content {
      padding-top: 50px;
   }
   .skincare-bg-r {
      top: 550px;
      width: 15vw;
   }
}
.title-3 {
   font-size: 2.5em;
}
.howtouse {
   padding-bottom: 100px;
}
.howtouse .bg-ed723c, .howtouse .bg-01a24e, .howtouse .bg-0095a8 {
   color: #FFF;
}
.ingredient {
   padding: 100px 0;
   letter-spacing: 1px;
   position: relative;
   background: url("../images/ingredient-bg.png") bottom right no-repeat;
}
/*skin*/
.bg-ed723c {
   background-color: #ed723c;
}
.bg-fce6de {
   background: #fce6de;
}
.bb_e44800 {
   border-bottom: solid 10px #e44800;
}
.border-ed723c {
   border-radius: 50px;
   border: solid 2px #ed723c;
}
/*gut*/
.bg-01a24e {
   background-color: #01a24e;
}
.bg-d6f0e3 {
   background-color: #d6f0e3;
}
.bb_006e3c {
   border-bottom: solid 10px #006e3c;
}
.border-01a24e {
   border-radius: 50px;
   border: solid 2px #01a24e;
}
/*joint*/
.bg-0095a8 {
   background-color: #0095a8;
}
.bg-d0e8eb {
   background-color: #d0e8eb;
}
.bb_005c68 {
   border-bottom: solid 10px #005c68;
}
.border-0095a8 {
   border-radius: 50px;
   border: solid 2px #0095a8;
}
.ingredient-cd {
   position: absolute;
   bottom: 0;
   right: 0;
}
.ingredient_data {
   display: flex;
   color: #FFF;
   border-bottom: solid rgba(255, 255, 255, .5) 1px;
   margin-bottom: 0;
   padding: 15px;
}
.ingredient_data ul {
   margin: 0;
   padding-left: 0;
   list-style: none;
}
.ingredient_data ol {
   margin: 0;
   padding-left: 30px;
}
.ingredient_ttlSub {
   width: 110px;
   font-weight: bold;
   margin-bottom: 0;
}
.ingredient_txtSub {
   width: calc(100% - 110px);
   margin-bottom: 0;
}
.news-bg {
   background: url("../images/news-bg.png")top center no-repeat;
   position: relative;
}
.saleschannel-bg {
   background: url("../images/saleschannel-bg.png")top center no-repeat;
   position: relative;
   background-size: contain;
}
.news, .saleschannel ,.news-inner {
   margin-bottom: 100px;
}
.date {
   color: #aaaaaa;
   font-size: 0.875em;
   margin-bottom: 0;
}
.news a{
    text-decoration: none;
}
.news a p{
    text-decoration: none;
    color: #4b453b;
}
.news h5 ,.news-inner h5 {
   font-size: 1.563em;
   font-weight: bold;
   color: #e83428;
}
.news-box, .saleschannel-box {
   box-shadow: 0px 0px 4px 1px #eeeeee;
   margin-bottom: 40px;
   background: #FFF;
}

.news-box:hover{
   box-shadow: 0px 0px 8px 1px #e1e1e1;
   margin-bottom: 40px;
   background: #FFF;
}


.news-text, .saleschannel-text {
   padding: 20px;
   background: #FFF;
}
.news-bg-r {
   position: absolute;
   right: 1%;
   top: 250px;
   width: 12%;
}
.saleschannel-bg-l {
   position: absolute;
   left: 1%;
   top: 20px;
   width: 12%;
}

.news-inner img{
      border:  solid #eeeeee 1px;
   }
.dotted-red{
    border-bottom: dashed 2px #e83428;
    margin-bottom: 50px;
}
.am1 {
   animation: am1 4s ease infinite;
}
@keyframes am1 {
   0% {
      transform: translateY(0);
   }
   50% {
      transform: translateY(20px);
   }
   100% {
      transform: translateY(0);
   }
}
.contact {
   padding-bottom: 8%;
}

@media (min-width: 768px) and (max-width: 991.98px) {
.contact {
   padding-bottom: 460px;
}
  }
    
@media (max-width: 767.98px) {
.contact {
   padding-bottom: 300px;
}
}



.contact p, .contact h4 {
   color: #FFF;
   margin-bottom: 0;
}
.contact img {
   margin-bottom: 50px;
}
.line-fff {
   border-bottom: solid 1px #FFF;
   padding-top: 30px;
   margin-bottom: 30px;
}

@media (min-width:992px) {
.contactus-bg-l {
   position: absolute;
/*   bottom: -25%;
*/   left:-1%;
   width: 26vw;
    top: 22%;
}
.contactus-bg-r {
   position: absolute;
/*   bottom: -17%;
*/   right: -1%;
   width: 32vw;
     top: -1%;
}
}


@media (min-width: 768px) and (max-width: 991.98px) {
 .contactus-bg-l {
    position: absolute;
    left: 0;
    width: 40vw;
    bottom: -6%;
}
.contactus-bg-r {
    position: absolute;
    right: 0;
    width: 50vw;
    bottom: -4%;
}
}
@media (max-width: 767.98px) {
 .contactus-bg-l {
    position: absolute;
    left: 0;
    width: 50vw;
    bottom: -70px;
}
.contactus-bg-r {
    position: absolute;
    right: 0;
    width: 60vw;
    bottom: -70px;
}
}



/*適用對象*/
.suitable {
   font-size: 1.125em;
   display: inline-flex;
   margin-bottom: 20px;
   color: #333;
}
.suitable img {
   width: 25px;
}
@media (min-width: 992px) {
   .suitable {
      font-size: 1.25em;
      margin-bottom: 0px;
      color: #4b453b ;
   }
   .suitable img {
      width: 35px;
   }
}


.howtouse .bg-005EAD, .howtouse .bg-00A196, .howtouse .bg-133180, .howtouse .bg-1592CC, .howtouse .bg-874590, .howtouse .bg-f49d17, .howtouse.bg-b4bd00, .howtouse .bg-874490, .howtouse .bg-d6607f, .howtouse .bg-da0f2b, .howtouse .bg-07417a, .howtouse .bg-b2931a, .howtouse .bg-980787 {
    color: #FFF;
}
.inner-product-text .bg-005EAD, .inner-product-text .bg-00A196, .inner-product-text .bg-133180, .inner-product-text .bg-1592CC, .inner-product-text .bg-874590, .inner-product-text .bg-f49d17, .inner-product-text .bg-b4bd00, .inner-product-text .bg-874490, .inner-product-text .bg-d6607f, .inner-product-text .bg-da0f2b, .inner-product-text .bg-07417a, .inner-product-text .bg-b2931a, .inner-product-text .bg-980787 {
    border-radius: 40px 0 0 40px;
}

/*eye*/
.c-1592CC {
   color: #1592CC;
   font-weight: bold;
}
.bg-1592CC {
   background-color: #1592CC;
}
.bg-DBEFFA {
   background: #DBEFFA;
}
.bb_5f8fc7 {
   border-bottom: solid 10px #5f8fc7;
}

.border-1592CC {
   border-radius: 50px;
   border: solid 2px #1592CC;
}


/*anti*/
.c-874590 {
   color: #874590;
   font-weight: bold;
}
.bg-874590 {
   background-color: #874590;
}
.bg-ece1ed {
   background: #ece1ed;
}
.bb_68336f{
   border-bottom: solid 10px #68336f;
}
.border-874590 {
   border-radius: 50px;
   border: solid 2px #874590;
}


/*urinary*/
.c-b4bd00 {
   color: #b4bd00;
   font-weight: bold;
}
.bg-b4bd00 {
   background-color: #b4bd00;
}
.bg-f3f4d6 {
   background: #f3f4d6;
}
.bb_9aa01c {
   border-bottom: solid 10px #9aa01c;
}
.border-b4bd00 {
   border-radius: 50px;
   border: solid 2px #b4bd00;
}
/*aging*/
.c-874490 {
   color: #874490;
   font-weight: bold;
}
.bg-874490 {
   background-color: #874490;
}
.bg-dbc6de {
   background: #dbc6de;
}
.bb_ede2ef {
   border-bottom: solid 10px #ede2ef;
}
.border-874490 {
   border-radius: 50px;
   border: solid 2px #874490;
}

/*lysine*/
.c-d6607f {
   color: #d6607f;
   font-weight: bold;
}
.bg-d6607f {
   background-color: #d6607f;
}
.bg-fae6eb {
   background: #fae6eb;
}
.bb_c45878 {
   border-bottom: solid 10px #c45878;
}
.border-d6607f {
   border-radius: 50px;
   border: solid 2px #d6607f;
}
/*taurine*/
.c-da0f2b {
   color: #da0f2b;
   font-weight: bold;
}
.bg-da0f2b {
   background-color: #da0f2b;
}
.bg-f9d8dd {
   background: #f9d8dd;
}
.bb_c4010f {
   border-bottom: solid 10px #c4010f;
}
.border-da0f2b{
   border-radius: 50px;
   border: solid 2px #da0f2b;
}
/*hair*/
.c-f49d17 {
   color: #f49d17;
   font-weight: bold;
}
.bg-f49d17 {
   background-color: #f49d17;
}
.bg-fef1de {
   background: #fef1de;
}
.bb_e49520 {
   border-bottom: solid 10px #e49520;
}
.border-f49d17 {
   border-radius: 50px;
   border: solid 2px #f49d17;
}

/*fucoidan*/
.c-07417a {
   color: #07417a;
   font-weight: bold;
}
.bg-07417a {
   background-color: #07417a;
}
.bg-d7e0ea {
   background: #d7e0ea;
}
.bb_022f5c {
   border-bottom: solid 10px #022f5c;
}
.border-07417a {
   border-radius: 50px;
   border: solid 2px #07417a;
}
/*PROBIOTIC*/
.c-b2931a {
   color: #b2931a;
   font-weight: bold;
}
.bg-b2931a {
   background-color: #b2931a;
}
.bg-f3eeda {
   background: #f3eeda;
}
.bb_856e14 {
   border-bottom: solid 10px #856e14;
}
.border-b2931a {
   border-radius: 50px;
   border: solid 2px #b2931a;
}

/*fucoidan-skin*/
.c-980787 {
   color: #980787;
   font-weight: bold;
}
.bg-980787 {
   background-color: #980787;
}
.bg-f9e5f5 {
   background: #f9e5f5;
}
.bb_7A128C {
   border-bottom: solid 10px #7A128C;
}
.border-980787 {
   border-radius: 50px;
   border: solid 2px #980787;
}


/*DENTAL CARE D*/
.c-005EAD {
    color: #005EAD;
    font-weight: bold;
}

.bg-005EAD {
    background-color: #005EAD;
}

.bg-86B3E0 {
    background: #86B3E0;
}

.bb_7CA9D6 {
    border-bottom: solid 10px #7CA9D6;
}

.border-005EAD {
    border-radius: 50px;
    border: solid 2px #005EAD;
}


/*DENTAL CARE C*/
.c-00A196 {
    color: #00A196;
    font-weight: bold;
}

.bg-00A196 {
    background-color: #00A196;
}

.bg-49BCBD {
    background: #49BCBD;
}

.bb_3FB2B3 {
    border-bottom: solid 10px #3FB2B3;
}

.border-00A196 {
    border-radius: 50px;
    border: solid 2px #00A196;
}




.c-133180 {
    color: #133180;
    font-weight: bold;
}

.bg-133180 {
    background-color: #133180;
}

.bg-d1cbe5 {
    background: #d1cbe5;
}
.bb_e7e4f2 {
    border-bottom: solid 10px #e7e4f2;
}

.border-133180 {
    border-radius: 50px;
    border: solid 2px #133180;
}