.word-wrap {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom; 
}

.word-opt{
    font-family: 'Nanum Square Neo', EH Normal Fallback, sans-serif !important;
    font-size: clamp(36px, 2.2857142857px + .0595238095 * 100vw, 60px);
    font-weight: 300;
    width: fit-content;
    line-height : 1.30;
    transform: translateY(100%);
    display: inline-block;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.word-opt.addActive {
    transform: translateY(0);
}

.word-wrap-width-relative{
    position: relative;
    height: 2000px !important;
}

.word-wrap-width{
    width: 100%;
    position: sticky !important;
    top: 0px;
}


.word-opt-width {
    display: block !important; 
    transform: translateY(0) !important;
    width: 0% !important; 
    height: 200px !important;
    overflow: hidden !important; 
    transition: width 2s cubic-bezier(0.25, 1, 0.5, 1) !important;

    align-self: center;
}
.word-opt-width * {
    height: 100% !important;
    height: 100% !important;
}

.word-opt-width.addWidthActive {
    width: 80% !important; 
}

.n-mkt-maintitle {
    margin: 0px 0px 60px 0px !important;
}

.n-mkt-hero-title{
    margin: 0px 0px 60px 0px !important;
}

.n-mkt-section{
    position: relative;
}


.main-section-object{
    position: absolute;
    width: 1px;
    background-color: #999;
    right: 10%;
    top: 300px;
    transform-origin: top;
    font-weight: 300;
    font-size: 1.0625rem;
    height: 0px;
    transition: 
                opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    animation: growLine 4s cubic-bezier(0.25, 1, 0.5, 1) 1s forwards,
               loopGrow 4s cubic-bezier(0.25, 1, 0.5, 1) 4s infinite ;
    
    
    opacity: 1;
}

@keyframes growLine {
    0% {
        height: 0px;
    }
    50% {
        height: 600px;
    }
    100%{
        height: 300px;
    }
}

@keyframes loopGrow {
    0% {
        height: 300px; 
    }
    50% {
        height: 600px;
    }
    100% {
        height: 300px;
    }
}

.marin-line{
    width: 1px;
    font-weight: 300;
    font-size: 1.0625rem;
    color:  #000;
    line-height: 1.4;
    box-sizing: border-box;
}

.main-section-object::after {
    content: "SCROLL";
    position: absolute;
    top: 100px; 
    opacity: 0;
    right: -1.0625rem;
    transform:  rotate(270deg);
    font-weight: 300;
    font-size: 1.0625rem;
    white-space: nowrap; 
    color: #999;
    animation: fadeInScroll 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 1s; 
}

@keyframes fadeInScroll {
    0% {
        opacity: 0;
        transform:  rotate(270deg) translateY(10px); 
    }
    30% {
        opacity: 0;
        transform:  rotate(270deg) translateY(10px);
    }
    100% {
        opacity: 1;
        transform:  rotate(270deg) translateY(0);
    }
}

.main-section-object.fade-out {
    opacity: 0;
    pointer-events: none; 
}


.n-mkt-desc-text.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: var(--mkt-gray) !important;
  line-height: 1.35 !important;
}


@media (max-width: 1024px) {
  .main-section-object{
    display: none;
  }
}