/* Tailwind의 기본 sans 폰트를 강제 변경 */
:root {
    --tw-font-sans: 'Pretendard', sans-serif !important;
    --main-color: #8370e6 !important;
    --subcolor-red: #f66677 !important;
    --subcolor-blue: #52abf8 !important;
    --bg-color: #f5f5f5 !important;
    --line-color: #dcdcdc !important;
    --d-font-color: #071035 !important;
    --font-color: #767676 !important;
}

/* body에 폰트 강제 적용 */
body {
    font-family: 'Pretendard', sans-serif !important;
}

.blog {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(/img/blog.svg);
    background-size: cover;
}
.youtube {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(/img/youtube.svg);
    background-size: cover;
}
.instagram {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(/img/instagram.svg);
    background-size: cover;
}
.tiktok {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(/img/tiktok.svg);
    background-size: cover;
}

.instagram_reels {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(/img/instagram_reels.svg);
    background-size: cover;
}
.youtube_shorts {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(/img/youtube_shorts.svg);
    background-size: auto 100%;
    background-repeat: no-repeat;
}
.shop {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(/img/shop.svg);
    background-size: cover;
}

.off {
    filter: grayscale(100%);
    opacity: 0.3;
}

.clip {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(/img/clip.svg);
    background-size: cover;
}
.naver {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(/img/influencer.svg);
    background-size: cover;
}
.threads {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(/img/threads.svg);
    background-size: cover;
}
.bnone {
    border: none !important;
    box-shadow: none !important;
}

.zzim {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url(/img/zzim.svg);
    background-size: cover;
}

.zzim.on {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url(/img/zzim_on.svg);
    background-size: cover;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    /* IE/Edge */
    scrollbar-width: none;
    /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}

.touch-scroll {
    -webkit-overflow-scrolling: touch;
}

.checkbox-icon {
    background: url('/img/checkbox_off.svg') no-repeat center / cover;
}

input:checked + .checkbox-icon {
    background-image: url('/img/checkbox_on.svg');
}

.zzim_btn {
    width: 50px;
    height: 50px;
    background-image: url(/img/zzim.svg);
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 5px;
    border: solid 1px #ececec;
    background-color: #d9d9d9;
}

.zzim_btn:hover {
    width: 50px;
    height: 50px;
    background-image: url(/img/zzim_on.svg);
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 5px;
    background-color: var(--main-color);
}

.zzim_btn.on {
    width: 50px;
    height: 50px;
    background-image: url(/img/zzim_on.svg);
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 5px;
    border: solid 1px #ececec;
    background-color: var(--main-color);
}

.zzim.on {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url(/img/zzim_on.svg);
    background-size: cover;
}
.custom-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #ffffff !important;
    opacity: 0.2 !important;
    margin: 0 5px !important;
    border-radius: 10px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.custom-pagination .swiper-pagination-bullet-active {
    width: 30px !important;
    background: var(--main-color, #ffcd00) !important;
    opacity: 1 !important;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    display: none !important;
    content: '' !important;
    font-size: 0 !important;
}

.swiper-navigation-icon {
    display: none !important;
}