.showApp { text-align: center; margin-bottom: 2.20833%; }
.showApp .title { font-size: 50px; font-family: 'robotothin',Arial, 'Microsoft YaHei', SimSun, Sans-serif; color: #333; }
@media screen and (max-width: 1400px) { .showApp .title { font-size: 40px; } }
@media screen and (max-width: 875px) { .showApp .title { font-size: 24px; } }
.showApp .wrap { margin-top: 2.99145%;text-align:center; }
.showApp .box { width: 31.62393%; margin-bottom: 4.2735%; }
.showApp .box:hover .show { filter: alpha(opacity=0); opacity: 0; }
.showApp .box:hover .shade { top: 0; transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; }
.showApp .box:hover .shade .tit { transition: 0.8s all ease; -moz-transition: 0.8s all ease; -webkit-transition: 0.8s all ease; -o-transition: 0.8s all ease; -ms-transition: 0.8s all ease; }
.showApp .box:hover .shade .des { transition: 1s all ease; -moz-transition: 1s all ease; -webkit-transition: 1s all ease; -o-transition: 1s all ease; -ms-transition: 1s all ease; }
.showApp .box:hover .tit, .showApp .box:hover .des { transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); -webkit-transform: translateY(0); -o-transform: translateY(0); }
.showApp .line { width: 31.62393%; }
.showApp .imgWrap { display: block; position: relative; overflow: hidden;}
.showApp .imgWrap img { display: block; }
.showApp .shade { width: 100%; height: 100%; position: absolute; top: 100%; left: 0; padding: 0 5.40541%; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; font-size: 0; transition: all 0.5s cubic-bezier(0.465, 0.05, 0.965, 0.32); -moz-transition: all 0.5s cubic-bezier(0.465, 0.05, 0.965, 0.32); -webkit-transition: all 0.5s cubic-bezier(0.465, 0.05, 0.965, 0.32); -o-transition: all 0.5s cubic-bezier(0.465, 0.05, 0.965, 0.32); -ms-transition: all 0.5s cubic-bezier(0.465, 0.05, 0.965, 0.32); overflow: hidden; }
.showApp .shade:after { content: ""; display: inline-block; vertical-align: middle; width: 0; height: 100%; }
.showApp .shade .textMidSon { display: inline-block; white-space: normal; vertical-align: middle; font-size: 14px; width: 100%; }
.showApp .shade:before { content: ""; height: 100%; width: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.7); }
.showApp .tit { display: block; color: #fff; font-size: 20px; line-height: 1.1; transform: translateY(100px); -ms-transform: translateY(100px); -moz-transform: translateY(100px); -webkit-transform: translateY(100px); -o-transform: translateY(100px); position: relative; transition: all 0.35s cubic-bezier(0.465, 0.05, 0.965, 0.32); -moz-transition: all 0.35s cubic-bezier(0.465, 0.05, 0.965, 0.32); -webkit-transition: all 0.35s cubic-bezier(0.465, 0.05, 0.965, 0.32); -o-transition: all 0.35s cubic-bezier(0.465, 0.05, 0.965, 0.32); -ms-transition: all 0.35s cubic-bezier(0.465, 0.05, 0.965, 0.32); }
.showApp .tit:hover { color: #5d7261; }
.showApp .des { display: inline-block; font-size: 16px; color: #fff; margin-top: 20px; transition: all 0.25s cubic-bezier(0.465, 0.05, 0.965, 0.32); -moz-transition: all 0.25s cubic-bezier(0.465, 0.05, 0.965, 0.32); -webkit-transition: all 0.25s cubic-bezier(0.465, 0.05, 0.965, 0.32); -o-transition: all 0.25s cubic-bezier(0.465, 0.05, 0.965, 0.32); -ms-transition: all 0.25s cubic-bezier(0.465, 0.05, 0.965, 0.32); transform: translateY(100px); -ms-transform: translateY(100px); -moz-transform: translateY(100px); -webkit-transform: translateY(100px); -o-transform: translateY(100px); position: relative; line-height: 26px; max-height: 78px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.showApp .show { height: 40px; width: 100%; background: rgba(0, 0, 0, 0.9); position: absolute; left: 0; bottom: 0; white-space: nowrap; font-size: 0; padding: 0 5.40541%; }
.showApp .show:after { content: ""; display: inline-block; vertical-align: middle; width: 0; height: 100%; }
.showApp .show .textMidSon { display: inline-block; white-space: normal; vertical-align: middle; font-size: 14px; width: 100%; }
.showApp .show .textMidSon { color: #fff; font-size: 20px; line-height: 1.1; }
.showApp .more { display: inline-block; padding: 16px 30px; line-height: 1; font-size: 15x; text-transform: uppercase; color: #fff; font-family: 'robotobold',Arial, 'Microsoft YaHei', SimSun, Sans-serif; border-radius: 3px; background: #5d7261; }
.showApp .more:after { content: "\e63c"; font-family: icomoon, Arial, Helvetica, 'Microsoft YaHei', SimSun, Sans-serif; display: inline-block; vertical-align: middle; margin-left: 10px; margin-top: -4px; font-size: 16px; }
@media screen and (max-width: 875px) { .showApp .more { padding: 10px 15px; font-size: 12px; } }
.showApp .more:hover { background: #5d726163; }

@media screen and (max-width: 875px) { .showApp { }
    .showApp .tit, .showApp .show .textMidSon { font-size: 18px; }
    .showApp .des { font-size: 14px; margin-top: 10px; } }
@media screen and (max-width: 700px) { .showApp .box { width: 47%; } }
@media screen and (max-width: 450px) { .showApp .box { width: 100%; } }