.main-container {padding:0 5%;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}.history-area{display:block;width:100%;max-width:850px;margin:0 auto;padding:0 0 7% 0;border-left:1px solid #e4e4e4;}.history-area ul{	display:block;width:100%;margin:0 0 0 40px;padding:0;list-style-type:none;}.history-area ul li{position:relative;display:block;margin:0;padding:20px;font-size:14px;color:#222222;list-style-type:none;border-top:1px solid #e8e8e8;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}.history-area ul li .ball{position:absolute;top:-10px;left:-20px;margin:0 0 0 -29px;width:10px;height:10px;border-radius:99px;border:4px solid #dddddd;	background-color:#ffffff;z-index:1;}.history-area ul li:nth-child(2n+1)	{ background-color:#f9f9f9; }.history-area ul li:nth-child(2n+1) .history-area-year,	.history-area ul li:nth-child(2n+1) .history-area-content{ position:relative; animation: list_right 1.2s;} @keyframes list_right{		0% { right:-80px;opacity: 0; }	100% { right:0px;opacity: 1;  }}	@-webkit-keyframes list_right{		0% { right:-80px;opacity: 0; }	100% { right:0px;opacity: 1;  }}	@-moz-keyframes list_right{		0% { right:-80px;opacity: 0; }	100% { right:0px;opacity: 1;  }}	@-o-keyframes list_right{		0% { right:-80px;opacity: 0; }	100% { right:0px;opacity: 1;  }}	.history-area ul li:nth-child(2n) .history-area-year,	.history-area ul li:nth-child(2n) .history-area-content{ position:relative; animation: list_left 1s;}@keyframes list_left{		0% { left:-50px;opacity: 0; }	100% { left:0px;opacity: 1;  }}	@-webkit-keyframes list_left{		0% { left:-50px;opacity: 0; }	100% { left:0px;opacity: 1;  }}	@-moz-keyframes list_left{		0% { left:-50px;opacity: 0; }	100% { left:0px;opacity: 1;  }}	@-o-keyframes list_left{		0% { left:-50px;opacity: 0; }	100% { left:0px;opacity: 1;  }}	.history-area-year{display:table-cell;padding:0 20px 0 0;font-size:21px;font-family: "Open Sans",Helvetica,Arial,sans-serif;font-weight:bold;vertical-align:top;}.history-area-content{display:table-cell;vertical-align: middle;}	h1{letter-spacing:2px;font-size:20px;font-weight:bold;margin:5% auto;color:#222222;text-align:center;}  @media screen and (max-width: 865px) {.history-area ul{margin:0;}.history-area ul li .ball{left:0;margin:0 0 0 -9px;}}	  @media screen and (max-width: 640px) {h1{letter-spacing:1px;font-size:16px;margin:20px 0;}}