/* 预设 */
.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.row-between {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.col-between {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-end {
  justify-self: flex-end;
  align-self: flex-end;
}

.end-align {
  align-items: flex-end;
}

.start-align {
  align-items: flex-start;
}

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

span {
  text-align: center;
  font-family: "Microsoft YaHei";
}

p {
  font-family: "Microsoft YaHei";
}

a {
  cursor: pointer;
}

/*字体 */
.white {
  color: white;
}

.black {
  color: #303445;
}

.grey {
  color: #59607B;
}

.pink {
  color: #FB5A7E;
}


.bold {
  font-weight: bold;
}

.f12 {
  font-size: 12px;
}

.f14 {
  font-size: 14px;
}

.f15 {
  font-size: 15px;
}

.f18 {
  font-size: 18px;
}

.f16 {
  font-size: 16px;
}

.f20 {
  font-size: 20px;
}

.f22 {
  font-size: 22px;
}

.f24 {
  font-size: 24px;
}

.f28 {
  font-size: 28px;
}

.f36 {
  font-size: 36px;
}

.f37 {
  font-size: 37px;
}

.f40 {
  font-size: 40px;
}

.f42 {
  font-size: 42px;
}

/*通用样式*/

.line-grey {
  width: 1132px;
  height: 1px;
  background: rgba(232, 234, 245, 1);
  opacity: 0.3;
}

.text-oneline {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.img-box {
  width: 275px;
  height: 489px;
  border-radius: 10px;
}

.pink-bg {
  background-color: #FB5A7E;
}

.white-bg {
  background-color: #fff;
}

.grey-bg {
  background-color: rgba(250, 251, 255, 1);
}

/* position and size */
.container {
  width: 100%;
  background: rgba(255, 255, 255, 1);
  margin: 0px;
}

.banner {
  background: linear-gradient(-138deg, rgba(251, 85, 130, 1), rgba(250, 143, 88, 1));
  width: 100%;
  position: relative;
}

.nav {
  height: 50px;
  width: 100%;
  background:linear-gradient(90deg,rgba(255,94,98,1),rgba(255,153,102,1));
  position: sticky;
  top: -1px;
  z-index: 99999;
}

.fixed-nav {
  position: fixed;
  height: 50px;
  width: 1428px;
  background:linear-gradient(90deg,rgba(255,94,98,1),rgba(255,153,102,1));
  padding: 0px 310px;
  top: 0px;
  z-index: 100;
}

.analysis {
  height: 557px;
  min-height: 557px;
  box-sizing: border-box;
  width: 1227px;
  padding: 85px 0px 60px;
}

.analysis > span {
  font-weight: bold;
  padding-bottom: 24px;
}

.social {
  height: 760px;
  min-height: 760px;
  padding-top: 40px;
  box-sizing: border-box;
  width: 100%;
  background: #FAFBFF;
}

.scene {
  height: 760px;
  min-height: 760px;
}

.VIP {
  height: 760px;
  min-height: 760px;
  width: 100%;
}

.shop {
  height: 760px;
  min-height: 760px;
}

.template {
  padding: 71px 320px 92px;
  width: 1200px;
  height: 670px;
}

.users {
  width: 1163px;
  height: 857px;
  min-height: 857px;
  z-index: 1;
  margin-bottom: 50px;
}

/* banner */
.banner>img {  
  width: 100%;
  display: block;
  box-shadow: none !important;
}

.banner-info>p {
  margin: 29px 0px 29px;
  align-self: flex-start;
}

.banner-info>a {
  width: 150px;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 2px;
  align-self: flex-start;
}

/* nav */
.ec-nav-item {
  padding: 15px 50px;
  line-height: 20px;
}

.ec-nav-item>i {
  width: 14px;
  height: 14px;
  font-size: 12px;
  color: #fff;
  margin-right: 8px;
}

.nav>.active {
  background: rgba(255, 255, 255, 0.2);
}

/* fixed-nav

/* analysis */
.analysis-list {
  width: 100%;
  justify-content: space-between;
}

.analysis-item {
  width: 177px;
  height: 244px;
  text-align: center;
}

.analysis-item > p {
  letter-spacing: 1px;
}

.analysis-item .analysis-p {
  color: #9FA5BB;
}

.analysis-item>span {
  margin-bottom: 28px;
}

.analysis-item>img {
  margin: 53px 0px 50px;
  max-width: 129px;
  max-height: 90px;
}

.analysis-item .head-shop {
  padding-bottom: 18px;
}

/* social */
.social-info {
  margin-left: 137px;
  max-width: 624px;
}

.social-info .switch-navitem {

}

.social-info>h2 {
  align-self: flex-start;
  font-weight: normal;
  padding-bottom: 60px;
}

.social-info>p {
  align-self: flex-start;
  margin: 39px 0px 70px;
  text-align: start;
}

.social-info>.switch-nav {
  align-self: flex-start;
}

.social>.switch-container>img {
  width: 688px;
  /* height: 556px; */
}

/* scene */
.scene-info {
  margin-right: 181px;
  width: 550px;
}

.scene-info .switch-navitem {
  padding-right: 36px;
}

.scene-info .switch-navitem-choosed {padding-right: 36px;}

.scene-info>h2 {
  align-self: flex-end;
  font-weight: normal;
  padding-bottom: 60px;
}

.scene-info>p {
  margin: 39px 0px 70px;
  align-self: flex-end;
  text-align: end;
}

.scene-info>.switch-nav {
  align-self: flex-end;
}

.scene>.switch-container {
  width: 689px;
  height: 570px;
}

.scene>.switch-container>img {
  max-width: 689px;
  /* max-height: 570px; */
}

.scene-info .switch-navitem:after {
  position: absolute;
  width: 5px;
  height: 5px;
  display: block;
  border-radius: 50%;
  background: #BDBFCA;
  right: 20px;
  top: 25px;
  content: '';
}

.scene-info .switch-navitem-choosed:after {
  position: absolute;
  width: 5px;
  height: 5px;
  display: block;
  border-radius: 50%;
  background: #FFF;
  right: 20px;
  top: 25px;
  content: '';
}

.scene-make {
  width: 100%;
  padding-top: 22px;
}

.scene-make a {
  float: right;
  margin-right: 22px;
}

/* vip */
.VIP-left {
  width: 600px;
  height: 529px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  margin-right: 185px;
}

.VIP-info {
  margin-left: 174px;
  width: 550px;
}

.VIP-info>h2 {
  align-self: self-start;
  font-weight: normal;
  padding-bottom: 60px;
}

.VIP-info>p {
  margin: 39px 0px 70px;
  align-self: self-start;
  text-align: start;
}

.VIP-info>.switch-nav {
  align-self: self-start;
}

.VIP>.switch-container {
  width: 638px;
  height: 607px;
}

.VIP>.switch-container>img {
  max-width: 638px;
  /* max-height: 607px; */
}

.VIP .switch-navitem:after {
  position: absolute;
  width: 5px;
  height: 5px;
  display: block;
  border-radius: 50%;
  background: #BDBFCA;
  left: 20px;
  top: 25px;
  content: '';
}

.VIP .switch-navitem-choosed:after {
  position: absolute;
  width: 5px;
  height: 5px;
  display: block;
  border-radius: 50%;
  background: #FFF;
  left: 20px;
  top: 24px;
  content: '';
}

.VIP-make {
  width: 100%;  
}

.VIP-make a {
  margin-top: 22px;
  margin-left: 21px;
}

/* shop */
.shop-info {
  margin-right: 123px;
  width: 448px;
}

.shop-info .switch-navitem {
  padding-right: 35px;
}

.shop-info>h2 {
  align-self: flex-end;
  font-weight: normal;
  padding-bottom: 56px;
}

.shop-info>p {
  margin: 39px 0px 70px;
  align-self: flex-end;
  text-align: end;
}

.shop-info>.switch-nav {
  align-self: flex-end;
}

.shop>.switch-container {
  width: 740px;
  height: 645px;
  justify-content: center;
}

.shop>.switch-container>img {
  max-width: 740px;
  /* max-height: 645px; */
}

.shop-info .switch-navitem:after {
  position: absolute;
  width: 5px;
  height: 5px;
  display: block;
  border-radius: 50%;
  background: #BDBFCA;
  right: 18px;
  top: 25px;
  content: '';
}

.shop-info .switch-navitem-choosed:after {
  position: absolute;
  width: 5px;
  height: 5px;
  display: block;
  border-radius: 50%;
  background: #FFF;
  right: 20px;
  top: 25px;
  content: '';
}

.shop-make {
  width: 100%;
  padding-top: 22px;
}

.shop-make a {
  float: right;
  margin-right: 19px;
}

/* more-service */
.more-service {
  box-sizing: border-box;
  height: 620px;
  width: 100%;
}

.service-content {
  min-height: 620px;
}

.more-service h2 {
  padding-top: 70px;
  font-size: 36px;
  padding-bottom: 83px;
  text-align: center;
}

.service-list {
  width: 1190px;
  display: flex;
  justify-content: space-between;
}

.service-item {
  box-sizing: border-box;
  width: 360px;
  height: 340px;
  background: #fff;
  box-shadow:0px 0px 14px 0px rgba(0, 0, 0, 0.05);
  border-radius:10px;
  text-align: center;
  -webkit-transition: all .2s linear;
  transition: all .2s linear;
}

.service-item:hover {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
  box-shadow:0px 0px 25px 2px rgba(0, 0, 0, 0.06);
}

.service-pic {
  padding-top: 39px;
  padding-bottom: 27px;
}

.service-item h3 {
  font-size: 26px;
  color: #59607B;
  margin-bottom: 38px;
}

.service-item p {
  font-size: 16px;
  color: #B8BDCD;
  padding-bottom: 10px;
}

/* template */
.template>p {
  margin: 40px 0px;
}

.template>a {
  width: 150px;
  height: 50px;
  border: 1px solid rgba(251, 90, 126, 1);
  border-radius: 2px;
  margin-top: 50px;
}

.template>a:hover {
  background-color: #FB5A7E;
  color: #fff;
}

.slide-tag {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  height: 60px;
  margin: 12px 14px;
  justify-content: start;
}

.slide-desc>p>a {
  width: 100px;
  height: 30px;
  background: linear-gradient(105deg, #FB5582, #FA8F58);
  border-radius: 6px;
}

.slide-tag>span {
  padding: 0px 16px;
  height: 26px;
  background: rgba(251, 101, 119, 0.06);
  color: #FB5A7E;
  border-radius: 13px;
  margin-right: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* user */
.users>img {
  width: 100%;
  height: 856px;
  position: absolute;
  z-index: -1;
}

.users>span {
  margin-top: 72px;
  margin-bottom: 68px;
  font-weight: bold;
}

.users-main {
  width: 100%;
}

.users-main>img {
  width: 229px;
  height: 408px;
  border-radius: 10px;
  margin-top: 58px;
}

.users-left {
  padding-right: 74px;
  border-right: 1px solid rgba(232, 234, 245, 0.3);
}

.users-left h2 {
  color: #fff;
  font-weight: normal;
  font-size: 24px;
}

.users-left>img {
  width: 130px;
  height: 130px;
  margin-bottom: 19px;
  border-radius: 6px;
}

.users-mid {
  margin-top: 62px;
  width: 566px;
}

.users-mid>h3 {
  margin-bottom: 20px;
  align-self: flex-start;
}

.users-mid>p {
  margin-bottom: 38px;
  text-align: left;
  overflow: hidden;
  letter-spacing: 1px;
  line-height: 24px;
}

.users-mid>.tag {
  height: 132px;
  align-content: flex-start;
  align-self: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: flex-start;
}

.users-mid>.tag>a {
  padding: 5px 17px;
  border: 1px solid rgba(232, 234, 245, 0.3);
  margin-right: 20px;
  margin-bottom: 19px;
  cursor: default;
}

.users-mid>.tag>a>i {
  max-height: 20px;
  width: 18px;
  margin-right: 7px;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.users-nav {
  width: 350px;
  margin-top: 60px;
  height: 93px;
}

.users-nav-item {
  padding-bottom: 19px;
}

.users-nav-item-choosed {
  border-bottom: #FB5A7E solid 4px;
  padding-bottom: 15px;
}

.users-nav-item>img {
  background-color: white;
  width: 48px;
  height: 48px;
  margin-bottom: 9px;
  border-radius: 4px;
}
.business-conditions {
  display: flex;
  flex-direction: column;
  width: 566px;
  color: #fff;
}

.business-conditions > p  {
  font-size: 18px;
  height: 18px;
  line-height: 18px;
  padding-bottom: 20px;
  font-weight: bold;
}


.conditions-list {
  display: flex;
  justify-content: space-between;
}

.condition-count {
  font-size: 24px;
  font-weight: bold;
  height: 24px;
  line-height: 24px;
  position: relative;
  text-indent: 10px;
}

.condition-count:after {
  content: '';
  display: block;
  width:4px;
  height:18px;
  background:rgba(251,90,126,1);
  position: absolute;
  left: 0;
  top: 3px;
}

.condition-text {
  text-indent: 10px;
  padding-top: 10px;
  letter-spacing: 1px;
}


/* fiexd-right */
.service {
  position: fixed;
  right: 22px;
  height: 144px;
  width: 42px;
  bottom: 100px;
  z-index: 100;
}

.service>img {
  width: 42px;
  height: 44px;
  margin-bottom: 6px;
}

.service>div {
  position: fixed;
  right: 58px;
  padding: 14px 20px;
  width: 130px;
  height: 80px;
  background: rgba(255, 255, 255, 1);
  box-shadow: -1px 3px 5px 1px rgba(0, 0, 0, 0.1);
}

.customer-service {
  bottom: 120px;
}

.service>div>p {
  margin: 10px 0px;
}

.service>div>a {
  padding: 9px 25px;
}

.service>div>a>i {
  margin-right: 4px;
}

.make {
  bottom: 90px;
}

/* count */
.count-part {
  width: 100%;
  position: relative;
  background: url(../images/takeout/number_bg.jpg);
  height: 400px;
  min-height: 400px;
}

.count-part>img {
  width: 100%;
}

.count-part ul {
  position: absolute;
  width: 80%;
  top: 22%;
  display: block;
  left: 10%;
}

.count-part ul>li {
  margin-right: 7%;
  width: auto;
  vertical-align: middle;
  height: auto;
}

.count-part ul>li:last-child {
  width: 32%;
  margin-right: 0;
  position: relative;
  top: -45px;
}

.count-part ul>li>p:first-child {
  color: #FB5A7E;
  font-size: 38px;
  margin-bottom: 30px;
}

.count-part ul>li:last-child>p:first-child {
  color: #303445;
  font-size: 38px;
  margin-bottom: 30px;
}

.count-part ul>li>p:last-child {
  font-size: 22px;
  color: #303445;
}

.count-part p {
  text-align: center;
}

.count-part ul>li:last-child>p:last-child {
  margin: 38px auto;
  padding: 14px 24px;
  color: #fff;
  font-size: 22px;
  font-weight: 400;
  background: rgba(251, 90, 126, 1);
  border-radius: 4px;
  width: 271px;
}

.count-part ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 0 auto;
}

.count-part ul>li {
  display: inline-block;
}


/* 3switch */
.switch-nav {
  height: 235px;
}

.start-align>a {
  align-self: flex-start;
}

.end-align>.switch-navitem-choosed {
  border-radius: 27px 1px 27px 27px;
}

.end-align>a {
  align-self: flex-end;
  border-radius: 27px 1px 27px 27px;
}

.switch-navitem {
  margin-bottom: 18px;
  color: #59607B;
  font-size: 20px;
  padding: 13px 26px;
  position: relative;
  text-indent: 10px;
}

.social-info .switch-navitem:after {
  position: absolute;
  width: 5px;
  height: 5px;
  display: block;
  border-radius: 50%;
  background: #BDBFCA;
  left: 19px;
  top: 24px;
  content: '';
}

.switch-navitem-choosed {
  background: linear-gradient(-105deg, rgba(251, 85, 130, 1), rgba(250, 143, 88, 1));
  box-shadow: 0px 6px 20px 0px rgba(251, 100, 119, 0.33);
  border-radius: 1px 27px 27px 27px;
  color: #fff;
}

.social-info .switch-navitem-choosed:after {
  position: absolute;
  width: 5px;
  height: 5px;
  display: block;
  border-radius: 50%;
  background: #FFF;
  left: 20px;
  top: 24px;
  content: '';
}

.social-make {
  width: 100%;
  padding-top: 20px;
  padding-left: 36px;
}

.shop-make-btn {
  display: inline-block;
  width: 140px;
  height: 42px;
  line-height: 42px;
  border: 1px solid #FB5A7E;
  text-align: center;
  box-sizing: border-box;
  background: rgba(251, 90, 126, .06);
  border-radius: 22px;
  color: #FB5A7E;
  font-size: 20px;
}

.shop-make-btn:hover {
  background: rgba(251, 90, 126, .10);
  color: #FB5A7E;
}


.switch-container .left {
  position: relative;
  top: -30px;
}

.switch-container .high-left {
  position: relative;
  top: -32px;
  left: -15px;
}

.switch-container .right {
  position: relative;
  top: -30px;
}

.switch-container>div>div>span {
  color: #303445;
  font-size: 16px;
  width: 200px;
  margin-top: 20px;
}

.switch-container>div>div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.switch-box {
  height: 537px;
  width: 276px
}

.switch-box>img {
  width: 275px;
  height: 489px;
  border-radius: 10px;
}

.switch-box>span {
  margin-top: 36px;
  height: 15px;
  font-size: 16px;
  color: rgba(48, 52, 69, 1);
  line-height: 39px;
}

/* 轮播器 */
.carousel-part {
  width: 1200px;
  height: 400px;
  position: relative;
  margin: 0 auto;
}

.carousel-part ul {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-part ul>li>img {
  width: 100%;
  height: 84.8%;
}

.swiper-wrapper {
  width: 100%;
  height: 100%;
  position: relative
}

.swiper-wrapper>li {
  width: 280px;
  height: 337px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 30;
  filter: alpha(opacity=0);
  opacity: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0px 2px 8px 0px rgba(79, 85, 109, 0.18);
}

.swiper-wrapper>li a {
  cursor: pointer;
}

.swiper-wrapper>li>img {
  width: 100%;
  height: 100%
}

#left_shows {
  left: 5%;
  opacity: 1;
}

#right_shows {
  left: 71%;
  opacity: 1;
}

#small_left,
#small_right {
  width: 154px;
  height: 249px;
  opacity: 0;
  filter: alpha(opacity=0)
}

#small_left {
  left: -15%
}

#small_right {
  left: 102.5%
}

#small_left,
#small_right {
  width: 131px;
  height: 194px
}

#middel_shows {
  width: 320px;
  height: 390px;
  left: 37.7%;
  filter: alpha(opacity=100);
  opacity: 1;
}

#small_right {
  left: 102.5%
}

#middel_shows {
  left: 35.5%
}

.carousel-btn-item {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  opacity: .3;
  cursor: pointer;
  border: 1px solid #ccc;
}

.carousel-btn-prev {
  left: -56px;
  z-index: 15;
  width: 50px;
  height: 50px;
  top: 175px;
  position: absolute;
  line-height: 50px;
  transform: rotatey(180deg);
  z-index: 35;
  cursor: pointer;
}

.carousel-btn-next {
  right: -52px;
  width: 50px;
  height: 50px;
  top: 175px;
  position: absolute;
  line-height: 50px;
  z-index: 35;
  cursor: pointer;
}

.carousel-btn-prev:hover,
.carousel-btn-next:hover {
  background: #333;
  opacity: 0.14;
  border-radius: 50%;
  color: #fff;
}

.slide-panel {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.slide-qrcode {
  position: absolute;
  width: 147px;
  height: 146px;
  display: none;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
}

.slide-qrcode>img {
  width: 100%;
  box-shadow: none;
}

.slide-title {
  font-size: 16px;
  text-align: left;
  text-indent: 20px;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background: #fff;
  position: absolute;
  bottom: 0;
}

.slide-animate {
  display: block;
}

.slide-desc {
  background: #fff;
  height: 160px;
  border-radius: 8px 8px 0 0;
  position: absolute;
  bottom: 0px;
}

.slide-desc>p:first-child {
  text-align: left;
  padding: 0 20px;
  height: 54px;
  line-height: 60px;
}

.slide-desc>p:first-child span {
  font-size: 16px;
  color: #303445;
  position: absolute;
  left: 20px;
}

.slide-desc>p:first-child a {
  width: 100px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  background: linear-gradient(90deg, rgba(253, 128, 27, 1) 10%, #FB5582 100%);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  float: right;
  margin-top: 15px;
}

/* 侧边栏 */
.container.col .icon-part>span {
  background: #FB5A7E;
  background-color: #FB5A7E;
}

.container.col .online-service {
  background: #FB5A7E;
  background-color: #FB5A7E;
}

.container.col .exclusive-customer-service {
  background: #FB5A7E;
  background-color: #FB5A7E;
}

.container.col .block_tip {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.container.col .block_tip>a {
  margin-top: 5px;
}

.container.col .block_tip>a img {
  position: relative;
  top: -1px;
}

.container.col .block_tip:after {
  top: 58px;
}

.container.col .make_now>.block_mask {
  top: 12px;
}

.container.col .consult_contact>.block_mask {
  top: -35px;
}

.container.col .online-service img {
  margin: 0 4px;
}

body .nav-wrap {
  z-index: 1;
  position: unset;
}

body .nav-wrap .navigator {
  position: unset;
}

/* 底部添加  */
.bottom-fiexd {
  position: fixed;
  bottom: 0px;
  height: 60px;
  z-index: 99;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.bottom-fiexd>a {
  margin-left: 45px;
  height: 32px;
  width: 120px;
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 16px;
}

.friend-links{
  text-align: center;
}

/* 立即制作 */
.banner-button {
  display: block;
  width: 116px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  color: #fff;
  border: 2px solid #fff;
  cursor: pointer;
  font-size: 16px;
  position: absolute;
  top: 70%;
}