/*
    모바일 줄바꿈
    모바일 이미지

*/
#wrap #container.history .contents_area {padding-top: 140px;padding-right: 0;}
#wrap #container.history .contents_area {display:flex;}
#wrap #container.history .contents_area .history_nav {width:450px; margin-right: 100px;box-sizing: border-box;}
#wrap #container.history .contents_area .history_nav ul {position:absolute; width:450px;}
#wrap #container.history .contents_area .history_nav.fixed ul {position:fixed; top:0; width:450px; top: 193px;}
#wrap #container.history .contents_area .history_nav li button {border:1px solid #ddd;box-sizing: border-box;}
#wrap #container.history .contents_area .history_nav li~li button{margin-top:-1px;}
#wrap #container.history .contents_area .history_nav li button {width:100%; height:78px; display:flex; justify-content: center; align-items: center; flex-direction: column;}
#wrap #container.history .contents_area .history_nav li button span {display:block; text-align:center;width:100%;}
#wrap #container.history .contents_area .history_nav li button span.title {display:none;}
#wrap #container.history .contents_area .history_nav li button span.year {font-family:'MontserratM'; color:#adadad; font-size:20px;}

#wrap #container.history .contents_area .history_nav li button.on {height:450px; pointer-events: none;}
#wrap #container.history .contents_area .history_nav li button.on span.year{color:#fff;font-size:32px; font-family:'MontserratB'; letter-spacing:0.05em;}
#wrap #container.history .contents_area .history_nav li button.on span.title {display:block; font-family:'NotoSansL'; font-size:58px; color:#fff;  letter-spacing: -0.07em;;}


#wrap #container.history .contents_area .history_nav li:nth-child(1) button.on{border-color: #45b97c;background: #45b97c;}
#wrap #container.history .contents_area .history_nav li:nth-child(2) button.on{border-color: #009edc;background: #009edc;}
#wrap #container.history .contents_area .history_nav li:nth-child(3) button.on{border-color: #feb834;background: #feb834;}
#wrap #container.history .contents_area .history_nav li:nth-child(4) button.on{border-color: #f37321;background: #f37321;}
#wrap #container.history .contents_area .history_content ul.part_1 li::after {border:2px solid #59bc83;}
#wrap #container.history .contents_area .history_content ul.part_2 li::after {border:2px solid #009edc;}
#wrap #container.history .contents_area .history_content ul.part_3 li::after {border:2px solid #feb834;}
#wrap #container.history .contents_area .history_content ul.part_4 li::after {border:2px solid #f37321;}



#wrap #container.history .contents_area .history_content {width: calc(100% - 550px);}
#wrap #container.history .contents_area .history_content ul {position:relative; display:none;}
#wrap #container.history .contents_area .history_content ul.on {display:block;}
#wrap #container.history .contents_area .history_content ul li::before {content:''; width:1px; height:100%; border-left:1px solid #ddd; position:absolute; top:10px; left:0; bottom:10px;}
#wrap #container.history .contents_area .history_content ul li:last-child::before {content:none;}
#wrap #container.history .contents_area .history_content ul li {position:relative; padding-left: 100px;}
#wrap #container.history .contents_area .history_content ul li::after {content:''; width:11px; height:11px; border:2px solid #59bc83;box-sizing: border-box;border-radius:50%; position:absolute; top:10px; left:-5px;background:#fff;}
#wrap #container.history .contents_area .history_content ul li .year_title {font-family:'NotoSansM'; font-size:20px; letter-spacing: -0.045em; margin-bottom: 9px; }
#wrap #container.history .contents_area .history_content ul li dl {display:flex; font-size:18px; letter-spacing: -0.03em; line-height: 2;}
#wrap #container.history .contents_area .history_content ul li dl:last-child {margin-bottom: 18px;}
#wrap #container.history .contents_area .history_content ul li:last-child dl:last-child {margin-bottom: 0;}
#wrap #container.history .contents_area .history_content ul li dl dt {font-family:'NotoSansM'; color:#1a1919; width:56px; min-width:56px}
#wrap #container.history .contents_area .history_content ul li dl dd {color:#666;letter-spacing: -0.04em;}
#wrap #container.history .contents_area .history_content ul li .img {width: 100%; max-width:500px; margin:40px 0 30px;}
#wrap #container.history .contents_area .history_content ul li .img img {width: 100%;}
#wrap #container.history .contents_area .history_content ul li {padding-bottom: 16px;}
#wrap #container.history .contents_area .history_content ul li:last-child{margin-bottom:0;padding-bottom: 0;}
#wrap #container.history .contents_area .history_content ul li:last-child figure {margin-bottom:0;}
#wrap #container.history .contents_area .history_content ul li figure {margin-top: 39px;margin-bottom: 26px;}


@media(max-width:1024px) {
    /* kv */
    #wrap #container .visual_area .sub {display:none;}
    #wrap #container.history .contents_area {display:block; padding-top: 19.44vw; padding-left:6.67vw; padding-right:6.67vw;}

    #wrap #container.history .contents_area .history_nav {width:100%; margin-right: 0;}
    #wrap #container.history .contents_area .history_nav ul {width:100%; position:relative;display:flex; flex-wrap:wrap;}
    #wrap #container.history .contents_area .history_nav.fixed ul {top:0; width:100%; top: 26.81vw; }
    #wrap #container.history .contents_area .history_nav li {width:50%;}
    #wrap #container.history .contents_area .history_nav li button {border: 0.14vw solid #ddd;}
    #wrap #container.history .contents_area .history_nav li~li button{margin-top:0;}
    #wrap #container.history .contents_area .history_nav li:nth-child(2n-1) {margin-right: -0.14vw;}
    #wrap #container.history .contents_area .history_nav li:nth-child(2n) {margin-left: -0.14vw;}
    #wrap #container.history .contents_area .history_nav li:nth-child(n+3){margin-top: -0.28vw;}
    #wrap #container.history .contents_area .history_nav li button {width:100%; height:12.5vw; }
    #wrap #container.history .contents_area .history_nav li button span.title {display:none;}
    #wrap #container.history .contents_area .history_nav li button span.year {font-size: 3.61vw;}

    #wrap #container.history .contents_area .history_nav li button.on {height:12.5vw;z-index: 9;position: relative;}
    #wrap #container.history .contents_area .history_nav li button.on span.year{font-size: 3.61vw;}
    #wrap #container.history .contents_area .history_nav li button.on span.title {display:none;}

    #wrap #container.history .contents_area .history_content ul.part_1 li::after,
    #wrap #container.history .contents_area .history_content ul.part_2 li::after,
    #wrap #container.history .contents_area .history_content ul.part_3 li::after,
    #wrap #container.history .contents_area .history_content ul.part_4 li::after {border-width: 0.56vw;}



    #wrap #container.history .contents_area .history_content {width: 100%;}
    #wrap #container.history .contents_area .history_content ul li::before {width:0.14vw; border-left: 1px solid #ddd;top:1.39vw; bottom:1.39vw;}
    #wrap #container.history .contents_area .history_content ul li {padding-left: 6.25vw;}
    #wrap #container.history .contents_area .history_content ul li::after {width: 2.5vw; height: 2.5vw; top:1.39vw; left: -1.11vw;}
    #wrap #container.history .contents_area .history_content ul li .year_title {font-size: 3.61vw; margin-bottom: 4.17vw; }
    #wrap #container.history .contents_area .history_content ul li dl {font-size: 3.33vw;line-height: 1.83;}
    #wrap #container.history .contents_area .history_content ul li dl:last-child {margin-bottom: 2.5vw;}
    #wrap #container.history .contents_area .history_content ul li dl dt {width: 12.5vw; min-width: 12.5vw;}
    #wrap #container.history .contents_area .history_content ul li dl dd {padding-left:2.78vw;width: calc(100% - 12.5vw);position: relative;}
    #wrap #container.history .contents_area .history_content ul li dl dd span:not(.pc) {display:block;}
    #wrap #container.history .contents_area .history_content ul li dl dd span::before {content:'· '; display: block; position: absolute;left: 0;}
    #wrap #container.history .contents_area .history_content ul li {padding-bottom: 9.17vw;}
    #wrap #container.history .contents_area .history_content ul li figure {margin-top: 5.42vw;margin-bottom: 3.61vw;}
    #wrap #container.history .contents_area .history_content ul li figure img {width:100%;}
    #wrap #container.history .contents_area .history_content ul li .img {margin:6.94vw 0 0 0;max-width: 100%}

    .part::before {font-family:'NotoSansM'; font-size:5.56vw; display:block; margin-top: 12.5vw; margin-bottom: 7.22vw;}
    .part_1::before {content:'Connection and innovation'; color:#59bc83;}
    .part_2::before {content:'Expansion and deepening'; color:#009edc;}
    .part_3::before {content:'Change and growth'; color:#feb834;}
    .part_4::before {content:'Startup and takeoff'; color:#f37321;}
}