/*
<a class="li_type_bpop" href="<?= $li['href']?>" <?= isset($li['target']) ? "target=\"" . $li['target'] . "\"" : ""?>>
    <div class="img_c">
        <img src="<?= $li['src']?>" <?= isset($li['alt']) ? "alt=\"" . $li['alt'] . "\"" : ""?>>
    </div>
    <div class="txt_c">
        <div class="txt_1"><?= $li['txt_1']?></div>
        <div class="txt_2"><?= $li['txt_2']?></div>
    </div>
</a>
*/
@charset "utf-8";
.li_type_bpop{display:block;position:relative;overflow:hidden}
.li_type_bpop .img_c{position:relative;z-index:20;overflow:hidden;width:100%;height:0px;padding-bottom:100%}
.li_type_bpop .img_c img {display:block;position:absolute;left:0px;top:0px;width:100%;height:100%;transition:all .2s ease-in-out}
.li_type_bpop .txt_c{position:absolute;z-index:21;left:0px;bottom:-100%;overflow:hidden;width:100%;padding:15px;background-color:#fff;-webkit-transition: all 0.4s ease;-moz-transition: all 0.4s ease;-o-transition: all 0.4s ease;-ms-transition: all 0.4s ease;transition: all 0.4s ease;}
.li_type_bpop .txt_c .txt_1 {padding:10px 0px 5px 0px;text-align:left;color:#324545;font-size:14px;font-weight:bold}
.li_type_bpop .txt_c .txt_2 {padding:0px 0px 10px 0px;text-align:left;color:#999;display:block;font-size:12px;margin-top:5px}
.li_type_bpop:hover .img_c img{transform:scale(1.1);}
.li_type_bpop:hover .txt_c{bottom:0px}

/*
transform:scale(1.1);
-webkit-transition: all 0.4s ease;-moz-transition: all 0.4s ease;-o-transition: all 0.4s ease;-ms-transition: all 0.4s ease;transition: all 0.4s ease;
*/