/* About > history */
.history .in {position:relative}
.history .mo { display:none }    
.history { padding-top:124px;  position: relative;   }
.company-history { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; }    
.history-title { width:300px;  padding-right: 20px;  position:sticky; top:150px; left:0;  }
.history-title .year { word-break: break-all;   font-weight: 600; }
.history-title .year.fix { height:calc(50vh - 200px)}
 

 .history-title .text-year { 
    font-size:100px; 
    font-style: normal; 
    font-weight: 800;
	letter-spacing:-2px;
   background-color:#fff 
  
   
}
.history-title div.year { display: none; }
.history-title div.year.fix { display: block; top:auto;   }
.history-title div.year p { position: absolute; display: flex; flex-wrap: nowrap; align-items: center; color: #111; font-size: 16px; font-weight: 600; line-height: 1; text-transform: uppercase; z-index: -1; bottom:0 }
.history-title div.year p span { position: relative; display: block; margin-left:15px; width: 16px; height: 24px; border:2px solid var(--main_c); border-radius:20px }
.history-title div.year p span:before { 
    content: ""; 
    width: 3px; 
    height:7px;  
    background: var(--main_c); 
    position: absolute; 
    top: 6px; 
    left: 50%;
    margin-left:-1.7px; border-radius:50px; 
    animation-name: historyScroll;
    animation-duration: 1.5s;
    animation-timing-function: cubic-bezier(0.15,0.41,0.69,0.94);
    animation-iteration-count: infinite; 
}
 @keyframes historyScroll {
    0% { top: 6px; } 50% { top: 12px; } 100% { top: 6px; }
}
@-webkit-keyframes historyScroll {
    0% { top: 6px; } 50% { top: 12px; } 100% { top: 6px; }
}
@-ms-keyframes historyScroll {
    0% { top: 6px; } 50% { top: 12px; } 100% { top: 6px; }
}

.history aside { position:fixed; left:0; top:0; background-color:#ddd; display:none}   
.history aside  .on { color:red }
 


.history-wrap { position: relative; width: 1000px;  margin-top:40px }
.history-cont { position: relative; padding-bottom:230px;   }
.page-section {padding:120px 0; position:relative; }
.page-section:first-child {padding-top:0}
.page-section:after {width:100%; height:1px; content:''; background-color:#ddd; display:inline-block; position:absolute; left:0; bottom:0}
.page-section:last-child:after {display:none}

 
.history-cont ul {position: relative;  width:100%}
.history-cont ul:last-child { padding-bottom: 10px; }
.history-cont ul li { display: flex; flex-wrap: nowrap;  color: #868686;   align-items: flex-start;   padding-bottom:40px;    } 
.history-cont ul li:last-child {padding-bottom:0}
.history-cont ul li h2 { width: 100px; text-align: left; font-size: 25px; font-weight:800; opacity: .5; line-height:1.1}
.history-cont ul li div { width: calc(100% - 100px);   }
.history-cont ul li p { margin-bottom: 12px; color: #868686;  font-weight: 300; opacity: .5; }
.history-cont ul li p img {width:20px; vertical-align:middle; margin-bottom:5px; opacity:.5; }
.history-cont ul li p:last-child { margin-bottom:0; }


.history-cont ul.active h2 { opacity: 1; color:var(--main_c); transition: all .2s; }
.history-cont ul.active p { opacity: 1; transition: all .2s; color:#000}

.history-cont ul.active2 h2 { opacity: 1; color:var(--main_c); transition: all .2s; }
.history-cont ul.active2 p { opacity: 1; transition: all .2s; color:#000}


@media all and (max-width:1200px) {
		.history .mo { display:block }    
		.company-history {width:100%}
		.history-title {display:none}
		.history .mo .history-title { display:block; color:#000; font-size:2em}    
		.history-wrap {width:100%}
		.history-cont {padding-bottom:0}
		.history-cont ul li {padding-bottom:20px}
		.history-cont ul li div img {max-width:100%}
		.history-cont ul li h2 { width:60px; font-size:1.1em; line-height:1.3 }
		.history-cont ul li div { width: calc(100% - 60px);   }
		.history-cont ul li p {font-size:0.94em }

		.page-section {padding-bottom:60px}
		.page-section + .page-section {padding:60px 0}
}