:root{
    --line:max(100vw, 100vh);
}

/* main */
body.start{overflow:hidden;}
body.end{overflow:auto;}
.main #header{transform:translateY(-200px);}
.main #container,
.main #footer{opacity:0;transition:opacity 1s .5s ease;}
.end .main #header{transform:translateY(0);}
.end .main #container{opacity:1;}
.end .main #footer{opacity:1;}


/* intro */
#intro{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10;background:#fff;transition: .5s ease;}
.start #intro{display:block;}
.intro_wrap .box,
.intro_wrap .logo,
.intro_wrap .text_area{position:absolute;top:50%;left:50%;}
.intro_wrap .box{width:160px;height:160px;background:rgba(15, 177, 176, 1);transform:translate(-50%, -50%) rotate(-45deg);transform-origin:center center;}
.intro_wrap .logo{width:68px;height:18px;transform:translate(-50%, -50%);background: url('../images/logo_black.svg') 0 center no-repeat;background-size: 100% auto;color:transparent;user-select:none;z-index:3;}

.intro_wrap .text_area{opacity:0;width:450px;height:480px;transform:translate(-50%, -50%);font-size:42px;overflow:hidden; }
.intro_wrap .text_area span{display:block;white-space: nowrap;overflow: hidden;width:0;font-family: 'NanumSquare';}
.intro_wrap .text_area .text02,
.intro_wrap .text_area .text04{font-weight:900;}

.intro_wrap .box .line{position:absolute;background:rgba(15, 177, 176, 1);}
.intro_wrap .box .line::before{content:'';opacity:0;position:absolute;width:16px;height:16px;background:rgba(15, 177, 176, 1);transform:translate(-50%, -50%) rotate(45deg);transform-origin:center center;}
.intro_wrap .box .line01{top:0;left:-3px;height:var(--line);width:2px;transform:rotate(135deg);transform-origin:right top;}
.intro_wrap .box .line01::before{top:0;left:0;}
.intro_wrap .box .line02{top:0;right:1px;height:var(--line);width:2px;transform:rotate(-135deg);transform-origin:right top;}
.intro_wrap .box .line02::before{top:0;left:1px;}
.intro_wrap .box .line03{bottom:0;right:-3px;height:var(--line);width:2px;transform:rotate(135deg);transform-origin:left bottom;}
.intro_wrap .box .line03::before{bottom:-16px;left:0;}
.intro_wrap .box .line04{bottom:-1px;left:-4px;height:var(--line);width:2px;transform:rotate(-135deg);transform-origin:right bottom;}
.intro_wrap .box .line04::before{bottom:-17px;left:0;}

.start .box{animation: boxani 5s ease forwards, boxani02 5s ease forwards;}
.start .logo{animation: logoani 5s ease forwards;}
.start .text_area{animation: textani 2.3s ease 1.2s forwards;}
.start .text_area span{animation: textspan 1s ease 1.2s forwards;}

.start .line01{animation:linemove01 5s ease forwards;}
.start .line02{animation:linemove02 5s ease forwards;}
.start .line03{animation:linemove01 5s ease forwards;}
.start .line04{animation:linemove02 5s ease forwards;}
.start .line01::before,
.start .line02::before,
.start .line03::before,
.start .line04::before{animation:linebefore 3.3s ease 1.2s forwards;}

@keyframes boxani{
    0%{width:160px;height:160px;}
    7%, 12%{width:300px;height:300px;}
    20%, 55%{width:560px;height:600px;}
    70%{width:560px;height:120px;}
    82%, 100%{width:200px;height:120px;}

    0%,12%{top:50%;left:50%;transform:translate(-50%, -50%) rotate(-45deg);}
    20%,100%{top:50%;left:50%;transform:translate(-50%, -50%) rotate(0);}
}
@keyframes boxani02{
    0%, 20%{background:rgba(15, 177, 176, 1);border:2px solid rgba(15, 177, 176, 1);}
    25%, 85%{background:#fff;border:2px solid #ddd;}
    93%, 100%{background:#fff;border:2px solid #fff;}
}
@keyframes logoani{
    0%{top:50%;left:50%;width:68px;height:18px;}
    7%, 12%{top:50%;left:50%;width:128px;height:33px;}
    20%, 55%{top:calc(50% + 250px);left:calc(50% - 160px);}
    /* 55%, 65%{top:calc(50% + 180px);left:calc(50% - 160px);} */
    70%{top:calc(50%);left:calc(50% - 160px);}
    82%, 100%{top:50%;left:50%;}

    0%, 21%{background-image:url('../images/logo_white.svg');}
    0%, 75%{transform:translate(-50%, -50%);}
    30%, 100%{width:128px;height:33px;filter:invert(0);background-image:url('../images/logo_black.svg');}
}

@keyframes textani{
    0%, 68%{opacity:1;height:480px;}
    /* 60%{opacity:1;height:340px;} */
    75%{opacity:0;}
    100%{opacity:0;height:0;}
}
@keyframes textspan {
    0%{width:0;}
    100%{width:100%;}
}

@keyframes linemove01 {
    0%{height:0;transform:rotate(135deg);}
    14%{height:var(--line);transform:rotate(135deg);}
    20%, 80%{height:var(--line);transform:rotate(90deg);}
    92%,100%{height:0;transform:rotate(90deg);}
}
@keyframes linemove02 {
    0%{height:0;transform:rotate(-135deg);}
    14%{height:var(--line);transform:rotate(-135deg);}
    20%, 80%{height:var(--line);transform:rotate(-180deg);}
    92%,100%{height:0;transform:rotate(-180deg);}
}
@keyframes linebefore{
    0%, 100%{opacity:0;}
    15%, 80%{opacity:1;}
}

@media only screen and (max-width: 1024px) {
    .intro_wrap .text_area{width:250px;height:480px;font-size:24px;}
    @keyframes boxani{
        0%{width:80px;height:80px;}
        7%, 12%{width:160px;height:160px;}
        20%, 55%{width:300px;height:400px;}
        70%{width:300px;height:100px;}
        82%, 100%{width:160px;height:100px;}
    
        0%,12%{top:50%;left:50%;transform:translate(-50%, -50%) rotate(-45deg);}
        20%,100%{top:50%;left:50%;transform:translate(-50%, -50%) rotate(0);}
    }
    @keyframes logoani{
        0%{top:50%;left:50%;width:34px;height:16px;}
        7%, 12%{top:50%;left:50%;width:80px;height:38px;}
        20%, 55%{top:calc(50% + 160px);left:calc(50% - 80px);}
        /* 50%, 65%{top:calc(50% + 110px);left:calc(50% - 80px);} */
        70%{top:calc(50%);left:calc(50% - 80px);}
        82%, 100%{top:50%;left:50%;}
    
        0%, 21%{filter:invert(100%);}
        0%, 75%{transform:translate(-50%, -50%);}
        30%, 100%{width:80px;height:38px;filter:invert(0);}
    }
    @keyframes textani{
        0%, 68%{opacity:1;height:340px;}
        75%{opacity:0;}
        100%{opacity:0;height:260px;}
    }
}