@charset "utf-8";
/* banner142 */
/* @latest 2022.05.04 OSY */

.banner142 {position:relative; overflow:hidden; width:100%; height:100%; box-sizing:border-box;}

.banner142:hover .bnrWrap .bgBox img {transform:scale(1.1);}
.banner142:hover .bnrWrap .contBox .imgBox {animation:ball .5s ease-in Infinite Alternate;}
.banner142:hover .bnrWrap .contBox .txtBox .titWrap .targetBG {height:calc(100% + 10px);}

.banner142 .bnrWrap {width:100%; height:100%; box-sizing:border-box;}
.banner142 .bnrWrap a {position:relative; z-index:1; display:flex; justify-content:center; align-items:center; width:100%; height:100%; box-sizing:border-box;}
.banner142 .bnrWrap a:focus {border:1px dashed #fff;}
.banner142 .bnrWrap .contBox {position:relative; width:100%; padding:0 30px; text-align:center; box-sizing:border-box;}
.banner142 .bnrWrap .contBox .txtBox {margin-bottom:20px; box-sizing:border-box;}
.banner142 .bnrWrap .contBox .txtBox .titWrap {position:relative; display:inline-block; width:auto; max-width:100%;}
.banner142 .bnrWrap .contBox .txtBox .titWrap .bnrTit {position:relative; z-index:1;}
.banner142 .bnrWrap .contBox .txtBox .txtWrap .bnrTxt,
.banner142 .bnrWrap .contBox .txtBox .titWrap .bnrTit {width:100%; font-weight:normal; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; box-sizing:border-box;}
.banner142 .bnrWrap .contBox .txtBox .titWrap .targetBG {position:absolute; bottom:-5px; left:-10px; z-index:0; width:calc(100% + 20px); height:20px; box-sizing:border-box; background:rgba(0,0,0,.2); -webkit-transition:height 0.5s; transition:height 0.5s;}

.banner142 .bnrWrap .contBox .imgBox {position:relative; display:inline-block; width:auto; border-radius:10px; border:1px solid rgba(0,0,0,.15); box-sizing:border-box; overflow:hidden;}
.banner142 .bnrWrap .contBox .imgBox .imgMask {width:130px; height:130px; box-sizing:border-box;}
.banner142 .bnrWrap .contBox .imgBox .imgMask img {position:absolute; top:-9999px; bottom:-9999px; left:-9999px; right:-9999px; max-width:130px; height:auto; margin:auto;}
.banner142 .bnrWrap .contBox .imgBox .imgMask .imgBg {position:absolute; top:0; left:0; width:100%; height:100%; background:#fff;}

.banner142 .bnrWrap .bgBox img {position:absolute; top:-9999px; bottom:-9999px; left:-9999px; right:-9999px; min-height:100%; min-width:100%; max-width:100%; margin:auto; -webkit-transition:transform 1s; transition:transform 1s;}


/* layout */
.border-radius .banner142 .bnrWrap .contBox .imgBox {border-radius:50%;} 
.border-radius .banner142 .bnrWrap .contBox .txtBox .titWrap .targetBG {border-radius:10px;}


/* animation */
	@keyframes ball {
		0% {top:0px;}
		to {top:10px;} 
	}


	@media (min-width:800px){	
		.layout_01 .banner142 .bnrWrap .contBox {padding:30px;}
		.layout_height_M .banner142 .bnrWrap .contBox .imgBox .imgMask {width:110px; height:110px;}
		.layout_height_M .banner142 .bnrWrap .contBox .txtBox {margin-bottom:10px;}
	}
	@media (max-width:799px){	
		.banner142 .bnrWrap .contBox {padding:30px;}
	}