/* common style*/
a{text-decoration:none;background-color:transparent;}
.case .tab-content ul li .li_caption_h, .case .tab-content ul li .li_caption_p, .case_title h1{letter-spacing:2px;}



.case_title h1{font-size:36px;}
.case_title h1{font-weight:bold;}
.case_title .h1_underline{width:102px;height:1px;border-top:1px solid #252525;}
.case_title .h1_underline{margin:15px 0 30px 0;}

.case .tab-content .tab-pane ul{padding-left:0;}
.case .tab-content .tab-pane ul li{margin:30px 20px 0 0;}
.case .tab-content .tab-pane ul .no_mr30{margin-right:0;}
@media only screen and (max-width:767px){.case .tab-content .tab-pane ul li{margin-right:0;}}

.case .tab-content ul li{position:relative;background:#222;width:360px;height:222px;box-sizing:border-box;transition:all .4s ease-in-out;overflow:hidden;}
.case .tab-content ul li .case_pic{display:block;width:100%;transition:all .4s ease-in-out;overflow:hidden;}

.case .tab-content ul li .li_caption_h{font-size:1.3em;font-weight:700;text-align:justify;width:80%;position:absolute;top:20%;left:10%;transition: all .5s ease-in-out;overflow:hidden;opacity:1;color:#fff;}
.case .tab-content ul li .li_caption_p{font-size:1em;text-align:center;width:80%;position:absolute;top:60%;left:10%;transition:all .4s ease-in-out;overflow:hidden;opacity:0;color:#fff;}
.case .tab-content ul li .li_caption, .case .tab-content ul li .li_caption > a{width:100%;height:100%;position:absolute;top:0;left:0;transition:all .4s ease-in-out;overflow:hidden;}

.case .tab-content ul li .li_caption:before{top:14%;right:5%;bottom:14%;left:5%;border-top:1px solid #fff;border-bottom:1px solid #fff;transform-origin:0 0;}
.case .tab-content ul li .li_caption:after{top:8%;right:8%;bottom:8%;left:8%;border-right:1px solid #fff;border-left:1px solid #fff;transform:scale(1,0);transform-origin:100% 0;}
.case .tab-content ul li .li_caption:before, .case .tab-content ul li .li_caption:after{position:absolute;content:'';opacity:0;}

.case .tab-content ul li:hover{box-shadow:3px 3px 3px #000;}
.case .tab-content ul li:hover .case_pic{position:absolute;transform:scale(1.1);opacity:.6;}
.case .tab-content ul li:hover .li_caption_p{top:55%;opacity:1;}
.case .tab-content ul li:hover .li_caption:before, .case .tab-content ul li:hover .li_caption:after{opacity:1;transform:scale(1);}
@media only screen and (max-width:767px){.case .tab-content ul li{width:345px;height:207px;}}
