div.p{padding: 0;margin: 0;position:relative;clear:both;}
.affTpllay{transition: all .6s;-webkit-transition: all .6s; display:inline;position:absolute;font-size:0;overflow:hidden;max-width: 150px;z-index: 10;}
.affTpllay img{max-width: 150px;max-height: 230px;width:150px;}
.affTpllay.t{left:0;top:0;right:0;display: none;position: fixed;max-width: 100vw;width: 100vw;}
.affTpllay.t img{max-width: 100%;height: auto;max-height: 100vh;object-fit: fill;}
.affTpllay.b {left:0;bottom:0;right:0;display: none;position: fixed;max-width: 100vw;width: 100vw;}
.affTpllay.b img{max-width: 100%;height: auto;max-height: 100vh;object-fit: fill;}
.affTpllay.c{left:50%;top:50vh;max-width: 50vw;}

.affTpllay.c{transform: translate(-50%, -50%);}
.affTpllay.t{left:0;top:0;right:0;}
.affTpllay.b{left:0;bottom:0;right:0;}
.affTpllay.lt{left:0;top:0;}
.affTpllay.rt{right:0;top:0;}
.affTpllay.l{left:0;top:50vh;transform: translate(0, -50%);}
.affTpllay.r{right:0;top:50vh;transform: translate(0, -50%);}
.affTpllay.lb{left:0;top:100vh;transform: translate(0, -100%);}
.affTpllay.rb{right:0;top:100vh;transform: translate(0, -100%);}
@media screen and (max-width: 500px){
    .affTpllay{max-width: 65px;}
    .affTpllay img{max-height: 110px;width: 100%;}
    .affTpllay.t{display: block;}
    .affTpllay.t img{max-height: 60px;}
    .affTpllay.b{display: block;}
    .affTpllay.b img{max-height: 60px;}
    .affTpllay.lt{top:60px;}
    .affTpllay.rt{top:60px;}
    .affTpllay.lb{top:calc(100vh - 60px);}
    .affTpllay.rb{top:calc(100vh - 60px);}
}