@import url("//cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
/* tailwind extend */
/* 
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
*/
.slide-section{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.5rem;
    display: flex;
    min-height: 320px;
    width: 100%;
    max-width: 1280px;
    overflow: hidden;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding-top: 3.75rem
}
@media not all and (min-width: 1024px){
    .slide-section{
        min-height: 0px;
        flex-direction: column
    }
}
@media (min-width: 1024px){
    .slide-section{
        margin-bottom: 6.75rem;
        padding-top: 3.75rem
    }
}
.slide-section .slide-main{
    position: relative;
    flex: 0 0 auto;
    overflow: hidden
}
@media not all and (min-width: 1024px){
    .slide-section .slide-main{
        min-height: 220px
    }
}
@media (min-width: 1024px){
    .slide-section .slide-main{
        flex: 0 0 58%
    }
}
@media (min-width: 1280px){
    .slide-section .slide-main{
        flex: 0 0 816px
    }
}
.slide-section .slide-main .splide, 
		.slide-section .slide-main .splide__track, 
		.slide-section .slide-main .splide__list, 
		.slide-section .slide-main .splide__slide{
    height: 100%
}
.slide-section .slide-main .splide__track{
    overflow: hidden
}
@media (min-width: 1024px){
    .slide-section .slide-main .splide__track{
        border-radius: 1rem
    }
}
.slide-section .slide-main .slide-img{
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}
.slide-section .slide-main .slide-img img{
    height: 100%;
    width: 100%;
    object-fit: cover
}
.slide-section .slide-info{
    position: relative;
    flex: 1 1 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 1.25rem
}
@media (min-width: 1024px){
    .slide-section .slide-info{
        display: flex;
        width: 42%;
        flex-direction: column;
        padding-top: 0px
    }
}
@media (min-width: 1280px){
    .slide-section .slide-info{
        width: calc(100% - 816px)
    }
}
.slide-section .slide-info .info-slider-wrap{
    flex: 1 1 0px;
    overflow: hidden
}
.slide-section .slide-info .info-slider-wrap .splide,
			.slide-section .slide-info .info-slider-wrap .splide__track,
			.slide-section .slide-info .info-slider-wrap .splide__list{
    height: 100%
}
.slide-section .slide-info .info-slider-wrap .splide__track{
    overflow: hidden
}
.slide-section .slide-info .info-slider-wrap .splide__slide{
    height: auto;
    padding-left: 0.875rem;
    padding-right: 0.875rem
}
@media (min-width: 1024px){
    .slide-section .slide-info .info-slider-wrap .splide__slide{
        padding-left: 1.25rem;
        padding-right: 1.25rem
    }
}
.slide-section .slide-info .info-title{
    margin-bottom: 0.875rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.375;
    letter-spacing: -0.025em;
    --tw-text-opacity: 1;
    color: rgb(51 51 51 / var(--tw-text-opacity))
}
@media (min-width: 1024px){
    .slide-section .slide-info .info-title{
        line-height: 1.25
    }
}
@media (min-width: 1536px){
    .slide-section .slide-info .info-title{
        margin-bottom: 1.25rem;
        font-size: 2.25rem
    }
}
.slide-section .slide-info .info-sub{
    margin-bottom: 1rem;
    display: inline-block;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(52 52 52 / var(--tw-bg-opacity));
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    font-size: 15px;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}
@media (min-width: 1536px){
    .slide-section .slide-info .info-sub{
        margin-bottom: 1.25rem
    }
}
.slide-section .slide-info .info-desc{
    display: block;
    max-height: 112px;
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.375;
    letter-spacing: 0em;
    --tw-text-opacity: 1;
    color: rgb(51 51 51 / var(--tw-text-opacity))
}
@media (min-width: 1024px){
    .slide-section .slide-info .info-desc{
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5
    }
}
@media (min-width: 1536px){
    .slide-section .slide-info .info-desc{
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
        max-height: 132px
    }
}
.slide-section .thumb-list{
    margin-top: 1.25rem;
    display: none;
    flex-shrink: 0;
    gap: 0.5rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem
}
@media (min-width: 1024px){
    .slide-section .thumb-list{
        display: flex
    }
}
@media (min-width: 1280px){
    .slide-section .thumb-list{
        gap: 1rem
    }
}
.slide-section .thumb-item{
    position: relative;
    aspect-ratio: 1/1.407;
    width: 3rem;
    cursor: pointer;
    padding-bottom: 0.5rem
}
@media (min-width: 1024px){
    .slide-section .thumb-item{
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
        transition-duration: 0.5s,0.5s,0.3s;
        transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0)
    }
}
@media (min-width: 1280px){
    .slide-section .thumb-item{
        width: 5rem
    }
}
@media (min-width: 1536px){
    .slide-section .thumb-item{
        width: 6.25rem
    }
}
.slide-section .thumb-item .thumb-inner{
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 1rem
}
.slide-section .thumb-item img{
    border-radius: 1rem;
    opacity: 0.3;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    transition-duration: 0.5s,0.5s,0.3s;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0)
}
@media (min-width: 1024px){
    .slide-section .thumb-item:hover{
        --tw-scale-x: 1.05;
        --tw-scale-y: 1.05;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }
}
.slide-section .thumb-item:hover .thumb-inner {
       
      }
@media (min-width: 1024px){
    .slide-section .thumb-item:hover img{
        opacity: 0.6
    }
    .slide-section .thumb-item.is-active{
        --tw-scale-x: 1.1;
        --tw-scale-y: 1.1;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }
}
.slide-section .thumb-item.is-active .thumb-inner {
        
      }
@media (min-width: 1024px){
    .slide-section .thumb-item.is-active img{
        opacity: 1
    }
}
#mainSlider{
    padding-bottom: 2rem
}
@media (min-width: 1024px){
    #mainSlider{
        padding-bottom: 0px
    }
}
#mainSlider .splide__pagination__page{
    height: 0.625rem;
    width: 0.625rem
}
#mainSlider .splide__pagination__page.is-active{
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-bg-opacity: 1;
    background-color: rgb(79 173 97 / var(--tw-bg-opacity))
}
.slide-section .thumb-item .thumb-inner img{
    height: 100%;
    width: 100%;
    object-fit: cover
}
/* 메인 교육프로그램 */
.main-section-program{
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-bottom: 2.5rem
}
@media (min-width: 1024px){
    .main-section-program{
        padding-bottom: 5rem
    }
}
h2.main-title{
    font-size: 1.25rem;
    font-weight: 700
}
@media (min-width: 1024px){
    h2.main-title{
        text-align: center;
        font-size: 1.5rem
    }
}
h3.main-title{
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700
}
@media (min-width: 1024px){
    h3.main-title{
        margin-bottom: 1.25rem;
        font-size: 1.5rem
    }
}
.category-list-wrap{
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    margin-bottom: 3.25rem;
    overflow: hidden;
    padding-top: 0.875rem
}
@media (min-width: 1024px){
    .category-list-wrap{
        margin-bottom: 6.25rem;
        padding-top: 1.875rem
    }
}
.category-list{
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: 0.5rem;
    overflow: auto;
    white-space: nowrap;
    padding-left: 1.25rem;
    padding-right: 1.25rem
}
@media (min-width: 768px){
    .category-list{
        gap: 1rem;
        justify-self: center;
        overflow: hidden;
        overflow: visible
    }
}
.category-list .category-img{
    width: 64px;
    border-radius: 0.75rem;
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 248 / var(--tw-bg-opacity))
}
@media (min-width: 1024px){
    .category-list .category-img{
        width: 84px;
        padding: 0.75rem;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        transition-property: all;
        transition-duration: 300ms;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
    }
    .category-list .category-img img{
        transition-property: all;
        transition-duration: 300ms;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
    }
}
.category-list .category-item{
    flex: 1 1 0px
}
.category-list .category-item strong{
    display: block;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem
}
@media (min-width: 1024px){
    .category-list .category-item strong{
        font-size: 1rem;
        font-weight: 500
    }
}
.category-list .category-link{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center
}
.category-list .category-link.is-active{
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(51 51 51 / var(--tw-text-opacity))
}
.category-list .category-link:hover .category-item {

        }
@media (min-width: 1024px){
    .category-list .category-link:hover .category-img{
        --tw-shadow: 0px 0px 25px -5px rgba(0,0,0,0.275);
        --tw-shadow-colored: 0px 0px 25px -5px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
    }
    .category-list .category-link:hover .category-img img{
        --tw-scale-x: 1.25;
        --tw-scale-y: 1.25;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }
}
.main-section-program{
    font-family: Pretendard, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji
}
.main-program-wrap{
    position: relative
}
.main-program-wrap + .main-program-wrap{
    margin-top: 3.25rem
}
@media (min-width: 1024px){
    .main-program-wrap + .main-program-wrap{
        margin-top: 5.75rem
    }
}
.main-program-wrap .link-top-section{
    position: absolute;
    right: 5.5rem;
    top: 1rem;
    display: none;
    font-size: 1rem;
    --tw-text-opacity: 1;
    color: rgb(153 153 153 / var(--tw-text-opacity))
}
@media (min-width: 1024px){
    .main-program-wrap .link-top-section{
        display: block
    }
}
.main-program-wrap .label.as-gray.as-invert{
    --tw-border-opacity: 1;
    border-color: rgb(102 102 102 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(102 102 102 / var(--tw-bg-opacity))
}
.main-program-wrap .addr{
    background-image: url(../images/ico-location.svg);
    background-position: left top 3px;
    background-repeat: no-repeat;
    padding-left: 1rem;
    font-size: 0.688rem
}
@media (min-width: 1024px){
    .main-program-wrap .addr{
        display: inline-block;
        text-align: right;
        font-size: 0.875rem
    }
}
.main-program-wrap .date{
    text-align: left;
    font-size: 0.75rem;
    line-height: 1.375
}
@media (min-width: 1024px){
    .main-program-wrap .date{
        font-size: 1rem
    }
}
.main-program-wrap.loc-ys h3.main-title{
    --tw-text-opacity: 1;
    color: rgb(255 31 180 / var(--tw-text-opacity))
}
@media (min-width: 1024px){
    .main-program-wrap.loc-ys .grid-splide .p-splide__slide > a{
        --tw-bg-opacity: 1;
        background-color: rgb(255 234 248 / var(--tw-bg-opacity))
    }
}
.main-program-wrap.loc-ys .addr{
    background-image: url(../images/map-yongsan.svg)
}
.main-program-wrap.loc-yc h3.main-title{
    --tw-text-opacity: 1;
    color: rgb(45 140 255 / var(--tw-text-opacity))
}
@media (min-width: 1024px){
    .main-program-wrap.loc-yc .grid-splide .p-splide__slide > a{
        --tw-bg-opacity: 1;
        background-color: rgb(236 243 255 / var(--tw-bg-opacity))
    }
}
.main-program-wrap.loc-yc .addr{
    background-image: url(../images/map-yangcheon.svg)
}
.main-program-wrap.loc-sc h3.main-title{
    --tw-text-opacity: 1;
    color: rgb(255 136 19 / var(--tw-text-opacity))
}
@media (min-width: 1024px){
    .main-program-wrap.loc-sc .grid-splide .p-splide__slide > a{
        --tw-bg-opacity: 1;
        background-color: rgb(249 242 234 / var(--tw-bg-opacity))
    }
}
.main-program-wrap.loc-sc .addr{
    background-image: url(../images/map-seocho.svg)
}
.main-program-wrap.loc-gb h3.main-title{
    --tw-text-opacity: 1;
    color: rgb(16 198 22 / var(--tw-text-opacity))
}
@media (min-width: 1024px){
    .main-program-wrap.loc-gb .grid-splide .p-splide__slide > a{
        --tw-bg-opacity: 1;
        background-color: rgb(236 245 230 / var(--tw-bg-opacity))
    }
}
.main-program-wrap.loc-gb .addr{
    background-image: url(../images/map-gangbuk.svg)
}
.main-program-wrap.loc-ep h3.main-title{
    --tw-text-opacity: 1;
    color: rgb(156 0 249 / var(--tw-text-opacity))
}
@media (min-width: 1024px){
    .main-program-wrap.loc-ep .grid-splide .p-splide__slide > a{
        --tw-bg-opacity: 1;
        background-color: rgb(247 232 255 / var(--tw-bg-opacity))
    }
}
.main-program-wrap.loc-ep .addr{
    background-image: url(../images/map-eunpyeong.svg)
}
.grid-splide .splide__track{
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem !important;
    padding-right: 1rem !important
}
@media (min-width: 1024px){
    .grid-splide .splide__track{
        margin-left: -0px;
        margin-right: -0px;
        padding-left: 0px !important;
        padding-right: 0px !important
    }
}
/* grid-splide MOBILE {  */
@media not all and (min-width: 1024px){
    .grid-splide .p-splide__slide .splide__slide--thumb:after{
        position: absolute;
        bottom: 0px;
        left: 0px;
        z-index: 2;
        display: block;
        height: 150%;
        width: 100%;
        background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
        --tw-content: "";
        content: var(--tw-content)
    }
}
/* } grid-splide MOBILE  */
/* grid-splide DESKTOP {  */
@media not all and (min-width: 1024px){
    .grid-splide .p-splide__slide .splide__slide--thumb{
        position: relative;
        top: auto;
        left: auto;
        z-index: 1;
        display: block;
        aspect-ratio: 1/1;
        height: auto;
        width: auto;
        overflow: hidden;
        border-radius: 1rem
    }
}
@media (min-width: 1024px){
    .grid-splide .p-splide__slide .splide__slide--thumb{
        position: absolute;
        top: 0.875rem;
        left: 0.875rem;
        z-index: 3;
        display: block;
        aspect-ratio: 1/1;
        height: auto;
        width: 144px;
        overflow: hidden;
        border-radius: 1.5rem;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        transition-property: all;
        transition-duration: 300ms;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
    }
}
.grid-splide .p-splide__slide .splide__slide--thumb img{
    aspect-ratio: 1/1;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center top
}
@media (min-width: 1024px){
    .grid-splide .p-splide__slide .splide__slide--thumb img{
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 500ms;
        transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0)
    }
}
.grid-splide .p-splide__slide .splide__slide--desc{
    position: absolute;
    left: 0px;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-bottom: 1rem
}
@media not all and (min-width: 1024px){
    .grid-splide .p-splide__slide .splide__slide--desc{
        left: 10px;
        bottom: 2.5rem;
        z-index: 5;
        width: calc(100% - 20px);
        padding-left: 1.25rem;
        padding-right: 1.25rem
    }
}
@media (min-width: 1024px){
    .grid-splide .p-splide__slide .splide__slide--desc{
        position: relative;
        bottom: auto;
        display: flex;
        flex-direction: column;
        padding-left: 154px;
        padding-right: 0px
    }
    .grid-splide .p-splide__slide .splide__slide--desc:after{
        display: none
    }
    .grid-splide .p-splide__slide .item-head{
        position: relative;
        z-index: 2;
        align-items: center;
        word-break: break-all;
        padding-right: 0px
    }
}
.grid-splide .p-splide__slide .item-head strong{
    margin-top: 0.25rem;
    display: block;
    font-size: 0.875rem;
    line-height: 1.25
}
@media not all and (min-width: 1024px){
    .grid-splide .p-splide__slide .item-head strong{
        max-height: 88px;
        overflow: hidden;
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity))
    }
}
@media (min-width: 1024px){
    .grid-splide .p-splide__slide .item-head strong{
        margin-top: 0.375rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        height: 3.125rem;
        max-height: 50px;
        overflow: hidden;
        font-size: 1.25rem
    }
}
.grid-splide .p-splide__slide .item-head span{
    font-size: 0.625rem
}
@media (min-width: 1024px){
    .grid-splide .p-splide__slide .item-head span{
        position: relative;
        display: inline-block;
        font-size: 0.875rem
    }
}
.grid-splide .p-splide__slide .item-head .label{
    height: 1.125rem;
    padding-top: 0px;
    padding-bottom: 0px;
    font-weight: 700;
    line-height: 1rem
}
@media (min-width: 1024px){
    .grid-splide .p-splide__slide .item-head .label{
        height: 1.563rem;
        line-height: 1.438rem
    }
}
.grid-splide .p-splide__slide .item-body{
    padding-top: 0.375rem;
    padding-bottom: 0.375rem
}
@media (min-width: 1024px){
    .grid-splide .p-splide__slide .item-body{
        padding-top: 0.5rem;
        padding-bottom: 0px
    }
}
.grid-splide .p-splide__slide .item-body p{
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: break-word;
    font-size: 0.688rem;
    font-weight: 700;
    line-height: 1.4
}
@media not all and (min-width: 1024px){
    .grid-splide .p-splide__slide .item-body p{
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity))
    }
}
@media (min-width: 1024px){
    .grid-splide .p-splide__slide .item-body p{
        height: 2.063rem;
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1.15;
        --tw-text-opacity: 1;
        color: rgb(151 151 151 / var(--tw-text-opacity))
    }
}
.grid-splide .p-splide__slide .item-tail{
    position: absolute;
    bottom: 0px;
    right: 0px
}
.grid-splide .p-splide__slide .item-tail span{
    text-align: right;
    font-size: 0.875rem;
    --tw-text-opacity: 1;
    color: rgb(51 51 51 / var(--tw-text-opacity))
}
/* } grid-splide 슬라이드 DESKTOP  */
:is(.grid-splide .splide__slide__row) + .splide__slide__row{
    border-top-width: 0px;
    --tw-border-opacity: 1;
    border-color: rgb(102 102 102 / var(--tw-border-opacity))
}
:is(.grid-splide .splide__slide__row) + .splide__slide__row .p-splide__slide{
    padding-top: 0.625rem;
    padding-bottom: 0px
}
.grid-splide .p-splide__slide{
    position: relative
}
@media (min-width: 1024px){
    .grid-splide .p-splide__slide{
        padding-bottom: 0.625rem
    }
}
.grid-splide .p-splide__slide > a{
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: 0.75rem;
    --tw-bg-opacity: 1;
    background-color: rgb(249 249 249 / var(--tw-bg-opacity));
    padding: 1rem;
    padding-bottom: 2.5rem
}
@media not all and (min-width: 1024px){
    .grid-splide .p-splide__slide > a{
        padding-left: 0.625rem;
        padding-right: 0.625rem;
        padding-top: 0.625rem
    }
}
@media (min-width: 1024px){
    .grid-splide .p-splide__slide > a{
        max-height: 228px;
        border-radius: 1rem
    }
    .grid-splide .p-splide__slide > a:hover .splide__slide--thumb{
        --tw-shadow: 0px 0px 25px -5px rgba(0,0,0,0.45);
        --tw-shadow-colored: 0px 0px 25px -5px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
    }
    .grid-splide .p-splide__slide > a:hover .splide__slide--thumb img{
        --tw-scale-x: 1.1;
        --tw-scale-y: 1.1;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }
    .grid-splide .slide__extended{
        padding-bottom: 0px
    }
}
.grid-splide .slide__extended .splide__slide--thumb{
    position: relative;
    top: auto;
    left: auto;
    z-index: 1;
    display: block;
    aspect-ratio: 1/1;
    height: 100%;
    width: 100%;
    overflow: hidden
}
@media not all and (min-width: 1024px){
    .grid-splide .slide__extended .splide__slide--thumb{
        height: auto;
        width: auto;
        border-radius: 1rem
    }
}
@media (min-width: 1024px){
    .grid-splide .slide__extended .splide__slide--thumb img{
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: center top
    }
    .grid-splide .slide__extended .splide__slide--thumb:after{
        position: absolute;
        bottom: 0px;
        left: 0px;
        z-index: 2;
        display: block;
        height: 80%;
        width: 100%;
        background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
        --tw-content: "";
        content: var(--tw-content)
    }
}
.grid-splide .slide__extended > a{
    overflow: hidden;
    border-radius: 0.75rem
}
@media (min-width: 1024px){
    .grid-splide .slide__extended > a{
        max-height: 100%;
        border-radius: 1rem;
        padding-bottom: 66px
    }
}
@media (min-width: 1280px){
    .grid-splide .slide__extended > a{
        position: relative;
        display: block;
        height: 100%;
        width: 100%
    }
}
.grid-splide .slide__extended .splide__slide--desc{
    left: 10px;
    z-index: 5;
    width: calc(100% - 20px)
}
@media (min-width: 1024px){
    .grid-splide .slide__extended .splide__slide--desc{
        position: absolute;
        bottom: 66px;
        display: block;
        padding: 1rem
    }
    .grid-splide .slide__extended .splide__slide--desc .item-head{
        padding-left: 1rem;
        padding-right: 1rem
    }
}
.grid-splide .slide__extended .splide__slide--desc .item-head strong{
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}
@media (min-width: 1024px){
    .grid-splide .slide__extended .splide__slide--desc .item-head strong{
        height: auto
    }
    .grid-splide .slide__extended .splide__slide--desc .item-body{
        padding-left: 1rem;
        padding-right: 1rem;
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity))
    }
    .grid-splide .slide__extended .splide__slide--desc .item-body p{
        height: auto;
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity))
    }
}
.grid-splide .splide__slide--tail{
    display: flex;
    flex-direction: column;
    padding-top: 0.625rem
}
@media (min-width: 1024px){
    .grid-splide .splide__slide--tail{
        display: flex;
        flex-direction: row;
        place-content: space-between;
        padding-top: 1.5rem;
        text-align: right
    }
}
.grid-splide .splide__arrows{
    display: none
}
@media (min-width: 1024px){
    .grid-splide .splide__arrows{
        display: block
    }
}
.grid-splide .splide__arrows .splide__arrow{
    z-index: 30;
    height: 2.125rem;
    width: 2.125rem;
    border-radius: 9999px;
    background-color: rgb(153 153 153 / 0.2);
    opacity: 1;
    transition-property: opacity,visibility,background-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    transition-duration: 0.5s,0.5s,0.3s;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0)
}
.grid-splide .splide__arrows .splide__arrow::before{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-image: url(../images/index/ico-arrow-right-gray.svg);
    background-position: center;
    content: var(--tw-content);
    background-repeat: no-repeat
}
@media (min-width: 1024px){
    .grid-splide .splide__arrows .splide__arrow{
        height: 2.125rem;
        width: 2.125rem
    }
}
.grid-splide .splide__arrows .splide__arrow:disabled{
    opacity: 0.4
}
.grid-splide .splide__arrows .splide__arrow--prev{
    left: auto;
    top: -1.75rem;
    right: 2.5rem
}
.grid-splide .splide__arrows .splide__arrow--prev::before{
    content: var(--tw-content);
    --tw-rotate: 180deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.grid-splide .splide__arrows .splide__arrow--next{
    top: -1.75rem;
    right: -0px
}
.grid-splide .splide__arrows svg{
    display: none
}
.grid-splide:hover .splide__arrows .splide__arrow {
            
            }