html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
}
input:focus,button:focus{
  border-color:none !important;
  outline: 0!important;
  box-shadow: none!important;}
a,*,p{ font-family: 'Noto Sans TC', sans-serif;}
body{background:#f9f5ed;}
.slider-wrapper{display: block; width:100%;  margin:auto;}
.logo {    max-height: 60px;    padding: 5px 0px;    height: 100%;}
.menu-wrapper{
  position: fixed;
  top: 0;background:#fff; max-width:1920px; margin:auto;  
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  background-color: rgba(255,255,255,0.72);}
.header{background:#fff; box-shadow: 0px 15px 20px #00000010; z-index:999;position: relative;}
.menu-wrapper #close, .menu-wrapper a{display: inline-flex; }
.nav-menu{display:none; z-index:5; right:0; position: fixed;width:100%;max-width:200px;height: 100vh; opacity: 1; text-align: center;padding:2% 0;}
.text-wrapper{    position: absolute;
  z-index: 1;
  left: 15%;
  right: auto;
  top: 30%;}
.text-logo {max-height:50px;
  max-width: 300px;
  display: inline-flex;}

.section2{background-image: url("../homeimages/section2_bg.jpg");    background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
  height: auto;
  width: 100%;
  min-height: 200px;
  overflow: hidden;}
  .section3{background-image: url("../homeimages/section3_bg.jpg");     background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
    height: auto;
    width: 100%;
    min-height: 200px;
    overflow: hidden;}
    
  .checkform p {font-size:1em; color:#777777 !important;}
.inputphone input{   outline: none;border:none; border-radius: 50px 0px 0px 50px;z-index: 0 !important;}
.inputphone button{   outline: none;background:#ffc64a; border:none; border-radius: 50px; margin-left:-50px; z-index: 1; color:#fff;}
.img-wrapper{z-index:1; width:40%; top:10%; right:10%;position: absolute;}
.text-logo img{height:100%; width:auto;}
.section-img{width:100%;height: auto;}
.section-img img{width:100%;height: auto;}
.text-title{font-size:2.5em; font-weight: 600; color:#575757; }
.items-content{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 30%;
  width: 100%;
}
.items-img-wrapper{
  z-index:1; width:38%;
}
.items-text-wrapper{
  z-index:1;
}
.text-subtitle{font-size:1.5em; font-weight: 900;}
.section2 .text-title,.section3 .text-title{padding-top:25%;}
.text-content{font-size:1.5em; font-weight: 300;}
.cta-button{transition: 0.3s; 
  outline: none;margin:20px 0px; border-radius: 100px; padding:5px 20px; border:none; background:#ffc64a; color:#fff;}
  .cta-button:hover{transition: 0.3s; transform: scale(1.1);}
.cta-button:focus{border:none;
  outline: none;}
.s3-img-wrapper{background: url("../homeimages/as-bg.png"); background-size:100% auto;background-repeat: no-repeat;}
  button.owl-dot {
    background: #f9ebd2 !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 10px !important;
  margin:0px 10px;
  }
button.owl-dot.active {
    background: #ceb78f !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 10px !important;
} 
.middle-wrapper.owl-carousel .owl-item img{
  padding-top:10px;
}
.over-text { 
  display:inline-flex;
  font-size:1.2em;
  background:#FFF1DE;
  padding:30px;
  border-radius: 200px 0px 0px 200px;
  width: 100%;

}
.over-text span{font-size:1em; color:#fff; background:#ffc64a; border-radius:100px; width:40px; height:40px; line-height: 40px; text-align: center;}
.over-text p{line-height: 40px; padding-left:10px;}
.s3-text{
  background: #fff1de;
  margin-left: -30px !important;
  padding-left: 30px !important;
  margin-top: 20px !important;
  border-radius: 200px;
  min-width: 250px;
max-width:70%;
text-align: center;}

  .s3-img-wrapper:after {
    content: "";
    height: 70px;
    width: 70px;
    background: #f3ebe1;
    position: absolute;
    display: block;
    right: 10px;
    top: 100px;
    border-radius: 10px;
    z-index:-1;
}
.middle-wrapper-text:after {
  content: "TinyTAN祝福語朱古力個案展示";
  color: #fff;
  font-size: 1em;
  font-weight: 300;
  background: #9233ce;
  border-radius: 100px;
  padding: 5px 20px;
  position: absolute;
  margin-top: -50px;
}
.s3-img-wrapper:before {
  content: "";
  height: 90px;
  width: 90px;
  background: #f3ebe1;
  position: absolute;
  display: block;
  left: 10px;
  top: 50px;
  border-radius: 10px;
  z-index:-1;
}
.s4{background:#ECF3F9;}
.s5{background:#C5AEE3;}
.s5-title{color:#fff; text-shadow: 0px 1px 3px #00000050;}
.s7-title{color:#FDC644;font-weight: 400;}
.s7-subtitle{color:#FDC644;font-weight:300; font-size:1.2em;}
.s7{background:#FCF7EA; }
.s4:after{    
  content: "";
  background: #DBE6F1;
  width: 100%;
  height: 300px;
  margin-top: -200px;
  position: absolute;
  bottom: 0;
  z-index: 1;}
  #accordion-pickme .card {
    margin: 15px 0px;
    border-radius: 20px;
    overflow: hidden;
}
#accordion-pickme .card button.btn {
  font-size: 1em !important;
  color: #696969 !important;
  text-decoration: none;
  text-align: left !important;width: 100%;
  background: none;
}
#accordion-pickme .card-body {
  text-align: left;
  color:#6e6e6e;
}
#accordion-pickme i.bi.bi-plus-lg {
  float: right;
  color:#a0a0a0;
}
.scene-frame{overflow: hidden; height:350px; border-radius: 10px;}
.scene-frame img{width: auto; height: 100%;
  top: 50%; right: 50%;
  transform: translate(50%,-50%);
  position: absolute;}
  .scene-wrapper {
    z-index: 2;
}
.scene-wrapper div:nth-child(odd) .scene-frame{height:300px; margin-top:50px;}
svg {
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .active svg {
    transform: rotate(90deg);
  }
  path {
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1),
      stroke-dasharray 500ms cubic-bezier(0.4, 0, 0.2, 1),
      stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  path:nth-child(1) {
    transform-origin: 36% 40%;
  }
  path:nth-child(2) {
    stroke-dasharray: 29 299;
  }
  path:nth-child(3) {
    transform-origin: 35% 63%;
  }
  path:nth-child(4) {
    stroke-dasharray: 29 299;
  }
  path:nth-child(5) {
    transform-origin: 61% 52%;
  }
  path:nth-child(6) {
    transform-origin: 62% 52%;
  }
  .active path:nth-child(1) {
    transform: translateX(9px) translateY(1px) rotate(45deg);
  }
  .active path:nth-child(2) {
    stroke-dasharray: 225 299;
    stroke-dashoffset: -72px;
  }
  .active path:nth-child(3) {
    transform: translateX(9px) translateY(1px) rotate(-45deg);
  }
  .active path:nth-child(4) {
    stroke-dasharray: 225 299;
    stroke-dashoffset: -72px;
  }
  .active path:nth-child(5) {
    transform: translateX(9px) translateY(1px) rotate(-45deg);
  }
  .active path:nth-child(6) {
    transform: translateX(9px) translateY(1px) rotate(45deg);
  } 
  .slider-wrapper{max-width:1920px;} 
  .owl-dots {
    text-align: center;
    margin-bottom:20px;
}
.fixed {
  position: absolute;
  z-index: 0;
  width: 90%;
  top: 230px;
  right: 0px;
  padding-right: 0px !important;
}
.fixed2 {
  position: absolute;
  top: 0;
  right: 20px;
}
.mh-30{min-height:30vh;padding: 0px !important;
  margin: 0px !important; }
 .mh-40{min-height:40vh;padding: 0px !important;
  margin: 0px !important; }
  .mh-50{min-height:50vh;padding: 0px !important;
  margin: 0px !important; }
 .mh-70{min-height:70vh;padding: 0px !important;
    margin: 0px !important; }
    .mh-60{min-height:60vh;padding: 0px !important;
      margin: 0px !important; }
.mh-100{min-height:100vh;
  padding: 0px !important;
  margin: 0px !important; 
}
li.scroll-to-section {
  list-style: none;
  background: #fff;
  border-radius: 20px;
  height: 2em;
  font-size: 1.2em;
  line-height: 2em;
  display: inline-block;
  padding: 0px 20px;
  box-shadow: 0px 15px 30px #00000030;
  margin-bottom:15px;
}

li.scroll-to-section a{
text-decoration: none;
color:#e09d00;
}

.s4-mh{
  min-height:600px;padding: 0px !important;
  margin: 0px !important;
}
.floatimg{
	animation: float 3s ease-in-out infinite;
}
  @keyframes float {
    0% { 
      transform: translatey(0px);
    }
    50% { 
      transform: translatey(-30px);
    }
    100% { 
      transform: translatey(0px);
    }
  }
   
  @media (max-width: 991.98px) {   


    .s4-mh{min-height:50vh;}
    .text-wrapper{    position: absolute;
      z-index: 1;
      left: 15%;
      right: auto;
      top: 30%;}
    .text-logo {max-height:20px;
      max-width: 200px;
      display: inline-flex;}
    .img-wrapper{z-index:1; width:40%; top:8%; right:10%;position: absolute;}
    .text-logo img{height:100%; width:auto;}
    .text-title{font-size:1.5em; font-weight: 900;}
    .text-subtitle{font-size:1em; font-weight: 900;}
    .text-content{font-size:1em; font-weight: 300;}
    .cta-button{margin:20px 0px; border-radius: 100px; padding:5px 20px; border:none; background:rgb(255, 198, 74); color:#fff;}


  }
  
  @media (max-width: 767.98px) {   
     
.s4-mh{min-height:auto;}
    .fixed {
      position: unset;
      z-index: unset;
      width: unset;
      top: unset;
      right: unset;
      padding-right: unset !important;
      width:100%;
      margin-top: 20px;
    }
    .fixed2 {
      position: unset;
      top: unset;
      right: unset;
    } 
    .over-text {
      display: inline-flex;
      font-size: 1.2em;
      background: #FFF1DE;
      padding: 0px;
      border-radius: 200px;
      width: 100%;
  }
    .text-wrapper{    position: absolute;
      z-index: 1;
      left: 5%;
      right: auto;
      top: 30%;}
    .text-logo {max-height:20px;
      max-width: 100px;
      display: inline-flex;}
    .img-wrapper{z-index:1; width:50%; top:10%; right:1%;position: absolute;}
    .text-logo img{height:100%; width:auto;}
    .text-title{font-size:1em; font-weight: 900;}
    .text-subtitle{font-size:0.8em; font-weight: 900;}
    .text-content{font-size:0.7em; font-weight: 300;}
    .cta-button{margin:20px 0px; border-radius: 100px; padding:5px 20px; border:none; background:rgb(255, 198, 74); color:#fff;}


  }
   
  @media (max-width: 575px) {   
    .middle-wrapper:after { 
      margin-top: -50px;
  }
.s3-text{ 
  min-width: 250px;
max-width:100%;
text-align: center;
margin-left: unset !important;
    padding-left: unset !important;
  }
    .nav-menu{ background:#00000060;padding-top:15%; max-width:100%;}

    .nav-menu ul {
      display: inline-grid;
  }
    #accordion-pickme .card button.btn {
      font-size: 0.55em  !important; 
  }
.scene-wrapper div:nth-child(odd) .scene-frame{height:350px; margin-top:0px;}
  .order-sm-2{order:2 !important;}
  .order-sm-1{order:1 !important;} 
    .inputphone button {
      margin-left: -30px;
      padding: 0px 10px !important;
  }
  
.s7-title{color:#FDC644;font-weight: 600 !important;}
.s7-subtitle{color:#FDC644;font-weight:400 !important; font-size:1.2em;}
.inputphone input{
  padding-right:50px;}
  .checkform p {font-size:12px;}
.inputphone .input-group p {color:#eee !important;}
    .section2 .text-title,.section3 .text-title{padding-top:0%;}
    .logo {
      max-height: initial;
      padding: 9px 0px;
      height: auto;
      width: 100%;
  }
    .text-wrapper{       position: absolute;
      z-index: 1;
      left: 0;
      right: auto;
      top: auto;
      bottom: 0;
      text-align: center;
      width: 100%;
  }
.section2{background-image: url("../homeimages/section2_bg-m.jpg");    background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
  height: auto;
  width: 100%;
  min-height: 200px;
  overflow: hidden;}
  .section3{background-image: url("../homeimages/section3_bg-m.jpg");     background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
    height: auto;
    width: 100%;
    min-height: 200px;
    overflow: hidden;}
    .text-logo {max-height:20px;
      max-width: 100px;
      display: inline-flex;}
    .img-wrapper{z-index:1; width:50%; top:0; left:0; right:0; margin:auto; position: absolute;}
    .text-logo img{height:100%; width:auto;}
    .text-title{font-size:1.2em; font-weight: 900;}
    .text-subtitle{font-size:1em; font-weight: 900;}
    .text-content{font-size:12px; font-weight: 300;}
    .cta-button{font-size:12px; top:20%; margin:20px 0px; border-radius: 100px; padding:5px 20px; border:none; background:rgb(255, 198, 74); color:#fff;}

    .section-img img{padding-top:5%;width:70%;height: auto;}
    .section-img {
      width: 100%;
      height: auto;
      text-align: center;
  }
  .items-content{
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 10%;
    width: 100%;
  }
  .items-img-wrapper{
    margin-bottom: 10%;
  }
  .float-left {
    position: absolute;
    left: 0px;
  }
  }
   
  @media (max-width: 1199.98px) {   


  }

@media only screen and (min-width:1920px) {

}