@charset "utf-8";

#shorts { font-size: 16px; padding: 7.5rem 0; }
#shorts .container { width: 1410px; }
#shorts .point-font { font-family: 'SUIT', sans-serif; }
#shorts .point-color { color: #0e357f; }
#shorts .tit_main, #shorts .tit_sub { font-family: 'SUIT', sans-serif; text-align: center; color: #3e3e3e; }
#shorts .tit_main { font-size: 3.125rem; font-weight: 800; }
#shorts .tit_sub { font-size: 1.875rem; margin-top: 1rem; font-weight: 400; letter-spacing: -1px; }
#shorts .tit_sub b { font-weight: 600; }
#shorts .shortsBox { margin: 4rem 0; }
#shorts .shortsBox .moreShorts { width: 1410px; margin: auto; text-align: center; }
#shorts .shortsBox .moreShorts a { display: inline-flex; align-items: center; justify-content: center; }
#shorts .shortsBox .moreShorts span { display: inline-block; font-size: 2.5rem; font-weight: 700; }
#shorts .shortsBox .moreShorts .moreArrow { position: relative; display: flex; align-items: center; justify-content: center; margin-left: 1rem; }
#shorts .shortsBox .moreShorts .moreArrow svg { mix-blend-mode: color-dodge; filter: invert(1); }
#shorts .shortsBox .moreShorts .moreArrow::before { position: absolute; content: ''; width: 2rem; height: auto; aspect-ratio: 1/1; border-radius: 50%; background-color: #0e357f; right: -0.5rem; top: 50%; transform: translateY(-50%); }
#shorts .shortsBox .moreShorts .moreArrow::after { position: absolute; content: ''; width: 1rem; height: 1px; background-color: #0e357f; left: -0.6rem; top: 50%; transform: translateY(-50%); }
#shorts .shortsBox .ctrl { width: 1410px; margin: auto; display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; }
#shorts .shortsBox .ctrl .arrow { cursor: pointer; }
#shorts .shortsBox .ctrl .arrow[aria-disabled='true'] svg { fill: rgba(14,53,127,.3); }
#shorts .shortListWrap { width:100%; padding-left : calc((100% - 1720px) / 2); }
#shorts .shortList { overflow: hidden; font-family: 'SUIT', sans-serif; }
#shorts .shortList .swiper-slide .img { position: relative; width: 100%; height: auto; aspect-ratio: 9/16.25; overflow: hidden; }
#shorts .shortList .swiper-slide .img::after { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background-image: linear-gradient(to bottom, rgba(14,53,127,0) 0%, rgba(14,53,127,.125) 75%,rgba(14,53,127,.75) 100%); }
#shorts .shortList .swiper-slide .img  img { width: 100%; height: 100%; object-fit: cover; }
#shorts .shortList .swiper-slide .img .innerBox { display: flex; align-items: center; position: absolute; width: 100%; height: fit-content; left: 0; bottom: 0; padding: 2rem 1.5rem; z-index: 50; }
#shorts .shortList .swiper-slide .img .innerBox img { max-width: 30px; height: auto; }
#shorts .shortList .swiper-slide .img .innerBox p { margin-left: .75rem; color: #fff; font-size: 1.05rem; font-weight: 500; }
#shorts .shortList .swiper-slide .tit { margin-top: 1rem; text-align: center; font-size: 1.15rem; color: #555; }
#shorts .shortList .swiper-slide .tit p, #shorts .shortList .swiper-slide .tit h6 { word-break: keep-all; }
#shorts .footer-text { font-size: 6.25rem; font-weight: 900; color: #f4f4f4; text-align: center; }
#shorts .footer-text br { display: none; }
@media(max-width: 1720px){
    #shorts .container,
    #shorts .shortsBox .moreShorts,
    #shorts .shortsBox .ctrl { width: 90%; }
    #shorts .shortListWrap { padding-left: 5%; }
    #shorts .footer-text br { display: block; }
}
@media(max-width: 990px){
    #shorts .footer-text { font-size: 4rem; }
}
@media(max-width: 768px){
    #shorts .shortsBox .moreShorts span { font-size: 1.25rem; }
    #shorts .shortList .swiper-slide .img .innerBox img { width: auto; max-height: 1.5rem; }
    #shorts .shortList .swiper-slide .img .innerBox p { margin-left: .5rem; }
    #shorts .footer-text { font-size: 3rem; }
}
@media(max-width: 550px){
    #shorts .tit_main { font-size: 2.5rem; }
    #shorts .tit_sub { font-size: 1.25rem; }
    #shorts .shortList .swiper-slide .img .innerBox { padding: 4rem 1.25rem 1.25rem; }
    #shorts .shortList .swiper-slide .img .innerBox p { font-size: .8rem; }
    #shorts .shortList .swiper-slide .tit { font-size: .9rem; }
    #shorts .footer-text { font-size: 2.5rem; }
}