html {
  overflow-x: hidden;
}
li{
  list-style: none;
}

#fh5co-header #navbar li a span:before{
  background-color: #33ffff !important;
}

#fh5co-header.navbar-fixed-top #navbar li.active a{
  color: #33ffff !important;
}

.mobile {
  position: relative;
  bottom: -6em;
}

.mobile img {
  width: 359.98px;
  height: 739.25px;
}

.js .animate-box {
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#fh5co-header {
  width: 100% !important;
  position: absolute;
  top: 0px;
}

#top{
  width: 90%;
}

.fh5co-lead {
  color: white;
  font-size: 45px;
  font-weight: 700;

}

.fh5co-sub-lead {
  color: white;
  line-height: 38px;
}

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

.section-heading h3 {
  font-size: 28px;
}

#footer {
  padding: 10px 0;
}

.row-bottom-padded-sm {
  padding-bottom: 0em;
}

.cat {
  background-color: #4AE3B5;
  color: white;
  padding: 10px 20px;
}

.address li {
  color: white;
  list-style: none;
  padding-left: 0px !important;
}

#fh5co-header .navbar-brand {
  display: flex;
  justify-content: center;
  align-items: center;
}

#fh5co-our-services .box h3 {
  font-size: 25px;
}

#fh5co-our-services .box {
  margin-bottom: 0px;
}

.btn {
  width: 160px;
  height: 40px;
  background-color: #cccaca;
  border-radius: 5px;
  font-size: 14px;
  text-transform: initial;
  margin-top: 25px;
  display: none;
}

.container {
  display: flex;
  flex-direction: column;
}

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

#fh5co-our-services,
#fh5co-about-us,
#fh5co-features,
#fh5co-testimonials,
#fh5co-pricing,
#fh5co-press,
#fh5co-product-screenshots,
#fh5co-tour {
  padding: 2em 0 2em;
}
/* header部分的css 开始*/
.item{
  width: 100%;
  height: 940px;
  background: url(../images/website/headerBackground.png);
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.headerContentText{
  width: 30%;
  margin-left: 10%;
  margin-top: 100px;
}
.headerContentText img{
  width: 100%;
  height: 450px;
}
.headerBottomText{
  width: 60%;
  margin-left: 13%;
  margin-top: 160px;
}
.headerBottomText img{
  width: 100%;
  height: 49px;
}
/* header部分的css 结束*/

/* phoneTop部分的css开始 */
.phoneTop{
  width: 100%;
  display: none;
  margin-top: -20px;
}
.phoneTopBox{
  width: 95%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.phoneTopBox img{
  width: 102px;
  height: 18px;
}
.boxText{
  display: flex;
  justify-content: center;
  align-items: center;
}
.boxText a{
  font-size: 14px;
  color: white;
  margin-right: 10px;
  font-weight: 600;
}

/* second部分css 开始 */
.second{
  width: 100%;
  height: 500px;
  background: url(../images/website/secondBackground.png);
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.second ul{
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.second ul li{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.number{
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #33ffff;
  margin-bottom: 20px;
  font-size: 90px;
  font-weight: 600;
}
.detail span{
  color: white;
  font-size: 24px;
  margin-left: 10px;
}
.second ul li img{
  width: 60px;
  height: 60px;
}
/* second部分css 结束 */

/* second_phone部分css 开始 */
.second_phone{
  width: 100%;
  height: 445px;
  background: url(../images/website/secondBackground.png);
  display: flex;
  justify-content: space-around;
  align-items: center;
  display: none;
}
.second_phone ul{
  width: 75%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  padding-left: 15px;
}
.second_phone ul li{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  margin-top: 10px;
}
.detail_phone{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin-left: 50px;
}
.detail_phone span{
  color: white;
  font-size: 20px;
}
.second_phone ul li img{
  width: 55px;
  height: 55px;
}
/* second_phone部分css 结束 */

/* swiperOne-css开始 */
#fh5co-product-screenshots{
  background: url(../images/website/swiperBackground.png);
  background-size: 100% 100%;
}
.swiperOne{
  width: 1140px;
  height: 650px;
}
.swiperOne .swiper-wrapper{
  width: 90%;
}
.swiperOne .swiper-wrapper img{
  width: 70%;
  height: 590px;
  border-radius: 10px;
}
.swiperOne .swiper-wrapper .swiper-slide{
  display: flex;
  justify-content: center;
  align-items: center;
}
.phone{
  width: 360px;
  height: 630px;
  position: absolute;
  top: 10px;
  left: 34%;
  z-index: 999;
}
.phone img{
  width: 100%;
  height: 100%;
}
.swiperBottomText{
  width: 70%;
  margin: 30px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiperBottomText img{
  width: 80%;
  height: auto;
}
.swiperBottomText_phone{
  width: 93%;
  margin: 0 auto;
  background-color: #242630;
  display: none;
  margin-top: 40px;
}
.swiperBottomText_phone img{
  width: 20px;
  height: 20px;
  margin: 10px 0 0 5px;
}
.swiperBottomText_phone div{
  width: 90%;
  margin: 0 auto 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.swiperBottomText_phone div p {
  font-size: 18px;
  font-weight: 600;
  color: white;
  margin-top: 5px;
  margin-bottom: 5px;
}
.swiperBottomText_phone div span{
  font-size: 12px;
  color: #ffffff;
}
.swiperThree{
  display: none;
}
/* swiperOne-css结束 */

/* map部分的css 开始*/
.map{
  width: 100%;
  height: 1200px;
  background: url(../images/website/map.png);
  background-size: 100% 100%;
  text-align: center;
  padding-top: 40px;
}
/* map部分的css 结束*/

/* show部分的css 开始*/
.showUs{
  width: 100%;
  height: 500px;
  background: url(../images/website/showBackground.png);
  background-size: 100% 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.meetUsHere{
  width: 40%;
  text-align: center;
  margin-right: 90px;
}
/* show部分的css 结束*/


/* swiperTwo-css开始 */
.swiperTwo{
  width: 600px;
  height: 380px;
}
.swiperTwo img{
  width: 100%;
  height: auto;
}
/* swiperTwo-css结束 */

/* contact css开始 */
#bottom{
  width: 100%;
  height: 425px;
  background: url(../images/website/bottomBackground.png);
  background-size: 100% 100%;
}
.contact{
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.contact li:nth-child(1){
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.contact li:nth-child(1) span{
  font-size: 18px;
  color: white;
  margin-top: 30px;
  margin-bottom: 30px;
  font-weight: 600;
}
.contact li:nth-child(1) img:last-child{
  width: 155px;
  height: 28px;
}
.contact li:nth-child(2){
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  margin-left: 300px;
}
.contact li:nth-child(2) p{
  font-size: 28px;
  font-weight: 600;
  color: white;
  margin-bottom: 1.7em;
}
.contact li:nth-child(2) span{
  font-size: 15px;
  font-weight: 600;
  color: white;
  line-height: 33px;
}
.contact li:nth-child(2) a{
  font-size: 15px;
  font-weight: 600;
  color: white;
}
.contact li:nth-child(3){
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}
.contact li:nth-child(3) p{
  font-size: 28px;
  font-weight: 600;
  color: white;
  margin-bottom: 10px;
}
.contact li:nth-child(3) div{
  line-height: 40px;
  display: flex;
  justify-content: start;
  align-items: center;
}
.contact li:nth-child(3) a{
  font-size: 15px;
  font-weight: 600;
  color: white;
  margin-left: 10px;
  margin-top: 5px;
}


/* contact css结束 */


@media all and (max-width: 500px) {
  .phoneTop{
    display: block;
  }
  .craig {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .item{
    height:380px;
  }

  #fh5co-header{
    display: none;
  }

  .headerBottomText{
    width: 100%;
  }

  .headerBottomText img{
    width: 100%;
    height: 25px;
  }

  .headerContentText{
    width: 60%;
    margin-top: 65px;
    margin-left: 5%;
  }

  .headerContentText img {
    width: 100%;
    height: 210px;
  }

  .headerBottomText{
    margin: 0;
  }

  h3 {
    font-size: 26px;
  }

  .fh5co-sub-lead {
    font-size: 18px;
    padding-left: 10px;
  }

  .mobile {
    position: relative;
    bottom: 0em;
  }

  .second{
    height: 100%;
    display: none;
  }
  .second_phone{
    display: block;
  }

  .second ul{
    flex-direction: column;
    padding-left: 0px;
  }

  .second ul li{
    margin-bottom: 30px;
  }

  .number {
    width: 80px;
    height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #33ffff;
    margin-bottom: 0px;
    font-size: 36px;
    font-weight: 600;
  }

  .map{
    height: 300px;
    padding-top: 10px;
  }
  .map img{
    width: 100%;
  }
  

  .showUs{
    flex-direction: column;
    height: 350px;
  }
  .swiperTwo{
    width: 350px;
    height: 200px;
  }
  .meetUsHere{
    width: 90%;
    margin-right: 0px;
  }
  .meetUsHere img{
    width: 80%;
    height: 75px;
  }


  .contact{
    width: 100%;
    padding-left: 0;
  }
  .contact li{
    height: 110px;
  }
  .contact li:nth-child(1) {
    width: 100px;
    height: 110px;
  }
  .contact li:nth-child(1) img{
    width: 85px;
    margin-bottom: 40px;
  }
  .contact li:nth-child(1) span{
    font-size: 12px;
    margin-top: 20px;
    margin-bottom: 0px;
  }
  .contact li:nth-child(1) img:last-child{
    width: 80px;
    height: 13px;
  }
  .contact li:nth-child(2){
    margin-left: 0px;
  }
  .contact li:nth-child(2) p {
    font-size: 14px;
    margin-bottom: 6px;
  }
  .contact li:nth-child(2) span {
    font-size: 12px;
    font-weight: 100;
  }
  .contact li:nth-child(2) div span{
    line-height: 15px;
  }
  .contact li:nth-child(3) p{
    font-size: 14px;
  }
  .contact li:nth-child(3) a{
    font-size: 10px;
  }
  .contact li:nth-child(3) div{
    height: 30px;
  }
  .contact li:nth-child(3) div img{
    width: 15px;
    height: 15px;
  }
  #bottom{
    height: 170px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .fh5co-cta{
    padding: 0em;
  }
  .swiperThree{
    display: block;
    width: 85%;
    margin: 0 auto;
  }
  .swiperThree img{
    width: 100%;
  }
  .swiperOne{
    display: none;
  }
  .swiperBottomText{
    width: 100%; 
    margin:40px auto 0;
    display: none;
  }
  .swiperBottomText_phone{
    display: flex;
  }
  .swiperBottomText img{
    width: 90%;
    height: 70px;
  }
  .contact li:nth-child(3){
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

@media all and (max-width: 375px) {
  #fh5co-header .navbar-default {
    display: flex;
    align-items: center;
  }

  .logo {
    width: 250px !important;
    height: 30px !important;
  }

  .navbar-brand {
    height: 50px;
  }
}