﻿body{font-family: "Microsoft YaHei";}
/*服务列表*/

.service{margin-top: 46px;margin-bottom: 7px;}
.service ul{ margin-left: -30px;}
.service li{ position: relative;margin-left: 30px;line-height: 0;margin-bottom: 50px;}
.service li .serviceImg{ display: inline-block;overflow: hidden;}
.service li .serviceImg img{ transition: all 0.6s;  }
.service li .serviceImg img:hover{transform: scale(1.1);  }
.service li .serviceName{ font-size: 18px;color: #fff;display: inline-block;position: absolute;left: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.5);
     width: 100%;height: 36px;line-height: 36px;text-align: center;letter-spacing: 0.8px;}
.serviceTxt{width: 100%;height: 36px;position: absolute;bottom: 0;}
.service .txt h3{ color: #fff;text-align: center;margin-top: 40px;margin-bottom: 20px;line-height: 20px;}
.service .txt span{ font-size: 18px;color: #fff;letter-spacing: 1px;padding-bottom: 10px;border-bottom: solid 2px #fff;display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 100%;}
.service .txt p{ font-size: 14px;color: #fff;line-height: 24px;height: 72px;letter-spacing: 0.8px;overflow: hidden;
    text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.service .txt span.more{ line-height: 20px;font-size: 12px;color: #fff;font-family: simsun;position: absolute;right: 15px;bottom: 20px;margin: 0;width: auto;
    background: url(../images/ico_moreService.png) left center no-repeat;padding-left: 8px;padding-bottom: 0;border: none;}
.service .txt{display: none;height: 230px;width: 345px;position: absolute;left: 0;bottom: 0;padding: 0 15px 0 20px;background-color: rgba(25,154,145,0.8);}

/*分页*/
.page {height: 30px;text-align: center;width: auto;margin: 1px auto 66px;}

/*在线申请表单*/
.mask{ z-index: 99;position: fixed;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);display: none;}
.form{ background-image: url(../images/bg_ourService.png);background-repeat: no-repeat;background-position: center;background-size: cover;}
.form .formHead{ }
.form .formHead h2{ color: #333;font-size: 24px;text-align: center;letter-spacing: 1.5px;padding-top: 43px;margin-bottom: 13px;}
.form .formHead p{color: #666;font-size: 14px;text-align: center;letter-spacing: 0.8px;}
form{width: 920px;margin: 38px auto 0;}
form li{margin-bottom: 23px;position: relative;display: inline-block;}
form li.name,form li.email{margin-right: 132px;}
form span{ font-size: 16px;color: #333;margin-right: 13px;}
form li.name span{ background: url(../images/ico_name.png) left center no-repeat;padding-left: 31px;margin-right: 12px;}
form li.email span{background: url(../images/ico_email.png) left center no-repeat;padding-left: 31px;margin-right: 12px;}
form li.phone span{background: url(../images/ico_phone.png) left center no-repeat;padding-left: 31px;margin-right: 12px;}

form li.type span{background: url(../images/ico_type.png) left center no-repeat;padding-left: 31px;margin-right: 12px;padding-top: 1px;}
form li.msg span{background: url(../images/ico_msg.png) left center no-repeat;padding-left: 31px;margin-right: 12px;}
form i{ color: #ff0000;margin-left: 6px;position: absolute;top: 4px;}
form input{ border: solid 1px #e1e1e1;border-radius: 3px;outline: none;height: 36px;width: 271px;padding: 0 10px;}
form input:focus,form textarea:focus{ border: solid 1px #1b9f96;}
form textarea{border: solid 1px #e1e1e1;border-radius: 3px;outline: none;height: 135px;width: 790px;padding: 10px;}
form input,form textarea{ font-family: "Microsoft YaHei";color: #333;font-size: 12px;}
form input[type=submit]{ background-image: url(../images/ico_submitOn.png);color: #1b9f96;border: solid 1px #1b9f96;
    background-repeat: no-repeat;background-position: 17px center;font-size: 14px;width: 114px;height: 38px;display: inline-block;
    padding: 0 0 0 28px;letter-spacing: 0.8px;margin-top: 23px;margin-bottom: 45px;background-color: #f1f1f1;}
form input[type=submit]:hover{background-image: url(../images/ico_submit.png);color: #fff;background-color: #1b9f96;}
.errorWrap{position: absolute;font-size: 12px;color: #ff0000;bottom: -20px;left: 92px;}
form li.btnSubmit{ text-align: center;width: 100%;}
form li.type input{ background: url(../images/ico_select.png) 268px center no-repeat;background-color: #fff;cursor: pointer;}
form li.type .typeList{border-radius: 3px;width: 293px;background: #fff;box-sizing: border-box;border: 1px solid #e1e1e1;
     position: absolute;left: 92px;top: 38px;display: none;z-index: 100;}
form li.type .typeList li{font-size: 14px;color: #333;margin: 0;line-height: 26px;padding: 0 10px;display: block;cursor: pointer;}
form li.type .typeList li:hover{ color: #1b9f96;}

.box{display: none;position: relative;z-index: 999;background-color: #fff;width: 789px;height: 339px;left: 50%;top: 50%;position: fixed;
     margin-left: -394.5px;margin-top: -169.5px;}
.box a.close{ position: absolute;right: 10px;top: 10px;}
.box a.back{ color: #1b9f96;font-size: 14px;display: block;border: solid 1px #1b9f96;border-radius: 3px;width: 112px;
    height: 36px;line-height: 36px;margin: 38px auto 0;text-align: center;}
.box a.back:hover{ color: #fff;background-color: #1b9f96;}
.successBox .success{ text-align: center;padding-top: 87px;}
.successBox .success h2{ font-size: 18px;color: #333;display: inline-block;letter-spacing: 0.8px;}
.successBox .success img{ vertical-align: middle;margin-right: 6px;}
.failBox h2{ font-size: 18px;color: #333;letter-spacing: 0.9px;}
.failBox p{ font-size: 14px;color: #333;letter-spacing: 0.7px;margin-top: 11px;text-align: left;}
.failBox .fail div{ display: inline-block;}
.fail{padding-top: 78px;text-align: center;}
.fail img{vertical-align: top;margin-right: 6px;}
/*筛选列表*/
.filter{ background: #eaf5f4;padding-left: 13px;padding-top: 13px;padding-bottom: 16px;margin-top: 28px;}

.filter .filters{ margin-bottom: 17px;}
.filter .filters:last-child{ margin-bottom: 0;}
.filter .title{ font-size: 16px;color: #333;letter-spacing: 0.7px;}
.filter .all{ font-size: 12px;color: #1b9f96;font-family: simsun;display: inline-block;background: #fff;border: solid 1px #1b9f96;
     height: 23px;width: 54px;text-align: center;line-height: 23px;letter-spacing: 0.6px;margin-right: 17px;cursor: pointer;}
.filter .all:hover,.filter .all.on{ background: #1b9f96;color: #fff;}
.filter .choice{max-width: 870px;max-height: 24px;overflow: hidden;}
.filter .choice.active{ max-height: inherit;}
.filter .choice a{ font-size: 14px;color: #333;letter-spacing: 0.7px;margin-right: 44px;line-height: 24px;display: inline-block;}
.filter .choice a:hover,.filter .choice a.on{ color: #1b9f96;}
.filter .moreBtn{ display: none;}
.filter .moreBtn .btnMore{ font-size: 12px;color: #666;font-family: simsun;background: #fff;border: solid 1px #d2d2d2;border-radius: 5px;
    display: inline-block;height: 27px;width: 62px;text-align: center;line-height: 27px;letter-spacing: 0.6px;margin-left: 19px;}

@media(max-width: 1240px) {
    .mycontainer{ width: 94%;margin: 0 auto;}
    .service ul{ margin-left: -3%;}
    .service li{ width: 30.33%;margin-left: 3%;overflow: hidden;}
    .service li .serviceImg img{ width: 100%;}
    .filter .choice {max-width: 75%;}
    .filter .moreBtn .btnMore{ margin-left: 0;}
    .service .txt {width: auto;}

}
@media(max-width: 1100px) {
    .service .txt h3 {margin-top: 65px;}
}
@media(max-width: 1060px) {
    .filter .choice {max-width: 72%;}
}
@media(max-width: 999px) {
    .service .txt h3 {margin-top: 70px;}
    .service .txt span.more {bottom: 5px;}
     /*表单*/
    .box {width: 660px;margin-left: -330px;}
    form {width: 850px;}
    form li.name, form li.email {margin-right: 50px;}
    form textarea{ width: 710px;}
}
@media(max-width: 940px) {
    .filter .choice {max-width: 66%;}
    .service .txt h3 {margin-top: 80px;margin-bottom: 10px;}
    .service .txt span {padding-bottom: 5px;}
}
@media(max-width: 888px) {
    form{ width: 720px;}
    form textarea {width: 568px;}
    form input{ width: 200px;}
    .service .txt h3 {margin-top: 95px;}
}

@media(max-width: 768px) {
    /*表单*/
    .box {width: 500px;margin-left: -250px;height: 280px;margin-top: -140px;}
    .successBox .success {padding-top: 60px;}
    form{ width: 440px;}
    form textarea {width: 271px;}
    form input{ width: 271px;}
    form li.name, form li.email {margin-right: 0;}

    .service .txt h3 {margin-top: 40px;margin-bottom: 20px;}
    .service .txt span {padding-bottom: 10px;}
    .service .txt span.more {bottom: 20px;}
    .filter .choice {max-width: 60%;}
    .service ul{ margin-left: -3%;}
    .service li{ width: 47%;margin-left: 3%;}
}
@media(max-width: 700px) {
    .service .txt h3 {margin-top: 60px;}
}
@media(max-width: 630px) {
    .service .txt h3 {margin-top: 80px;}
    .service .txt span.more {bottom: 5px;}
}
@media(max-width: 666px) {
    .filter .choice {max-width: 55%;}
}
@media(max-width: 580px) {
     /*表单*/
    .box {width: 400px;margin-left: -200px;height: 312px;margin-top: -156px;}
    .successBox .success {padding-top: 91px;}
    .fail {padding-top: 92px;}

    .filter .choice {max-width: 50%;}
    .service .txt h3 {margin-top: 90px;margin-bottom: 10px;}
    .service .txt span {padding-bottom: 5px;}
}
@media(max-width: 540px) {
    .filter .choice {max-width: 48%;}
}
@media(max-width: 520px) {
    .filter {padding-top: 25px;margin-top: 50px;padding-left: 9px;}
    .filter .choice {max-height: 72px;max-width: 100%;}
    .filter .choice a {line-height: 36px;margin-left: 7px;margin-right: 8px;}
    .filter .choice a:first-child{ margin-left: 163px;}
    .filter .title {position: absolute;top: 5px;}
    .filter .all {position: absolute;width: 43px;left: 104px;top: 5px;}
    .filter .moreBtn{ /*position: absolute;right: 11px;top: 38px;*/}
    .filter .filters { position: relative;}
    .service .txt h3 {margin-top: 100px;margin-bottom: 5px;}
    .filterList .container{ width: 100%;}
    .filters .moreBtn{float: right; margin-right: 11px;}
        
}
@media(max-width: 480px) {
    /*表单*/
    .form .formHead h2 {font-size: 20px;}
    .form .formHead p {font-size: 12px;}
    form li {margin-bottom: 17px;}
    form li span{ display: block;font-size: 14px;margin-bottom: 8px;padding-left: 29px;}
    form input {height: 30px;width: 243px;}
    form textarea {width: 243px;height: 103px;}
    form i {top: 30px;}
    form {width: 280px;}
    form input[type=submit] {width: 94px;height: 31px;line-height: 31px;background-size: 26px 18px;background-position: 10px center;
    margin-top: 21px;margin-bottom: 40px;}
    .errorWrap {bottom: -16px;left: 0;}

    .service{ margin-top: 50px;}
    .service ul{ margin-left:0;}
    .service li{ width: 100%;margin-left: 0;margin-bottom: 40px;}
    .service li .serviceImg{ width: 100%;}
    .service li .serviceName{ height: 30px;line-height: 30px;font-size: 16px;}

    .service .txt {height: 273px;}
    .service .txt h3 {margin-top: 40px;margin-bottom: 20px;}
    .service .txt span {padding-bottom: 10px;}
    .service .txt span.more {bottom: 20px;}
}
@media(max-width: 420px) {
    /*表单*/
    .box {width: 320px;margin-left: -160px;}
    .service .txt h3 {margin-top: 60px;}
}
@media(max-width: 400px) {
    /*.filter .choice {max-width: 80%;}*/
    .service .txt h3 {margin-top: 80px;}
    .filter .moreBtn {right: 9px;}
}
@media(max-width: 350px) {
    .service .txt h3 {margin-top: 90px;margin-bottom: 10px;}
    .service .txt span.more {bottom: 10px;}
}
@media(max-width: 340px) {
    .service .txt h3 {margin-top: 100px;}
}
