@charset "utf-8";
.m_banner2{padding:50px 0 0 0;max-width:1600px;margin:0 auto}

.m_banner2 h2 {margin-bottom:20px; line-height:3.0em; text-align:center}
.m_banner2 h2 a {font-size:3.4em;color:#000; line-height:3.0em;}

.m_banner2 ul:after {display:block;visibility:hidden;clear:both;content:""}
.m_banner2 li{float:left;width:100%;position:relative;text-align:center;padding:0 10px 10px 0;transform:translateY(0px);
-webkit-transition:all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition:all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in}

.m_banner2 li:hover{transform:translateY(0px);}
.m_banner2 li .lt_img img{max-width:100%;height:auto;vertical-align:top;border-radius:5px; margin-bottom:100px;}
.m_banner2 li .lt_tit{display:block;margin:0;font-size:4.2em;font-weight:600; color:#FFFFFF}
.m_banner2 li .lt_detail{font-weight:400;color:#fff;line-height:1.5em; letter-spacing:-0.05em; font-size:2.2em;}
.m_banner2 .empty_li  {width:100%;padding:100px 0;text-align:center;color:#aaa}    

.m_banner2 .card{background: white;position: relative;height:100%;display: flex;align-items: flex-end;transition: 0.4s ease-out;}
.m_banner2 .card:before {; content: ""; position: absolute;top: 0; left: 0; display: block; width: 100%; height: 100%;;z-index: 2;transition: 0.5s;opacity: 0;}



.m_banner2  .card:hover:before { opacity: 1;}
.m_banner2  .card:hover {}
.m_banner2  .card .info {position: absolute;bottom:0;left:0;width:100%;z-index: 3; color: #fff;opacity: 10;-webkit-transform: translateY(60px); transform: translateY(-60px); transition: 0.5s;padding:100px;}
.m_banner2  .card:hover .info {opacity: 1;-webkit-transform: translateY(0px);transform: translateY(-60px); }


@media (max-width: 639px){

.m_banner2  .card .info {position: absolute;bottom:0;left:0;width:100%;z-index: 3; color: #fff;opacity: 10;-webkit-transform: translateY(65px); transform: translateY(-65px); transition: 0.5s;padding:10px;}
.m_banner2  .card:hover .info {opacity: 1;-webkit-transform: translateY(0px);transform: translateY(-65px); }

    .m_banner2{padding:10px 20px 0 10px}
    .m_banner2 li{ max-width:400px;padding:0;text-align:left;}
    .m_banner2 li:hover{transform:translateY(0);}
    .m_banner2 li .lt_img{float:left;width:98%;}
    .m_banner2 .lt_txt_wr{float:left;width:98%;padding:10px}
    .m_banner2 li .lt_tit{margin:0 ;font-size:1.8em; p}
    .m_banner2 li .lt_detail{ font-size:1.2em;}

 }