@import './fonts.css';

body, ul, li, p{
  margin: 0;
  padding: 0;
}

.main-wrap {
  /* position: absolute;
  left:0;
  right: 0;
  top:0;
  bottom: 0; */
  overflow-y: scroll;
  font-size: 0;
  color: #ffffff;
}

.main-wrap .main-top {
  position: relative;
  height: 5.34rem;
  background-size: cover;
  z-index: -1;
}

.main-wrap .main-top .top-title {
  position: absolute;
  top: .59rem;
  left: .47rem;
  height: .54rem;
  width: 6rem;
  background-size: contain;
  background-repeat: no-repeat;
}

.main-wrap .main-top .top-text {
  position: absolute;
  top: 1.79rem;
  left: .47rem;
}

.main-wrap .main-top .top-text .top-subtitle {
  font-family: SFProText-Black, sans-serif;
  line-height: .56rem;
  font-size: .5rem;
  margin-bottom: .28rem;
}

.main-wrap .main-top .top-text .top-desc {
  font-family: SFProText-Semibold, sans-serif;
  line-height: .34rem;
  font-size: .24rem;
}

.main-wrap .main-top .top-text .top-desc > p + p {
  margin-top: .3rem;
}

.main-wrap .main-body {
  margin-top: -.25rem;
  margin-bottom: 1.42rem;
  padding: .25rem;
  padding-bottom: 0;
  background-color: #ffffff;
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem;
}

.main-wrap .main-body .body-hint-head {
  margin-top: .1rem;
  padding-left: .22rem;
  margin-bottom: .35rem;
  line-height: .29rem;
  font-family: SFProText-Medium, sans-serif;
  font-size: .24rem;
  color: #435260;
}

.main-wrap .main-body .body-content {
  position: relative;
  padding-top: .25rem;
  border-radius: .2rem;
  background-size: cover;
}

.main-wrap .main-body .body-content + .body-content {
  margin-top: .36rem;
}

.main-wrap .main-body .body-content .content-number-wrap {
  position: absolute;
  top: .25rem;
  left: .24rem;
  width: .32rem;
  height: .32rem;
  border-radius: .16rem;
  text-align: center;
  line-height: .32rem;
  font-family: SFProText-Heavy, sans-serif;
  font-size: .205rem;
  background-color: #ffffff;
}

.main-wrap .main-body .body-content .content-title-wrap {
  padding-left: .71rem;
}

.main-wrap .main-body .body-content .content-title-wrap .content-title {
  font-family: SFProText-Heavy, sans-serif;
  line-height: .395rem;
  margin-bottom: .44rem;
  font-size: .355rem;
}

.main-wrap .main-body .body-content .content-title-wrap .content-hint {
  font-family: SFProText-Regular, sans-serif;
  line-height: .34rem;
  font-size: .24rem;
  padding-right: .2rem;
}

.main-wrap .main-body .body-content .content-title-wrap .content-hint > a {
  color: #ffffff;
}

.main-wrap .main-body .body-one {
  padding-bottom: .48rem;
}

.main-wrap .main-body .body-two {
  background-color: #09b8b2;
  padding-bottom: .35rem;
}

.main-wrap .main-body .body-two .content-number-wrap .content-number {
  color: #5ebebc;
}

.main-wrap .main-body .body-two .content-steps .content-step {
  text-align: center;
  padding-top: .35rem;
}

.main-wrap .main-body .body-two .content-steps .content-step img {
  width: 1rem;
  height: 1rem;
}

.main-wrap .main-body .body-two .content-steps .content-step .content-step-title {
  font-family: SFProText-Heavy, sans-serif;
  margin-top: .18rem;
  font-size: .305rem;
  line-height: .395rem;
}

.main-wrap .main-body .body-two .content-steps .content-step .content-step-subtitle {
  font-family: SFProText-Regular, sans-serif;
  margin-top: .12rem;
  font-size: .24rem;
  line-height: .4rem;
  padding: 0 .2rem;
}

.main-wrap .main-body .body-hint-footer {
  margin-top: .28rem;
  font-size: .19rem;
  line-height: .21rem;
  font-family: SFProText-Regular, sans-serif;
  color: #596067;
  text-align: center;
}

.main-wrap .main-footer {
  position: fixed;
  bottom: 0;
  padding: .3rem .25rem .4rem;
  background-color: #ffffff;
  font-family: SFProText-Medium, sans-serif;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.main-wrap .main-footer .footer-button {
  display: block;
  border: none;
  width: 100%;
  height: .72rem;
  background-color: #09b8b2;
  line-height: .3rem;
  font-size: .28rem;
  color: #ffffff;
}

.etekcity.main-wrap .main-top {
  background-image: url(../images/Etekcity\ 1.png);
}
.etekcity.main-wrap .main-top .top-title {
  background-image: url(../images/Etekcity.png);
}
.etekcity.main-wrap .main-body .body-one {
  background-image: url(../images/Etekcity\ 2.png);
}

.cosori.main-wrap .main-top {
  background-image: url(../images/cosori\ 1.png);
}
.cosori.main-wrap .main-top .top-title {
  background-image: url(../images/cosori.png);
}
.cosori.main-wrap .main-body .body-one {
  background-image: url(../images/cosori\ 2.png);
}
.cosori.main-wrap .main-body .body-one .content-number-wrap .content-number {
  color: #fd8265;
}


.levoit.main-wrap .main-top {
  background-image: url(../images/Levoit\ 1.png);
}
.levoit.main-wrap .main-top .top-title {
  background-image: url(../images/Levoit.png);
}
.levoit.main-wrap .main-body .body-one {
  background-image: url(../images/Levoit\ 2.png);
}

.etekcity.main-wrap .main-body .body-one .content-number-wrap .content-number,
.levoit.main-wrap .main-body .body-one .content-number-wrap .content-number {
  color: #81a9e4;
}
.etekcity.main-wrap .main-body .body-two .content-steps .content-step.hundreds-of-recipes,
.levoit.main-wrap .main-body .body-two .content-steps .content-step.hundreds-of-recipes {
  display: none;
}