.history{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 10rem;
  padding: 0;
  margin: 2rem 0 0 0;
  /* position: relative;
  padding: 1rem 0 0 5rem;
  margin: 2rem 0 0 0; */
}
.history .pic{
  padding: 0;
  margin: 0;
}
.history .pic img{
  max-width: 100%;
}
.history .pic h1{
  position: relative;
	font-family: 'Jost','Roboto';
  font-weight: 200;
  margin: 0;
  padding: 2.5rem 0 0 5rem;
}
.history .pic h1 span{
  display: block;
  font-size: 3.5rem;
  font-weight: 800;
  color: #0c6d41;
}
.history .pic h1::before{
  position: absolute;
  content: '';
  width: 5px;
  height: 10rem;
  background: #0c6d41;
  top: -2rem;
  left: 2rem;
  z-index: 10;
}
.history .history_item{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: .5rem;
  padding: 1.5rem 0;
}
.history .history_item::before{
  position: absolute;
  content: '';
  top: 0;
  left: -1.73rem;
  height: 100%;
  border-right: 1px solid rgba(0, 0, 0, .1);
  z-index: -1;
}
.history .history_item .year{
  position: relative;
	font-family: 'Jost','Roboto';
  font-weight: 500;
  font-size: 1.7rem;
  color: #0c6d41;
  letter-spacing: -1px;
}
.history .history_item .year::before{
  position: absolute;
  content: '';
  top: .8rem; 
  left: -2.05rem;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: #fff;
  border: 3px solid #0c6d41;
}
.history .history_item .list{
  padding: .5rem 0 0 0;
  margin: 0;
}
.history .history_item .list ul{
  display: flex;
  justify-content: flex-start;
  gap: .5rem;
  margin: 0 0 .5rem 2.5rem;
  padding: 0;
}
.history .history_item .list ul li{
  padding: 0;
  margin: 0;
  font-family: 'GmarketSansMedium', 'Pretendard', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: .9rem;
  text-align: left;
  word-break:keep-all; 
  word-wrap:break-word;
}
.history .history_item .list ul li.month{
	font-family: 'Jost','Roboto';
  font-weight: 500;
  color: #0f9257;
  padding-right: 1rem;
}
.history .history_item .list ul li .img{  
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  padding: 1rem 0 2rem 0;
  margin: 0;
}
.history .history_item .list ul li .img img{
  max-width: 100%;
}
@media (max-width: 991.98px) {  
  .history{
    gap: 5rem;
  }
  .history .pic {
    transition: all .15s;
    -webkit-transition: all .15s;
    -moz-transition: all .15s;
    -ms-transition: all .15s;
    -o-transition: all .15s;
  }
}
@media (max-width: 767.98px) {
  .history{
    flex-direction: column;
    margin: 0;
    gap: 1.5rem;
  }
  .history .pic {
    /* order: 2; */
    width: 100%;
  }
  .history .pic img{
    width: 100%;
    height: 150px;
    object-fit: cover;
    text-align: center;
  }
  .history .pic h1{
    position: relative;
    padding: 2.5rem 0 0 0;
    font-size: 1.1rem;
    text-align: center;
  }
  .history .pic h1::before{
    width: 5px;
    height: 3rem;
    top: -1rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .history .pic h1 span{
    font-size: 2.1rem;
  }
  .history .pic h1 br {
    display: none;
  }
  .history .con {
    padding: 0 0 0 2.5rem;
  }
  .history .history_item{
    gap: .5rem;
    padding: 1rem 0;
  }
  .history .history_item .img>div{
    width: 45%;
  }
  .history .history_item .img>div img{
    width: 100%;
  }
  .history .history_item .list ul{
    margin: 0 0 .5rem 0rem;
  }
  .history .history_item .list ul li{
    font-size: .85rem;
  }
  .history .history_item .year{
    font-size: 1.2rem;
  }
}








.cd-timeline{
  overflow:hidden;
  padding:0;
  padding:var(--space-lg) 0;
  color:hsl(207, 10%, 55%);
  color:var(--cd-color-3);
  font-family:'Droid Serif', serif;
  font-family:var(--font-primary)}
  .cd-timeline h2{
  font-family:'Noto Sans KR','AppleSDGothicNeo-Regular','Malgun Gothic','맑은 고딕','dotum','돋움','sans-serif';
  font-size: 1.2rem;
  padding-bottom: 10px;
}
.cd-timeline h2 span{
  font-family: 'Oswald', sans-serif;
  font-size: 1.8rem;
  font-weight:600;
  color: #2e19b0;
}
.cd-timeline__container{
  position:relative;
  padding:1.25em 0;
  padding:var(--space-md) 0
}
.cd-timeline__container::before{
  content:'';
  position:absolute;
  top:0;
  left:18px;
  height:100%;
  width:1px;
  background:#dadada;
}
@media (min-width: 64rem){
  .cd-timeline__container::before{
    left:50%;
    -webkit-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    transform:translateX(-50%)
  }
}
.cd-timeline__block{
  display:-ms-flexbox;
  display:flex;
  position:relative;
  z-index:1;
  margin-bottom:2em;
  margin-bottom:var(--space-lg);
  font-family:'Noto Sans KR','AppleSDGothicNeo-Regular','Malgun Gothic','맑은 고딕','dotum','돋움','sans-serif';
}
.cd-timeline__block:last-child{
  margin-bottom:0
}
@media (min-width: 64rem){
  .cd-timeline__block:nth-child(even){
    -ms-flex-direction:row-reverse;
    flex-direction:row-reverse
  }
}
.cd-timeline__img{
  display:-ms-flexbox;
  display:flex;
  -ms-flex-pack:center;
  justify-content:center;
  -ms-flex-align:center;
  align-items:center;
  -ms-flex-negative:0;
  flex-shrink:0;
  width:40px;
  height:40px;
  border-radius:50%;
  box-shadow:0 0 0 4px hsl(0, 0%, 100%),inset 0 2px 0 rgba(0,0,0,0.08),0 3px 0 4px rgba(0,0,0,0.05);
  box-shadow:0 0 0 4px var(--color-white),inset 0 2px 0 rgba(0,0,0,0.08),0 3px 0 4px rgba(0,0,0,0.05)
}
.cd-timeline__img img{
  width:24px;
  height:24px
}
@media (min-width: 64rem){
  .cd-timeline__img{
    width:60px;
    height:60px;
    -ms-flex-order:1;
    order:1;
    margin-left:calc(5% - 30px);
    will-change:transform;
  }
  .cd-timeline__block:nth-child(even) .cd-timeline__img{
    margin-right:calc(5% - 30px);
  }
}
.cd-timeline__img--picture{
  background-color:hsl(111, 51%, 60%);
  background-color:var(--cd-color-4);
}
.cd-timeline__img--movie{
  background-color:hsl(356, 53%, 49%);
  background-color:var(--cd-color-5);
}
.cd-timeline__img--location{
  background-color:hsl(47, 85%, 61%);
  background-color:var(--cd-color-6);
}
.cd-timeline__content{
  -ms-flex-positive:1;
  flex-grow:1;
  position:relative;
  margin-left:1.25em;
  margin-left:var(--space-md);
  padding:1.25em;
  padding:var(--space-md);
}
.cd-timeline__content::before{
  content:'';
  position:absolute;
  top:16px;
  right:100%;
  width:0;
  height:0;
  border:7px solid transparent;
  border-right-color:hsl(0, 0%, 100%);
  border-right-color:var(--color-white);
}
.cd-timeline__content h2{
  color:hsl(206, 21%, 24%);
  color:var(--cd-color-1);
}
.cd-timeline__content ul{
  float: left;
  width: 100%;
  padding: 8px 0px;
}
.cd-timeline__content ul li{
  float: left;
  padding: 0px 5px;
  vertical-align: top;
  text-align: left;
}
.cd-timeline__content ul li:first-child{
  width: 10%;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  color: #1c71c9;
  text-align: center;
}
.cd-timeline__content ul li:last-child{
  width: 90%;
  color: #595959;
  padding-left: 10px;
}
@media (min-width: 64rem){
  .cd-timeline__content{
    width:45%;
    -ms-flex-positive:0;
    flex-grow:0;
    will-change:transform;
    margin:0;
    font-size:0.8em;
    --line-height-multiplier: 1.2;
  }
  .cd-timeline__content::before{
    top:24px;
  }
  .cd-timeline__block:nth-child(odd) .cd-timeline__content::before{
    right:auto;
    left:100%;
    width:0;
    height:0;
    border:7px solid transparent;
  }
}
.cd-timeline__date{
  color:hsla(207, 10%, 55%, 0.7);
  color:hsla(var(--cd-color-3-h), var(--cd-color-3-s), var(--cd-color-3-l), 0.7);
}
@media (min-width: 64rem){
  .cd-timeline__date{
    position:absolute;
    width:100%;
    left:120%;
    top:20px;
  }
  .cd-timeline__block:nth-child(even) .cd-timeline__date{
    left:auto;
    right:120%;
    text-align:right;
  }
}
@media (min-width: 64rem){
  .cd-timeline__img--hidden,.cd-timeline__content--hidden{
    visibility:hidden;
  }
  .cd-timeline__img--bounce-in{
    -webkit-animation:cd-bounce-1 0.6s;
    animation:cd-bounce-1 0.6s;
  }
  .cd-timeline__content--bounce-in{
    -webkit-animation:cd-bounce-2 0.6s;
    animation:cd-bounce-2 0.6s;
  }
  .cd-timeline__block:nth-child(even) .cd-timeline__content--bounce-in{
    -webkit-animation-name:cd-bounce-2-inverse;
    animation-name:cd-bounce-2-inverse;
  }
}
@-webkit-keyframes cd-bounce-1{
  0%{
  opacity:0;
  -webkit-transform:scale(0.5);
  transform:scale(0.5)}
  60%{
  opacity:1;
  -webkit-transform:scale(1.2);
  transform:scale(1.2)}
  100%{
  -webkit-transform:scale(1);
  transform:scale(1)}
}
@keyframes cd-bounce-1{
  0%{
  opacity:0;
  -webkit-transform:scale(0.5);
  transform:scale(0.5)}
  60%{
  opacity:1;
  -webkit-transform:scale(1.2);
  transform:scale(1.2)}
  100%{
  -webkit-transform:scale(1);
  transform:scale(1)}
}
@-webkit-keyframes cd-bounce-2{
  0%{
  opacity:0;
  -webkit-transform:translateX(-100px);
  transform:translateX(-100px)}
  60%{
  opacity:1;
  -webkit-transform:translateX(20px);
  transform:translateX(20px)}
  100%{
  -webkit-transform:translateX(0);
  transform:translateX(0)}
}
@keyframes cd-bounce-2{
  0%{
  opacity:0;
  -webkit-transform:translateX(-100px);
  transform:translateX(-100px)}
  60%{
  opacity:1;
  -webkit-transform:translateX(20px);
  transform:translateX(20px)}
  100%{
  -webkit-transform:translateX(0);
  transform:translateX(0)}
}
@-webkit-keyframes cd-bounce-2-inverse{
  0%{
  opacity:0;
  -webkit-transform:translateX(100px);
  transform:translateX(100px)}
  60%{
  opacity:1;
  -webkit-transform:translateX(-20px);
  transform:translateX(-20px)}
  100%{
  -webkit-transform:translateX(0);
  transform:translateX(0)}
}
@keyframes cd-bounce-2-inverse{
  0%{
  opacity:0;
  -webkit-transform:translateX(100px);
  transform:translateX(100px)}
  60%{
  opacity:1;
  -webkit-transform:translateX(-20px);
  transform:translateX(-20px)}
  100%{
  -webkit-transform:translateX(0);
  transform:translateX(0)}
}