/* by Adon , CSS Document */


.case{ float:left; width:100%;}
.case .title{ position:relative;}
.case .title .navs{ position: absolute; left:20%; top:20px;}
.case .title .navs a{float: left;border: solid 2px #efefef; background:#fff;font-size: 14px;line-height: 30px;padding:0 35px;margin:0 5px 5px 5px;}
.case .title .navs a:hover,.case .title .navs a.on{ background:#b50000; color:#fff; border:solid 2px #b50000}
.case ul li{ float:left; width:32.33%;margin-bottom:5%;overflow:hidden; position:relative;}
.case ul li:not(:nth-child(3n)){ margin-right:1.5%;}
.case ul li p{ font-size:13px; padding:10px 0;}
.case ul li .thumb{ overflow: hidden; position:relative; color:#fff;}
.case ul li .thumb:hover img{-webkit-transform: scale(1.1);transform: scale(1.1);}
.case ul li img{width:100%;}
.case ul li .thumb .txt{ position:absolute; left:5%; bottom:10%;}
.case ul li .thumb .txt span{ font-size:35px;}
.case ul li .thumb .txt font{ font-size:20px;}
.case ul li .thumb em{ position:absolute; right:10px; top:10px; border:solid 1px #fff; font-style:normal;font-size: 13px;text-transform: uppercase;width: 75px;height: 75px;padding:10px;float: right;margin: 2.5% 2.5% 0 0;}




@media (max-width:1280px){
.case .title .navs{ position:static; margin:5px 0 5% 0; overflow:hidden;}	
}
@media (max-width:1024px){
.case ul li .thumb img{ width:120%; max-width:120%; margin-left:-10%}	
}
@media (max-width:768px){
.case ul li .thumb .txt span{ font-size:30px;}
.case ul li .thumb .txt font{ font-size:18px;}
}
@media (max-width:480px){
.case .title .navs a{ font-size:13px; padding:0 25px;}
.case ul li .thumb img{ width:150%; max-width:150%; margin-left:-25%}	
.case ul li .thumb .txt span{ font-size:20px;}
.case ul li .thumb .txt font{ font-size:14px;}
.case ul li{ margin-bottom:10%;}
}
@media (max-width:320px){
.case .title .navs a{ font-size:12px; padding:0 20px;}
.case ul li .thumb em{ width:65px; height:65px; font-size:12px;}
}