@import url(/assets/css/common.css);
@import url(/assets/css/animation.css);

.bg-effect {
    position:fixed;
    width:100%;
    height:100vh;
    overflow:hidden;
}

.bg-circles {
    position:relative;
    width:100%;
    height:100%;
    background:#0c092a;
}

.bg-circles > span {
    position:absolute;
    width:50vmin;
    height:50vmin;
    border-radius:50vmin;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    -webkit-animation-name:bg_move;
    animation-name:bg_move;
    -webkit-animation-duration:30s;
    animation-duration:30s;
    -webkit-animation-timing-function:linear;
    -moz-animation-timing-function:linear;
    animation-timing-function:linear;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
}

.bg-circles > span:first-child {
    top:64%;
    left:3%;
    opacity:.2;
    color:#5856de;
    -webkit-animation-duration:18.8s;
    -moz-animation-duration:18.8s;
    animation-duration:18.8s;
    -webkit-animation-delay:-10.7s;
    -moz-animation-delay:-10.7s;
    animation-delay:-10.7s;
    -webkit-transform-origin:14vw -22vh;
    -moz-transform-origin:14vw -22vh;
    transform-origin:14vw -22vh;
    -webkit-box-shadow:100vmin 0 20.5259439347vmin currentColor;
    box-shadow:100vmin 0 20.5259439347vmin currentColor;
}

.bg-circles > span:nth-child(2) {
    color: #5856de;
    opacity: .2;
    top: 24%;
    left: 85%;
    -webkit-animation-duration: 26.5s;
    -moz-animation-duration: 26.5s;
    animation-duration: 26.5s;
    -webkit-animation-delay: -3.1s;
    -moz-animation-delay: -3.1s;
    animation-delay: -3.1s;
    -webkit-transform-origin: -1vw -14vh;
    -moz-transform-origin: -1vw -14vh;
    transform-origin: -1vw -14vh;
    -webkit-box-shadow: 100vmin 0 36.2934581027vmin currentColor;
    box-shadow:100vmin 0 36.2934581027vmin currentColor
}

.bg-circles > span:nth-child(3) {
    color: #bd4be5;
    opacity: .2;
    top: 41%;
    left: 38%;
    -webkit-animation-duration: 26.3s;
    -moz-animation-duration: 26.3s;
    animation-duration: 26.3s;
    -webkit-animation-delay: -9.8s;
    -moz-animation-delay: -9.8s;
    animation-delay: -9.8s;
    -webkit-transform-origin: -5vw -21vh;
    -moz-transform-origin: -5vw -21vh;
    transform-origin: -5vw -21vh;
    -webkit-box-shadow: -100vmin 0 21.6771071789vmin currentColor;
    box-shadow:-100vmin 0 21.6771071789vmin currentColor
}

.bg-circles > span:nth-child(4) {
    color: #bd4be5;
    opacity: .2;
    top: 31%;
    left: 36%;
    -webkit-animation-duration: 32.4s;
    -moz-animation-duration: 32.4s;
    animation-duration: 32.4s;
    -webkit-animation-delay: -3.9s;
    -moz-animation-delay: -3.9s;
    animation-delay: -3.9s;
    -webkit-transform-origin: -24vw -5vh;
    -moz-transform-origin: -24vw -5vh;
    transform-origin: -24vw -5vh;
    -webkit-box-shadow: -100vmin 0 16.8646404307vmin currentColor;
    box-shadow:-100vmin 0 16.8646404307vmin currentColor
}

#visual {
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:400px;
    background:#e1e1e1;
    /* padding-top:6.25rem; */
}

#smooth-content {
    padding-bottom:6.25rem;
    text-align:center;
}

/* ============================================
    연혁
============================================ */
#timeline {
    width:100%;
    height:auto;
}

#timeline .timeline-wrap {
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:100%;
    margin-top:3.75rem;
}

#timeline .timeline-line {
    display:flex;
    justify-content:center;
    width:100%;
    height:100%;
}

#timeline .timeline-line div {
    position:absolute;
    width:.125rem;
    height:100%;
    background:#E1E1E1;
}

#timeline .timeline-box {
    width:65%;
    margin:0 auto;
}

#timeline .timeline-wrap .timeline-stemp {
    display:flex;
    text-align:left;
    opacity:0;
    /* transform:translateY(3.125rem); */
}

#timeline .timeline-wrap .timeline-stemp:nth-child(odd) {
    justify-content:flex-end;
}

#timeline .timeline-wrap .timeline-stemp:nth-child(even) .timeline-content {
    text-align:right;
}

#timeline .timeline-wrap .timeline-stemp:not(:last-child) {
    margin-bottom:3.75rem;
}

#timeline .timeline-wrap .timeline-stemp .timeline-circle {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    width:25px;
    height:25px;
    /* outline:1px solid var(--main-purple); */
    outline-offset:6px;
    border-radius:50%;
    background:#fff;
    box-shadow:0px 0px 5px rgba(0,0,0,.4)
}

#timeline .timeline-wrap .timeline-stemp .timeline-circle > div {
    position:absolute;
    width:12px;
    height:12px;
    border-radius:50%;
    background:var(--main-purple);
}

#timeline .timeline-wrap .timeline-stemp .timeline-content {
    min-width:31.25rem;
    color:#858585;
}

#timeline .timeline-wrap .timeline-stemp .timeline-content .years {
    margin-bottom:12px;
    color:var(--main-purple);
    font-weight:900 !important;
}

#timeline .timeline-wrap .timeline-stemp ul {
    padding:0;
    margin:0;
}

#timeline .timeline-wrap .timeline-stemp:nth-child(1) ul li:first-child,
#timeline .timeline-wrap .timeline-stemp:nth-child(2) ul li:first-child {
    display:inline;
    background:rgba(255, 255, 0, .5);
}

/* ---------------------------
    반응형
--------------------------- */
@media screen and (max-width:768px) {
    .custom-container {
        padding:0px 12px;
    }

    .swipe-section {
        position:relative;
        width:100%;
        height:100vh;
        overflow-y:scroll;
    }

    #nav {
        background:linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,0));
        padding:20px 10px;
    }

    #nav .logo {
        width:30%;
    }

    #timeline .timeline-box {
        width:100%;
        margin:0 auto;
    }

    #timeline .timeline-wrap .timeline-stemp {
        padding-left:10%;
    }
    
    #timeline .timeline-wrap .timeline-stemp:nth-child(odd) {
        justify-content:flex-start;
    }

    #timeline .timeline-wrap .timeline-stemp:nth-child(even) .timeline-content {
        text-align:left;
    }

    #timeline .timeline-line {
        justify-content:flex-start;
    }

    #timeline .timeline-line div {
        margin-left:12px;
    }

    #timeline .timeline-wrap .timeline-stemp .timeline-circle {
        left:0;
        transform:translateX(0%);
    }

    #timeline .timeline-wrap .timeline-stemp .timeline-content {
        min-width:100%;
        word-break:keep-all;
    }
}