@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
body {
  padding: 20px;
  font-family: "Noto Sans KR", Helvetica, sans-serif;
}
h1 {
  font-size: 22px;
  font-weight: 600;
  color: #643BFF;
  margin-bottom: 20px;
}
.container {
  width: 550px;
  height: 180px;
  background: #643BFF;
  margin-bottom: 10px;
  display: flex;
}
.item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  color: #fff;
  height: 150px;
  flex-basis: 120px;
}
.item:nth-child(1) { background: #FFC447; }
.item:nth-child(2) { background: #E87635; }
.item:nth-child(3) { background: #FF4847; }
.item:nth-child(4) { background: #D335E8; }

.container2 .item:nth-child(1) { flex-shrink: 1; }
.container2 .item:nth-child(2) { flex-shrink: 2; }
.container2 .item:nth-child(3) { flex-shrink: 0; }
.container2 .item:nth-child(4) { flex-shrink: 0; }

.container3 .item:nth-child(1) { flex-shrink: 1; }
.container3 .item:nth-child(2) { flex-shrink: 4; }
.container3 .item:nth-child(3) { flex-shrink: 1; }
.container3 .item:nth-child(4) { flex-shrink: 1; }

TweenMax.to('.container', 8, {
  width: 200,
  repeat: -1,
  repeatDelay: 2,
  yoyo: true,
  ease: Power0.easeNone
});