.intro { padding: 2rem 0;}
.intro .heading { margin-bottom: 20px; padding: 1em 0;}
.intro .heading h3 { font-size: 34px; font-weight: bold; color: #4d4d4d;}
.intro .heading h3 small { font-size: .8rem; text-transform: uppercase; font-weight: 400; line-height: 1; color: #777;}
.intro .fl { width: 58%;}
.intro .fl p { font-size: 16px; color: #4d4d4d; line-height: 1.8em;}
.intro .fr { width: 40%; overflow: hidden;}
.intro .fr .swiper .bd li { float: left;}
.intro .fr .swiper .bd li a {margin: 0 5px; padding: 0; transition: all .2s ease-in-out;}
.intro .fr .swiper .bd li a:hover { opacity: .8;}
.intro .fr .swiper .bd li img { width: 50px; height: 50px;}

.cases { width: 100%; padding: 2.5rem 0 0 0;/* max-width: 1440px; overflow: hidden; margin: 0 auto;*/}
.cases .filter { margin-bottom: 2rem;}
.cases .filter dl { overflow: hidden; margin-bottom: .8rem;}
.cases .filter dl dt { float: left; margin-right: 1rem; padding-right: 1rem; line-height: 1em;
    border-right: solid 1.5px #ccc; font-weight: 700; color: #4d4d4d; font-size: 16px;}
.cases .filter dl dd { line-height: 1em;}
.cases .filter dl dd a { display: inline-block; white-space: nowrap; margin-right: .5rem;
    transition: all .3s ease-in-out; color: #4d4d4d; font-size: 16px;}
.cases .filter dl dd a:hover { color: #F1A434;}
.case li { width: 33.333333%; float: left; position: relative; overflow: hidden; display: block;}
.case li i { position: relative; width: 100%; padding: 50% 0; display: block;}
.case li i img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;}
.case li:hover i img { transform: scale(1.1); -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1); -ms-transform: scale(1.1); transition: all .3s ease;}
.case li .case-summary { width: 87%; height: 90%; background: url(../img/black.png) repeat;
    top: 0; left: 0; position: absolute; padding: 2.6rem; opacity: 0; filter: alpha(opacity=0);
    transition: all .3s ease;}
.case li:hover .case-summary { display: block; opacity: 1; filter: alpha(opacity=100);
    transition: all .3s ease;}
.case li .case-summary h3 { font-weight: bold; font-size: 1.3rem; margin-bottom: 1rem;
    color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: block;}
.case li .case-summary p { line-height: 1.8em; overflow: hidden; color: #fff; display: -webkit-box;
    text-overflow: ellipsis; -webkit-line-clamp: 4; -webkit-box-orient: vertical; font-size: 14px;}
.case li .case-summary p.p1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: block; position: absolute; left: 2.6rem; right: 2.6rem; bottom: 5.4rem;}

.indnews { width: 100%;/* max-width: 1440px; overflow: hidden; margin: 0 auto;*/}
.indnews li { float: left; width: 33.333333%;}
.indnews li a.pic { position: relative; width: 100%; padding: 35% 0; display: block;}
.indnews li a.pic img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;}
.indnews li .text { background: #1B1D20; padding: 2px 30px 20px 30px; margin: 0px;
    text-align: left;}
.indnews li h1 { color: #F1A434; font-size: 28px; line-height: 48px; letter-spacing: 1px;
    margin: 20px 0 10px 0}
.indnews li h1 a { display: inline-block; height: 30px; line-height: 30px; overflow: hidden;
    color: #F1A434;}
.indnews li h1 a:hover { color: #fff;}
.indnews li h4 { line-height: 35px; height: 105px; overflow: hidden; font-weight: 400;
    letter-spacing: 1px; color: #7D878D; font-size: 15px; display: -webkit-box;
    text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}

.pinpai { width: 100%;}
.pinpai .bg { width: 100%; padding: 150px 30px 150px 30px; text-align: center;
    background: #2F3336 url(../img/tel_bg.jpg) 50% 0 repeat-y fixed; background-size: cover;
    -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;}
.pinpai .bg h3 { color: #F1A434; font-size: 30px; line-height: 68px; font-weight: 600;
    letter-spacing: 0px;}
.pinpai .bg a { margin: 2em 0; display: block;}
.pinpai .bg p { font-size: 28px; color: #F1A434; line-height: 50px;}

@media screen and ( max-width: 768px ) {
    .intro { padding: 1rem 0;}
    .intro .heading { margin-bottom: 0;}
    .intro .heading h3 { font-size: 22px;}
    .intro .fl { width: 100%;}
    .intro .fr { width: 100%;}

    .cases { padding: 2.5rem 0 0 0;}
    .cases .filter { margin-bottom: 1rem;}
    .cases .filter dl dt, .cases .filter dl dd { line-height: 1.8em;}
    
    .indnews li { width: 100%; margin: .3em 0;}
    .indnews li .text { padding: 2px 10px 20px 10px;}
    .indnews li h1 { font-size: 16px; line-height: 28px; margin: 10px 0 5px 0}
    .indnews li h1 a { height: 24px; line-height: 24px;}
    .indnews li h4 { line-height: 25px; height: 75px;}

    .pinpai .bg { padding: 100px 0;}
    .pinpai .bg h3 { color: #F1A434; font-size: 30px; line-height: 48px; font-weight: 600;}
    .pinpai .bg a { margin: 2em 0; display: block;}
    .pinpai .bg p { font-size: 28px; color: #F1A434;}

    .case li .case-summary, .case li:hover .case-summary { display: none;}
}
@media screen and ( max-width: 768px ) and ( min-width: 600px ){}
@media screen and ( max-width: 400px ) and ( min-width: 320px ){
    .pinpai .bg a img { width: 95%; height: auto;}
}