.navbar{
	min-height:auto;
	margin:0;
}
.navbar-inverse{
	background: #fff;
	border:none;
}
.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header{
	margin:0;
	border:none;
}

.navbar-inverse .navbar-nav>li>a:hover{
	color:#656871;
}
.navbar-inverse .navbar-nav>li>a{
	padding: 0 20px;
	text-align: center;
	height:50px;
	line-height:50px;
	background: #fff;
	color:#656871;
}
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover{
	padding: 0 20px;
	text-align: center;
	height:50px;
	line-height:50px;
	background: #fff;
	color:#656871;
}
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a{
	padding: 0 20px;
	text-align: center;
	height:50px;
	line-height:50px;
	background: #fff;
	color:#656871;
}
.navbar-inverse .navbar-toggle{
	border:none;
	background: #fff;
	margin:0;
	padding: 9px 0;
	margin-right: 15px;
}
.navbar-inverse .navbar-toggle:hover{
	background: #fff;
}
.navbar-inverse .navbar-toggle .icon-bar{
	background: #656871;
}

.container{
	 padding: 15px 0;
	 margin:0;
}
.layui-carousel>[carousel-item]>*{
	background: none
}
.carousel-first>.layui-carousel>[carousel-item]>*{
	background: #fff
}

.demo{
  color: #27C279;
  border: 1px #27C279 solid;
  height: 30px;
  line-height: 30px;
  width: 90px;
  text-align: center;
  border-radius: 6px;
  margin: 0 10px;
  font-weight: 600;
  cursor: pointer;
}
.apply{
  color: #fff;
  background: #27C279;
  height: 30px;
  line-height: 30px;
  width: 90px;
  text-align: center;
  border-radius: 6px;
  box-shadow: 0 8px 12px #caf8e1;
  cursor: pointer;
}
.applys{
  color: #fff;
  background: #19BE71;
  height: 50px;
  line-height: 50px;
  width: 150px;
  text-align: center;
  border-radius: 6px;
  font-size: 15px;
  box-shadow: 0 8px 12px #caf8e1;
  cursor: pointer;
}
.apply-button{
  color: #fff;
  background: #19BE71;
  height: 50px;
  line-height: 50px;
  width: 150px;
  text-align: center;
  border-radius: 6px;
  font-size: 15px;
  box-shadow: 0 8px 12px #caf8e1;
  cursor: pointer;
}
.applyss{
  color: #fff;
  background: #19BE71;
  height: 40px;
  line-height: 40px;
  width: 130px;
  text-align: center;
  border-radius: 6px;
  font-size: 14px;
  box-shadow: 0 8px 12px #caf8e1;
  cursor: pointer;
}
.border{
  width: 6%;
  margin-left: 47%;
  height: 5px;
  border-radius: 2px;
  background: #19BE71;
  margin-bottom: 5vh;
}
.box{
  width: 100%;
  display: flex;
   flex-wrap: wrap; 
  justify-content: space-between;
}
.box-item{
  width: 30%;
  background: #fff;
  display: flex;
  flex-direction:column;
  border-radius: 1vh;
  padding-bottom:2vh;
}
.skill-item{
  width: 30%;
  display: flex;
  flex-direction:column;
}
.img-item{
  width: 30%;
  height: 35vh;
  background: #fff;
  display: flex;
  flex-direction:column;
  border-radius: 0.5vh;
  border: 1px #E2F3E6 solid;
  cursor: pointer;
}
.item-img{
  width: 100%;
  border-radius: 0.5vh;
  height: 25vh;
}
.item-imgs{
  height: 7vh;
  width: 7vh;
  background: #fff;
  margin-top: -3.5vh;
  margin-left: 10%;
  border-radius: 7vh;
  border: 1px #E2F3E6 solid;
}
.img-button{
  height: 3.5vh;
  line-height: 3.5vh;
  padding: 0 2vh;
  background: #21C175;
  color: #fff;
  font-size: 12px;
  position: absolute;
  top: 1vh;
  left: 1vh;
  border-radius: 1vh;
}
.img-text{
	width:90%;
	position: absolute;
	left: 5%;
	font-size:16px;
	color:#fff;
	bottom:5vh;
	font-weight:600
}

.box-items{
  width: 30%;
  height: 35vh;
  background: #fff;
  display: flex;
  flex-direction:column;
  border-radius: 3vh;
}
.more{
  font-size: 13px;
  position: absolute;
  right: 0;
  bottom: 0.5vh;
  color:#7F878E;
  font-weight: 0;
  cursor: pointer;
}
.say{
  background-image: url(../images/33.png);
  background-size: 100% 100%;
  padding:10vh 10%;
  display: flex;
  flex-direction:column;
}
.says{
  background-image: url(../images/33.png);
  background-size: 100% 100%;
  padding:10vh 10%;
  display: flex;
  flex-direction:column;
}
.box-carousel{
  padding: 0 8%;
  display: flex;
  justify-content: space-between;
}

.green{
  width: 100%;
  background-image: url(../images/37.jpg);
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  padding: 10vh 0;
  color: #fff;
  font-size: 14px;
}
.green-button{
  height: 50px;
  line-height: 50px;
  width:10%;
  text-align:center;
  margin-right:20%;
  color: #2BC37A;
  background: #E6FFF3;
  border-radius: 0.5vh;
  cursor: pointer;
}
.bottom{
  background: #202D3D;
  padding: 7vh 13% 0 13%;
}
.bottoms{
  background: #202D3D;
  padding: 2vh 13% 0 13%;
}

.bottom-log{
  display: flex;
  justify-content : space-around;
  height: 10vh;
  align-items: center;
  width: 100%;
  background: #364250;
  border-radius: 0.5vh;
  margin: 3vh 0;
}
.span-box {
	width: 30%;
    height: 38vh;
    background: #fff;
    display: flex;
    flex-direction:column;
    border-radius: 1vh;
}
.span-boxs {
	width: 100%;
    height: 38vh;
    background: #fff;
    display: flex;
    flex-direction:column;
    border-radius: 1vh;
}
.span-img{
	height:12vh;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right:2vh
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.weui-shares {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  display: none;cursor: pointer;
  background: rgba(0, 0, 0, 0.75); 
 }
 .dialog-input{
  width: 28%;
  height: 6vh;
  line-height: 6vh;
  border: none;
  outline: none;
  background: #EBF4F9;
  text-indent: 2vh;
  border-radius: 0.5vh;
}
.dialog-textarea{
  width: 80%;
  height: 13vh;
  border: none;
  outline: none;
  background: #EBF4F9;
  text-indent: 2vh;
  padding: 2vh;
  border-radius: 0.5vh;
}
.dialog-button{
  width: 20%;
  margin-left: 40%;
  text-align: center;
  height: 4vh;
  line-height: 4vh;
  cursor: pointer;
  background: #1ABE70;
  color:#fff;
  border-radius: 0.5vh;
  margin-top: 4vh;
}
[v-cloak] {
  display: none;
}
 .ui-dialog{
      width: 500px;
      z-index: 9000;
      border: 1px solid #D5D5D5;
      border-radius: 6px;
      background: #fff;
      box-shadow: #E1F0E9 5px 5px 15px 5px ;
      position: absolute;
      padding: 20px;
      top: 28vh;
      right:28%;
  }
 .title{
  width: 90%;
  margin: 40px 5%;
  height: 70px;
  text-align: center;
  position: relative;
  font-size: 20px;
  font-weight: 600;
}
.left-img{
   height: 30px;
   width: 30px;
   position: absolute;
   top: -15px;
   left: -15px;
}
.left-imgs{
  height: 30px;
   width: 30px;
}
.right-imgs{
   height: 30px;
   width: 30px;
}
.right-img{
   height: 30px;
   width: 30px;
   position: absolute;
   bottom: -15px;
   right: -15px;
}
@media (min-width:0px) {
  .bottom{
     display:none;
  }
  .bottoms{
     display: block;
     padding: 2vh 2% 0 2%;
  }
  .padding-main{
     padding-left:5% !important;
     padding-right:5% !important;
  }
  
  .width-cols{
     width:20%
  }
  .width-col{
     width:20%
  }
  .flex-col{
     flex-direction:column; 
  }
  .tryout-padding{
    padding:2vh
  }
  .layui-layer{
     width:90% !important;
     height: 52vh !important;
  }
  .layui-layer2-demo{
     width:90% !important;
     height: 89vh !important;
  }
  .green{
      flex-direction:column; 
	  justify-content: center;
	  padding: 10vh 0;
	}
   .green-left{
    padding-left:0;
    text-align: center
  }
  .green-button{
	  width:40%;
	  margin: 0 auto
	}
	.padding-skill{
     padding:0 1%;
   }
   .img-height{
      height:7vh
   }
   .ui-dialog{
      width: 80%;
      padding: 10px;
      top: 45vh;
      right:5%;
  }
  .height-dialog{
    height:20px;
  }
  .title{
	  width: 90%;
	  margin: 10px 5%;
	  height: 30px;
	  font-size: 12px;
	}
   .left-img{
	   height: 14px;
	   width: 14px;
	   top: -7px;
	   left: -7px;
	}
	.right-img{
	   height: 14px;
	   width: 14px;
	   bottom: -7px;
	   right: -7px;
	}
	.apply-button{
	  width: 80px;
	}
	.say{
	  padding:10vh 2%;
	}
	.box-carousel-two {
	  display: none
	}
	.box-carousel-one{
	  display: block
	}
	
	.cooperation-height{
	  height:80vh !important;
	}
	.case-width{
	  width:100%;
	}
	.padding-top{
	  padding-top:20px !important;
      padding-bottom:100px !important;
	}
	.demo{
	  width: 90px;
	  margin: 0 5px;
	}
	.apply{
	  width: 90px;
	}
	.navbar-inverse .navbar-nav>li>a{
	  padding: 0 5px;
	}
	.box-item{
	  width: 100%;
	  margin-bottom:60px;
	}
	.carousel-heights{
	  height:550px !important;
	}
	.carousels-left{
	  width:100%;
    height: 400px;
	  padding-top:0;
	}
	.carousels-right{
	  width:100%;
    height: 350px;
	  margin-left:0;
	}
	.skill-item{
	  width: 100%;
	  margin-bottom:60px;
	}
	.new-img {
	  width:100%;
	}
	.img-item{
	  width: 100%;
	  margin-bottom:3.5vh
	}
	.font-navbar {
	  font-size:18px
	}
	.title{
	  font-size:12px
	}
}
@media (min-width:370px) {
  .bottom{
     display:none;
  }
  .bottoms{
     display: block;
     padding: 2vh 5% 0 5%;
  }
  .width-cols{
     width:21%
  }
  .width-col{
     width:16%
  }
  .flex-col{
     flex-direction:row; 
     justify-content: space-between;
  }
  .tryout-padding{
    padding:2vh
  }
  .layui-layer{
     width:90% !important;
     height: 52vh !important;
  }
  .layui-layer2-demo{
     width:90% !important;
     height: 99vh !important;
  }
  .green{
       flex-direction:column; 
	  justify-content: center;
	  padding: 10vh 0;
	}
  .green-left{
    padding-left:0;
    text-align: center
  }
  .green-button{
	  width:30%;
	  margin: 0 auto
	}
   .padding-skill{
     padding:0 1%;
   }
   .padding-main{
     padding-left:8% !important;
     padding-right:8% !important;
  }
  .img-height{
      height:9vh
   }
   .ui-dialog{
      width: 80%;
      padding: 10px;
      top: 45vh;
      right:5%;
  }
  .height-dialog{
    height:25px;
  }
   .title{
	  width: 90%;
	  margin: 10px 5%;
	  height: 30px;
	  font-size: 15px;
	}
  .left-img{
	   height: 14px;
	   width: 14px;
	   top: -7px;
	   left: -7px;
	}
	.right-img{
	   height: 14px;
	   width: 14px;
	   bottom: -7px;
	   right: -7px;
	}
	.apply-button{
	  width: 120px;
	}
	.say{
	  padding:10vh 4%;
	}
	.cooperation-height{
	  height:80vh !important;
	}
	.case-width{
	  width:100%;
	}
	.padding-top{
	  padding-top:20px !important;
      padding-bottom:100px !important;
	}
	.demo{
	  width: 90px;
	  margin: 0 10px;
	}
	.apply{
	  width: 90px;
	}
	.navbar-inverse .navbar-nav>li>a{
	  padding: 0 5px;
	}
	.box-item{
	  width: 100%;
	  margin-bottom:60px;
	}
	.carousel-heights{
	  height:600px !important;
	}
	.carousels-left{
	  width:100%;
    height: 400px;
	  padding-top:0;
	}
	.carousels-right{
	  width:100%;
    height: 350px;
	  margin-left:0;
	}
	.skill-item{
	  width: 100%;
	  margin-bottom:60px;
	}
	.box-carousel-two {
	  display: none
	}
	.box-carousel-one{
	  display: block
	}
	.new-img {
	  width:100%;
	}
	.img-item{
	  width: 100%;
	  margin-bottom:3.5vh
	}
	.font-navbar {
	  font-size:18px
	}
	.title{
	  font-size:12px
	}
}
@media (min-width:768px) {
  .bottom{
     display:none;
  }
  .bottoms{
     display: block;
     padding: 2vh 13% 0 13%;
  }
  .width-cols{
     width:21%
  }
  .width-col{
     width:16%
  }
  .flex-col{
     flex-direction:row; 
     justify-content: space-between;
  }
  .tryout-padding{
    padding:2vh
  }
  .layui-layer{
     width:90% !important;
     height: 52vh !important;
  }
  .layui-layer2-demo{
     width:90% !important;
     height: 99vh !important;
  }
  .green{
      flex-direction:row;
	  justify-content: space-between;
	  padding: 10vh 0;
	}
   .green-left{
    padding-left:20%;
    text-align: left
  }
  .green-button{
	  width:25%;
	  margin-right:15%;
	}
   .padding-skill{
     padding:0 1%;
   }
   .padding-main{
     padding-left:10% !important;
     padding-right:10% !important;
  }
  .img-height{
      height:12vh
   }
   .ui-dialog{
      width: 440px;
      padding: 20px;
      top: 28vh;
      right:15%;
  }
  .height-dialog{
    height:50px;
  }
   .title{
	  width: 90%;
	  margin: 40px 5%;
	  height: 70px;
	  font-size: 20px;
	}
  .left-img{
	   height: 30px;
	   width: 30px;
	   top: -15px;
	   left: -15px;
	}
	.right-img{
	   height: 30px;
	   width: 30px;
	   bottom: -15px;
	   right: -15px;
	}
	.apply-button{
	  width: 150px;
	}
	.say{
	  padding:10vh 7%;
	}
	.cooperation-height{
	  height:80vh !important;
	}
	.case-width{
	  width:48%;
	}
	.padding-top{
	  padding-top:100px !important;
      padding-bottom:100px !important;
	}
	.demo{
	  width: 70px;
	  margin: 0 5px;
	}
	.apply{
	  width: 70px;
	}
	.navbar-inverse .navbar-nav>li>a{
	  padding: 0 5px;
	}
	.box-item{
	  width: 30%;
	  margin-bottom:0;
	}
	.carousel-heights{
	  height:650px !important;
	}
	.carousels-left{
	  width:48%;
    height: 400px;
	  padding-top:40px;
	}
	.carousels-right{
	  width:48%;
    height: 400px;
	  margin-left:4%;
	}
	.skill-item{
	  width: 30%;
	  margin-bottom:0;
	}
	.box-carousel-two {
	  display: none
	}
	.box-carousel-one{
	  display: block
	}
	.new-img {
	  width:50%;
	}
	.img-item{
	  width: 30%;
	  margin-bottom:0
	}
	.font-navbar {
	  font-size:12px
	}
	.title{
	  font-size:15px
	}
}
@media (min-width:992px) {
  .bottom{
     display:none;
  }
  .bottoms{
     display: block;
     padding: 2vh 13% 0 13%;
  }
   .width-cols{
     width:21%
  }
  .width-col{
     width:16%
  }
  .flex-col{
     flex-direction:row; 
     justify-content: space-between;
  }
  .tryout-padding{
    padding:2vh
  }
  .layui-layer{
     width:70% !important;
     height: 52vh !important;
  }
  .layui-layer2-demo{
     width:70% !important;
     height: 99vh !important;
  }
  .green{
      flex-direction:row;
	  justify-content: space-between;
	  padding: 10vh 0;
	}
	.green-left{
	    padding-left:20%;
        text-align: left
	  }
  .green-button{
	  width:20%;
	  margin-right:15%;
	}
   .padding-skill{
     padding:0 1%;
   }
   .padding-main{
     padding-left:12% !important;
     padding-right:12% !important;
  }
  .img-height{
      height:15vh
   }
   .ui-dialog{
      width: 480px;
      padding: 20px;
      top: 28vh;
      right:15%;
  }
  .height-dialog{
    height:50px;
  }
   .title{
	  width: 90%;
	  margin: 40px 5%;
	  height: 70px;
	  font-size: 20px;
	}
  .left-img{
	   height: 30px;
	   width: 30px;
	   top: -15px;
	   left: -15px;
	}
	.right-img{
	   height: 30px;
	   width: 30px;
	   bottom: -15px;
	   right: -15px;
	}
	.apply-button{
	  width: 150px;
	}
	.say{
	  padding:10vh 8%;
	}
	.cooperation-height{
	  height:40vh !important;
	}
	.padding-top{
	  padding-top:100px !important;
      padding-bottom:100px !important;
	}
	.case-width{
	  width:48%;
	}
	.demo{
	  width: 90px;
	  margin: 0 10px;
	}
	.apply{
	  width: 90px;
	}
	.navbar-inverse .navbar-nav>li>a{
	  padding: 0 20px;
	}
	.box-item{
	  width: 30%;
	  margin-bottom:0;
	}
	.carousel-heights{
	  height:650px !important;
	}
	.carousels-left{
	  width:48%;
    height: 400px;
	  padding-top:40px;
	}
	.carousels-right{
	  width:48%;
    height: 400px;
	  margin-left:4%;
	}
	.skill-item{
	  width: 30%;
	  margin-bottom:0;
	}
	.box-carousel-two {
	  display: none
	}
	.box-carousel-one{
	  display: block
	}
	.new-img {
	  width:50%;
	}
	.img-item{
	  width: 30%;
	  margin-bottom:0
	}
	.font-navbar {
	  font-size:12px
	}
	.title{
	  font-size:17px
	}
}
@media (min-width:1200px) {
  .bottom{
     display:block;
  }
  .bottoms{
     display: none;
     padding: 2vh 13% 0 13%;
  }
   .width-cols{
     width:21%
  }
  .width-col{
     width:16%
  }
  .flex-col{
     flex-direction:row; 
     justify-content: space-between;
  }
  .tryout-padding{
    padding:5vh
  }
  .layui-layer{
     width:60% !important;
     height: 62vh !important;
  }
  .layui-layer2-demo{
     width:60% !important;
     height: 99vh !important;
  }
  .green{
      flex-direction:row;
	  justify-content: space-between;
	  padding: 10vh 0;
	}
  .green-left{
    padding-left:20%;
    text-align: left
  }
  .green-button{
	  width:10%;
	  margin-right:20%;
	}
   .padding-skill{
     padding:0 1%;
   }
   .padding-main{
     padding-left:13% !important;
     padding-right:13% !important;
  }
   .img-height{
      height:20vh
   }
   .ui-dialog{
      width: 500px;
      padding: 20px;
      top: 28vh;
      right:28%;
  }
  .height-dialog{
    height:50px;
  }
   .title{
	  width: 90%;
	  margin: 40px 5%;
	  height: 70px;
	  font-size: 20px;
	}
	.left-img{
	   height: 30px;
	   width: 30px;
	   top: -15px;
	   left: -15px;
	}
	.right-img{
	   height: 30px;
	   width: 30px;
	   bottom: -15px;
	   right: -15px;
	}
	.apply-button{
	  width: 150px;
	}
	.say{
	  padding:10vh 10%;
	}
	.cooperation-height{
	  height:40vh !important;
	}
	.carousel-heights{
	  height:650px !important;
	}
	.padding-top{
	  padding-top:100px !important;
      padding-bottom:100px !important;
	}
	.carousels-left{
	  width:48%;
    height: 400px;
	  padding-top:40px;
	}
	.carousels-right{
	  width:48%;
    height: 400px;
	  margin-left:4%;
	}
	.case-width{
	  width:48%;
	}
	.demo{
	  width: 90px;
	  margin: 0 10px;
	}
	.apply{
	  width: 90px;
	}
	.navbar-inverse .navbar-nav>li>a{
	  padding: 0 20px;
	}
	.box-item{
	  width: 30%;
	  margin-bottom:0;
	}
	.skill-item{
	  width: 30%;
	  margin-bottom:0;
	}
	.box-carousel-two {
	  display: block
	}
	.box-carousel-one{
	  display: none
	}
	.new-img {
	  width:50%;
	}
	.img-item{
	  width: 30%;
	  margin-bottom:0
	}
	.font-navbar {
	  font-size:18px
	}
	.title{
	  font-size:20px
	}
	
}