/* ======================================================
   ABOUT
====================================================== */


/* =========================
   Hero
========================= */
.site-header__nav-link.is-active{

    color:var(--color-primary);

    font-weight:400;

}
.about-hero{

    position:relative;
    width:100%;
    height:600px;
    overflow:hidden;

}

.about-hero__image{

    width:100%;
    height:100%;
    object-fit:cover;
    display:block;

}

.about-hero__title-wrap{

    position:absolute;
    inset:0;

    display:flex;
    align-items:center;

    padding-left:245px;

}

.about-hero__title{

    color:#fff;

    font-size:72px;
    font-weight:700;
    line-height:1;

}



/* =========================
   Intro
========================= */

.about-intro{

    padding:100px 0 20px;

}

.about-intro__title{

    font-size:30px;
    font-weight:700;

    color:#222;

    margin-bottom:40px;

}

.about-intro__text{

    font-size:22px;

    line-height:1.7;

    color:#666;

}

.about-intro__message{

    display:block;

    margin-top:30px;

    font-size:24px;

    font-weight:700;

    line-height:1.6;

    color:#222;

}

.about-divider{

    margin-top:30px;

    border:none;

    border-top:1px solid #d8d8d8;

}



/* =========================
   Value
========================= */

.about-value{

    padding:100px 0 150px;

}



/* 하나의 블럭 */

.about-value__item{

    display:grid;

    grid-template-columns:150px 1fr;

    column-gap:66px;

    align-items:center;

}

.about-value__item + .about-value__item{

    margin-top:100px;

}



/* icon */

.about-value__icon{

    width:120px;

}

.about-value__icon img{

    display:block;

    width:100%;

}



/* text */

.about-value__content{

    width:100%;

}

.about-value__title{

    font-size:28px;

    font-weight:700;

    line-height:1.2;

    margin-bottom:18px;

    color:#222;

}

.about-value__subtitle{

    font-size:20px;

    font-weight:700;

    line-height:1.0;

    margin-bottom:22px;

    color:#333;

}

.about-value__description{

    max-width:980px;

    font-size:18px;

    line-height:1.7;

    color:#666;

}


/* ======================================================
   HISTORY
====================================================== */

.history{

    padding:80px 0 150px;

}

.history-item{

    display:grid;

    grid-template-columns:170px 1fr;

    column-gap:40px;

    padding:35px 0;

}


.history-item__year{

}

.history-item__line{

    display:block;

    width:120px;

    height:1px;

    background:#222;

    margin-bottom:20px;

}

.history-item__year h3{

    font-size:30px;

    font-weight:700;

    color:#222;

}


.history-item__content{

    border-top:1px solid #ddd;

    padding-top:0;

}

.history-item__content p{

    font-size:18px;

    line-height:2;

    color:#666;

}


.history-list{

    margin:0;
    padding:0;
    list-style:none;

}

.history-list li{

    display:flex;
    align-items:center;

    min-height:60px;

    /* ==========================================
    본문 선
========================================== */
    border-bottom:1px solid #fff;

    font-size:18px;

    line-height:1.7;

    color:#666;

    

}


/* ==========================================
   Scroll Animation
========================================== */

.history-item{

    display:grid;

    grid-template-columns:170px 1fr;

    column-gap:40px;

    padding:30px 0;

}

.history-item.is-visible{

    opacity:1;

    transform:translateY(0);

}

.history-item__year{

    opacity:0;

    transform:translateY(25px);

    transition:
        opacity .7s ease,
        transform .7s ease;

}

.history-item.is-visible .history-item__year{

    opacity:1;

    transform:translateY(0);

}

.history-list li{

    opacity:0;

    transform:translateY(15px);

    transition:
        opacity .5s ease,
        transform .5s ease;

}

.history-item.is-visible .history-list li{

    opacity:1;

    transform:translateY(0);

}

.history-item.is-visible .history-list li:nth-child(1){

    transition-delay:.15s;

}

.history-item.is-visible .history-list li:nth-child(2){

    transition-delay:.30s;

}

.history-item.is-visible .history-list li:nth-child(3){

    transition-delay:.45s;

}

.history-item.is-visible .history-list li:nth-child(4){

    transition-delay:.60s;

}

.history-item.is-visible .history-list li:nth-child(5){

    transition-delay:.75s;

}

.history-item.is-visible .history-list li:nth-child(6){

    transition-delay:.90s;

}