* {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

.header {
  height: 100vh;
  min-height: 660px;
  padding-top: 48px;
  background-image: url(../img/bg_header_pink.jpg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}

.header-wrapper {
  margin-top: 10px;
  display: none;
  color: #fff;
}

.header-logo img {
  width: 131px;
  margin-top: 15vh;
}

.tagline {
  font-weight: 400;
  font-size: 1.25rem;
}

.footnote {
  font-weight: 400;
  margin-top: 400px;
  font-size: 14px;
}

.service {
  display: flex;
}

.service-item {
  flex: auto;
  /* float: left; */
  width: calc(100% / 3);
  position: relative;
  height: 764px;
}

.service-item img {
  
  height: 764px;
  width: 100%;
  background-size: cover;
  background-position: center center;
  /* display: inline-block; */
}

.service-text {
  color: #fff;
  position: absolute;
  top: 100px;
  text-align: left;
  margin: 0 15%;
}

.service-text h2 {
  font-weight: inherit;

}

.service-text p {
  margin-top: 15px;
  font-size: 15px;
  
}



.plan-wrapper {
  display: flex;
}

.plan1 {
  /* float: left; */
  height: 507px;
  width:50%;
  background-color: #f5f5f5;
  text-align: center;
  padding: 64px 24px;
}

.plan2 {
  /* float: right; */
  text-align: center;
  height: 507px;
  width: 50%;
}

.plan-wrap {
  max-width: 400px;
  position: relative;
  margin: 10px auto 0;
}

.plan-pic {
  width:45%;
  border-radius: 10px;
  background-size: 110px 118px;
  background-position: center center;
  
}

.bouquet {
  margin-left: 10px;
}

.free {
  width: 15%;
  position: absolute;
  top: -10px;
  right: -5px;
}

.plan1 p {
  text-align: left;
  padding-left: 10px;
  padding-bottom: 64px;
  margin-top: 10px;
  font-size: 12px;
}

.plan1 h2 {
  font-weight: 400;
}

.plan2 h2 {
  font-weight: 250;
  font-size: 18px;
  margin-top: 200px;
}

.flower {
  background: #ead5dc;
  display: flex;
}

.flower-img {
  flex: auto;
  padding-top: 200px;
  width: 50%;
  /* float: left; */
}

.flower-img img {
  width: 100%;
}

.flower-text {
  height: 730px;
  flex: auto;
  padding-top: 15%;
  padding-left: 1%;
  padding-right: 3%;
  width: 50%;
  /* float: right; */
  opacity: 0.7;

}

.flower-text h2, .flower-text h3 {
  letter-spacing: 2px;
  text-align: center;
}

.flower-text h2 {
  padding-bottom: 20px;
}

.flower-text h3 {
  font-size: 20px;
  margin-top: 35px;
}

.flower-text p {
  margin-top: 10px;
  margin-left: 1%;
  margin-right: 5%;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 1px;
}

.vase {
  background: #e7e3df;
  display: flex;
  height: 825px;
}

.vase-wrap {
  width: 50%;
  flex: auto;
  /* float:left; */
  margin: 0 auto;
}

.vase-text {
  padding-top: 95px;
  text-align: center;
  opacity: 0.7;
}

.vase-text h2 {
  letter-spacing: 2px;
  margin-bottom: 20px;

}


.vase-text h4 {
  background-color: #fff;
  display: inline-block;
  padding: 4px 8px;
}

.vase-pic {
  margin: 32px 10% 20px;
}

.vase-pic p {
  letter-spacing: 1px;
  font-size: 14px;
}

.pic-wrap {
  display: flex;
  padding-top: 20px;
}

.pic-wrap img {
  height: 116px;
  max-width: 98px;
}

.bell, .candle, .moon {
  flex: auto;
  position: relative;
}

.bell-text, .candle-text, .moon-text {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translate(-50%,-50%);
}

.space {
  flex: auto;
  width: 50%;
}

.vase-prise {
  margin: 0 10%;
  opacity: 0.8;
}

.vase-prise > p {
  font-size: 14px;
}

.prise {
  display: flex;
  margin-bottom: 20px;
}

.prise p {
  flex: auto;
}

.first-prise {
  font-weight: bold;
  border: 2px solid black;
  padding: 5px 10px;
  display: inline-block;
  max-width: 100px;
  margin-right: 20px;
  font-size: 15px;
}

.send-prise {
  font-weight: 500;
  font-size: 20px;
  line-height: 25px;
  padding-top: 5px;
}

.send-prise span {
  font-weight: normal;
  font-size: 15px;
}

.vase-img {
  flex: auto;
  width: 50%;
  padding-top: 95px;
  /* float: right; */
}

.vase-img img {
  height: 730px;
  width: 100%;
  background-size: cover;
}

.service2 {
  height: 556px;
  opacity: 0.8;
  padding: 12vmin 4vmin 16vmin;
  letter-spacing: 2px;
}

.service2 h1 {
 text-align: center;
 padding-bottom: 20px;
}

.service2-wrapper {
  display: flex;
  text-align: center;
}

.service2-item {
  flex: auto;
  width: clac(100% / 3);
}

.service2-item img {
  width: 80px;
}

.service2-item h3 {
  padding-bottom: 10px;
}

.service2-item p {
  font-size: 14px;
}

.download2 {
  background: #efdfc5;
  height: 420px;
  overflow: hidden;
  position: relative;
}

.download2-wrapper {
  text-align: center;
}

.download2-wrapper img {
  height: 420px;
  background-size: cover;
  position: relative;
  left: -60px;
}

.dl2-wrap {
  position: absolute;
  top: 60px;
  left: 55%;
  text-align: center;
}

.dl2-wrap > img {
  width: 118px;
}

.dl2-wrap p {
  padding: 10px 0;
}

.footer {
  background: #3f434a;
  height: 277px;
  position: relative;
}

.footer p {
  text-align: center;
  font-size: 14px;
  padding-top: 130px;
}

.footer-wrapper {
  padding: 65px 10% 0;
}

.footer-list {
  display: flex;
}

.footer-list li {
  flex: auto;
  text-decoration: none;
}

.footer-list a {
  color : #fff;
  text-decoration: none;
}

.footer p {
  color: #6f737a;
}

.gotop {
  position: absolute;
  top: 40px;
  right:5%;
  opacity : 0;
  transform : translate(0, 100px);
  transition : all 1s;
}

.gotop a {
  text-decoration: none;
  font-weight: bold;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 4px;
  padding: 5px 10px;
}

.active {
  opacity : 1;
  transform : translate(0, 0);
}

@media (max-width: 400px) {
  .header {
  
    padding-top: 10px;
    
  }


  

  
  .header-logo img {
    width: 100px;
   
  }
  
  .tagline {
  
    font-size: 1rem;
  }
  

  .service {
    flex-wrap: wrap;
  }

  .service-item {
    width: 100%;
  }

  .plan-wrapper {
    flex-wrap: wrap;
  }
  
  .plan1, .plan2 {
    width:100%;
  }

  .flower {
    flex-wrap: wrap;
  }
  
  .flower-img,.flower-text {
 
    width: 100%;

  }
  
  
  
  .flower-text h3 {
    font-size: 15px;
    margin-top: 35px;
  }
  
  .flower-text p {
    margin-left: 10%;
    margin-right: 10%;
    font-size: 13px;
  }
  
  .vase {
    flex-wrap: wrap;
  }
  
  .vase-wrap {
    width: 100%;
    flex: auto;
    /* float:left; */
    margin: 0 auto;
  }
  
  .vase-text {
    padding-top: 95px;
    text-align: center;
    opacity: 0.7;
  }
  
  .vase-text h2 {
    letter-spacing: 2px;
    margin-bottom: 20px;
  
  }
  
  
  .vase-text h4 {
    background-color: #fff;
    display: inline-block;
    padding: 4px 8px;
  }
  
  .vase-pic {
    margin: 32px 10% 20px;
  }
  
  .vase-pic p {
    letter-spacing: 1px;
    font-size: 14px;
  }
  
  .pic-wrap {
    display: flex;
    padding-top: 20px;
  }
  
  .pic-wrap img {
    height: 116px;
    max-width: 98px;
  }
  
  .bell, .candle, .moon {
    flex: auto;
    position: relative;
  }
  
  .bell-text, .candle-text, .moon-text {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  
  .space {
    flex: auto;
    width: 50%;
  }
  
  .vase-prise {
    margin: 0 10%;
    opacity: 0.8;
  }
  
  .vase-prise > p {
    font-size: 14px;
  }
  
  .prise {
    display: flex;
    margin-bottom: 20px;
  }
  
  .prise p {
    flex: auto;
  }
  
  .first-prise {
    font-weight: bold;
    border: 2px solid black;
    padding: 5px 10px;
    display: inline-block;
    max-width: 100px;
    margin-right: 20px;
    font-size: 11px;
  }
  
  .send-prise {
    font-weight: 500;
    font-size: 20px;
    line-height: 25px;
    padding-top: 5px;
  }
  
  .send-prise span {
    font-weight: normal;
    font-size: 15px;
  }
  
  .vase-img {
    flex: auto;
    width: 100%;
    padding-top: 95px;
    /* float: right; */
  }
  
  .vase-img img {
    height: 400px;
    width: 100%;
    background-size: cover;
    
  }
  
  .service2 {
    height: auto;
    opacity: 0.8;
    padding-top: 400px;
    letter-spacing: 2px;
  }
  
  .service2 h1 {
   font-size: 20px;
  }
  
  .service2-wrapper {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
  }
  
  .service2-item {
    flex: auto;
    width: 100%;
  }
  
  .service2-item img {
    width: 80px;
  }
  
  .service2-item h3 {
    padding-bottom: 10px;
  }
  
  .service2-item p {
    font-size: 14px;
  }
  
  .download2 {
    background: #efdfc5;
    height: 720px;
    /* overflow: hidden; */
    position: relative;
  }
  
  .download2-wrapper {
    text-align: center;
  }
  
  .download2-wrapper img {
    height: 720px;
    background-size: cover;
    position: relative;
    /* left: -60px; */
  }
  
  .dl2-wrap {
    position: absolute;
    top: 60px;
    left: 5%;
    text-align: center;
  }
  
  .dl2-wrap > img {
    /* width: 118px; */
  }
  
  .dl2-wrap p {
    padding: 10px 0;
  }
  
  .footer {
    background: #3f434a;
    height: auto;
    position: relative;
  }
  
  .footer p {
    text-align: center;
    font-size: 14px;
    padding-top: 130px;
  }
  
  .footer-wrapper {
    padding: 65px 10% 0;
  }
  
  .footer-list {
    display: flex;
    flex-direction: column;
  }
  
  .footer-list li {
    flex: auto;
    text-decoration: none;
  }
  
  .footer-list a {
    color : #fff;
    text-decoration: none;
  }
  
  .footer p {
    color: #6f737a;
  }
  
  .gotop {
    position: absolute;
    top: 40px;
    right:5%;
    opacity : 0;
    transform : translate(0, 100px);
    transition : all 1s;
  }
  
  .gotop a {
    text-decoration: none;
    font-weight: bold;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 4px;
    padding: 5px 10px;
  }
  
  .active {
    opacity : 1;
    transform : translate(0, 0);
  }


}