@charset "UTF-8";
@media screen and (min-width: 768px) { button { outline: none; border: none; color: #ffffff; cursor: pointer; }
  .main { /* 首页大图 */ /* 专注的产品 用心的服务 */ /* 优势资源 核心技术 */ display: flex; flex-direction: column; align-items: center; box-sizing: border-box; overflow-x: hidden; }
  .main .main__banner { width: 75vw; height: 32.031vw; background: url("../images/commerce/banner_ecom_1.jpg") no-repeat center/cover; padding-top: 6vw; text-align: center; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; }
  .main .main__banner h1 { font-size: 2.3vw; color: #ffffff; margin-bottom: 1.7vw; font-weight: bold; font-weight: bold; }
  .main .main__banner h2 { font-size: 1.6vw; color: #ffffff; margin-bottom: 1.6vw; }
  .main .main__banner .mian-plan { display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; margin-top: 2vw; }
  .main .main__banner .mian-plan .mian-plan__btn { width: 13.021vw; height: 3.385vw; background-color: var(--main-color); border-radius: 0.26vw; outline: none; border: none; font-size: 1.25vw; color: #ffffff; cursor: pointer; }
  .main .main__banner .mian-plan .user { font-size: 0.6vw; font-weight: normal; font-stretch: normal; line-height: 2.5vw; letter-spacing: 0vw; color: #ffffff; margin-top: 1.1vw; }
  .main .main__banner .mian-plan .user .user__num { font-size: 2vw; font-weight: bold; margin: 0 0.1vw; color: #ffffff; letter-spacing: 0.15vw; }
  .main .main__banner .mian-plan .mian-plan__fun { display: flex; font-size: 1.25vw; font-weight: normal; font-stretch: normal; letter-spacing: 0vw; color: var(--main-color); margin-top: 4.2vw; }
  .main .main__banner .mian-plan .plan-fun-list { display: flex; align-items: center; justify-content: center; margin-top: 2.2vw; width: 100%; box-sizing: border-box; }
  .main .main__banner .mian-plan .plan-fun-list .plan-fun-list-item { width: 12vw; height: 4.56vw; background-color: rgba(250, 250, 250, 0.3); border-radius: 0.521vw; display: flex; align-items: center; justify-content: center; font-size: 1.25vw; color: var(--main-color); flex-shrink: 0; margin-right: 1.72vw; font-size: 1.25vw; letter-spacing: 0vw; color: #ffffff; }
  .main .main__banner .mian-plan .plan-fun-list .width-14-58 { width: 14.58vw; }
  .main .main__banner .mian-plan .plan-fun-list .plan-fun-list-item .plan-fun-list-item__ic { width: 2.083vw; height: 2.083vw; margin-right: 0.88vw; }
  .main .function { width: 68.438vw; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .main .function .function-item { margin-top: 5vw; width: 55.469vw; position: relative; }
  .main .function .function-top--h5 { display: none; }
  .main .function .function-right { margin-top: 5vw; /* margin-left: 12.865vw; */ width: 55.469vw; position: relative; }
  .main .function .function-item .function-top .function-title { display: flex; align-items: flex-end; }
  .main .function .function-item .function-top .function-title .function-title__name { font-weight: bold; font-size: 2.5vw; color: #000000; letter-spacing: 0.15vw; }
  .main .function .function-item .function-top .function-title .function-title__desc { font-size: 0.9vw; color: #797979; margin-left: 0.833vw; letter-spacing: 0.15vw; }
  .main .function .function-item .function__subtitle { font-size: 1.1vw; color: #000000; margin-top: 1.5vw; letter-spacing: 0.15vw; }
  .main .function .function-item .function__more { width: 9.115vw; height: 2.344vw; background-color: var(--main-color); border-radius: 1.172vw; font-size: 1.042vw; font-weight: normal; font-stretch: normal; letter-spacing: 0vw; color: #ffffff; display: flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 2.865vw; }
  .main .function .function-item .details { width: 55.469vw; height: 28.646vw; background-color: #000000; text-align: center; box-sizing: border-box; margin-top: 2.5vw; }
  .main .function .function-item .details-001 { background: url("../images/commerce/pic_ecom_1.jpg") no-repeat center/cover; }
  .main .function .function-item .details-002 { background: url("../images/commerce/pic_ecom_2.jpg") no-repeat center/cover; }
  .main .function .function-item .details-003 { background: url("../images/commerce/pic_ecom_3.jpg") no-repeat center/cover; }
  .main .function .function-item .details-004 { background: url("../images/commerce/pic_ecom_4.jpg") no-repeat center/cover; }
  .main .function .function-item .details .details-shooting { position: absolute; left: 2.083vw; bottom: 2.656vw; display: flex; flex-direction: column; align-items: flex-start; }
  .main .function .function-item .details .media-operations { position: absolute; left: 2.344vw; bottom: 3.75vw; display: flex; flex-direction: column; align-items: flex-start; }
  .main .function .function-item .details .ad-service { position: absolute; left: 1.875vw; bottom: 4.688vw; display: flex; flex-direction: column; align-items: flex-start; }
  .main .function .function-item .details .details-operations { position: absolute; right: 1.719vw; bottom: 3.656vw; display: flex; flex-direction: column; align-items: flex-end; }
  .main .function .function-item .details .simple { height: 2.604vw; padding: 0 1.8vw; background-color: #ffffff; border-radius: 1.302vw; font-weight: bold; font-size: 1vw; color: #282828; }
  .main .function .function-item .details .theme { height: 2.604vw; padding: 0 1.8vw; background-color: var(--main-color); border-radius: 1.302vw; font-weight: bold; font-size: 1vw; color: #ffffff; }
  .main .function .function-item .details .padding-lr-1-51 { padding: 0 1.51vw; }
  .main .function .function-item .details .margin-b-0-677 { margin-bottom: 0.677vw; }
  .main .function .function-item .details .margin-b-0-938 { margin-bottom: 0.938vw; }
  .main .function .function-item .details .margin-b-1-146 { margin-bottom: 1.146vw; }
  .main .function .function-item .details .margin-b-1-979 { margin-bottom: 1.979vw; }
  .main .function .function-item .details .margin-r-0-729 { margin-right: 0.729vw; }
  .main .function .function-item .details .margin-r-0-938 { margin-right: 0.938vw; }
  .main .function .function-item .details .margin-b-10 { margin-bottom: 1.198vw; }
  .main .function .function-item .details .margin-r-10 { margin-right: 1.198vw; }
  .main .function .function-item .details .flex-row { display: flex; align-items: center; }
  .main .function .function-item .details .width-12-5 { width: 12.5vw; padding: 0; display: flex; align-items: center; padding-left: 2.24vw; }
  .main .function .function-item .details .width-8-833 { width: 8.833vw; padding: 0; display: flex; align-items: center; justify-content: center; }
  .main .function .function-item .details .width-13-542 { width: 13.542vw; padding: 0; display: flex; align-items: center; padding-left: 1.354vw; }
  .main .function .function-item .details .width-5-208 { width: 5.208vw; padding: 0; display: flex; align-items: center; justify-content: center; }
  .main .services { width: 68.438vw; margin-top: 10vw; }
  .main .services .services__title { font-weight: bold; font-size: 2.5vw; color: #000000; margin-bottom: 2.292vw; }
  .main .services .services-list { display: flex; flex-wrap: wrap; }
  .main .services .services-list .services-list-item { display: flex; flex-direction: column; margin-bottom: 3.5vw; }
  .main .services .services-list .services-list-item:nth-child(2n + 1) { margin-right: 3.38vw; }
  .main .services .services-list .services-list-item .services-list-item__pic { width: 32.5vw; height: 13.802vw; }
  .main .services .services-list .services-list-item .services-list-item__title { font-weight: bold; font-size: 1.354vw; color: #000000; margin-top: 1.68vw; }
  .main .services .services-list .services-list-item .services-list-item__subtitle { font-size: 0.938vw; color: #000000; margin-top: 0.8vw; }
  .main .case { width: 100vw; background-color: #f1f1f1; text-align: center; box-sizing: border-box; /* padding: 5.156vw 10.417vw 5.208vw; */ }
  .main .case > h2 { font-weight: bold; font-size: 2.083vw; height: 10vw; color: #282828; display: flex; align-items: center; justify-content: center; }
  .main .case > p { font-size: 1.25vw; line-height: 1.916vw; color: #707070; margin-bottom: 4.948vw; }
  .main .case .case-box { background-color: #ffffff; display: flex; justify-content: space-between; padding: 5.1vw 10.417vw; }
  .main .case .case-box .serve__menu { width: 16.146vw; flex: 1; background-color: var(--main-color); padding: 4.167vw 0; box-sizing: border-box; }
  .main .case .case-box .serve__menu .serve__menu--item { font-size: 1.25vw; line-height: 1.916vw; width: 100%; height: 3.646vw; color: #ffffff; cursor: pointer; display: flex; justify-content: center; align-items: center; flex-direction: row; }
  .main .case .case-box .serve__menu .serve__menu--item.active { background-color: #fff; font-size: 1.25vw; line-height: 1.916vw; color: #282828; font-weight: bold; }
  .main .case .case-box .serve__menu--content { flex: 1; box-sizing: border-box; padding: 3.8vw 2.656vw 2.8vw 3.549vw; text-align: left; display: flex; justify-content: space-between; align-items: flex-start; flex-direction: row; }
  .main .case .case-box .serve__menu--content .content-desc { width: 35.49vw; margin-right: 3vw; }
  .main .case .case-box .serve__menu--content .content-desc > div { margin-bottom: 2vw; }
  .main .case .case-box .serve__menu--content .content-desc > div > h2 { font-weight: bold; font-size: 1.042vw; line-height: 1.916vw; color: #282828; }
  .main .case .case-box .serve__menu--content .content-desc > div > p { font-size: 0.938vw; line-height: 1.916vw; color: #282828; letter-spacing: 0.05vw; }
  .main .case .case-box .serve__menu--content .content-desc .content-desc__num { font-weight: bold; font-size: 1.1vw; }
  .main .case .case-box .serve__menu--content .content-desc > button { width: 13.021vw; height: 3.385vw; background-color: var(--main-color); border-radius: 0.26vw; display: flex; justify-content: center; align-items: center; flex-direction: row; font-size: 1.25vw; line-height: 1.916vw; color: #ffffff; border: none; cursor: pointer; margin: 0 auto; }
  .main .case .case-box .serve__menu--content .content-img img { width: 19.792vw; height: 34.583vw; border-radius: 0.8vw; background-color: #000000; }
  .main .case .case-box .serve__menu--content > button { display: none; } }

@media screen and (max-width: 768px) { button { outline: none; border: none; color: #ffffff; cursor: pointer; }
  /* banner内容 */
  .main { /* 首页大图 */ /* 专注的产品 用心的服务 */ /* 优势资源 核心技术 */ display: flex; flex-direction: column; align-items: center; box-sizing: border-box; overflow-x: hidden; }
  .main .main__banner { width: 100vw; height: 179.333vw; background: url("../images/commerce/biai_h5_banner_6.jpg") no-repeat center/cover; padding-top: 38vw; text-align: center; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; }
  .main .main__banner h1 { font-size: 9.6vw; color: #ffffff; margin-bottom: 5.2vw; font-weight: bold; line-height: 11.6vw; padding: 0 3vw; }
  .main .main__banner h2 { width: 87vw; font-size: 5.8vw; color: #ffffff; line-height: 9.6vw; padding: 0 4vw; }
  .main .main__banner .mian-plan { display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; margin-top: 24.33vw; width: 100%; }
  .main .main__banner .mian-plan .mian-plan__btn { width: 46.133vw; height: 12vw; border-radius: 0.667vw; background-color: var(--main-color); border-radius: 0.26vw; outline: none; border: none; font-size: 4.792vw; color: #ffffff; cursor: pointer; }
  .main .main__banner .mian-plan .user { font-size: 4vw; color: #ffffff; margin-top: 7.3vw; }
  .main .main__banner .mian-plan .user .user__num { font-size: 4.8vw; font-weight: bold; color: #ffffff; }
  .main .main__banner .mian-plan .mian-plan__fun { display: flex; font-size: 3.2vw; width: 94vw; color: #ffffff; margin-top: 26vw; line-height: 5.4vw; display: none; }
  .main .main__banner .mian-plan .plan-fun-list { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 33vw; width: 100%; box-sizing: border-box; }
  .main .main__banner .mian-plan .plan-fun-list .plan-fun-list-item { width: 25.333vw; height: 12.667vw; border-radius: 1.333vw; background-color: rgba(250, 250, 250, 0.3); display: flex; align-items: center; font-size: 3.2vw; color: var(--main-color); flex-shrink: 0; margin-right: 4vw; padding-left: 2.8vw; color: #ffffff; letter-spacing: 0vw; box-sizing: border-box; }
  .main .main__banner .mian-plan .plan-fun-list .width-34-0 { width: 34vw; padding-left: 2.13vw; }
  .main .main__banner .mian-plan .plan-fun-list .plan-fun-list-item .plan-fun-list-item__ic { width: 5.333vw; height: 5.333vw; margin-right: 2vw; }
  .main .main__banner .mian-plan .plan-fun-list .plan-fun-list-item:last-child { margin-right: 0; }
  /* 功能 */
  .main .function { /* width: 68.438vw; */ width: 100%; display: flex; flex-direction: column; align-items: center; }
  .main .function .function-item { margin-top: 13vw; width: 92.667vw; position: relative; }
  .main .function .function-top--pc { display: none; }
  .main .function .function-item .function-top .function-title { display: flex; align-items: flex-end; }
  .main .function .function-item .function-top .function-title .function-title__name { font-weight: bold; font-size: 6.4vw; color: #000000; letter-spacing: 0.25vw; }
  .main .function .function-item .function-top .function-title .function-title__more { width: 23.333vw; height: 6vw; background-color: var(--main-color); border-radius: 3vw; font-size: 2.667vw; margin-left: 3.86vw; color: #ffffff; display: flex; align-items: center; justify-content: center; }
  .main .function .function-item .function-top .function__desc { font-size: 2.667vw; margin-top: 3.2vw; color: #797979; letter-spacing: 0.25vw; }
  .main .function .function-item .function__subtitle { font-size: 2.667vw; color: #000000; margin-top: 1.5vw; letter-spacing: 0.25vw; }
  .main .function .function-item .details { width: 92.667vw; height: 47.856vw; /* height: 53.333vw; */ text-align: center; box-sizing: border-box; margin-top: 4.63vw; }
  .main .function .function-item .details-001 { background: url("../images/commerce/pic_ecom_1.jpg") no-repeat center/cover; }
  .main .function .function-item .details-002 { background: url("../images/commerce/pic_ecom_2.jpg") no-repeat center/cover; }
  .main .function .function-item .details-003 { background: url("../images/commerce/pic_ecom_3.jpg") no-repeat center/cover; }
  .main .function .function-item .details-004 { background: url("../images/commerce/pic_ecom_4.jpg") no-repeat center/cover; }
  .main .function .function-item .details .details-shooting { position: absolute; left: 3.06vw; bottom: 3.86vw; display: flex; flex-direction: column; align-items: flex-start; }
  .main .function .function-item .details .details-operations { position: absolute; right: 1.719vw; bottom: 3.656vw; display: flex; flex-direction: column; align-items: flex-end; }
  .main .function .function-item .details .ad-service { position: absolute; left: 2.53vw; bottom: 4.93vw; display: flex; flex-direction: column; align-items: flex-start; }
  .main .function .function-item .details .simple { height: 6.667vw; padding: 0 4.2vw; background-color: #ffffff; border-radius: 3.333vw; font-weight: bold; font-size: 2.533vw; color: #282828; }
  .main .function .function-item .details .theme { height: 6.667vw; padding: 0 4.2vw; background-color: var(--main-color); border-radius: 3.333vw; font-weight: bold; font-size: 2.533vw; color: #ffffff; }
  .main .function .function-item .details .black { height: 6.667vw; padding: 0 4.2vw; background-color: #000000; border-radius: 3.333vw; font-weight: bold; font-size: 2.533vw; color: #ffffff; }
  .main .function .function-item .details .width14 { width: 36vw; padding: 0; box-sizing: border-box; padding-left: 3.86vw; display: flex; align-items: center; }
  .main .function .function-item .details .public-relations { bottom: 4.5vw; left: 3.845vw; }
  .main .function .function-item .details .margin-b-10 { margin-bottom: 3.06vw; }
  .main .function .function-item .details .margin-b-1-146 { margin-bottom: 2.93vw; }
  .main .function .function-item .details .margin-r-0-938 { margin-right: 2.4vw; }
  .main .function .function-item .details .padding-lr-1-51 { padding: 0 3.5vw; }
  .main .function .function-item .details .details-shooting-item { width: 58.6vw; padding: 0; padding-left: 3.8vw; display: flex; align-items: center; justify-content: flex-start; box-sizing: border-box; }
  .main .function .function-item .details .details-shooting-item .details-shooting-item__title { font-weight: bold; font-size: 2.133vw; color: #ffffff; }
  .main .function .function-item .details .details-shooting-item .details-shooting-item__content { font-size: 2.133vw; color: #ffffff; }
  .main .function .function-item .details .details-shooting-item .color282828 { color: #282828; }
  .main .function .function-item .details .margin-r-10 { margin-right: 3.06vw; }
  .main .function .function-item .details .flex-row { display: flex; align-items: center; }
  /* 更多专业服务 */
  .main .services-wrap { width: 100%; background-color: #ffffff; display: flex; align-items: center; justify-content: center; margin-top: 3vw; padding-bottom: 7.5vw; box-sizing: border-box; }
  .main .services { width: 83.333vw; }
  .main .services .services__title { font-weight: bold; color: #000000; height: 24.5vw; font-size: 6.4vw; display: flex; align-items: center; justify-content: center; }
  .main .services .services-list { display: flex; flex-wrap: wrap; }
  .main .services .services-list .services-list-item { display: flex; flex-direction: column; margin-bottom: 5.7vw; width: 100%; }
  .main .services .services-list .services-list-item .services-list-item__pic { width: 83.333vw; height: 35.333vw; }
  .main .services .services-list .services-list-item .services-list-item__title { font-weight: bold; font-size: 3.467vw; color: #000000; margin-top: 4.5vw; }
  .main .services .services-list .services-list-item .services-list-item__subtitle { font-size: 2.4vw; color: #000000; margin-top: 2vw; }
  /* 成功案例 */
  .main .case { background-color: #efefef; box-sizing: border-box; text-align: center; }
  .main .case > h2 { font-weight: bold; font-size: 6.667vw; color: #282828; height: 26vw; display: flex; align-items: center; justify-content: center; }
  .main .case > p { width: 91.5vw; height: 16.533vw; font-size: 4vw; line-height: 6.4vw; color: #707070; margin: 0 auto 8.267vw; }
  .main .case .case-box { background-color: #ffffff; }
  .main .case .case-box .serve__menu { display: flex; justify-content: flex-start; align-items: center; flex-direction: row; width: 100vw; height: 10.667vw; background-color: var(--main-color); }
  .main .case .case-box .serve__menu li { flex: 1; font-size: 4vw; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: row; color: #ffffff; text-align: center; }
  .main .case .case-box .serve__menu li.active { background-color: #fff; font-weight: bold; font-size: 4vw; color: #282828; }
  .main .case .case-box .serve__menu--content { width: 100%; height: 100%; padding: 7.067vw 3vw 6vw; box-sizing: border-box; text-align: left; display: flex; justify-content: space-between; flex-direction: column; }
  .main .case .case-box .serve__menu--content .content-desc { padding-left: 2.2vw; box-sizing: border-box; }
  .main .case .case-box .serve__menu--content .content-desc > div { margin-bottom: 7.333vw; }
  .main .case .case-box .serve__menu--content .content-desc > div h2 { font-weight: bold; font-size: 3.467vw; color: #282828; margin-bottom: 4.933vw; }
  .main .case .case-box .serve__menu--content .content-desc > div p { font-size: 3.6vw; line-height: 7vw; color: #282828; letter-spacing: 0.2vw; }
  .main .case .case-box .serve__menu--content .content-desc .content-desc__num { font-weight: bold; font-size: 4vw; }
  .main .case .case-box .serve__menu--content .content-desc button { width: 41.333vw; height: 10.667vw; background-color: var(--main-color); border-radius: 0.667vw; font-size: 4vw; color: #ffffff; border: none; outline: none; margin: 0 auto 6.8vw; display: none; }
  .main .case .case-box .serve__menu--content .content-img { width: 91.792vw; height: 170.583vw; margin: 0 auto; }
  .main .case .case-box .serve__menu--content .content-img img { display: block; width: 100%; height: 100%; border-radius: 2.5vw; background-color: #000000; }
  .main .case .case-box .serve__menu--content > button { width: 41.333vw; height: 10.667vw; background-color: var(--main-color); border-radius: 0.667vw; font-size: 4vw; color: #ffffff; border: none; outline: none; margin: 8vw auto 6.8vw; display: block; } }