@charset "utf-8";
/* CSS Document */

@import url("reset.css");
@import url("/css/font-awesome.css");
@import url("/css/animate.css");
@import url("/css/bootstrap4-Mfix.css");
@import url("/css/hover.css");
@import url("https://fonts.googleapis.com/earlyaccess/notosanstc.css");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

html, body { width:100%; height: auto;overflow-X:hidden; }
body { font-size:100%;}
*{transition:all .3s; -webkit-transition:all .3s;}

/*:before{ content:"\f146";font-family: 'FontAwesome'; }*/

.btnTop{ background: #CCC \9;background:rgba(0,0,0,.2); border-radius:50%; width:50px; height:50px; position: fixed;right:15px; bottom:15px;cursor:pointer; z-index:99; color:#FFF; text-align:center; font-family:Arial, Helvetica, sans-serif;	text-transform:uppercase; font-size:13px ; letter-spacing:1px; display: none  ; z-index:999;}
.btnTop:before {    content: "\f106";    font-family: 'FontAwesome';    font-size: 20px;    color: #FFF;    display: block;    width: 100%;    height: 25px;    padding-top: 0;}
.btnTop:hover{background:rgba(0,0,0,.4);}

.img-response{ max-width:100%; height:auto;}

/*------------item-inline-block------------*/
.item-inline-block{ letter-spacing:-5px;}
.item-inline-block > *{display: inline-block !important; letter-spacing:1px;vertical-align: top;}

/*------------item-table-cell------------*/
.item-table-cell{ display:table;}
.item-table-cell > *{display: table-cell !important; vertical-align: top;}


/*------------item-flex------------*/
.item-flex{ display:flex !important;display:-webkit-flex !important;flex-flow: row wrap}
.item-flex > *{flex:1;-webkit-flex:1 }


.empty {    display: inline-block;}


@media screen and (max-width: 640px) {
	
.vertical-xs{ display:block !important;	}
.vertical-xs  > *{  display:block !important; width:100% !important ;float:none !important; }
.empty {    display: block;    height: 1px;}
	
}



.show{ display:block !important;}
.hide{ display:none !important;}
.space-br {    display: inline-block;}

@media screen and (max-width: 640px) {	

.hide-xs{ display:none !important; }
.show-xs{ display:block !important;}
.space-br {    display: block;    line-height: 0;}
	
}





.wrap{width:100%;height:auto;position:relative; font-family:'Noto Sans TC',"微軟正黑體",Microsoft Yahei;line-height:1.6; background:#fff;}
		



/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ 版頭 ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/

 .header {width:100%; position:relative; height: auto; overflow:hidden;}
 .header span img{ width:100%; height:auto;}

 .header .center{width:100%;max-width:1000px;position:relative; margin:0 auto; z-index:1;}
 .header .center img{ width:100%; height:auto;}

.header-text {
    padding-left: 115px !important;
    padding-top: 60px !important;
}
 
 .header .logo{ position:absolute; left:0; top:2px; z-index:6; }
/* .header .logo img{width:100%; height:auto;}*/


/*白色LOGO+底色*/
.header .logo {
    background-color: #e66d84;
    position: absolute;
    top: 0;
    width: 100%;
}
.logo a {
    display: inline-block;
}
.logo img {
    width: 250px;
    height: auto;
    padding: 10px;
}

 :root{
      --pink:#e66d84;
      --pink-deep:#dc556f;
     --pink-old:#de7281;
      --pink-soft:#fff0f3;
      --pink-bg:#ffe3e7;
      --text:#34343f;
      --muted:#74747d;
      --line:#f6c4cd;
      --shadow:0 18px 45px rgba(224,96,119,.16);
    }
    body{font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;color:var(--text);background:#fff;}
    .topbar{height:58px;background:var(--pink);color:white;font-size:26px;font-weight:800;display:flex;align-items:center;}
   .hero {
    background: url(../images/header-img.png);
    min-height: 666px;
    background-position: center;
    overflow: hidden;
    position: relative;
}
   .hero h1 {
    font-size: 56px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .03em;
    color: #404040;
}
  .hero .lead {
    font-size: 38px;
    font-weight: 500;
    line-height: 1.6;
    color: #404040;
    letter-spacing: 2px;
}
   h1 .highlight {
    font-size: 56px;
}
.highlight {
    color: var(--pink);
    font-size: 22px;
}
    .btn-main{background:var(--pink);border:0;color:#fff;border-radius:9px;font-size:19px;font-weight:800;padding:13px 39px;box-shadow:0 10px 24px rgba(220,85,111,.2);}
    .btn-main:hover{background:var(--pink-deep);color:#fff;}
    .hero-art{position:relative;min-height:430px;}
    .blob{position:absolute;right:0;top:50px;width:500px;height:380px;border-radius:50%;background:rgba(255,255,255,.72);}
    .product-row{position:absolute;right:20px;bottom:35px;display:flex;align-items:flex-end;gap:22px;}
    .product{background:linear-gradient(#fff,#ffd9df);border:1px solid rgba(218,112,132,.25);box-shadow:var(--shadow);}
    .dropper{width:78px;height:210px;border-radius:38px 38px 18px 18px;}.tube{width:94px;height:300px;border-radius:46px 46px 20px 20px;}.bottle{width:112px;height:340px;border-radius:58px 58px 20px 20px;}.jar{width:170px;height:108px;border-radius:22px 22px 45px 45px;}
    .leaf{position:absolute;border-radius:70% 0 70% 0;background:rgba(238,124,143,.24);transform:rotate(-35deg)}
    .section{padding:78px 0;position:relative;overflow:hidden;}
    .section-soft{background:#fff1f3;}
    .section-title{color:var(--pink);font-size:31px;font-weight:900;letter-spacing:.06em;text-align:center;margin-bottom:15px;}
    .section-sub{color:var(--muted);font-size:18px;font-weight:600;text-align:center;letter-spacing:.08em;margin-bottom:52px;}
    .mock-card{background:#fff;border-radius:18px;box-shadow:var(--shadow);border:1px solid #ffe0e5;min-height:300px;padding:30px;position:relative;overflow:hidden;} 
    .screen-placeholder {
    height: 250px;
    /* border-radius: 18px; */
    /* background: linear-gradient(135deg,#fff 0%,#ffe6eb 100%); */
    /* border: 1px dashed var(--line); */
    display: flex;
    align-items: center;
    justify-content: center;
    /* color: var(--pink); */
    /* font-weight: 800; */
}
    .problem-list{display:grid;gap:23px;}
    .problem-item {
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 12px 34px rgba(220,85,111,.12);
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 17px;
    font-size: 18px;
    color: #575765;
}
    .circle-icon{width:52px;height:52px;border-radius:50%;background:#ff9aac;color:white;display:grid;place-items:center;font-size:24px;flex:0 0 52px;box-shadow:0 8px 18px rgba(220,85,111,.2);}
    .feature-wrap{max-width:1200px;margin:auto;}
 .feature-panel {
    background: #fff;
    border-radius: 17px;
    box-shadow: var(--shadow);
    padding: 46px 0 46px 38px;
    min-height: 430px;
    max-height: 430px;
    border: 1px solid #ffe0e5;
    align-items: center;
    display: flex;
}
    .feature-visual {
    display: grid;
    place-items: end;
    margin-left: -10px;
}
.slide-title{
     font-size:36px;font-weight:900;line-height:1.4;
}
.slide-title .highlight {
    font-size: 36px;
}
    .feature-menu{display:grid;gap:18px;}
    .feature-tab {
    border: 1px solid #ffe0e5;
    background: #fff;
    border-radius: 13px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 17px;
    font-size: 18px;
    color: #555563;
    box-shadow: 0 8px 22px rgba(220,85,111,.08);
    cursor: pointer;
    transition: .2s;
}
    .feature-tab.active{border-color:var(--pink);color:var(--pink);background:#fff8fa;transform:translateX(-6px);}
    .value-card{background:#fff;border-radius:13px;border:1px solid #ffe0e5;box-shadow:var(--shadow);padding:35px 28px;text-align:center;height:100%;}
    .value-icon {
    display: grid;
    place-items: center;
    margin: 0 auto 22px;
}
    .value-card h3{color:var(--pink-deep);font-size:30px;font-weight:900;margin-bottom:18px;}
.value-card h3{
    color:var(--pink-deep);
    font-size:30px;
    font-weight:900;
    margin-bottom:35px;
    position:relative;
}

.value-card h3::after{
    content:"";
    width:40px;
    height:3px;
    background:#f4b7c4;
    border-radius:30px;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:-18px;
}
.value-top {
    margin-bottom: 25px;
    position: relative;
    font-size: 18px !important;
    letter-spacing: 2px;
    color: #333 !important;
    font-weight: bold;
}

.value-top::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -14px;
    border-bottom: 2px dotted #f8d7dd;
}
.value-bottom {
    margin-top: 30px;
}
   .value-card p {
    color: #565664;
    /* font-weight: 600; */
    line-height: 1.6;
    font-size: 16px;
}
    .cta{background:#ffe7eb;text-align:center;padding:65px 0 95px;}
    @media(max-width:991px){.hero h1{font-size:34px}.hero .lead{font-size:24px}.blob{width:360px;height:280px}.product-row{transform:scale(.72);transform-origin:right bottom}.feature-tab.active{transform:none}}
    @media(max-width:767px){.topbar{font-size:20px}.hero{text-align:center}.hero-art{min-height:320px}.blob{left:50%;transform:translateX(-50%);right:auto}.product-row{right:50%;transform:translateX(50%) scale(.58)}.section{padding:56px 0}.section-title{font-size:25px}.problem-item{border-radius:18px}.feature-panel{padding:28px 22px}.feature-tab{padding:18px}.value-card h3{font-size:25px}}

/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ 內容 ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/



.container-wrap { width:100%; margin:0 auto;}

.try-btn {
    background: var(--pink-old)!important;
    color: #fff !important;
    padding: 10px 50px !important;
    font-size: 20px !important;
    letter-spacing: 2px !important;
}


/* 動畫 */

.slide-title,
.slide-text,
.feature-visual,.fade-left,.fade-right,.fade-in,.fade-out{
    transition: all .3s ease;
}

.fade-out{
    opacity:0;
}

.fade-left{
    opacity:0;
    transform:translateY(-30px);
}

.fade-right{
    opacity:0;
    transform:translateY(30px);
}

.fade-in{
    opacity:1;
    transform:translateX(0);
}
 .slide-text {
    font-size: 18px;
}
/*----------------------------- 注意事項文字 -----------------------------------  */

/* ul { width:80%; margin:0 auto; color:#a3a3a3; list-style:decimal; padding-left:30px;}
 ul li{ margin-bottom:10px; font-size:15px; color:#333333; line-height:1.5;}
*/

 
/* =========================
   Mobile RWD Optimize
========================= */

@media screen and (max-width: 991px) {

  .header-text {
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-top: 90px !important;
    text-align: center;
  }

  .hero {
    min-height: 560px;
    background-size: cover;
    background-position: center bottom;
  }

  .hero h1,
  h1 .highlight {
    font-size: 38px;
  }

  .hero .lead {
    font-size: 26px;
  }

  .highlight {
    font-size: 18px;
  }

  .screen-placeholder {
    height: auto;
    margin-bottom: 35px;
  }

  .screen-placeholder img {
    max-width: 100%;
    height: auto;
  }

  .feature-wrap {
    max-width: 100%;
  }

  .feature-panel {
    padding: 32px 24px;
    min-height: auto;
    margin-bottom: 24px;
  }

  .feature-visual {
    margin-left: 0;
    place-items: center;
  }

  .feature-menu {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .feature-tab {
    flex-direction: column;
    text-align: center;
    padding: 18px 12px;
    font-size: 15px;
    gap: 10px;
  }

  .feature-tab.active {
    transform: none;
  }

  .circle-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    font-size: 20px;
  }
}
 
@media screen and (max-width:992px){

.hero {
    background: #fddee0 url(../images/header-mobile.png) center bottom no-repeat;
    background-size: 50%;
    min-height: 700px;
    display: flex;
    align-items: flex-start;
}

.header-text{

    padding:90px 24px 0 !important;

    text-align:center;

    max-width:100%;

    margin:0 auto;

}

.hero h1{

    font-size:34px;
    line-height:1.35;
    margin-bottom:10px;
    font-weight:700;

}

.hero h1 .highlight{

    font-size:34px;

}

.hero .lead{

    font-size:22px;
    margin-bottom:8px !important;
    letter-spacing:1px;

}

.hero p.highlight{

    font-size:15px;
    line-height:1.8;
    margin-bottom:28px !important;

}

.try-btn{

    padding:12px 42px !important;
    font-size:17px !important;

}

}

@media screen and (max-width: 767px) {

 .logo img {
    width: 200px !important;
    padding: 8px 10px;
}

  .hero {
/*    min-height: 520px;*/
    background-position: center bottom;
    background-size: 100%; 
} 

  .hero h1,
  h1 .highlight {
    font-size: 32px;
    line-height: 1.35;
  }

  .hero .lead {
    font-size: 22px;
    letter-spacing: 1px;
  }

  .hero p.highlight {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 28px !important;
  }

  .try-btn {
    font-size: 17px !important;
    padding: 10px 36px !important;
  }

  .section {
    padding: 52px 0;
  }

  .section-title {
    font-size: 25px;
    line-height: 1.45;
    padding: 0 12px;
  }
.section-sub {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 34px;
    padding: 0 12px;
    letter-spacing: 0;
    font-weight: normal;
}

  .problem-list {
    gap: 14px;
  }

  .problem-item {
    border-radius: 16px;
    padding: 14px 16px;
    font-size: 15px;
    line-height: 1.5;
    gap: 12px;
  }

  .slide-title,
  .slide-title .highlight {
    font-size: 27px;
  }

  .slide-text {
    font-size: 18px;
  }
.feature-panel {
    text-align: center;
    max-height: unset;
    justify-content: center;
}

  .feature-panel .row {
    flex-direction: column-reverse;
  }
.slide-title br {
    display: none;
}
  .feature-visual img {
    max-width: 82%;
    margin-bottom: 18px;
  }

  .value-card {
    padding: 30px 22px;
  }

  .value-icon img {
    max-width: 90px;
  }

  .value-card h3 {
    font-size: 26px;
  }

 .value-top {
    font-size: 18px !important;
    letter-spacing: 1px;
}

  .value-bottom {
    font-size: 16px !important;
}
}


@media screen and (max-width: 480px) {

  .hero {
/*    min-height: 500px;*/
    background-position: 58% bottom;
  }

 .header-text {
    padding-top: 120px !important;
}

  .hero h1,
  h1 .highlight {
    font-size: 28px;
  }

  .hero .lead {
    font-size: 21px;
}

 .hero p.highlight {
    font-size: 16px;
    margin-bottom: 40px !important;
}

  .feature-menu{
    gap:8px;
}

.feature-tab{
    padding:10px 12px;
    gap:8px;
    font-size:14px;
    min-height:60px;
flex-direction: row;
    display:flex;
    align-items:center;
}

.circle-icon{
    width:34px;
    height:34px;
    flex:0 0 34px;
    font-size:15px;
}


  .section-title {
    font-size: 23px;
  }

  .problem-item {
    align-items: center;
}
    .register-title {
    font-size: 30px !important;
}
}

/* ===========================
   Hero Mobile
=========================== */