/* ===== prologsh HOME page animation & interaction (2026-09-04) ===== */
/* Only loaded on the homepage. All reveal rules are scoped under .js-anim
   (class added by inline head script) so content stays visible without JS. */

/* ---------- 1. scroll reveal ---------- */
.js-anim .anim { opacity: 0; transform: translateY(28px); }
.js-anim .anim.anim-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1);
}
.js-anim .anim-d1.anim-in { transition-delay: .12s; }
.js-anim .anim-d2.anim-in { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
    .js-anim .anim { opacity: 1; transform: none; }
}

/* ---------- 2. section title underline ---------- */
.js-anim .inp h3,
.js-anim .iabout_list h3 { position: relative; }
.js-anim .inp h3:after,
.js-anim .iabout_list h3:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -12px;
    width: 0;
    height: 2px;
    background: #de2e3a;
    transition: width .8s cubic-bezier(.22,.61,.36,1) .25s;
}
.js-anim .inp.anim-in h3:after,
.js-anim .iabout_list.anim-in h3:after { width: 70px; }
.js-anim .inp h3,
.js-anim .iabout_list h3 { transition: transform .6s ease; }

/* ---------- 3. product carousel card ---------- */
.rowE .count li {
    transition: background .4s, color .4s;
}
.rowE .count li:hover {
    background: #fff;
}
.rowE .count .img_wrap img {
    display: block;
    width: 340px;
    height: 210px;
    border: 0;
    transition: transform .7s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* ---------- 4. news list ---------- */
.inp1_c .iabout_list ul a {
    transition: background .35s ease, color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.inp1_c .iabout_list ul a:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
.inp1_c .iabout_list ul a:hover .idata span { border-bottom-color: #d0d0d0; }

/* ---------- 5. about-us image ---------- */
.inp1_c .iabout > img {
    display: block;
    transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.inp1_c .iabout:hover > img { transform: translateY(-4px); }

/* ---------- 6. customer logos ---------- */
.icase #Marquee_x img {
    transition: transform .4s ease, opacity .4s ease;
    vertical-align: middle;
}
.icase #Marquee_x img:hover { transform: scale(1.12); }

/* ---------- 7. banner dots ---------- */
div.flicking_con a { transition: transform .3s ease, background .3s ease; }
div.flicking_con a:hover { transform: scale(1.5); background: #de2e3a; }