/*---------- Intro ----------*/

#intro { position:fixed; left:0; right:0; bottom:0; height:100vh; z-index:999999999999; cursor: pointer; transition-duration:1s; }
#intro:before,
#intro:after { content:""; position:absolute; left:0; top:0; right:0; bottom:0; background:url('/theme/eb4_basic/image/intro-woorimil.jpg') no-repeat center/cover fixed; z-index:-1; }

#intro:before { filter:grayscale(1) brightness(0.6); }
#intro:after { clip-path: circle(0% at center); transition:all 1.5s ease-out 2.5s; }
.loaded #intro:after { clip-path: circle(100% at center); }

#intro.off { left:-100%; right:100%; }

#intro .c { height:100%; display:flex; justify-content:center; align-items:center; flex-direction:column; color:#fff; text-align:center; font-size:1.25rem; }
#intro .c > div { transition-duration:1s; opacity:0; }
.loaded #intro .c > div { opacity:1; }

#intro .desc { position:relative; padding-bottom:30px; transition:opacity 800ms 400ms, padding 800ms 1600ms; --line-h:60px; }
#intro .desc:before { content:""; position:absolute; left:50%; bottom:0; height:0; background:#fff; width:1px; transition-duration:800ms; transition-delay:1600ms; }

.loaded #intro .desc { padding-bottom:calc(30px + var(--line-h)); }
.loaded #intro .desc:before { height:var(--line-h); }

#intro .head { margin:30px 0 20px; transition-delay:800ms; }
#intro .logo { transition-delay:1200ms; }