.showPro02 { margin-bottom: 3.125%; text-align: center; }
.showPro02 .title { color: #0078c9;     font-size: 46px;line-height: 1.1;text-transform: uppercase;font-weight: bold;}
.showPro02 .title span { color: #3D3D3D; }
.showPro02 .wrap { margin-top: 2.08333%; background: url(../../img/showpro02_bg.jpg); background-size: cover; }
.showPro02 .box { width: 25.59524%; padding-top: 4.7619%; padding-bottom: 5.95238%; position: relative; }
.showPro02 .box:before { content: ""; width: 25.5814%; height: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; left: 0; top: 0; }
.showPro02 .box:hover .play { background: #0078C9; }
.showPro02 .line { width: 25.59524%; }
.showPro02 .imgWrap { display: block; text-align: center; }
.showPro02 .play { width: 32.55814%; height: 100%; background: #C7C7C7; position: absolute; top: 0; left: 0; }
.showPro02 .play:before { content: ""; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 15px solid transparent; border-right: 15px solid transparent; border-left-color: #fff; position: absolute; top: 50%; margin-top: -9px; left: 50%; margin-left: -7.5px; }
.showPro02 .botWrap { width: 100%; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; position: absolute; top: 100%; left: 0; padding-left: 32.55814%; transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); background: rgba(0, 0, 0, 0.8); }
.showPro02 .rightWrap { padding: 3.44828% 3.44828% 2.75862% 13.7931%; }
.showPro02 .tit { font-size: 16px; color: #fff; line-height: 1.2; text-transform: uppercase; font-weight: bold; display: block; }
.showPro02 .more { display: inline-block; color: #0078c9; text-transform: uppercase; font-size: 14px; margin-top: 10px; font-size: 14px; color: #fff; }
.showPro02 .more:after { content: ""; display: inline-block; width: 37px; height: 6px; background: url(../../img/more2.png); vertical-align: middle; margin-left: 12px; margin-top: -3px; }
.showPro02 .more:hover:after { transform: translateX(20px); -ms-transform: translateX(20px); -moz-transform: translateX(20px); -webkit-transform: translateX(20px); -o-transform: translateX(20px); filter: alpha(opacity=0); opacity: 0; }

@media screen and (max-width: 875px) { .showPro02 { margin-bottom: 20px; }
    .showPro02 .wrap { background: none; margin-top: 25px; }
    .showPro02 .box { padding: 0; width: 47%; margin-bottom: 20px; }
    .showPro02 .box:before { display: none; }
    .showPro02 .play { display: block; width: 40px; height: 40px; position: relative; }
    .showPro02 .botWrap { background: none; padding: 0; position: static; transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); -webkit-transform: translateY(0); -o-transform: translateY(0); }
    .showPro02 .tit { color: #222; }
    .showPro02 .more { display: inline-block; color: #0078c9; text-transform: uppercase; font-size: 18px; font-size: 14px; }
    .showPro02 .more:after { content: ""; display: inline-block; width: 51px; height: 9px; background: url(../../img/more.png); vertical-align: middle; margin-left: 20px; margin-top: -5px; }
    .showPro02 .more:hover:after { transform: translateX(20px); -ms-transform: translateX(20px); -moz-transform: translateX(20px); -webkit-transform: translateX(20px); -o-transform: translateX(20px); filter: alpha(opacity=0); opacity: 0; }
    .showPro02 .rightWrap { padding: 0; margin-top: 10px; } }
@media screen and (max-width: 450px) { .showPro02 .box { width: 100%; } }