.theme-header {
    position: relative;
    text-align: center;
    background-repeat: repeat;
    background-position: center;
    background-size: 1500px;
    text-align: center;
    color: white;
    background-color: #333;
    padding: 4rem 1rem 1rem;
    margin: 0;
    transform: translate3d(0,0,0);
}
.home0{
    display:none;
}
.theme-header-title {
    font-size: 3.25rem;
    color: white;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .1);
    padding: 0;
    margin: 0 auto .5rem auto;
}
.theme-header-details {
    max-width: 650px;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .1);
    margin: 2rem auto;
}

.mar-bot40:after,.mousepanel:after{
    content:'';display:block;clear:both;
}


.homepage-features {
    background-size: 8000px;
    color: white;
    padding-bottom: 2rem;
}

.homepage-features h3 {
    font-family: Microsoft YaHei, Lato, sans-serif;
    color: #b5cd42;font-size: 2rem;
}

h3 {
    font-size: 2rem;
    color: #b5cd42;text-shadow: none;
}
h4 {
    font-size: 1.5rem;
    color: #b5cd42;text-shadow: none;
}

.mainp p{padding: 20px;}

.feature2 .right-jian {
    position: absolute;
    top: 165px;
    right: -25px;
}
.feature2 h4 {
    margin-bottom: 50px;
}
.feature2 h2{
    text-align: center;padding-top: 50px;
}

.feature2 .text {
    max-width: 168px;
    margin: 0px auto;
    letter-spacing: 1px;
    line-height: 22px;
    font-size: 14px;
    color: rgba(65, 64, 64, 0.92);
    font-weight: 600;
    cursor: pointer;
}

.pfeature3 .span3 {
    position: relative;
    height: 185px;
    position: relative;
}
.pfeature3 img {
    width: 250px;
    height: 185px;
}
.pfeature3 .masked {
    width: 250px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    background: rgba(0, 0, 0, 0.51);
    position: absolute;
    bottom: 0px;
    left: 0px;
    cursor: pointer;
}
.pfeature3 .masked-all {
    position: absolute;
    top: 0px;bottom:0;
    display: none;
    left: 0px;
    width: 250px;
    height: 185px;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
}
.pf31 .masked-all,.pf31 img,.pf31 .span3{
    height: 464px;    margin-bottom: 2rem;
}
.cases .span3, .cases img, .cases .masked-all{
    height: 430px;
}
.cases .masked-all img {
    height:auto;
}
.cases .span3{
    margin-bottom:30px;
}

.feature4 h2 {
    text-align:center;
}

.feature4 .special {
    float: left;
    h0eight: 475px;
}
.feature4 .special h3 {
    text-align: center;
    margin: 25px;
    letter-spacing: 2px;
    font-size: 21px;
    font-weight: normal;
    cursor: pointer;
}
.feature4 .special .text {
    margin: 20px 20px;
    line-height: 25px;
    font-size: 14px;
    letter-spacing: 1px;
    color: #333536;
    cursor: pointer;
}

.feature5 .span3 h4 img {
    width: 50px;
    margin-right: 20px;
}

.mousepanel .panel {
    cursor: pointer;    background: #fff;
    margin-top: 35px;margin-bottom: 2rem;
}

.solutions .span4{
    border: 1px solid #eeeeee;
    cursor: pointer;    background: #fff;    margin-bottom: 2rem;
}
.container.solutions .copy {
    padding: 0 20px;
}
.solutions{
margin-top:2rem;
}

.mousepanel .select {
    box-shadow: 0px 6px 17px -4px rgba(85, 85, 85, 0.3);
}

.masked-all span {
    color: white;
    padding: 20px;
    width: 230px;
    display: inline-block;
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
}

.masked-all a, .masked-all a:hover{
    color:#ff0;
}

.cases .masked-all span {
    padding: 64px 30px;
    width: 250px;
}

.img-responsive {
    max-width: 100%;
    display: inline-block;
}

.solutions-col {
    height: auto;
    padding: 48px 0;
    position: relative;
    text-align: center;    list-style: none;
}
.solutions-col__heading {
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
}
.solutions-icon__container {
    display: block;
    margin-bottom: 12px;
    min-height: 124px;
}
.solutions img {
    margin: 0 auto;
    width: 40%;
}
.solutions p.sub-title {
    min-height: 48px;
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 12px;
    display: none;
}

#section-case, #section-news {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;font-size: 60px;    background-position: 0% 30.8px;
    height: 200px;background-size:cover !important;
    color: #fff;position: relative;
}

.meet-the-dev {
    position: relative;
    background-size: 1500px;
    color: white;
    padding: 4rem 0 2rem 0;margin-bottom: 0;
}
.align-center {
    text-align: center;
}
.section-header {
    font-size: xx-large;
    line-height: normal;    margin-top: 2rem;
}
.section-subheader {
    font-size: x-large;
    line-height: normal;
}
.meet-the-dev-avatar {
    position: absolute;
    top: -64px;
    left: calc(50% - 64px);
    width: 128px;
    height: 128px;
    border-radius: 50%;
    border: solid 3px white;
}

.homepage-as-seen-on, .used-technologies {
    position: relative;
    text-align: center;
    padding: 2rem 1rem;
}

.homepage-as-seen-on a, .used-technologies a {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: .2s -webkit-filter, .2s filter;
}
.homepage-as-seen-on a:hover, .used-technologies a:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

.homepage-as-seen-on img,
.used-technologies img {
    margin: .5rem 1.5rem;
}

.homepage-as-seen-on .ph {
    max-width: 12rem;
}

.homepage-as-seen-on .hn {
    max-width: 7rem;
}

.homepage-as-seen-on .sm {
    max-width: 10rem;
}

.homepage-as-seen-on .tc {
    max-width: 5rem;
}
.used-technologies a {
    height: 110px;
    width: 110px;
    display: inline-block;
}

.used-technologies .dotnet{
background-position-x: -111px;
    width: 170px;
}
.used-technologies .html5{
        background-position-x: -672px;
}
.used-technologies .css3{
     background-position-x: -779px;
}
.used-technologies .nodejs{
background-position-x: -410px;
    background-position-y: -111px;
    width: 170px;
}
.used-technologies .nodejs{
background-position-x: -410px;
    background-position-y: -111px;
    width: 170px;
}
.used-technologies .mongodb{
    background-position-x: -749px;
    background-position-y: -111px;
    width: 170px;
}
.used-technologies .objc{
    background-position-x: -920px;
    background-position-y: -111px;
    width: 170px;
}
.used-technologies .solidity{
    background-position-x: -1090px;
    background-position-y: -111px;
    width: 235px;
}
.used-technologies .java{

}
.used-technologies .perl{
        background-position-x: -449px;
}
.used-technologies .c{
        background-position-x: -560px;
}
.used-technologies .redis{
        background-position-x: -1004px;
        width:233px
}
.used-technologies .threejs{
        background-position-x: -1245px;
        width:166px
}


.cimg{
    position:relative
}
.cimg a{
    position: absolute;top: 50%;color: #0f0;left: 40%;background: #333333b0;padding: 20px;border-radius: 20px;
}
.modal {
    display:none
}
.haslabel p span{
    color:#999
}
.modal0 {
width:initial;
}
.modal-body {
    max-height: initial;
}

.cases .masked-all span a {
display:none;
}

.join-con .span3 {
    width: 252px;
    padding: 0 20px;
    text-align: center;
    float: left;    box-sizing: border-box;
}


.join-con .span3 .num {
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    border: 2px solid #3291F2;
    box-sizing: border-box;
    margin: 0 auto;
    font-weight: bolder;
    font-size: 26px;a
    color: #111;
    position: relative;
}

.join-con .span3 .num:before {
    content: '';
    position: absolute;
    left: 48px;
    right: -243px;
    top: 28px;
    height: 2px;
    margin-top: -4px;
    background-color: #3291F2;
    z-index: 1;
}
.join-con .span3:first-child .num:before {
    left: 100%;
}
.join-con .span3:last-child .num:before {
    right: 50%;
}

@media screen and (max-width: 885px) {
    .homepage-as-seen-on img {
        margin: 1rem 1rem;
    }

    .homepage-as-seen-on .ph {
        max-width: 8rem;
    }

    .homepage-as-seen-on .hn {
        max-width: 5.25rem;
    }

    .homepage-as-seen-on .sm {
        max-width: 7.5rem;
    }

    .homepage-as-seen-on .tc {
        max-width: 3.75rem;
    }
}

@media screen and (max-width: 543px) {
    .homepage-as-seen-on {
        padding: .5rem;
    }

    .homepage-as-seen-on .ph {
        max-width: 6rem;
    }

    .homepage-as-seen-on .hn {
        max-width: 3.5rem;
    }

    .homepage-as-seen-on .sm {
        max-width: 5rem;
    }

    .homepage-as-seen-on .tc {
        max-width: 2.5rem;
    }

    .used-technologies .gh {
        max-width: 4.5rem;
    }

    .used-technologies .cp {
        max-width: 4rem;
    }

    .used-technologies .jq {
        max-width: 5rem;
    }

    .used-technologies .hb {
        max-width: 4rem;
    }

    .used-technologies .php {
        max-width: 4rem;
    }
}




@media (min-width: 1200px){
    .span4 {
        width: 350px;
    }
    .feature5 .span3{
        width: 260px;
    }
    .feature4 .span3, .feature2 .span3, .pfeature3 .span3 {
        width: 250px;
    }
}
@media (max-width: 1200px) and (min-width: 979px){
    .span4 {
        width: 288px;
    }
    .span3 {
        width: 215px;
    }

    .join-con .span3 {
        width: 215px;
    }

    .pfeature3 img, .pfeature3 .masked-all  {
        width: 215px;
        height: 159px;
    }
    .pfeature3 .span3{
        height: 148px;
    }
    .pfeature3 .masked{
        width:215px;
    }
    .pfeature3 .masked-all span{
    width: initial;
    padding: 2rem 10px;
    }

.qmfgshxq ul li {
    width: 450px;
    height: 266px;
}

    .qmfgshxq ul li:nth-of-type(3n) {
    margin-right: 15px;
}
    .qmfgshxq ul li:nth-of-type(2n) {
    margin-right: 0;
}

    .join-con .span3 .num:before {
        right: -187px;
    }

    .feature4 .special{
        height:initial
    }
.cases .span3, .cases img, .cases .masked-all{
    height: 344px;
}

.cases .masked-all span {
    padding: 5px;
}

}
@media (max-width: 979px) and (min-width: 768px){
    .span4 {
        width: 208px;
    }
    .span3 {
        width: 146px;
    }
    .pfeature3 img, .pfeature3 .masked-all  {
        width: 146px;
        height: 108px;
    }
    .pfeature3 .span3{
        height: 108px;
    }
    .pfeature3 .masked{
        width:146px;
    }
    .pfeature3 .masked-all span{
    width: initial;
    padding: 5px;
    }

    .feature2 .right-jian{
    width: 10px;
    top: 175px;
    right: -15px;
    }
    .feature4 .special{
        height:initial
    }
}

@media screen and (max-width: 410px){
.theme-header br {
    display: initial !important;
}
}

@media screen and (max-width: 767px) {
    .feature2 .right-jian {
        display: none;
    }
    .feature2 .text{
        width:80%;max-width: initial;
    }

    .pfeature3 .span3 {
        width:300px;
        height: 222px;
        margin: 0 auto;
        margin-bottom:30px;
    }
    .pfeature3 img, .pfeature3 .masked-all  {
        width: 300px;
        height: 222px;
    }
    .pfeature3 .span3{
        height: 222px;
    }
    .pfeature3 .masked{
        width:300px;
    }
    .pfeature3 .masked-all span{
    padding: 94px 20px;
    width: 320px;
    }

    .feature4 .special{
        height:initial;    text-align: center;
    }
    .feature4 .special a img{
        margin-top:30px;
    }
    .feature5 .mainp p {
    text-align: center;
    }
    .theme-header {
        padding: 2rem 1rem 2rem 1rem;
    }


    .theme-header-title {
        font-size: 2.5rem;
    }

    .theme-header-details {
        font-size: 1.2rem;
        margin: 1rem auto;
    }

    .theme-header-image {
        max-width: 400px;
    }

    .theme-header-avatar img {
        bottom: -32px;
        left: calc(50% - 32px);
        width: 64px;
        height: 64px;
    }

    .theme-body {
        padding: 1.5rem 0;
    }
    .homepage-features h3 {
        font-size: 1.5rem;
    }    

.cases .span3, .cases img, .cases .masked-all{
position: initial;
    height: auto;
}

.cases .masked-all span {
padding: 0px 55px;
}
.cases .masked-all img,.cases .masked {
    display: none;
}
.cases .masked-all {
    display: block !important;background: #333;
}
.cases .masked-all span a {
display:inline;
}
.cases .masked-all span b {
display:none;
}
}

.nwlist li {
    height: 0;    opacity: 0;
    overflow: hidden;display: block;
}

.nwlist li.on {
    height: inherit;    opacity: 1;
}

.nwlist{
    margin: 1rem 0 2rem;
}
.feature6 h3, .newsmenu{
    text-align:center
}

.albox {
    padding: 4% 0;
    border-bottom: 1px solid #dcdcdc;
}
.nwlist li .albox {
    width: 49.9%;
    padding: 25px 0;
    border-right: 1px solid #dfdfdf;
    float: left;
}
.nwlist li .albox a {
    width: 100%;    display: flex;
    vertical-align: bottom;
}

.scale{
    animation: scale .25s both;
    -webkit-animation: scale .25s both;
    -moz-animation: scale .25s both;
    -ms-animation: scale .25s both;

}
@keyframes scale{
    from{transform: translateZ(0) scale(1,1);}
    to{transform: translateZ(0) scale(1.1,1.1);}
}
@-webkit-keyframes scale{
    from{transform: translateZ(0) scale(1,1);}
    to{transform: translateZ(0) scale(1.1,1.1);}
}
@-moz-keyframes scale{
    from{transform: translateZ(0) scale(1,1);}
    to{transform: translateZ(0) scale(1.1,1.1);}
}
@-ms-keyframes scale{
    from{transform: translateZ(0) scale(1,1);}
    to{transform: translateZ(0) scale(1.1,1.1);}
}
.scale_return{
    animation: scale_return .25s both;
    -webkit-animation: scale_return .25s both;
    -moz-animation: scale_return .25s both;
    -ms-animation: scale_return .25s both;

}
@keyframes scale_return{
    from{transform: translateZ(0) scale(1.1,1.1);}
    to{transform: translateZ(0) scale(1,1);}
}
@-webkit-keyframes scale_return{
    from{transform: translateZ(0) scale(1.1,1.1);}
    to{transform: translateZ(0) scale(1,1);}
}
@-moz-keyframes scale_return{
    from{transform: translateZ(0) scale(1.1,1.1);}
    to{transform: translateZ(0) scale(1,1);}
}
@-ms-keyframes scale_return{
    from{transform: translateZ(0) scale(1.1,1.1);}
    to{transform: translateZ(0) scale(1,1);}
}

.nwlist {
    background: #fff;
    border: 1px solid #dfdfdf;
    position: relative;
        border-right: none;
    border-bottom: none;
}
.alboxc p {
    height: 2rem;    font-size: 14px;overflow: hidden;    margin-bottom: 0;
}
.alboxc {
    flex-grow: 1;
}
.alboxt em {
    display: block;
    font-size: 45px;
    line-height: 41px;
    font-style: normal;
}
.alboxt span {
    display: block;
    font-size: 14px;
}
.newsmenu a {
    display: inline-block;
    width: 130px;
    margin-bottom: 5px;
    line-height: 2rem;
    text-align: center;
    color: #333;
    font-size: 14px;
    background-color: #FFF;
    -webkit-transition: all .25s;
    -o-transition: all .25s;
    -moz-transition: all .25s;
    transition: all .25s;
}

.qmfgshxq h3,feature6 h3 {
font-size: 32px;
    padding-top: 2rem;
    text-align: center;
    margin: 0;
    color: #fff;
}
.qmfgshxq .sub {
    font-size: 16px;
    color: #999;
    text-align: center;
}

.qmfgshxq {
    padding: 0 0 1rem;
    text-align: center;
}

.qmfgshxq ul {
    margin-left: auto;
}

.qmfgshxq ul li {
    position: relative;
    width: 370px;
    height: 200px;
    background-size: cover;
    margin: 5px;
    display: inline-block;
    overflow: hidden;
}

.feature6 a img,.alboxt {
    margin: 0 20px;
}
.feature6 a {
    color: #666;
}
.feature6 a:hover {
    color: #b5cd42;text-decoration: none;
}

.qmfgshxq ul li .shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
}

.qmfgshxq ul li .shadow p {
  font-size: 28px;
  color: #fff;
  margin-top: 80px;
  text-align: center;
}

.qmfgshxq ul li .shadow span {
  font-size: 16px;
  color: #fff;
  margin-top: 18px;
  text-align: center;
  display: block;
}

.qmfgshxq ul li .version {
  position: absolute;
  width: 230px;
  height: 80px;
  left: 0;
  right: 0;
  margin: 90px auto 0;
  border-radius: 55px;
  font: 35px/80px "Microsoft YaHei",sans-serif;
  /*font:bold 35px/80px "宋体","Microsoft YaHei",sans-serif;*/
  background: rgba(255, 255, 255, 0.75);
  color: #ff6800;
  font-weight: bold;
}

.qmfgshxq ul li .mask {
  position: absolute;
  z-index: 10;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0px;
  overflow: hidden;
  box-sizing: border-box;
  background: -webkit-linear-gradient(left, #ff7200, #ff9630);
  background: -o-linear-gradient(right, #ff7200, #ff9630);
  /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, #ff7200, #ff9630);
  /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, #ff7200, #ff9630);
  /* 标准的语法 */
  color: #fff;
}

.qmfgshxq ul li .mask .title {
  padding: 30px 0 18px;
  font-size: 21px;
}

.qmfgshxq ul li .mask p {
  padding: 0 30px;
  font-size: 15px;
  line-height: 24px;
  margin-bottom: 18px;
  text-align: left;
}

.qmfgshxq ul li .mask .detail {
  width: 100px;
  height: 36px;
  line-height: 36px;
  display: block;
  margin: 0 auto;
  border: 1px solid #fff;
  color: #fff;
  font-size: 12px;
  border-radius: 4px;
}

.qmfgshxq ul li:hover .mask {
  display: block;
}

.gjyzbt h3{
    text-align: center;
    margin: 0;
    padding-top: 2rem;
}
.gjyzbt ul {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  flex-wrap: wrap;    list-style: none;
}

.gjyzbt li, .gjyzbt a {
  width: 270px;
  height: 160px;
  box-sizing: border-box;
  margin-bottom: 21px;
  padding: 1rem;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 9px;
  text-align: left;display: inline-block;
}

.gjyzbt .img-hot {
    height: 110px;
    overflow: hidden;
}
.gjyzbt .img-hot img {
    height: 100%;
    width: 100%;
}

.gjyzbt .data-hot {
    padding: 10px;
    box-sizing: border-box;
}

.gjyzbt .data-hot h3 {
    font-size: 14px;
    color: #303030;
    line-height: 22px;
    display: -webkit-box;
    display: -moz-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    height: 44px;
}
    .gjyzbt p {
        font-size: 16px;
        color: #666;
        text-align: center;
    }

.gjyzbt li .img {
  display: block;
  width: 60px;
  height: 60px;
  margin: 0 auto;
}

.gjyzbt li .title {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.gjyzbt li p {
  padding: 15px 0 0;
  color: #868686;
  text-align: center;margin-bottom: 10px;
}

@media screen and (max-width: 1210px) {
.nwlist li .albox {width:100%}
}