﻿.app { margin:0 60px; }
.app_imgcase { border-bottom:1px dotted #b2b2b2; padding-bottom:1em; padding-top:2.4em; }
.app_imgcase ul { margin:0 -13px; }
.app_imgcase li { width:33.3%; float:left; }
.app_imgcase li dl { margin:0 13px;transition:all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; }
.app_imgcase li dl dd { transition:all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; }
.app_imgcase li dl:hover { transform:scale(1.1,1.1); 
        -webkit-transform:scale(1.1,1.1); 
        box-shadow:10px 10px 20px rgba(0,0,0,0.2); 
        transform-origin:center center; 
        -webkit-transform-origin:center center; 
        
        transition:all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; 
}
.app_imgcase li dl:hover dd {background:#000;  padding-left:10px;transition:all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;}
.app_imgcase li dl:hover a {  color:#fff; transition:all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;}
.app_imgcase li dl dd a { padding:1.2em 0; display:block; text-align:left; font-weight:normal;transition:all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; }

.app_icon {  padding-top:3em; padding-bottom:0;}
.app_icon li {  width:20%; float:left; position:relative; left:1px; margin-left:-1px; text-align:center; margin-bottom:4.2em;}
.app_icon li a {  display:block;}
.app_icon li a img { display:block; margin:0 auto; width:83px; height:83px;transition:all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; }
.app_icon li a:hover img{ transform:rotate(360deg); -webkit-transform:rotate(360deg);}
.app_icon li a p { height:2.6em; padding:0.5em 0 0; overflow:hidden;}



@media only screen and (max-width: 1280px) {
        .app { margin:0 40px; }
        .app_imgcase { padding-top:2em; }
        .app_icon li { width:25%; }
        .app_icon li a img { width:70px; height:70px; }
}


@media only screen and (max-width: 1000px) {
        .app { margin:0 20px; }
        .app_imgcase { padding-top:1.6em; }
        .app_icon li { width:20%; margin-bottom:2em; }
        .app_icon li a img { width:60px; height:60px; }
}


@media only screen and (max-width: 767px) {
        .app { margin:0 10px; }
        .app_imgcase {  padding-bottom:0; padding-top:1em;}
        .app_imgcase li {  width:100%; padding-bottom:1em;}
        .app_imgcase li dl dd a {  padding:0.5em;}
        .app_icon {  padding-top:1em;}
        .app_icon li {width:50%; margin-bottom:1em; }
        .app_icon li a img { width:50px; height:50px; }
        .app_icon li a p { word-wrap:break-word; overflow:hidden; }
		
		.app_icon li a img{transition:none;}
		.app_icon li a:hover img{ transform:rotate(360deg); -webkit-transform:rotate(360deg);}
		

}






