.history-box { display: flex; flex-wrap: wrap; position: relative; }
.history-box .history-head-wrap { width: 50%; padding-right: 120px; box-sizing: border-box; transition: all .3s ease; }
.history-box .history-body { width: 50%; padding-left: 35px; box-sizing: border-box; position: relative; }
.history-box .history-body:before { content: ''; width: 2px; height: 100%; background: #ccc; position: absolute; left: 0; top: 0; bottom: 0; }
.history-banner { height: auto; border-radius: 10px; overflow: hidden; position: relative; }
.history-banner:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(180deg, #000 0, rgba(102, 102, 102, 0) 100%); opacity: .3; z-index: 0; }
.history-banner img { width: 100%; height: 100%; object-fit: cover; }
.history-tit { position: absolute; top: 70px; left: 50%; transform: translatex(-50%); z-index: 99; }
.history-tit p { font-family: Prompt; font-weight: 700; font-size: 80px; line-height: 90%; letter-spacing: -.1px; text-align: center; color: #fff; }
.history-tit p span { color: #43c1c3; }
.history-head ul li + li { margin: 20px 0 0 0; }
.history-head ul li a { font-weight: 700; font-size: 40px; line-height: 100%; letter-spacing: -.2px; color: #d9d9d9; }
.history-head ul li.active a { color: #004bae; }
.history-inner + .history-inner, .block + .block { margin-top: 80px; }
.history-inner { display: flex; gap: 50px; position: relative; transition: all .5s; }
.history-inner:before { content: ""; position: absolute; left: -47px; top: 0; width: 27px; height: 27px; background: #fff url(/_res/unist/_share/img/temp/history-vector.png)no-repeat center center; border-radius: 100%; z-index: 99; }
.history-inner.active:before { background: #fff url(/_res/unist/_share/img/temp/history-vector-point.png)no-repeat center center; background-size: cover; }
.history-inner .history-year { font-family: Prompt; font-weight: 700; font-size: 30px; line-height: 110.00000000000001%; letter-spacing: -.2px; vertical-align: middle; color: #004edb; }
.history-inner .history-desc { display: flex; gap: 40px 0; flex-direction: column; flex: 1; }
.history-inner .history-desc .history-month { display: flex; gap: 40px; align-items: baseline; }
.history-inner .history-desc .history-month .month-box { font-weight: 700; font-size: 20px; line-height: 110.00000000000001%; letter-spacing: -.2px; vertical-align: middle; color: #222; width: 60px; }
.history-inner .history-desc .history-month .txt-box { flex: 1; }
.history-inner .history-desc .history-month .txt-box > ul { display: flex; flex-direction: column; }
.history-inner .history-desc .history-month .txt-box > ul > li { display: flex; align-items: center; justify-content: flex-start; gap: 0 20px; position: relative; padding: 0 0 10px 11px; }
.history-inner .history-desc .history-month .txt-box > ul > li:last-child { padding-bottom: 0; }
.history-inner .history-desc .history-month .txt-box > ul > li:before { content: ""; position: absolute; left: 0; top: 14px; width: 3px; height: 3px; background: #000e2d; border-radius: 100%; }
.history-inner .history-desc .history-month .txt-box > ul > li p { font-weight: 500; font-size: 18px; line-height: 30px; letter-spacing: -.2px; vertical-align: middle; color: #555; flex: 1; }
.history-body { position: relative; }
.history-body .point-cir { position: absolute; left: -15px; top: 0; z-index: 50; }
.history-body .point-cir .dot { display: block; }
.history-body .point-cir .bar { width: 2px; height: 0; background: #004bae; position: absolute; bottom: 25px; left: 15px; }
.history-body.active .point-cir .dot { opacity: 1; }
.history-banner .swiper { height: 340px; }
.history-banner .swiper img { width: 100%; height: 100%; object-fit: cover; }
.is-sp { display: none; }
@media (max-width: 1200px) {
  .history-tit p { font-size: calc(80/1200*100vw); }
}
@media (max-width: 1024px) {
  .history-inner { flex-direction: column; gap: 25px; }
}
@media (max-width:768px) {
  .is-sp { display: block; }
  .is-pc { display: none; }
  .history-tit p { font-size: calc(80/768*100vw); }
  .history-head ul li a { display: none; }
  .history-head ul li.active a { display: block; }
  .history-box { flex-direction: column; gap: 0; }
  .history-head > ul { display: flex; gap: 10px 0; flex-wrap: wrap; }
  .history-head > ul li + li { margin: 0; }
  .history-head ul li a { font-size: 20px; }
  .history-box .history-head-wrap { width: 100%; padding-right: 0; }
  .history-box .history-body { width: 100%; padding-left: 0; }
  .history-banner { width: 100%; margin: 0 0 30px 0; position: relative; z-index: 60; height: calc(500 / 768 * 100vw); }
  .history-inner:before { left: 90px; }
  .history-inner { display: flex; gap: 90px; flex-direction: row; }
  .history-inner .history-year { width: 53px; margin: 0 0 20px 0; font-size: 20px; }
  .history-inner .history-desc { flex: 1; }
  .history-body .point-cir { position: relative; }
  .history-body .point-cir .bar { left: 16px; width: 2px; }
  .history-body .point-cir { left: 87px; }
  .history-box .history-body:before { left: 103px; height: calc(100% - 30px); }
  .history-inner + .history-inner, .block + .block { margin-top: 20px; }
  .history-inner .history-desc .history-month .month-box { font-size: 15px; width: 40px; }
  .history-inner .history-desc .history-month { gap: 10px; }
  .history-head.fixed > ul { background: #fff; position: fixed; top: 56px; left: 0; padding: 10px 16px; width: 100%; box-sizing: border-box; z-index: 500; }
  //.history-body.has-fixed-banner { padding-top: 340px; }
  //.history-banner.fixed { position: fixed; top: 96px; left: 50%; transform: translatex(-50%); width: calc(100% - 32px); z-index: 400; background: #fff; }
}