/* CSS Document */
.about { overflow: hidden; width: 100%; background: url(../img/abtBg.jpg) no-repeat top center; padding: 110px 0 60px 0;}
.about .ab_ren { margin-top: 95px; width: 462px; height: 455px; display: block;}
.abt_con { width: 700px; margin-top: 160px; color: #333; font-size: 15px; text-align: justify; line-height: 2;}
.abt_con p { text-indent: 2em; line-height: 30px;}
.abt_con p span { color: #ae0808; font-weight: bold;}
.about a { float: right; font-size: 14px; color: #a50911; margin: 22px 70px 0 0; display: block;}
.about a:hover { color: #000;}

.pro { background: #ededed;}
.pro .title { background: url(../img/pic-tit.jpg) no-repeat top center; height: 260px;}
.picList { overflow: hidden; clear: both; position: relative;}
.picList ul { overflow: hidden; zoom: 1; float: left; _display: inline;}
.picList li { width: 282px; position: relative; margin: 0 10px; float: left; _display: inline; overflow: hidden; zoom: 1;}
.picList li .imgWrap { width: 282px; height: 282px; text-align: center; overflow: hidden; display: table; table-layout: fixed\9; background: #fff;}
.picList li .imgWrap a.pic { display: table-cell; width: 282px; height: 282px; overflow: hidden; vertical-align: middle; line-height: 282px; font-size: 282px;}
.picList li .imgWrap a.pic img { max-width: 282px; max-height: 282px; display: block; margin: 0 auto;}
.picList li .imgWrap a.pic img { transform:scale(1, 1); -webkit-transition: -webkit-transform 0.4s ease; -ms-transform:scale(1, 1); -moz-transition: -moz-transform 0.4s ease;
    -ms-transition: -ms-transform 0.4s ease; -webkit-transform: scale(1, 1);}
.picList li .imgWrap a.pic:hover img { -webkit-transition: -webkit-transform 0.4s ease; -moz-transition: -moz-transform 0.4s ease; -ms-transition: -ms-transform 0.4s ease;
    transform: scale(1.04, 1.04); -ms-transform: scale(1.04, 1.04); -webkit-transform: scale(1.04, 1.04);}
.picList li h3 { padding: 18px 0 25px; text-align: center;}
.picList li h3, .picList li h3 a { line-height: 24px; font-size: 17px;}

@media screen and ( max-width: 768px ){
    .about { background-size: 350% auto; padding: 160px 0 20px 0;}
    .about .ab_ren { margin-top: 2.5em; width: 100%; height: auto;}
    .abt_con { width: 100%; margin-top: 2em;}
    .about a { float: none; width: 150px; margin: 1em auto 0 auto; background: #ae0808; color: #fff; text-align: center; border-radius: 5px;}

    .pro .title { background-size: 220% auto; height: 206px;}
    .picList li { width: 192px; margin: 0 5px;}
    .picList li .imgWrap { width: 192px; height: 192px;}
    .picList li .imgWrap a.pic { width: 192px; height: 192px; line-height: 192px; font-size: 192px;}
    .picList li .imgWrap a.pic img { max-width: 192px; max-height: 192px;}

    .field img.field_L, .trls_pk, .tr_step { display: none;}
}
@media screen and ( max-width: 412px ) and ( min-width: 375px ){
    .about { padding: 140px 0 20px 0;}
    .pro .title { height: 186px;}

    .picList li { width: 173px;}
    .picList li .imgWrap { width: 173px; height: 173px;}
    .picList li .imgWrap a.pic { width: 173px; height: 173px; line-height: 173px; font-size: 173px;}
    .picList li .imgWrap a.pic img { max-width: 173px; max-height: 173px;}
}
@media screen and ( max-width: 374px ) and ( min-width: 320px ){
    .about { padding: 110px 0 20px 0;}
    .pro .title { height: 156px;}

    .picList li { width: 146px;}
    .picList li .imgWrap { width: 146px; height: 146px;}
    .picList li .imgWrap a.pic { width: 146px; height: 146px; line-height: 146px; font-size: 146px;}
    .picList li .imgWrap a.pic img { max-width: 146px; max-height: 146px;}
}