.feature-intro .container .description .segment .title {
  color: #444444;
  font-family: source-han-sans-bold, sans-serif;
}

.feature-intro .container .description .segment .content {
  font-family: source-han-sans-medium, sans-serif;
  line-height: 26px;
}

.feature-intro .container .description .segment .catch-phrase .text {
  font-size: 20px;
  line-height: 30px;
  margin-right: 10px;
}

.feature-intro .container .description .segment .catch-phrase .icon {
  display: inline-block;
  height: 30px;
  width: 30px;
  margin-right: 10px;
  transform: translateY(8px);
  background-size: cover;
}

/* ----------------------------------------------------------------------------
 * Images
 *-------------------------------------------------------------------------- */

.card-circular-white {
  background-image: url("/images/section-2/card-circular-white.png");
}

.card-circular-green {
  background-image: url("/images/section-2/card-circular-green.png");
}

.card-circular-black {
  background-image: url("/images/section-2/card-circular-black.png");
}

.card-circular-white:hover {
  background-image: url("/images/section-2/card-circular-inverted-white.png");
}

.chart-circular-white {
  background-image: url("/images/section-2/chart-circular-white.png");
}

.chart-circular-white:hover {
  background-image: url("/images/section-2/chart-circular-inverted-white.png");
}

.pointer-circular-white {
  background-image: url("/images/section-2/pointer-circular-white.png");
}

.pointer-circular-white:hover {
  background-image: url("/images/section-2/pointer-circular-inverted-white.png");
}

.list-circular-white {
  background-image: url("/images/section-2/list-circular-white.png");
}

.list-circular-white:hover {
  background-image: url("/images/section-2/list-circular-inverted-white.png");
}

/*
section-2
*/

#section-2 {
  /* background-color: #f7f8f8; */
}

#section-2 .container .segment {
  text-align: center;
  /* position: relative; */
  padding: 60px 0px;
  /* width: 100%; */
  /* top: 50%; */
  /* transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%); */
}

.contain.icon img {
  margin: auto;
  width: 35%;
}

#section-2 .container .segment .item .row {
  align-items: center;
}

#section-2 .container .segment .item .text {
  /* color: #FFFFFF; */
  color:#51B5AF;
  font-size: 25px;
  font-family: source-han-sans-medium, sans-serif;
  margin-top: 20px;
  margin-bottom: 20px;
}

#section-2 .container .segment .item .content {
  /* color: #FFFFFF; */
  font-size: 15px;
  line-height: 24px;
  font-family: source-han-sans-medium, sans-serif;
}

#section-2 .container .contain{
    height: auto;
  }

.feature-intro .description .segment .catch-phrase .text {
  /* float: left; */
  /* color: #313C44; */
  color:#51B5AF;
  display: inline;
  font-family: source-han-sans-bold, sans-serif;
}

.feature-intro .container .description .segment .title {
  font-size: 20px;
  line-height: 30px;
  margin: 16px 0 20px 0;
}

.feature-intro .container .description .segment .content {
  font-size: 15px;
  line-height: 24px;
  font-family: source-han-sans-medium, sans-serif;
}

@media only screen and (max-width: 760px) {
  #section-2 .container .segment .item {
    /* padding: 27px; */
  }

  #section-2 .container .segment .item .content {
    /* color: #FFFFFF; */
    text-align: left;
  }

  #section-2 .container .segment .item .intro {
    /* width: 83px;
    height: 83px;
    margin-bottom: 22px; */
    text-align: left;
  }

  #section-2 .container .segment .item .text {
    font-size: 20px;
  }
}

/* section-3 */

.card-green {
  /* background-size: cover; */
  background-image: url("/images/card-green.png");

}

.card-black {
  background-size: cover;
}

#section-3 {
  position: relative;
  padding: 80px 0;
  z-index: 4;
}

#section-3 .figure .contact-record-app-template {
  position: relative;
  margin: 0 auto;
}

.contact-record-app-template {
  /* background-image: url('/images/section-3/contact-record.png'); */
  box-shadow: 2px 2px 15px rgba(100, 100, 100, 0.7);
  border-radius: 15px 15px;
}

.contact-record-app-template > img {
  border-radius: 10px 10px;
}

.contact-record-app-element-headshot {
  background-image: url("/images/section-3/contact-record-app-element-headshot.png");
}

.contact-record-app-element-profile {
  background-image: url("/images/section-3/contact-record-app-element-profile.png");
}

.contact-record-app-element-detail {
  background-image: url("/images/section-3/contact-record-app-element-detail.png");
}

@media only screen and (min-width: 1080px) {
  #section-3 {
    /* height: 700px; */
  }

  #section-3 .figure .contact-record-app-template {
    width: 360px;
    /* height: 480px; */
    /* top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%); */
  }

  #section-3 .figure .contact-record-app-template .contact-record-app-element-headshot {
    width: 72px;
    height: 72px;
    top: 56px;
    left: 82px;
    position: absolute;
  }

  #section-3 .figure .contact-record-app-template .contact-record-app-element-profile {
    height: 70px;
    width: 145px;
    top: 53px;
    right: 48px;
    position: absolute;
  }

  #section-3 .figure .contact-record-app-template .contact-record-app-element-detail {
    width: 349px;
    height: 193px;
    top: 145px;
    left: 6px;
    position: absolute;
  }
}

@media only screen and (min-width: 760px) and (max-width: 1080px) {
  #section-3 {
    /* height: 600px; */
  }

  #section-3 .figure .contact-record-app-template {
    width: 300px;
    /* height: 400px; */
    /* top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%); */
  }

  #section-3 .figure .contact-record-app-template .contact-record-app-element-headshot {
    width: 59px;
    height: 59px;
    top: 47px;
    left: 69px;
    position: absolute;
  }

  #section-3 .figure .contact-record-app-template .contact-record-app-element-profile {
    height: 60px;
    width: 124px;
    top: 43px;
    right: 35px;
    position: absolute;
  }

  #section-3 .figure .contact-record-app-template .contact-record-app-element-detail {
    width: 290px;
    height: 160px;
    top: 123px;
    left: 6px;
    position: absolute;
  }
}

@media only screen and (max-width: 760px) {
  #section-3 {
    height: 1000px;
    text-align: center;
  }

  #section-3 .container .row {
    flex-direction: column-reverse;
  }

  #section-3 .figure .contact-record-app-template {
    width: 240px;
    /* height: 318px; */
    /* margin-top: 30px; */
  }

  #section-3 .figure .contact-record-app-template .contact-record-app-element-headshot {
    width: 46px;
    height: 46px;
    top: 38px;
    left: 56px;
    position: absolute;
  }

  #section-3 .figure .contact-record-app-template .contact-record-app-element-profile {
    height: 48px;
    width: 100px;
    top: 32px;
    right: 27px;
    position: absolute;
  }

  #section-3 .figure .contact-record-app-template .contact-record-app-element-detail {
    width: 231px;
    height: 128px;
    top: 96px;
    left: 5px;
    position: absolute;
  }
}

/* section-4 */

.chart-green {
  background-image: url("/images/section-4/chart-green.png");
}

.chart-black {
  background-image: url("/images/section-4/chart-black.png");
}

.activity-observation-app-screen-front {
  background-image: url("/images/section-4/chart.png");
  background-size: cover;
  border-radius: 15px;
  box-shadow: 2px 2px 15px rgba(100, 100, 100, 0.7);
}

.activity-observation-app-screen-back {
  /* background-image: url("/images/section-4/customer-list.png"); */
  background-image: url("/images/notification-center-screen.png");
  background-size: cover;
  border-radius: 15px;
  box-shadow: 2px 2px 15px rgba(100, 100, 100, 0.7);
}

/* ----------------------------------------------------------------------------
 * Styles
 *-------------------------------------------------------------------------- */

.bgc-gray {
  background-color: #f7f8f8;
}

#section-4 {
  position: relative;
  padding: 80px 0;
}

#section-4 .activity-observation-app-screen-back {
  position: absolute;
  z-index: 3;
  border-radius: 15px;
}

#section-4 .activity-observation-app-screen-front {
  position: relative;
  margin: 0 auto;
  z-index: 10;
}

#section-4.feature-intro .container .description .segment .content {
  padding-right: 40px;
}

@media only screen and (max-width: 760px) {
  #section-4.feature-intro .container .description .segment .content {
    padding-right: 0px;
  }
}

@media only screen and (min-width: 1080px) {
  #section-4 {
    height: 800px;
  }

  #section-4 .activity-observation-app-screen-back {
    width: 340px;
    height: 464px;
    top: 0%;
    right: 30%;
  }

  #section-4 .activity-observation-app-screen-front {
    width: 340px;
    height: 459px;
    top: 42%;
    left: 25%;
    background-size: cover;
  }
}

@media only screen and (min-width: 760px) and (max-width: 1080px) {
  #section-4 {
    height: 720px;
  }

  #section-4 .activity-observation-app-screen-back {
    width: 300px;
    height: 500px;
    top: 0%;
    /* right: 3%; */
  }

  #section-4 .activity-observation-app-screen-front {
    width: 300px;
    height: 390px;
    top: 55%;
    right: -12%;
  }
}

@media only screen and (max-width: 760px) {
  #section-4 {
    height: 850px;
    text-align: center;
  }

  #section-4 .activity-observation-app-screen-back {
    width: 200px;
    height: 253px;
    left: 11%;
  }

  #section-4 .activity-observation-app-screen-front {
    position: absolute;
    width: 200px;
    height: 262px;
    right: 11%;
    top: 140px;
  }
}

/* seciton-5 */

/* ----------------------------------------------------------------------------
 * Images
 *-------------------------------------------------------------------------- */

.pointer-green {
  background-image: url(/images/pointer-green.png?abfbb5eecc8a8984c8c658fb48635721);
}

.pointer-black {
  background-image: url(/images/pointer-black.png?c0a1f839ca65cf57f8072d24fa550a28);
}

.call-circular-inverted-yellow {
  background-image: url(/images/call-circular-inverted-yellow.png?269dee1b3d158677d2b9e9197c308108);
  box-shadow: 2px 2px 15px rgba(100, 100, 100, 0.7);
}

.mail-circular-inverted-green {
  background-image: url(/images/mail-circular-inverted-green.png?e1e5581d6298330eada221d0a681603d);
  box-shadow: 2px 2px 15px rgba(100, 100, 100, 0.7);
}

.mail-circular-inverted-black {
  box-shadow: 2px 2px 15px rgba(100, 100, 100, 0.7);
}

.map-circular-inverted-purple {
  background-image: url(/images/map-circular-inverted-purple.png?00c82956b29e0ba1c13bf651df208a8d);
  box-shadow: 2px 2px 15px rgba(100, 100, 100, 0.7);
}

.talk-circular-inverted-pink {
  background-image: url(/images/talk-circular-inverted-pink.png?2030787959154dd684ed924c732b72e4);
  box-shadow: 2px 2px 15px rgba(100, 100, 100, 0.7);
}

.single-press-summon-app-screen {
  /* background-image: url(/images/calendar.png?5183cee0cb2152a918101876f875c7d1); */
  background-image: url(/images/schedule-day-screen.png);
  background-size: cover;
  box-shadow: 2px 2px 15px rgba(100, 100, 100, 0.7);
}

/* ----------------------------------------------------------------------------
 * Styles
 *-------------------------------------------------------------------------- */

#section-5 {
  /* height: 500px; */
  position: relative;
  padding: 80px 0px;
}

#section-5 .container .figure {
  position: relative;
}

#section-5 .container .row {
  flex-direction: row-reverse;
}

#section-5 .single-press-summon-app-screen {
  position: relative;
  background-size: cover;
  border-radius: 15px;
}

#section-5 .figure .icon {
  position: absolute;
  background-size: cover;
}

@media only screen and (min-width: 1080px) {
  #section-5 {
    /* height: 700px; */
  }

  #section-5 .single-press-summon-app-screen {
    width: 350px;
    height: 480px;
  }

  #section-5 .figure .icon {
    right: 4%;
    height: 60px;
    width: 60px;
    border-radius: 30px;
  }

  #section-5 .call-circular-inverted-yellow {
    top: 45px;
  }

  #section-5 .talk-circular-inverted-pink {
    top: 125px;
  }

  #section-5 .map-circular-inverted-purple {
    top: 205px;
  }

  #section-5 .mail-circular-inverted-green {
    top: 285px;
  }

  #section-5 .mail-circular-inverted-black {
    top: 285px;
  }
}

@media only screen and (min-width: 760px) and (max-width: 1080px) {
  #section-5 {
    /* height: 600px; */
  }

  #section-5 .single-press-summon-app-screen {
    width: 300px;
    height: 400px;
    /* top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%); */
  }

  #section-5 .figure .icon {
    right: 11%;
    height: 50px;
    width: 50px;
    border-radius: 25px;
  }

  #section-5 .call-circular-inverted-yellow {
    top: 55px;
  }

  #section-5 .talk-circular-inverted-pink {
    top: 125px;
  }

  #section-5 .map-circular-inverted-purple {
    top: 195px;
  }

  #section-5 .mail-circular-inverted-green {
    top: 265px;
  }

  #section-5 .mail-circular-inverted-black {
    top: 265px;
  }
}

@media only screen and (min-width: 760px) and (max-width: 900px) {
  #section-5 .figure .icon {
    right: 1%;
  }
}

@media only screen and (max-width: 760px) {
  #section-5 {
    /* height: 630px; */
    text-align: center;
  }

  #section-5 .single-press-summon-app-screen {
    width: 240px;
    height: 330px;
    border-radius: 15px;
    left: 10%;
  }

  #section-5 .figure .icon {
    right: 10%;
    height: 50px;
    width: 50px;
    border-radius: 25px;
  }

  #section-5 .call-circular-inverted-yellow {
    top: 5px;
  }

  #section-5 .talk-circular-inverted-pink {
    top: 75px;
  }

  #section-5 .map-circular-inverted-purple {
    top: 135px;
  }

  #section-5 .mail-circular-inverted-green {
    top: 195px;
  }

  #section-5 .mail-circular-inverted-black {
    top: 195px;
  }
}

/* section-6 */

/* ----------------------------------------------------------------------------
* Images
*-------------------------------------------------------------------------- */

.list-green {
  background-image: url(/images/list-green.png?53e2b7ae2013144ca1041f4f3df12808);
}

.list-black {
  background-image: url(/images/list-black.png?145dd0d38cb6a34cafa90462a6422dae);
}

.customization-app-template-front {
  /* background-image: url(/images/customer-tag.png?53187e7417745167ae76527c5fa48a5e); */
  background-image: url(/images/create-customer-screen.png);
  background-size: cover;
  /* -webkit-box-shadow: 2px 2px 15px rgba(100, 100, 100, 0.7);
  -moz-box-shadow: 2px 2px 15px rgba(100, 100, 100, 0.7); */
  box-shadow: 2px 2px 15px rgba(100, 100, 100, 0.7);
  /* -webkit-border-radius: 15px;
  -moz-border-radius: 15px; */
  border-radius: 15px;
}

.customization-app-element-item-1 {
  background-image: url(/images/customization-app-element-item-1.png?3a09511c4079df99847e9d23718a0fe7);
}

.customization-app-element-item-2 {
  background-image: url(/images/customization-app-element-item-2.png?a66abc348412a0641473cefbf8d1e9bf);
}

.customization-app-element-item-3 {
  background-image: url(/images/customization-app-element-item-3.png?b480dfc26d57b8fb9fe85a93f31b2a32);
}

.customization-app-element-item-4 {
  background-image: url(/images/customization-app-element-item-4.png?1d6b15be554f4fd127680be2912a71e1);
}

.customization-app-element-item-5 {
  background-image: url(/images/customization-app-element-item-5.png?118716bec7d54dede3f8c84a381d34c9);
}

.customization-app-screen-back {
  /* background-image: url(/images/product.png?2f6f29b6da56b5981015adbd8dfc3aa9); */
  background-image: url(/images/select-product-screen.png);
  background-size: cover;
  box-shadow: 2px 2px 15px rgba(100, 100, 100, 0.7);
}

/* ----------------------------------------------------------------------------
 * Styles
 *-------------------------------------------------------------------------- */

#section-6 {
  /* height: 500px; */
  padding: 80px 0;
  position: relative;
}

#section-6 .container .figure {
  position: relative;
  height: 375px;
}

#section-6 .customization-app-screen-back {
  position: absolute;
  z-index: 3;
  border-radius: 15px;
}

#section-6 .customization-app-template-front {
  position: relative;
  z-index: 10;
}

@media only screen and (min-width: 1080px) {
  #section-6 {
    height: 750px;
  }

  #section-6 .customization-app-screen-back {
    width: 360px;
    height: 370px;
    top: -8%;
    left: 3%;
  }

  #section-6 .customization-app-template-front {
    width: 359px;
    height: 390px;
    top: 50%;
    right: -160px;
    text-align: center;
  }

  #section-6 .customization-app-template-front .list {
    position: absolute;
    top: 180px;
    left: 13px;
  }

  #section-6 .customization-app-template-front .list .image {
    width: 330px;
    height: 42px;
    margin-bottom: 6px;
  }
}

@media only screen and (max-width: 760px) {
  /* .customization-app-screen-back {
    background-image: url('../images/section-6/customization-app-screen-back-portrait.png');
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
  } */
}

@media only screen and (min-width: 760px) and (max-width: 1080px) {
  #section-6 {
    height: 600px;
  }

  #section-6 .customization-app-screen-back {
    width: 300px;
    height: 310px;
    top: 0%;
    left: 3%;
  }

  #section-6 .customization-app-template-front {
    width: 300px;
    height: 310px;
    top: 30%;
    right: -130px;
    text-align: center;
  }

  #section-6 .customization-app-template-front .list {
    position: absolute;
    top: 150px;
    left: 7px;
  }

  #section-6 .customization-app-template-front .list .image {
    width: 280px;
    height: 36px;
    margin-bottom: 4px;
  }
}

@media only screen and (max-width: 760px) {
  #section-6 {
    /* height: 650px; */
    text-align: center;
  }

  #section-6 .customization-app-screen-back {
    position: absolute;
    width: 200px;
    height: 225px;
    left: 10%;
  }

  #section-6 .customization-app-template-front {
    position: absolute;
    width: 200px;
    height: 220px;
    top: 40%;
    right: 10%;
    text-align: center;
  }

  #section-6 .customization-app-template-front .list {
    position: absolute;
    top: 100px;
    left: 9px;
  }

  #section-6 .customization-app-template-front .list .image {
    width: 180px;
    height: 23px;
    margin-bottom: 4px;
  }
}

/* --------------price------------ */

#plan-section {
  padding: 80px 0;
}

#plan-section .title {
  font-size: 25px;
  font-family: source-han-sans-medium, sans-serif;
  text-align: center;
  color: #2f3d42;
}

.price-box {
  display: table;
  width: 100%;
  background-color: #fff;
  /* padding: 25px; */
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
}

.price-plan {
  display: table-cell;
  vertical-align: top;
}

.price-plan .item {
  font-size: 15px;
  padding: 10px 32px;
  border-right: solid 1px #f3f3f3;
  color: #2f3d42;
}

.price-plan .first-item {
  height: 260px;

}

.price-plan .first-item.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
}


.price-plan .first-item .item-logo {
  width: 150px;

}

.price-plan .first-item .price-title {
  font-weight: 500;
  font-size: 20px;
  padding: 35px 12px 12px;
}

.price-plan .first-item .pane-price {
  font-size: 30px;
  font-weight: 500;
  padding: 12px 0px;
  display: flex;
  justify-content: center;
}

.price-plan .first-item .pane-price .sign {
  font-weight: 700;
  font-size: 12px;
}

.price-plan .first-item .pane-price .price {
  font-size: 36px;
  font-weight: 900;
  padding: 7px;
}

.price-plan .first-item .pane-price .during {
  display: flex;
  align-items: flex-end;
  font-size: 12px;
  font-weight: 400;
}

.price-plan .first-item .price-des {
  font-size: 15px;
  padding: 12px;
}

.price-plan .hot-version {
  position: absolute;
  width: 100%;
  left: 0;
  background-color: #FF8573;
  top: 0;
  color: #fff;
  border-radius: 10px 10px 0px 0px;
}

.price-plan.third-column .item {
  border-right: none;
}

.price-plan.four-column {
  position: relative;
}

.price-plan.four-column .first-item {
  border: 1px solid #ff8573;
  border-radius: 10px 10px 0px 0px;
}

.price-plan .item:nth-child(even) {
  background: #F7F8F8;
}

.price-plan.second-column,
.price-plan.third-column,
.price-plan.four-column,
.five-column {
  text-align: center;
  width: 20%;
}

.icon-check {
  color: #6FC9A7;
}

.icon-times {
  color: #ED3318;
}

.plan-btn {
  background-color: #56b9b3;
  color: #fff;
}

@media only screen and (max-width: 1200px) {
  .price-box {
    display: block;
    box-shadow: none;
    background: none;
  }

  .price-plan.first-column {
    display: none;
  }

  .price-plan.second-column,
  .price-plan.third-column,
  .price-plan.four-column,
  .five-column {
    display: block;
    width: 100%;
    background-color: #fff;
    margin: 25px 0px;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
  }

  .price-plan .item::before {
    content: attr(data-label);
    display: inline-block;
    /* width: 30%; */
    text-align: right;
    padding-right: 10px;
  }

  .price-plan .item.first-item::before {
    content: none;
  }
}

/* --------section 10 ----------- */

.masthead .mobile-store {
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
}

.masthead .mobile-store .app-btn {
  display: block;
  height: 100px;
  width: 30%;
}

.masthead .mobile-store .web-app-btn .web-app-box {
  display: flex;
}

.mobile-store .app-btn {
  width: 30%;
}

.mobile-store .app-store-btn {
  background-image: url(/images/section-10/apple-btn.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

.mobile-store .google-play-btn {
  background-image: url(/images/section-10/google-btn.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

.mobile-store .web-app-btn {
  background-image: url(/images/web-app-btn.png);
  background-size: 100%;
  background-repeat: no-repeat;
}