@charset "UTF-8";

.card-popup{background: url(../images/bg-card.png) no-repeat center center / cover; padding: 8.5rem 0 12rem;}
.card-popup .container{max-width: 168rem; padding: 0 4rem; margin: 0 auto;}
.card-popup .container h2{text-align: center; font-size: 5.6rem; color: #161616; font-family: pbl;}
.card-popup .card-swiper-box{margin-top: 2.5rem; position: relative;}
.card-popup .control{position: absolute; left: -3rem; z-index: 2; top: 50%; margin-top: -3rem; width: calc(100% + 6rem);}
.card-popup .prevnext{width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.card-popup .prev{width: 6rem; height: 6rem; border-radius: 1rem; background: #161616 url(../images/btn-prev.png) no-repeat center center / 1.2rem; text-indent: -9999rem; position: absolute; left: 0; top: 50%; margin-top: -3rem;}
.card-popup .next{width: 6rem; height: 6rem; border-radius: 1rem; background: #161616 url(../images/btn-next.png) no-repeat center center / 1.2rem; text-indent: -9999rem; position: absolute; right: 0; top: 50%; margin-top: -3rem;}
.card-popup .prev:hover,
.card-popup .next:hover{background-color: #503992;}
.card-popup .swiper-slide{position: relative;}
.card-popup .swiper-slide img{width: 100%;}
.card-popup .icon{position: relative;}
.card-popup .icon::before{content:""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 58%, rgba(45, 59, 98, .9) 100%);}
.card-popup .item{position: absolute; left: 0; bottom: 0; width: 100%; z-index: 3; padding: 3.3rem 4rem;}
.card-popup .item .text_1{font-size: 2.4rem; color: white; font-family: psb;}

.card-popup .swiper-slide:hover .icon{border-bottom-right-radius: 10rem; overflow: hidden;}
.card-popup .swiper-slide:hover::after{content:""; display: block; position: absolute; right: 0; bottom: 0; width: 6rem; height: 6rem; border-radius: 50%; background: #36c0c9 url(../images/ic-more.png) no-repeat center center / 2.2rem;}

@media screen and (max-width: 1200px) {
    .card-popup{padding: 4.5rem 0 12rem; background: url(../images/bg-cardt.png) no-repeat center center / cover;}
    .card-popup .container{padding: 0 7rem;}
}

@media screen and (max-width: 768px) {
    .card-popup{padding: 3.3rem 0 6rem; background: url(../images/bg-cardm.png) no-repeat center center / cover;}
    .card-popup .container{padding: 0 5rem;}
    .card-popup .container h2{font-size: 4.6rem;}
    .card-popup .card-swiper-box{margin-top: 1rem;}
}