.hoverPic{
    --x: 0;
    --y: 0;
    --d: 50;
    overflow: hidden;
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translate3d(0%, 20px, 0);
    transition:opacity 1200ms cubic-bezier(0.49, 0.54, 0.16, 1),
    transform 1200ms cubic-bezier(0.49, 0.54, 0.16, 1),
    clip-path 1200ms cubic-bezier(0.49, 0.54, 0.16, 1);
}
.hoverPic.go{
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: none;
}
.hoverPic > .photo{
    position: relative;overflow: hidden;transition:transform 1500ms cubic-bezier(0, 0, 0, 1);width: 100%;
    transform: scale(1.1);
}
.hoverPic > .photo > .pic{
    transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.84),transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.84);
    width: 110%;height: 110%;position: absolute;left: -5%;top: -5%;pointer-events: none;background-size: cover;background-repeat: no-repeat;background-position: center;user-select: none;
    --d:20;
}
.hoverPic.go > .photo{transform: scale(1);}
.hoverPic.go:hover > .photo{transform: scale(1.025) translate3d(calc(var(--x) / var(--d) * 1px), calc(var(--y) / var(--d) * 1px),0);}
.hoverPic.go:hover > .photo > .pic {
    transform: translate3d(calc(var(--x) / var(--d) * 1px), calc(var(--y) / var(--d) * 1px),0);
}
@media screen and (max-width:1024px){

}
@media screen and (min-width:800px){
    .app{display: none!important;}
}
@media screen and (max-width:800px){
	.pc{display: none!important;}
}

@media screen and (max-width:600px){
    /*#bloc header{height: 50px;background-color: #333;}*/

}
@media screen and (max-height:752px){
    /*#home #main #roll #r2 .rowMain .con .mid .col-1{*/
    /*    height: 65vw;*/
    /*}*/

    #home #main #roll #r2 .rowMain .con .mid .col-2 h2{
        margin-bottom: .3rem;
    }
    #home #main #roll #r4 .bg .group{
        margin-top: 5vh;
    }
    #home #main #roll #r4 .rowMain .con .btm .box{
        margin-top: 3vh;
    }
    #home #main #roll #r5 .rowMain .con .mid .col-1{
        height: 65vw;
    }
    #home #main #roll #r5 .rowMain .con .mid .col-2{
        margin-bottom: 4.5vh;
    }


    /*#home #main #roll #r6 .rowMain .con .mid .loop .box .swiper-item > li > .pic{*/
    /*    width: 80%;*/
    /*}*/

    #home #main #roll #r4 .rowMain{
        margin-top: -5vh;
    }

}
@media screen and (max-height:720px){
    /*#home #main #roll #r2 .rowMain .con .mid .col-1{*/
    /*    height: 35vh;*/
    /*}*/
    #home #main #roll #r2 .rowMain .con .top a{
        margin-top: 3vh;
    }
}
@media screen and (max-height:667px){
    /*#home #main #roll #r2 .rowMain .con .mid .col-1{*/
    /*    height: 30vh;*/
    /*}*/
    #home #main #roll #r5 .rowMain .con .mid .col-1{
        height: 60vw;
    }
    #home #main #roll #r5 .rowMain .con .mid .col-2{
        margin-bottom: 4vh;
    }
    #home #main #roll #r6 .rowMain .con .mid .loop .pager{
        margin-top: .3rem;
    }
    #home #main #roll #r6 .rowMain .con .mid .loop .layout-btn-5{
        margin-top: .3rem;
    }
}