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

.kw-history {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 100px;
    box-sizing: border-box;
    color: #161616;
    font-family: "Pretendard", "Noto Sans KR", "Noto Sans", Arial, sans-serif;
}

.kw-history *,
.kw-history *:before,
.kw-history *:after {
    box-sizing: border-box;
}


/* =========================================================
   상단
========================================================= */

.kw-history-head {
    position: relative;
    width: 100%;
    max-width: 820px;
    margin: 0 auto 65px;
    text-align: center;
}

.kw-history-title {
    margin: 0 0 35px;
    font-size: 32px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -1px;
}


/* 좌우 괄호 */
.kw-history-head:before,
.kw-history-head:after {
    position: absolute;
    top: 0;
    color: #9b9b9b;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 80px;
    line-height: 1;
    font-weight: 300;
}

.kw-history-head:before {
    content: "{";
    left: 0;
}

.kw-history-head:after {
    content: "}";
    right: 0;
}


.kw-history-intro {
    margin: 0 auto;
    padding: 0 80px;
    font-size: 16px;
    line-height: 1.75;
    font-weight: 500;
    word-break: keep-all;
}

.kw-history-intro p {
    margin: 0;
}

.kw-history-point {
    color: #16aa49;
    font-weight: 700;
}


/* =========================================================
   TIMELINE
========================================================= */

.kw-history-timeline {
    position: relative;
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
}


/* 중앙 세로선 */
.kw-history-timeline:before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 50%;
    width: 1px;
    background: #dddddd;
    transform: translateX(-50%);
}


/* =========================================================
   ITEM
========================================================= */

.kw-history-item {
    position: relative;
    width: 50%;
    min-height: 80px;
    padding-bottom: 70px;
}

.kw-history-item:last-child {
    padding-bottom: 0;
}


/* 중앙 원 */
.kw-history-item:before {
    content: "";
    position: absolute;
    top: 10px;
    width: 11px;
    height: 11px;
    border: 2px solid #c9c9c9;
    border-radius: 50%;
    background: #fff;
    z-index: 3;
}


/* 원 옆 짧은 선 */
.kw-history-item:after {
    content: "";
    position: absolute;
    top: 15px;
    width: 18px;
    height: 1px;
    background: #d2d2d2;
}


/* =========================================================
   LEFT
========================================================= */

.kw-history-item.left {
    margin-right: auto;
    padding-right: 42px;
    text-align: right;
}

.kw-history-item.left:before {
    right: -6px;
}

.kw-history-item.left:after {
    right: 5px;
}


/* =========================================================
   RIGHT
========================================================= */

.kw-history-item.right {
    margin-left: auto;
    padding-left: 42px;
    text-align: left;
}

.kw-history-item.right:before {
    left: -6px;
}

.kw-history-item.right:after {
    left: 5px;
}


/* =========================================================
   텍스트
========================================================= */

.kw-history-year {
    margin: 0 0 10px;
    color: #2b2b2b;
    font-size: 25px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.kw-history-desc {
    margin: 0 0 7px;
    color: #222;
    font-size: 14px;
    line-height: 1.65;
    font-weight: 400;
    word-break: keep-all;
}

.kw-history-month {
    display: inline-block;
    margin: 0 7px;
    font-size: 12px;
    font-weight: 700;
}


/* 제품 출시 */
.kw-history-main {
    margin: 0 0 5px;
    color: #222;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 500;
}


/* 제품목록 */
.kw-history-products {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kw-history-products li {
    margin: 1px 0;
    padding: 0;
    color: #222;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 400;
    word-break: keep-all;
}


/* 블록이 2개 이상인 경우 */
.kw-history-group + .kw-history-group {
    margin-top: 18px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .kw-history {
        padding-left: 25px;
        padding-right: 25px;
    }

    .kw-history-head {
        max-width: 700px;
    }

    .kw-history-title {
        font-size: 28px;
    }

    .kw-history-intro {
        padding: 0 60px;
        font-size: 15px;
    }

    .kw-history-head:before {
        left: 10px;
    }

    .kw-history-head:after {
        right: 10px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .kw-history {
        padding: 25px 17px 70px;
    }


    /* 상단 */
    .kw-history-head {
        margin-bottom: 50px;
    }

    .kw-history-title {
        margin-bottom: 20px;
        font-size: 24px;
    }

    .kw-history-head:before,
    .kw-history-head:after {
        display: none;
    }

    .kw-history-intro {
        padding: 0;
        font-size: 13.5px;
        line-height: 1.7;
    }

    .kw-history-intro br {
        display: none;
    }


    /* 중앙선 왼쪽 이동 */
    .kw-history-timeline:before {
        left: 9px;
        transform: none;
    }


    /* 모두 오른쪽 배치 */
    .kw-history-item,
    .kw-history-item.left,
    .kw-history-item.right {
        width: 100%;
        min-height: 0;
        margin: 0;
        padding: 0 0 42px 43px;
        text-align: left;
    }

    .kw-history-item:last-child {
        padding-bottom: 0;
    }


    /* 원 */
    .kw-history-item.left:before,
    .kw-history-item.right:before {
        left: 3px;
        right: auto;
    }


    /* 짧은 선 */
    .kw-history-item.left:after,
    .kw-history-item.right:after {
        left: 14px;
        right: auto;
        width: 18px;
    }


    .kw-history-year {
        margin-bottom: 8px;
        font-size: 21px;
    }

    .kw-history-desc,
    .kw-history-main {
        font-size: 13px;
        line-height: 1.65;
    }

    .kw-history-products li {
        font-size: 12.5px;
        line-height: 1.6;
    }

    .kw-history-month {
        margin-left: 0;
        margin-right: 6px;
        font-size: 11px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .kw-history {
        padding-left: 12px;
        padding-right: 12px;
    }

    .kw-history-title {
        font-size: 22px;
    }

    .kw-history-intro {
        font-size: 12.5px;
    }

    .kw-history-item,
    .kw-history-item.left,
    .kw-history-item.right {
        padding-left: 39px;
    }

    .kw-history-year {
        font-size: 20px;
    }

    .kw-history-desc,
    .kw-history-main,
    .kw-history-products li {
        font-size: 12px;
    }

}