@charset "utf-8";

.promotion .box {position: relative; z-index: 1; aspect-ratio: 1;}
.promotion .box .roll {position: absolute; display: block; left: 0; right: 0; top: 0; bottom: 0; opacity: 1; overflow: hidden; width: 100%; height: 100%;}
.promotion .box a {display: block; width: 100%; height: 100%;}

.promotion .box .desc, 
.promotion .box .front .front-inner, 
.promotion .box .back .back-inner {position: absolute; display: block; left: 0; right: 0; top: 0; bottom: 0; opacity: 1; width: 100%; height: 100%; transition: 0.5s; aspect-ratio: 1;}

.promotion .box .back {transform: translateY(-100%);}
.promotion .box:hover .back {transform: translateY(0);}
.promotion .box .back .back-inner {background: var(--pointcolor); color: #fff; transform: perspective(550px) rotate3d(1,0,0,90deg) translate3d(0,0.0001%,0); transform-origin: bottom; display: flex; align-items: center; justify-content: center;}
.promotion .box:hover .back .back-inner {opacity: 1; visibility: visible; transform: perspective(550px) rotate3d(1,0,0,0deg) translate3d(0,0.0001%,0);}

.promotion .box .front {transform: translateY(0);}
.promotion .box:hover .front {transform: translateY(100%);}

.promotion .box .front .front-inner {transform-origin: top; opacity: 1; visibility: visible; transform: perspective(550px) rotate3d(1,0,0,0deg) translate3d(0,0.0001%,0);}
.promotion .box:hover .front .front-inner {transform: perspective(550px) rotate3d(1,0,0,-90deg) translate3d(0,0.0001%,0);}

@media(max-width:768px) {
    .promotion .tit {padding-left: 5%;}
    .promotion {font-size: 1.5625rem;} 
    .promotion .box .back .back-inner {padding: 0.5rem;}
}

@media(max-width:360px) {
    .promotion .flexList {--count: 1;}
}