@charset "utf-8";

.story-content{position: relative; margin-top: 5.8rem;}
.story-content > button{position: absolute; width: 10rem; height: 10rem; border-radius: 50%; background-color: rgba(33,33,33, .9); text-align: center; line-height: 10rem; font-family: "sm"; font-size: 1.2rem; color: #ffffff; top: 50%; margin-top: -6rem; z-index: 2; transition: all .5s;}
.story-content > button.story-prev{left: -5rem;}
.story-content > button.story-next{right: -5rem;}
.story-content > button:hover{background-color: #00297d;}
.story-content .story-main-slider{margin: 0 -1.65rem;}
.story-content .swiper-slide{padding: 0 1.65rem;}
.story-content .story-slide-image{position: relative; padding-bottom: 127.5%; overflow: hidden; border-radius: 2rem; transition: all .5s;}
.story-content .story-slide-image img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transition: all .5s;}
.story-content .story-slide-text{margin-top: 1.5rem;}
.story-content .story-slide-text p{font-size: 1.8rem; line-height: 3rem; letter-spacing: -.025em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; color: #333333;}
.story-content .story-slide-text p span{background :linear-gradient(to bottom, transparent 94%, rgba(51,51,51,1) 0) left center no-repeat; background-size: 0; transition: background-size .5s;}
.story-content .swiper-slide a:hover p span{background-size: 100% auto;}
.story-content .swiper-slide a:hover .story-slide-image img{transform: scale(1.05);}

@media screen and (max-width: 1200px) {
    .story-content{margin-top: 3rem;}
    .story-content .story-main-slider{margin: 0 -1rem;}
    .story-content .swiper-slide{padding: 0 1rem;}
    .story-content > button{width: 8rem; height: 8rem; margin-top: -6rem; line-height: 8rem; font-size: 1rem;}
    .story-content > button.story-prev{left: -2rem;}
    .story-content > button.story-next{right: -2rem;}
    .story-content .story-slide-text{margin-top: 1rem;}
    .story-content .story-slide-text p{font-size: 1.6rem; line-height: 2.4rem;}
}

@media screen and (max-width: 768px) {
    .story-main-slider.swiper-container{padding: 0 5rem;}
    .story-content > button.story-prev{left: 2rem;}
    .story-content > button.story-next{right: 2rem;}
    .story-content .story-slide-text{margin-top: 1.9rem;}
}