.banner-container{
  width:100%;
  overflow:hidden;
}
.banner{
  width:calc(100%*3);
  /*height:100%;*/
  /*min-height: 350px;*/
  height: auto;
  display:flex;
  animation: animation1 10s infinite;
  /*기본 전환 animation을 위한 설정*/
  -webkit-transition: all 1s cubic-bezier(1, .01, .32, 1);
  -moz-transition: all 1s cubic-bezier(1, .01, .32, 1);
  -o-transition: all 1s cubic-bezier(1, .01, .32, 1);
  -ms-transition: all 1s cubic-bezier(1, .01, .32, 1);
  transition: all 1s cubic-bezier(1, .01, .32, 1);
}
.banner>div{
  width:calc(100%/3);
  height:100%;
}
.banner>div>img{
  width:100%;
}
.banner>div:nth-child(1){
  background-color:#2E4559;
}
.banner>div:nth-child(2){
  background-color:#4A6D8C;
}
.banner>div:nth-child(3){
  background-color:#6A8AA6;
}
/*.banner>div:nth-child(4){
  background-color:#A9C6D9;
}*/
.list-button{
  width:100%;
  height:10px;
  display:flex;
  justify-content:center;
  margin-top:-30px;
  position:absolute;
  z-index:2;
}
.list-button-item{
  width:10px;
  height:10px;
  border-radius:5rem;
  background-color:black;
  cursor: pointer;
  display: inline-block;
  margin:6px;
}
.list-button-item.active{
  background-color:white;
}
/*@keyframes animation1 {
  0% {margin-left: 0}
  20% {margin-left: 0}
  25% {margin-left: 0}
  45% {margin-left: 0}
  50% {margin-left: -100%}
  70% {margin-left: -100%}
  75% {margin-left: -100%}
  95% {margin-left: -100%}
  100% {margin-left: 0}
}
@keyframes animation2 {
  0% {margin-left: -100%}
  20% {margin-left: -100%}
  25% {margin-left: -100%}
  45% {margin-left: -100%}
  50% {margin-left: 0}
  70% {margin-left: 0}
  75% {margin-left: 0}
  95% {margin-left: 0}
  100% {margin-left: -100%}
}*/
@keyframes animation1 {
  0% {margin-left: 0}
  27.3% {margin-left: 0}
  32.3% {margin-left: -100%}
  53.3% {margin-left: -100%}
  61.6% {margin-left: -100%}
  64.6% {margin-left: -200%}
  86.6% {margin-left: -200%}
  96.9% {margin-left: -200%}
  100% {margin-left: 0}
}
@keyframes animation2 {
  0% {margin-left: -100%}
  27.3% {margin-left: -100%}
  32.3% {margin-left: -200%}
  53.3% {margin-left: -200%}
  61.6% {margin-left: -200%}
  64.6% {margin-left: 0}
  86.6% {margin-left: 0}
  96.9% {margin-left: 0}
  100% {margin-left: -100%}
}
@keyframes animation3 {
  0% {margin-left: -200%}
  27.3% {margin-left: -200%}
  32.3% {margin-left: 0}
  53.3% {margin-left: 0}
  61.6% {margin-left: 0}
  64.6% {margin-left: -100%}
  86.6% {margin-left: -100%}
  96.9% {margin-left: -100%}
  100% {margin-left: -200%}
}
/*@keyframes animation1 {
  0% {margin-left: 0}
  20% {margin-left: 0}
  25% {margin-left: -100%}
  45% {margin-left: -100%}
  50% {margin-left: -200%}
  70% {margin-left: -200%}
  75% {margin-left: -300%}
  95% {margin-left: -300%}
  100% {margin-left: 0}
}
@keyframes animation2 {
  0% {margin-left: -100%}
  20% {margin-left: -100%}
  25% {margin-left: -200%}
  45% {margin-left: -200%}
  50% {margin-left: -300%}
  70% {margin-left: -300%}
  75% {margin-left: 0}
  95% {margin-left: 0}
  100% {margin-left: -100%}
}
@keyframes animation3 {
  0% {margin-left: -200%}
  20% {margin-left: -200%}
  25% {margin-left: -300%}
  45% {margin-left: -300%}
  50% {margin-left: 0}
  70% {margin-left: 0}
  75% {margin-left: -100%}
  95% {margin-left: -100%}
  100% {margin-left: -200%}
}
@keyframes animation4 {
  0% {margin-left: -300%}
  20% {margin-left: -300%}
  25% {margin-left: 0}
  45% {margin-left: 0}
  50% {margin-left: -100%}
  70% {margin-left: -100%}
  75% {margin-left: -200%}
  95% {margin-left: -200%}
  100% {margin-left: -300%}
}*/

.banner_text_l {
	position: absolute;
    top: 70px;
    left: 80px;
}

.banner_text_r {
	position: absolute;
    top: 70px;
    left: 800px;
}

.banner_text1 {
	font-size: 24px;
	font-family: sans-serif;
}
.banner_text2 {
	font-size: 30px;
}
.banner_text3 {
	margin-top: 42px;
	font-size: 60px;
	font-weight: 800;
	line-height: 1.1;
	background: linear-gradient(110deg,#ffcb51 0%,#815516 20%,#ffcb51 54.7%,#c98217 107.96%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 1px #322213;
}

@media (max-width:599.95px) {
	.banner {
	}
	.banner_text_l {
		position: absolute;
		top: 30px;
		left: 20px;
	}
	.banner_text_r {
		position: absolute;
		top: 30px;
		left: 20px;
	}
	.banner>div:nth-child(1){
		background-color:#2E4559;
	}
	.banner>div:nth-child(2){
		background-color:#4A6D8C;
	}
	.banner>div:nth-child(3){
		background-color:#6A8AA6;
	}
	.banner_text1 {
		font-size: 12px;
		font-family: sans-serif;
	}
	.banner_text2 {
		font-size: 18px;
	}
	.banner_text3 {
		margin-top: 6px;
		font-size: 24px;
	}
}


@media (max-width:1023px) {
	.banner_text_l {
		position: absolute;
		top: 30px;
		left: 20px;
	}
	.banner_text_r {
		position: absolute;
		top: 30px;
		left: 20px;
	}
}