.banner-list-layout {
  margin-top: 52px;
  padding: 40px 0px 40px 0px;
  display: flex;
  justify-content: center;
  position: relative;
  /* do not use scroll / mousewheel of owl carousel */
  overflow: hidden;
}

.banner-list {
  position: relative;
  display: flex;
  align-items: center;
}

.banner-item img {
  border-radius: 24px;
}


/* Controllers / Navigators for banner-list */


.banner-controllers-container {
  /* mirror of anner-list to aligned with position */
  position: absolute;
  top: 0px;
  padding: 40px 0px 40px 0px;
  height: 100%;
}


.banner-controllers {
  /*  63.15 = 1200/1920px */
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.banner-contrllers-btn {
  background: transparent;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  z-index: 100;
  cursor: pointer;

  & > svg {
    /* Why does container div insist on being slightly larger than IMG or SVG content? ref:https://stackoverflow.com/a/11126701 */
    display: block;
  }
}

@media only screen and (max-width: 768px) {
  .banner-contrllers-btn {
    & > svg {
      width: 48px;
      height: 48px;
    }
  }
}