.case{width:100%; background-color: #f2f2f2;}

/* bar */

.bar{height: auto;}

.case_tag{display: inline-block; padding: 0 1rem; margin: 1rem 1rem 1rem 0; line-height: 2; color: rgb(185, 182, 182); border: solid 1px rgb(185, 182, 182); border-radius: 1.3rem;}

.case_tag_on,.case_tag:hover{padding: 0 1.7rem;color:#fff; background-color: #004bc8;}

.bar .fr{position: absolute;right: 0; top: 0;}

/* list */

.case_list{width: 100%;display: -webkit-box; display: -ms-flexbox; display: flex;flex-direction:row; justify-content:flex-start; flex-wrap:wrap;}

.case_blo{position: relative; margin: 0 1% 1rem; width:23%; background-color: #fff;}

.case_b_img{width: 100%; }

.case_t1,.case_t2{width: 100%; height: 5.6rem; line-height: 5.6rem; text-align: center; color: #333;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.case_mark{display: none; position: absolute;  top:0; left: 0; z-index: 2; width: 100%; height:100%; background-color: rgba(0,0,0,0.5);}

.case_mark_t{display: none; position: absolute;  top:0; left: 0; z-index:3; width: 100%; height:100%; flex-direction:column; justify-content:center;}

.case_show{width: 3.3rem; height: 3.3rem; line-height: 2.8rem; margin: 0 auto; text-align: center; color:#fff; font-size: 2.7rem; border: solid 1px #fff; border-radius: 100%;}

.case_t2{color: #fff;}

.case_blo:hover .case_mark,.case_blo_on .case_mark,.case_blo:hover .case_mark_t,.case_blo_on .case_mark_t{display: flex;}



.case_det_mark{position: fixed;top:0; left: 0; z-index: 2; width: 100%; height: 100%; background-color: rgba(0,0,0,0.2);}

.case_det{position: fixed; top:15%; left: 16.5%; z-index: 3; padding: 2.5%; width: 67%; background-color: #fff;display: -webkit-box; display: -ms-flexbox; display: flex; justify-content:space-between;}

.case_det_img{width: 62.5%;}

.case_det_img img{width: 100%;}

.case_det_t{width: 35%; line-height: 2; color: rgb(85, 83, 83);display: -webkit-box; display: -ms-flexbox; display: flex;flex-direction:column; justify-content:top;}

.case_det_t1{position: relative; padding: 2vw 0; margin-bottom: 2vw; width: 78%; font-size: 1.67rem; color: #333;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.case_det_t1::after{content: '';position: absolute; bottom: 0; left: 0; width: 3.9rem; border-bottom: solid 0.25rem #004bc8;}



@media screen and (max-width: 1600px) {

}

@media screen and (max-width: 1200px) {

    .case_blo{width: 30%;margin:0 1.5% 2rem;}

    .case_t1, .case_t2{height: 2rem; line-height: 2rem;}

    .case_det{top:10%;left: 17.5%; width: 65%;flex-direction: column; }

    .case_det_img,.case_det_t{width: 100%;}

    .case_list{margin: 1rem 0;}

    .case_det_t1{padding: 1vw 0; margin-bottom: 1vw; font-size: 1.5rem;width: 100%; }

    

}

@media screen and (max-width: 1000px) {

    .case_det_t{line-height: 1.5;}

}

@media screen and (max-width: 768px) {

    .case_blo{width: 45%;margin:0 2.5% 2rem;}

    .bar_list{padding-top: 2.5rem;}

    .case_det{top: 25%;}

}

@media screen and (max-width: 414px) {

}

@media screen and (max-width: 375px) {

}

@media screen and (max-width: 320px) {

    

}<!--ºÄʱ1772861951.5718Ãë-->