@charset "utf-8";
/* ============================================================
   CAEC | Clean Air & Energy Catalysis Laboratory
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');

:root{
    /* color */
    --navy:#1c4587;
    --navy-dark:#12305f;
    --navy-deep:#0d2347;
    --ink:#1f2430;
    --ink-soft:#3d3d3d;
    --ink-mute:#7b8394;
    --line:#e3e6ed;
    --paper:#ffffff;
    --paper-soft:#fcfcfc;
    --fill:#f1f1f1;
    --fill-blue:#eceff6;

    --f-body:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
    --f-en:"Sora","Pretendard Variable",Pretendard,sans-serif;

    --container:1600px;
    --gutter:20px;
    --radius-xl:24px;
    --radius-lg:16px;
    --radius-md:12px;

    /* motion */
    --ease:cubic-bezier(.16,1,.3,1);
    --ease-soft:cubic-bezier(.3,.76,.32,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--f-body);
    font-size:16px;
    line-height:1.6;
    letter-spacing:-0.01em;
    -webkit-font-smoothing:antialiased;
}
img{max-width:100%;vertical-align:top}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--navy);color:#fff}

.container{
    width:100%;
    max-width:calc(var(--container) + var(--gutter) * 2);
    margin:0 auto;
    padding:0 var(--gutter);
}
.sr-only{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
        scroll-behavior:auto !important;
    }
}

/* ------------------------------------------------------------
   인트로 모션 - 마스크 안에서 아래→위로 올라오는 텍스트 리빌
   ------------------------------------------------------------ */
.blind{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.rv{display:block;overflow:hidden}
.rv > i{display:block;font-style:normal}

@keyframes caecRise{
    from{transform:translateY(118%)}
    to{transform:translateY(0)}
}

/* ------------------------------------------------------------
   페이지 스크롤
   ------------------------------------------------------------ */
html{scroll-behavior:smooth}
html.caec-lerp{scroll-behavior:auto}

/* ------------------------------------------------------------
   스크롤 등장 모션
   ------------------------------------------------------------ */
.caec-reveal [data-reveal="up"],
.caec-reveal [data-reveal="left"],
.caec-reveal [data-reveal="right"]{
    opacity:0;
    transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.caec-reveal [data-reveal="up"]{transform:translateY(46px)}
.caec-reveal [data-reveal="left"]{transform:translateX(-72px)}
.caec-reveal [data-reveal="right"]{transform:translateX(72px)}
.caec-reveal [data-reveal].is-in{opacity:1;transform:none}

.caec-reveal [data-reveal="mask"] .rv > i{
    transform:translateY(118%);
    transition:transform .95s var(--ease);
}
.caec-reveal [data-reveal="mask"].is-in .rv > i{transform:translateY(0)}
.caec-reveal [data-reveal="mask"] .rv--2 > i{transition-delay:.12s}
.caec-reveal [data-reveal="mask"] .rv--3 > i{transition-delay:.24s}
.caec-reveal [data-reveal="mask"] .rv-late{
    opacity:0;transform:translateY(24px);
    transition:opacity .8s var(--ease) .3s,transform .8s var(--ease) .3s;
}
.caec-reveal [data-reveal="mask"].is-in .rv-late{opacity:1;transform:none}

.caec-reveal [data-reveal-group] > *{
    opacity:0;
    transition:opacity .85s var(--ease),transform .85s var(--ease);
}
.caec-reveal [data-reveal-group="left"] > *{transform:translateX(96px)}
.caec-reveal [data-reveal-group="up"] > *{transform:translateY(52px)}
.caec-reveal [data-reveal-group].is-in > *{opacity:1;transform:none}
.caec-reveal [data-reveal-group] > *:nth-child(2){transition-delay:.09s}
.caec-reveal [data-reveal-group] > *:nth-child(3){transition-delay:.18s}
.caec-reveal [data-reveal-group] > *:nth-child(4){transition-delay:.27s}
.caec-reveal [data-reveal-group] > *:nth-child(5){transition-delay:.36s}
.caec-reveal [data-reveal-group] > *:nth-child(n+6){transition-delay:.45s}

@media (max-width:1023px){
    .caec-reveal [data-reveal="left"],
    .caec-reveal [data-reveal="right"]{transform:translateY(36px)}
    .caec-reveal [data-reveal-group="left"] > *{transform:translateX(48px)}
}

/* ==========================================================
   탑 버튼 (footer.php #caecTop, caec.js initTopButton)
   ========================================================== */
.totop{
    position:fixed;right:28px;bottom:28px;z-index:90;
    display:flex;align-items:center;justify-content:center;
    width:60px;height:60px;padding:0;border:0;border-radius:50%;
    background:#fff;color:var(--navy);cursor:pointer;
    box-shadow:0 10px 28px rgba(12,28,60,.16);
    opacity:0;visibility:hidden;transform:translateY(16px);
    transition:opacity .4s var(--ease,cubic-bezier(.16,1,.3,1)),transform .4s var(--ease,cubic-bezier(.16,1,.3,1)),visibility .4s,background-color .3s,color .3s;
}
.totop.is-show{opacity:1;visibility:visible;transform:none;}
.totop__ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none;}
.totop__ring circle{fill:none;stroke:#e4e7ed;stroke-width:2;}
.totop__ring .totop__bar{stroke:var(--navy);stroke-linecap:round;stroke-dasharray:175.93;stroke-dashoffset:175.93;transition:stroke .3s;}
.totop__ico{position:relative;width:22px;height:22px;transition:transform .4s var(--ease,cubic-bezier(.16,1,.3,1));}
.totop:hover{background:var(--navy);color:#fff;}
.totop:hover .totop__bar{stroke:#fff;}
.totop:hover .totop__ico{transform:translateY(-3px);}
.totop:focus-visible{outline:2px solid var(--navy);outline-offset:3px;}
@media (max-width:767px){
    .totop{right:16px;bottom:16px;width:48px;height:48px;}
    .totop__ico{width:18px;height:18px;}
}
@media (prefers-reduced-motion: reduce){
    .totop,.totop__ico{transition:none;}
}

/* ------------------------------------------------------------
   줄바꿈
   ------------------------------------------------------------ */
#caecWrap p,
#caecWrap h1,
#caecWrap h2,
#caecWrap h3,
#caecWrap h4,
#caecWrap li,
#caecWrap dd,
#caecWrap td{word-break:keep-all;overflow-wrap:break-word}

/* ------------------------------------------------------------
   가로 스와이프 뒤로가기 막기
   ------------------------------------------------------------ */
html,body{overscroll-behavior-x:contain}