@charset "UTF-8";

.timeline { line-height: 1.4em; list-style: none; margin: 0; padding: 0; width: 100%; }
.timeline h1, .timeline h2, .timeline h3, .timeline h4, .timeline h5, .timeline h6 { line-height: inherit; }

.timeline-item { padding-left: 40px; position: relative; }
.timeline-item:last-child { padding-bottom: 0; }

.timeline-info { font-size: 12px; font-weight: 700; letter-spacing: 3px; margin: 0 0 .5em 0; text-transform: uppercase; white-space: nowrap; }

.timeline-marker { position: absolute; top: 0; bottom: 0; left: 0; width: 15px; }
.timeline-marker:before { background: #fff; border: 3px solid transparent; border-radius: 100%; content: ""; display: block; height: 15px; position: absolute; top: 4px; left: 0; width: 15px; transition: background 0.3s ease-in-out,border 0.3s ease-in-out; }
.timeline-marker:after { content: ""; width: 3px; background: #CCD5DB; display: block; position: absolute; top: 24px; bottom: 0; left: 6px; }
.timeline-item:last-child .timeline-marker:after { content: none; }

.timeline-item:not(.period) .timeline-marker:before { background: transparent; border: 3px solid #464a4c; }

.timeline-content { padding-bottom: 40px; overflow: hidden; }
.timeline-content::after { display: block; clear: both; content: ""; }
.timeline-content p:last-child { margin-bottom: 0; }
.timeline-content h3.timeline-title { font-size: 1.25rem; font-weight: 700; margin-bottom: .5rem; }
.timeline-content .tl-icon { float: left; font-size: 6rem; padding: 0 0 .5rem 0; }
.timeline-content .tl-icon.right { float: right; }
.timeline-content span.date { font-size: .75rem; color: #464a4c; }

.period { padding: 0; }
.period .timeline-info { display: none; }
.period:first-child .timeline-marker:before { border-top: none; }
.period .timeline-marker:before { background: transparent; content: ""; width: 15px; height: auto; border: none; border-radius: 0; top: 0; bottom: 30px; position: absolute; border-top: 3px solid #CCD5DB; border-bottom: 3px solid #CCD5DB; }
.period .timeline-marker:after { content: ""; height: 32px; top: auto; }
.period .timeline-content { padding: 40px 0 70px; }
.period .timeline-title { margin: 0.25rem; padding: .1rem; font-size: 2rem; font-weight: 700; }


/* 회사연혁 */
.history-wrap { width: 100%; padding-top: 3rem; margin-left: auto; margin-right: auto; }
.history-wrap::after { display: block; clear: both; content: ""; }

.marker-outline .timeline-marker:before { background: transparent; border-color: #464a4c; }
.marker-outline .timeline-item:hover .timeline-marker:before { background: #464a4c; }

.lcard { position: relative; }
.lcard::after { display: block; clear: both; content: ""; }
.lcard .lcard-head { float: left; padding-right: .5rem; }
@media (min-width: 768px) { .lcard .lcard-head { float: right; padding-left: 1rem; padding-right: 0; } }
.lcard .lcard-head .lcard-img { width: 80px; height: auto; }
@media (min-width: 768px) { .lcard .lcard-head .lcard-img { width: 100px; height: auto; } }
.lcard .lcard-body .timeline-title { color: #495057; font-size: 1.2rem; }
.lcard .lcard-body p { font-size: .95rem; margin-bottom: .25rem; }
.lcard .lcard-body .date { font-weight: 600; color: #6c757d; }

.timeline { /* 타임라인 왼쪽 */ /* 타임라인 오른쪽 */ }
.timeline .timeline-item:nth-child(odd) .lcard-head { float: left; padding-right: 1rem; padding-left: 0; }