.webtype{
    padding-top: 56px;
    padding-bottom: 56px;
}
.webtype-content{
    height:510px;
    margin-top: 60px;
    padding-right: 630px;
    position: relative;
    background: url(../images/computer.png) no-repeat top right;
}
.webtype-swiper{
    width:500px;
    line-height: 30px;
}
.webtype .swiper-pagination{
    display: inline-block;
    width:500px;
    padding-left: 60px;
    margin-top: 60px;
    text-align: left;
}
.webtype .swiper-pagination-bullet{
    display: inline-block;
    width:20px;
    height:20px;
    background-color: #999;
    margin-right: 20px;
    border-radius: 50%;
}
.webtype .swiper-pagination-bullet-active{
    background-color: #4191fb;
}
.webtype-imgcontent{
    position: absolute;
    width:554px;
    height:315px;
    overflow: hidden;
    right:41px;
    top:108px;
}
.webtype-imgcontent img{
    width:100%;

}
/*技术实力*/
.skill{
    padding: 65px 0;
}
.skill-card{
    width:263px;
    height:327px;
    background-color: #fff;
    text-align: center;
    padding-top: 40px;
    position: relative;
    border-radius: 5px;
}
.skill-card:hover{
    box-shadow:  0 0 30px rgba(0,0,0,0.2);
}
.skill-card img{
    margin-bottom: 65px;
}
.skill-card:after{
    content:'';
    position: absolute;
    width:33px;
    height:4px;
    background-color: #1f74ec;
    top:209px;
    left:115px;
}
/*技术服务*/
.webserver{
    padding:70px 0;
}
.webserver-card{
    width:390px;
    height:250px;
    text-align: center;
    padding: 0 25px;
    border-radius: 10px;
}
.webserver-card_intro{
    display: none;
}
.webserver-card:hover,.webserver-card.active{
    color: #fff;
    background: url(../images/beianbg.png) no-repeat center center;
    background-size: 100%;
}
.webserver-card:hover .webserver-card_intro,.webserver-card.active .webserver-card_intro{
    display: block;
}
.webserver-card:hover .c-gray,.webserver-card.active .c-gray{
    color: #fff;
}
/*立即咨询*/
.askfor{
    height:260px;
    background: url(../images/zaiyiqi.png) no-repeat center center;
    background-size: 100%;
    padding-top: 60px;
    text-align: center;
}
.ask-btn{
    display: inline-block;
    width:150px;
    height:40px;
    padding-top: 9px;
    text-align: center;
    color: #fff;
    font-size: 20px;
    background-color: #2a86fc;
    color: #fff;
    border-radius: 5px;
}
/*优秀案例*/
.gooddemo{
    padding: 60px 0;
}
.gooddemo-box{
    width: 400px;
    height:400px;
    padding: 20px;
    border-radius: 10px;
    position: relative;
}
.gooddemo-box img{
    border-radius: 10px;
    width:100%;
    margin-bottom: 25px;
}
.gooddemo-box:hover,.gooddemo-box.active{
    box-shadow:  0 0 10px rgba(0,0,0,0.2);;
}
.gooddemo-box:hover  .gooddemo-intro,.gooddemo-box.active  .gooddemo-intro{
    position: absolute;
    left:0;
    top:200px;
    z-index: 3;
    background: inherit;
    padding: 20px;
    line-height: 20px;
    background: -webkit-linear-gradient( rgba(255,255,255,0.9) , #fff); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient( rgba(255,255,255,0.9) , #fff); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient( rgba(255,255,255,0.9) , #fff); /* Firefox 3.6 - 15 */
    background: linear-gradient( rgba(255,255,255,0.9) , #fff); /* 标准的语法 */
}
.gooddemo-intro_content{
    display: none;
}
.gooddemo-box:hover .gooddemo-intro_content{
    display: block;
}
.gooddemo-box.active .gooddemo-intro_content{
    display: block;
}
.gooddemo-box.active .gooddemo-intro_title,.gooddemo-box:hover .gooddemo-intro_title{
    color: #1f74ec;
}
.gooddemo-intro_title{
    font-weight: normal;
}
/*修改特殊公共样式*/
.greatdemo .container{
    --swiper-pagination-color: #4186ff;
}
.question-card1{
    background-color: #4191fb;
}
.question-card2{
    background-color: #41a1fb;
}
.question-card3{
    background-color: #41b3fb;
}
@media only screen and (max-width: 750px) {
    /*广告*/
    .banner {
        height: auto;
        width: 100%;
        position: relative;
        padding: 20px;
        padding-top: 40px;
    }

    .banner img {
        position: relative;
        /*width: 40%;*/
        height:120px;
        top: 0;
    }

    .banner-text {
        color: #fff;
        position: absolute;
        top: 0px;
        left: 0px;

    }

    .banner-text h1 {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .banner-text p {
        font-size: 12px;
        line-height: 25px;
    }

    .banner-btn {
        display: none;
    }
    /*移动端网站建设类型*/
    .webtype{
        padding:30px;
    }
    .webtype-content{
        height:auto;
        margin-top: 20px;
        padding: 0 30px;
        position: relative;
        background: #fff;
        text-align: center;
    }
    .webtype-swiper{
        width:100%;
        line-height: 30px;
        padding:0 30px;
    }
    .webtype .swiper-pagination{
        display: none;
    }
    .webtype-imgcontent{
        position: absolute;
        width: 280px;
        overflow: hidden;
        left: 20px;
        top: 54px;
        margin: 0 auto;
    }
    .webtype-imgcontent img{
        width:100%;

    }
    .webtype-computer{
        width:300px;
        display: block;
        margin: 0 auto;
    }
    .webtype .swiper-button-prev,.webtype .swiper-button-next{
        z-index: 5;
    }
    .webtype .swiper-button-prev img,.webtype .swiper-button-next img{
        height:auto;
        width:25px;
    }
    .webtype .swiper-button-prev:after,.webtype .swiper-button-next:after{
        content:''
    }
    .webtype .swiper-button-next{
        right:-10px;
    }
    .webtype .swiper-button-prev{
        left:-10px;
    }
    .webtype-content h2{
        margin-bottom: 10px;
    }
    /*移动端技术实力*/
    .skill{
        padding: 30px 0;
    }
    .skill-card{
        width:48%;
        height:auto;
        background-color: #fff;
        text-align: center;
        padding: 20px 0;
        position: relative;
        border-radius: 5px;
        margin-bottom: 10px;
    }
    .skill-card:hover{
        box-shadow:  0 0 30px rgba(0,0,0,0.2);
    }
    .skill-card img{
        margin-bottom: 20px;
        width:95px;
    }
    .skill-card:after{
        content:'';
        display: none;
        position: absolute;
        width:33px;
        height:4px;
        background-color: #1f74ec;
        top:209px;
        left:115px;
    }
    /*移动端技术服务*/
    .webserver{
        padding:30px 0;
    }
    .webserver-card{
        width:48%;
        height:70px;
        text-align: center;
        padding: 0 5px;
        border-radius: 5px;
        color: #fff;
        margin-bottom: 10px;
    }
    .webserver-card_intro{
        display: none;
    }
    .webserver-card{
        color: #fff;
        background: #2567bb;
        background-size: 100%;
    }
    .webserver-card.active{
        background: #2567bb;
    }
    .webserver-card .c-gray{
        color: #fff;
        font-size: 10px;
    }
    .webserver-card:hover .webserver-card_intro,.webserver-card.active .webserver-card_intro{
        display: none;
    }
    .webserver-card:hover .c-gray,.webserver-card.active .c-gray{
        color: #fff;
    }
    /*移动端即咨询*/
    .askfor{
        height:130px;
        background: url(../images/zaiyiqi.png) no-repeat center center;
        background-size: 100% 100%;
        padding-top: 30px;
        text-align: center;
    }
    .askfor .font-20{
        font-size: 12px;
    }
    .ask-btn{
        display: inline-block;
        width:80px;
        height:20px;
        padding: 5px;
        text-align: center;
        color: #fff;
        font-size: 10px;
        background-color: #2a86fc;
        color: #fff;
        border-radius: 5px;
    }
    /*优秀案例*/
    .gooddemo{
        padding: 30px 0;
    }
    .gooddemo-box{
        width: 48%;
        padding: 0px;
        height:auto;
        padding-bottom: 10px;
        border-radius: 5px;
        position: relative;
        box-shadow:  0 0 5px rgba(0,0,0,0.2);;
    }
    .gooddemo-box img{
        border-radius: 5px;
        width:100%;
        margin-bottom: 10px;
    }
    .gooddemo-box:hover,.gooddemo-box.active{
        box-shadow:  0 0 10px rgba(0,0,0,0.2);;
    }
    .gooddemo-box:hover  .gooddemo-intro,.gooddemo-box.active  .gooddemo-intro{
        position: relative;
        left:0;
        top:0;
        z-index: 3;
        background: inherit;
        padding: 0;
        line-height: 20px;
        background: #fff; /* Safari 5.1 - 6.0 */
    }
    .gooddemo-box.active .gooddemo-intro_title, .gooddemo-box:hover .gooddemo-intro_title{
        color:#333;
    }
    .gooddemo-intro_content{
        display: none;
    }
    .gooddemo-box:hover .gooddemo-intro_content{
        display: none;
    }
    .gooddemo-box.active .gooddemo-intro_content{
        display: none;
    }
}