@charset "utf-8";

/* =========================================
   케어앤 메인 효과
   - [data-reveal]       : 화면에 들어오면 아래에서 위로 나타남 (값 : left / right 로 방향 변경)
   - [data-reveal-delay] : 지연(ms)
   - [data-reveal-group] : 자식 요소가 순서대로 하나씩 나타남
   ========================================= */

/* 스크롤 등장 */
[data-reveal],
[data-reveal-group] > * {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
    transition: opacity .9s cubic-bezier(.22, .61, .36, 1), transform .9s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

[data-reveal="left"]  { transform: translate3d(60px, 0, 0); }
[data-reveal="right"] { transform: translate3d(-60px, 0, 0); }

[data-reveal].is-revealed,
[data-reveal-group].is-revealed > * {
    opacity: 1;
    transform: none;
}

/* 히어로 - 이미지 천천히 확대 → 원래 크기 */
.index-hero .hero-swiper .swiper-slide > img {
    transform: scale(1.08);
    transition: transform 6s ease-out;
}

.index-hero .hero-swiper .swiper-slide-active > img {
    transform: scale(1);
}

/* 히어로 - 글자 순서대로 등장 */
.index-hero .hero-swiper .slide-subjects,
.index-hero .hero-swiper .slide-contents,
.index-hero .hero-swiper .move-to {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
    transition: opacity .8s ease, transform .8s ease;
}

.index-hero .hero-swiper .swiper-slide-active .slide-subjects {
    opacity: 1;
    transform: none;
    transition-delay: .3s;
}

.index-hero .hero-swiper .swiper-slide-active .slide-contents {
    opacity: 1;
    transform: none;
    transition-delay: .55s;
}

.index-hero .hero-swiper .swiper-slide-active .move-to {
    opacity: 1;
    transform: none;
    transition-delay: .8s;
}

/* 스크롤다운 아이콘 위아래로 움직임 */
.index-hero .scroll-down-box .icon-wrap {
    animation: fx-bounce 1.8s ease-in-out infinite;
}

@keyframes fx-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(8px); }
}

/* 아이콘 메뉴 - 마우스 올리면 아이콘이 살짝 떠오름 */
.index-icon-group .icon-box > img {
    transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

.index-icon-group .cell:hover .icon-box > img {
    transform: translateY(-8px);
}

/* 사진 확대 (후기 / 교육신청 / 교육프로그램 / 지점) */
.caren-voice .slide-thumb,
.index-education-application .slide-thumb,
.education-program .visual-area .slide-thumb,
.index-community .branch-thumb {
    overflow: hidden;
}

.caren-voice .slide-thumb > img,
.index-education-application .slide-thumb > img,
.education-program .visual-area .slide-thumb > img,
.index-community .branch-thumb > img {
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.caren-voice .swiper-slide:hover .slide-thumb > img,
.index-education-application .swiper-slide:hover .slide-thumb > img,
.education-program .visual-area .swiper-slide:hover .slide-thumb > img,
.index-community .box-branches:hover .branch-thumb > img {
    transform: scale(1.06);
}

/* 게시글 목록 - 마우스 올리면 제목이 오른쪽으로 살짝 이동 */
.index-community .post-list .tit {
    display: inline-block;
    transition: transform .3s, color .3s;
}

.index-community .post-list a:hover .tit {
    color: #E85F56;
    transform: translateX(6px);
}

/* 더보기(+) 버튼 회전 */
.index-community .head-more i,
.education-program .ctrl-more i {
    transition: transform .4s;
}

.index-community .head-more:hover i,
.education-program .ctrl-more:hover i {
    transform: rotate(90deg);
}

/* VIEW MORE 화살표 */
.caren-voice .view-more i {
    transition: transform .3s;
}

.caren-voice .view-more:hover i {
    transform: translateX(6px);
}

/* 모바일은 이동 거리를 줄임 */
@media screen and (max-width: 768px) {
    [data-reveal],
    [data-reveal-group] > *,
    [data-reveal="left"],
    [data-reveal="right"] {
        transform: translate3d(0, 30px, 0);
    }
}

/* 움직임 줄이기 설정한 사용자는 효과 끔 */
@media (prefers-reduced-motion: reduce) {
    [data-reveal],
    [data-reveal-group] > *,
    .index-hero .hero-swiper .slide-subjects,
    .index-hero .hero-swiper .slide-contents,
    .index-hero .hero-swiper .move-to {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .index-hero .hero-swiper .swiper-slide > img,
    .index-hero .scroll-down-box .icon-wrap {
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}