.chid-banner { background: url(img/case_banner.jpg) no-repeat center center; background-size: cover; height: 400px; }

.case { margin-bottom: 60px; overflow: hidden; }
.case .case_nav .list > li .box .on { background: #d5231b; color: #fff; }
.case .case_nav .list > li .box .on .wz:before { background: #fff; }


.case .tuwen { max-width: 1224px; width: 100%; margin-left: auto;margin-right: auto;}
.case .tuwen .list { margin-left: -50px; }
.case .tuwen .list > li { float: left; width: 33.33%; padding-left: 50px; margin-bottom: 60px; }
.case .tuwen .list > li .box { display: block; position: relative; width: 100%; }
.case .tuwen .list > li .box .pic { position: relative; }
.case .tuwen .list > li .box .pic img { display: block; width: 100%; }
.case .tuwen .list > li .box .pic .add { position: absolute; left: 45%; top: 30%; display: block; opacity: 0; }
.case .tuwen .list > li .box .pic .add img { width: 30px; }
.case .tuwen .list > li .box .pic:after { content: ''; position: absolute; left: 10px; right: 10px; top: 8px; bottom: 8px; opacity: 0; transition: .3s ease; border: 1px solid #fff; }
.case .tuwen .list > li .box .pic:before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; opacity: 0; transition: .3s ease; background: rgba(213,35,27,.5); }
.case .tuwen .list > li .box:hover .pic .add, .case .tuwen .list > li .box:hover .pic:after, .case .tuwen .list > li .box:hover .pic:before { opacity: 1; }
.case .tuwen .list > li .box .font { position: absolute; font-size: 12px; color: #666; width: 100%; padding-left: 14px; }
.case .tuwen .list > li .box .font .p1 { padding: 14px 0 12px 0; }
.case .tuwen .list > li .box .font .p2 { display: none; }
.case .tuwen .list > li .box:hover .font { background: #fff;  transition: ease .3s; }
.case .tuwen .list > li .box:hover .font .p2 { display: block; }

@media (max-width: 1024px) {
    .case .case_nav { float: none; }
    .case .tuwen { float: none; max-width: none; width: 100%; margin-top: 30px; }
    .case .tuwen .list { margin-left: -20px; }
    .case .tuwen .list > li { float: left; width: 33.33%; padding-left: 20px; margin-bottom: 60px; }
    .case .tuwen .list > li .box .pic .add { opacity: 1; }
    .case .tuwen .list > li .box .pic:after { opacity: 1; }
    .case .tuwen .list > li .box .pic:before { opacity: 1; }
    .case .tuwen .list > li .box .font {background: #fff; }
    .case .tuwen .list > li .box .font .p2 { display: block; }
}

@media (max-width: 900px) {
    .case .tuwen .list > li { width: 50%; }
}

@media (max-width: 667px) {

    .case .tuwen .list > li { width: 100%; float: none; }
}

.pages { margin: 60px 0; text-align: center; clear: both; width: 100%; }
.pages ul { display: inline-block; }
.pages ul li { display: inline-block; }
.pages ul li a { margin: 0px 10px; padding: 5px 10px; }
.pages ul li a:hover { background: #d5231b; color: #fff; }
.pages ul li .on { background: #d5231b; color: #fff; }

.g_header .main .top_r .s_nav li .on { color: #d5231b; }
.g_header .main .top_r .nav .navContent li .on { background: #d5231b; color: #ffffff; }


.al_detail { }
.al_detail .left .pic { width: 700px; height: 500px; line-height: 500px; overflow: hidden; text-align: center; }
.al_detail .left .pic img { display: inline-block; vertical-align: middle; }
.al_detail .left .btn_con { margin-top: 32px; }
.al_detail .left .btn_con .order { padding: 13px 30px; display: block; background: #d5231b; color: #fff; font-weight: bold; }
.al_detail .left .btn_con .p1 { font-size: 12px; color: #666; line-height: 24px; padding-left: 30px; }
.al_detail .left .btn_con .p1 .zx { color: #d5231b; }
.al_detail .right { }
.al_detail .right .font { padding: 50px 66px 77px 66px; background: #f4f4f4; }
.al_detail .right .font .p1 { font-size: 18px; color: #333; font-weight: bold; margin-bottom: 12px; height: 1.5em; overflow: hidden; }
.al_detail .right .font .p2 { color: #666; font-weight: bold; }
.al_detail .right .font .p3 { max-width: 368px; font-size: 12px; color: #999; line-height: 24px; }
.al_detail .right .font .p3 .b1 { color: #666; font-weight: bold; }
.al_detail .right .font .p4 { max-width: 368px; font-size: 12px; color: #999; line-height: 24px; overflow: hidden; height: 12em; }

.al_detail .one { }
.al_detail .two { display: none; }

@media (max-width: 1024px) {

    .al_detail .left { float: none; text-align: center; }
    .al_detail .left .pic { margin-bottom: 20px; text-align: center; display: inline-block; width: auto; height: auto; line-height: 0; }
    .al_detail .left .pic img { display: inline; }
    .al_detail .left .btn_con { margin-top: 0; }
    .al_detail .left .btn_con .p1 { margin: 20px 0; }


    .al_detail .right { float: none; }
    .al_detail .right .font .p3 { display: inline; }

    .al_detail .one { display: none; }
    .al_detail .two { display: block; }
}


@media (max-width: 667px) {
    .al_detail .right .font { padding: 50px 30px; }
}