.banner-container {
  height: 40.625rem;
  background: url(/image/home/automation_header.png) no-repeat center center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 5rem; }
  .banner-container p.banner-title {
    font-size: 2rem;
    color: #fff;
    letter-spacing: 0.05px;
    text-shadow: 2px 2px 2px #63636e; }
  .banner-container p.banner-subtitle {
    font-size: 1.125rem;
    padding-top: 1.125rem;
    color: #fff;
    text-shadow: 2px 2px 2px #63636e; }
  .banner-container .icons-wrap {
    padding-top: 2rem; }
    .banner-container .icons-wrap .icon-item {
      float: left;
      width: 4.25rem;
      height: 4.0625rem; }
      .banner-container .icons-wrap .icon-item:nth-child(1) {
        background: url(/image/home/automation_icon_1.png) no-repeat center center; }
      .banner-container .icons-wrap .icon-item:nth-child(2) {
        background: url(/image/home/automation_icon_2.png) no-repeat center center;
        margin: 0 4.25rem; }
      .banner-container .icons-wrap .icon-item:nth-child(3) {
        background: url(/image/home/automation_icon_3.png) no-repeat center center; }
  .banner-container a {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 160px;
    height: 48px;
    background-image: linear-gradient(55deg, #59DE9F 0%, #20BFAE 100%);
    border-radius: 2px;
    box-shadow: 0px 2px 17px rgba(160, 160, 172, 0.4);
    transition: all 0.5s ease-in-out;
    margin-top: 2rem;
    text-align: center;
    border-radius: 4px;
    color: #fff;
    text-decoration: none; }
    .banner-container a .span1 {
      margin-right: 4px;
      text-shadow: 1px 1px 2px rgba(20, 204, 180, 0.8); }
    .banner-container a .span2 {
      transition: all 0.5s ease-in-out; }
    .banner-container a:hover {
      box-shadow: 0px 2px 25px #63636e; }
      .banner-container a:hover .span2 {
        display: inline-block;
        transform: translate(5px); }

.nav-bar {
  height: 15.19rem;
  text-align: center; }
  .nav-bar p.nav-bar-title {
    font-size: 1.5rem;
    padding-top: 3.63rem;
    color: #323a51;
    letter-spacing: -0.25px; }
  .nav-bar ul.icon-list {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 2.38rem; }
    .nav-bar ul.icon-list .icon-list-item {
      margin-left: 7.94rem;
      width: 3.75rem;
      height: 5.94rem;
      cursor: pointer;
      background: url(/image/home/automation_signup_icon_1.png) no-repeat center center;
      background-size: contain; }
      .nav-bar ul.icon-list .icon-list-item:nth-child(1) {
        background: url(/image/home/automation_signup_icon_2.png) no-repeat center center;
        margin: 0; }
        .nav-bar ul.icon-list .icon-list-item:nth-child(1).active {
          background: url(/image/home/automation_signup_icon_1.png) no-repeat center center; }
      .nav-bar ul.icon-list .icon-list-item:nth-child(2) {
        background: url(/image/home/automation_bug_icon_2.png) no-repeat center center; }
        .nav-bar ul.icon-list .icon-list-item:nth-child(2).active {
          background: url(/image/home/automation_bug_icon_1.png) no-repeat center center; }
      .nav-bar ul.icon-list .icon-list-item:nth-child(3) {
        background: url(/image/home/automation_anly_icon_2.png) no-repeat center center; }
        .nav-bar ul.icon-list .icon-list-item:nth-child(3).active {
          background: url(/image/home/automation_anly_icon_1.png) no-repeat center center; }
      .nav-bar ul.icon-list .icon-list-item:nth-child(4) {
        background: url(/image/home/automation_tg_icon_2.png) no-repeat center center; }
        .nav-bar ul.icon-list .icon-list-item:nth-child(4).active {
          background: url(/image/home/automation_tg_icon_1.png) no-repeat center center; }
      .nav-bar ul.icon-list .icon-list-item:nth-child(5) {
        background: url(/image/home/automation_birth_icon_2.png) no-repeat center center; }
        .nav-bar ul.icon-list .icon-list-item:nth-child(5).active {
          background: url(/image/home/automation_birth_icon_1.png) no-repeat center center; }
      .nav-bar ul.icon-list .icon-list-item:nth-child(6) {
        background: url(/image/home/automation_more_icon_2.png) no-repeat center center; }
        .nav-bar ul.icon-list .icon-list-item:nth-child(6).active {
          background: url(/image/home/automation_more_icon_1.png) no-repeat center center; }
      .nav-bar ul.icon-list .icon-list-item:nth-child(7) {
        background: url(/image/home/automation_lswh_icon_2.png) no-repeat center center; }
        .nav-bar ul.icon-list .icon-list-item:nth-child(7).active {
          background: url(/image/home/automation_lswh_icon_1.png) no-repeat center center; }

.nav-container {
  height: 46.23rem;
  background-color: #F6F9FC;
  display: flex;
  justify-content: center;
  align-items: center; }
  .nav-container .nav-wrap {
    width: 70.75rem;
    height: 38.5rem;
    background: url(/image/home/automation_sign_pic_1.jpg) no-repeat center center;
    background-size: 71.875rem 39.375rem;
    position: relative;
    display: none; }
    .nav-container .nav-wrap a {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 160px;
      height: 50px;
      position: absolute;
      bottom: 272px;
      left: 26px;
      text-align: center;
      color: #fff; }
      .nav-container .nav-wrap a .span1 {
        margin-right: 4px; }
      .nav-container .nav-wrap a .span2 {
        transition: all 0.5s ease-in-out; }
      .nav-container .nav-wrap a:hover .span2 {
        transform: translate(5px);
        transition: all 0.5s ease-in-out; }
    .nav-container .nav-wrap.sign {
      background: url(/image/home/automation_sign_pic_1.jpg) no-repeat center center;
      background-size: 71.875rem 39.375rem;
      position: relative; }
      .nav-container .nav-wrap.sign a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 159px;
        height: 46px;
        position: absolute;
        bottom: 272px;
        left: 26px;
        text-align: center;
        color: #fff;
        background-color: #14ccb4;
        border-radius: 4px;
        text-decoration: none;
        transition: all 0.5s ease-in-out;
        box-shadow: 0px 2px 17px rgba(189, 189, 197, 0.4); }
        .nav-container .nav-wrap.sign a .span1 {
          text-shadow: 1px 1px 2px rgba(20, 204, 180, 0.8); }
        .nav-container .nav-wrap.sign a:hover {
          box-shadow: 0px 2px 25px #bdbdc5; }
          .nav-container .nav-wrap.sign a:hover .span2 {
            display: inline-block;
            transform: translate(5px); }
    .nav-container .nav-wrap.buy {
      background: url(/image/home/automation_sign_pic_2.jpg) no-repeat center center;
      background-size: 71.875rem 39.375rem;
      position: relative; }
      .nav-container .nav-wrap.buy a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 159px;
        height: 46px;
        position: absolute;
        bottom: 272px;
        left: 26px;
        text-align: center;
        color: #fff;
        background-color: #4c46d5;
        border-radius: 4px;
        text-decoration: none;
        transition: all 0.5s ease-in-out;
        box-shadow: 0px 2px 17px rgba(189, 189, 197, 0.4); }
        .nav-container .nav-wrap.buy a .span1 {
          text-shadow: 1px 1px 2px rgba(76, 70, 213, 0.8); }
        .nav-container .nav-wrap.buy a:hover {
          box-shadow: 0px 2px 25px #bdbdc5; }
          .nav-container .nav-wrap.buy a:hover .span2 {
            display: inline-block;
            transform: translate(5px); }
    .nav-container .nav-wrap.after {
      background: url(/image/home/automation_sign_pic_3.jpg) no-repeat center center;
      background-size: 71.875rem 39.375rem;
      position: relative; }
      .nav-container .nav-wrap.after a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 159px;
        height: 46px;
        position: absolute;
        bottom: 272px;
        left: 26px;
        text-align: center;
        color: #fff;
        background-color: #516af9;
        border-radius: 4px;
        text-decoration: none;
        transition: all 0.5s ease-in-out;
        box-shadow: 0px 2px 17px rgba(189, 189, 197, 0.4); }
        .nav-container .nav-wrap.after a .span1 {
          text-shadow: 1px 1px 2px rgba(81, 106, 249, 0.8); }
        .nav-container .nav-wrap.after a:hover {
          box-shadow: 0px 2px 25px #bdbdc5; }
          .nav-container .nav-wrap.after a:hover .span2 {
            display: inline-block;
            transform: translate(5px); }
    .nav-container .nav-wrap.activity {
      background: url(/image/home/automation_sign_pic_4.jpg) no-repeat center center;
      background-size: 71.875rem 39.375rem;
      position: relative; }
      .nav-container .nav-wrap.activity a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 159px;
        height: 46px;
        position: absolute;
        bottom: 272px;
        left: 26px;
        text-align: center;
        color: #fff;
        background-color: #ffc234;
        border-radius: 4px;
        text-decoration: none;
        transition: all 0.5s ease-in-out;
        box-shadow: 0px 2px 17px rgba(189, 189, 197, 0.4); }
        .nav-container .nav-wrap.activity a .span1 {
          text-shadow: 1px 1px 2px rgba(255, 194, 52, 0.8); }
        .nav-container .nav-wrap.activity a:hover {
          box-shadow: 0px 2px 25px #bdbdc5; }
          .nav-container .nav-wrap.activity a:hover .span2 {
            display: inline-block;
            transform: translate(5px); }
    .nav-container .nav-wrap.birth {
      background: url(/image/home/automation_sign_pic_5.jpg) no-repeat center center;
      background-size: 71.875rem 39.375rem;
      position: relative; }
      .nav-container .nav-wrap.birth a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 159px;
        height: 46px;
        position: absolute;
        bottom: 272px;
        left: 26px;
        text-align: center;
        color: #fff;
        background-color: #ff624e;
        border-radius: 4px;
        text-decoration: none;
        transition: all 0.5s ease-in-out;
        box-shadow: 0px 2px 17px rgba(189, 189, 197, 0.4); }
        .nav-container .nav-wrap.birth a .span1 {
          text-shadow: 1px 1px 2px rgba(255, 98, 78, 0.8); }
        .nav-container .nav-wrap.birth a:hover {
          box-shadow: 0px 2px 25px #bdbdc5; }
          .nav-container .nav-wrap.birth a:hover .span2 {
            display: inline-block;
            transform: translate(5px); }
    .nav-container .nav-wrap.more {
      background: url(/image/home/automation_sign_pic_6.jpg) no-repeat center center;
      background-size: 71.875rem 39.375rem;
      position: relative; }
      .nav-container .nav-wrap.more a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 159px;
        height: 46px;
        position: absolute;
        bottom: 272px;
        left: 26px;
        text-align: center;
        color: #fff;
        background-color: #00b3a6;
        border-radius: 4px;
        text-decoration: none;
        transition: all 0.5s ease-in-out;
        box-shadow: 0px 2px 17px rgba(189, 189, 197, 0.4); }
        .nav-container .nav-wrap.more a .span1 {
          text-shadow: 1px 1px 2px rgba(0, 179, 166, 0.8); }
        .nav-container .nav-wrap.more a:hover {
          box-shadow: 0px 2px 25px #bdbdc5; }
          .nav-container .nav-wrap.more a:hover .span2 {
            display: inline-block;
            transform: translate(5px); }
    .nav-container .nav-wrap.back {
      background: url(/image/home/automation_sign_pic_7.jpg) no-repeat center center;
      background-size: 71.875rem 39.375rem;
      position: relative; }
      .nav-container .nav-wrap.back a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 159px;
        height: 46px;
        position: absolute;
        bottom: 272px;
        left: 26px;
        text-align: center;
        color: #fff;
        background-color: #2b8bfb;
        border-radius: 4px;
        text-decoration: none;
        transition: all 0.5s ease-in-out;
        box-shadow: 0px 2px 17px rgba(189, 189, 197, 0.4); }
        .nav-container .nav-wrap.back a .span1 {
          text-shadow: 1px 1px 2px rgba(43, 139, 251, 0.8); }
        .nav-container .nav-wrap.back a:hover {
          box-shadow: 0px 2px 25px #bdbdc5; }
          .nav-container .nav-wrap.back a:hover .span2 {
            display: inline-block;
            transform: translate(5px); }
    .nav-container .nav-wrap.active {
      display: block; }

section {
  height: 61.25rem;
  text-align: center; }
  section.module {
    padding-top: 7.535rem; }
    section.module p.module-title {
      font-size: 2rem;
      color: #323a51;
      letter-spacing: 0.08px; }
    section.module p.module-subtitle {
      font-size: 1.13rem;
      color: #323a51;
      letter-spacing: 0.05px;
      margin-top: 1.25rem; }
    section.module .card-container {
      width: 70.01rem;
      margin: 0 auto;
      opacity: 0;
      transition: all 1.75s; }
      section.module .card-container.active {
        opacity: 1; }
      section.module .card-container .card {
        width: 21.25rem;
        height: 27.5rem;
        border-radius: 6px;
        margin-top: 4.38rem;
        box-shadow: 0px 2px 50px rgba(189, 189, 197, 0.4);
        float: left;
        position: relative; }
        section.module .card-container .card:nth-child(2) {
          margin: 4.38rem 3.13rem; }
        section.module .card-container .card .card-header {
          height: 13.75rem;
          background: url(/image/home/automation_card_header_3.png) no-repeat center center;
          background-color: #F5F8FC; }
          section.module .card-container .card .card-header.second {
            background: url(/image/home/automation_card_header_2.png) no-repeat center center;
            background-color: #F5F8FC; }
          section.module .card-container .card .card-header.first {
            background: url(/image/home/automation_card_header_1.png) no-repeat center center;
            background-color: #F5F8FC; }
        section.module .card-container .card .card-index {
          position: absolute;
          width: 1.81rem;
          height: 1.81rem;
          border-radius: 50%;
          background: url(/image/home/automation_card_index_1.png) no-repeat center center;
          top: 12.81rem;
          left: 1.5rem; }
          section.module .card-container .card .card-index.second {
            background: url(/image/home/automation_card_index_2.png) no-repeat center center; }
          section.module .card-container .card .card-index.third {
            background: url(/image/home/automation_card_index_3.png) no-repeat center center; }
        section.module .card-container .card .card-content {
          text-align: left;
          padding-left: 1.5rem;
          padding-top: 2.31rem; }
          section.module .card-container .card .card-content .card-content-header {
            font-size: 20px;
            color: #140021;
            letter-spacing: 0.3px;
            line-height: 28px; }
            section.module .card-container .card .card-content .card-content-header .strong {
              font-size: 20px;
              color: #1abc9c;
              letter-spacing: 0.3px;
              line-height: 28px; }
          section.module .card-container .card .card-content .card-content-detail {
            font-size: 16px;
            color: #323A51;
            letter-spacing: 0.38px;
            padding-top: 1.13rem; }
            section.module .card-container .card .card-content .card-content-detail span {
              display: inline-block;
              margin-bottom: -4px; }
            section.module .card-container .card .card-content .card-content-detail .icon {
              display: inline-block;
              width: 1.24rem;
              height: 1.25rem;
              background: url(/image/home/automation_card_icon_1.png) no-repeat center center;
              background-size: 0.94rem 0.94rem;
              margin-right: 0.38rem;
              padding: 0; }
              section.module .card-container .card .card-content .card-content-detail .icon.link {
                background: url(/image/home/automation_card_icon_2.png) no-repeat center center; }
              section.module .card-container .card .card-content .card-content-detail .icon.mail {
                background: url(/image/home/automation_card_icon_3.png) no-repeat center center; }
              section.module .card-container .card .card-content .card-content-detail .icon.verb {
                background: url(/image/home/automation_card_icon_4.png) no-repeat center center; }
              section.module .card-container .card .card-content .card-content-detail .icon.range {
                background: url(/image/home/automation_card_icon_5.png) no-repeat center center; }
              section.module .card-container .card .card-content .card-content-detail .icon.links {
                background: url(/image/home/automation_card_icon_6.png) no-repeat center center; }
              section.module .card-container .card .card-content .card-content-detail .icon.send {
                background: url(/image/home/automation_card_icon_7.png) no-repeat center center; }
              section.module .card-container .card .card-content .card-content-detail .icon.update {
                background: url(/image/home/automation_card_icon_8.png) no-repeat center center; }
              section.module .card-container .card .card-content .card-content-detail .icon.more {
                background: url(/image/home/automation_card_icon_9.png) no-repeat center center; }
  section.condition {
    padding-top: 7.31rem;
    background-color: #f6f9fc;
    border-top: 1px solid #dbdbe2;
    border-bottom: 1px solid #dbdbe2; }
    section.condition p.condition-title {
      font-size: 2rem;
      color: #323a51;
      letter-spacing: 0.08px; }
    section.condition p.condition-subtitle {
      padding-top: 1.25rem;
      font-size: 1.125rem;
      color: #323a51;
      letter-spacing: 0.05px; }
    section.condition .condition-list-wrap {
      background: url(/image/home/automation_setting_bg.png) no-repeat center center; }
    section.condition ul.condition-list {
      width: 80.5rem;
      margin: 0 auto;
      padding-top: 4.94rem; }
      section.condition ul.condition-list .condition-list-item {
        width: 19.5rem;
        height: 13.75rem;
        text-align: center;
        transform: scale(0);
        transition: all 0.75s;
        float: left;
        background: url(/image/home/automation_cond_verb.png) no-repeat center center;
        background-size: contain; }
        section.condition ul.condition-list .condition-list-item.active {
          transform: scale(1); }
        section.condition ul.condition-list .condition-list-item.verb {
          background: url(/image/home/automation_cond_verb.png) no-repeat center center; }
          section.condition ul.condition-list .condition-list-item.verb.active {
            transition-delay: 0.3s; }
        section.condition ul.condition-list .condition-list-item.date {
          background: url(/image/home/automation_cond_date.png) no-repeat center center; }
          section.condition ul.condition-list .condition-list-item.date.active {
            transition-delay: 0.1s; }
        section.condition ul.condition-list .condition-list-item.special {
          background: url(/image/home/automation_cond_special.png) no-repeat center center; }
          section.condition ul.condition-list .condition-list-item.special.active {
            transition-delay: 0s; }
        section.condition ul.condition-list .condition-list-item.open {
          background: url(/image/home/automation_cond_open.png) no-repeat center center; }
          section.condition ul.condition-list .condition-list-item.open.active {
            transition-delay: 0.4s; }
        section.condition ul.condition-list .condition-list-item.click {
          background: url(/image/home/automation_cond_click.png) no-repeat center center; }
          section.condition ul.condition-list .condition-list-item.click.active {
            transition-delay: 0.5s; }
        section.condition ul.condition-list .condition-list-item.link {
          background: url(/image/home/automation_cond_link.png) no-repeat center center; }
          section.condition ul.condition-list .condition-list-item.link.active {
            transition-delay: 0.2s; }
        section.condition ul.condition-list .condition-list-item:nth-child(2) {
          margin: 0 11rem; }
        section.condition ul.condition-list .condition-list-item .condition-list-item-header {
          width: 7.5rem;
          height: 7.5rem;
          margin: 0 auto; }
        section.condition ul.condition-list .condition-list-item p.condition-list-item.title {
          font-size: 1.25rem;
          color: #323a51;
          letter-spacing: 0.02rem;
          margin: 0; }
        section.condition ul.condition-list .condition-list-item p.condition-list-item-subtitle {
          font-size: 1.125rem;
          color: #323a51;
          letter-spacing: 0.02rem;
          opacity: 0.7; }
  section.data p.data-title {
    font-size: 2rem;
    color: #323a51;
    letter-spacing: 0.08px;
    padding-top: 5.13rem; }
  section.data p.data-subtitle {
    font-size: 1.125rem;
    color: #323a51;
    letter-spacing: 0.05px;
    padding-top: 1.25rem;
    padding-bottom: 2rem; }
  section.data .img {
    margin: 0 auto;
    width: 67.38rem;
    height: 47.19rem;
    background: url(/image/home/automation_data_pic.png) no-repeat center center;
    background-size: 100% auto; }