#banner {margin:120px 0 130px 0; clear:both; overflow:hidden; }
#banner .head {width:100%; text-align:center;}
#banner .txt1{font-size:50px;font-family:'NanumSquareNeoHeavy'; }
#banner .txt2{font-size:20px; line-height:30px;  z-index: 1; padding:20px 0 35px 0; font-weight:500}
#banner .scroller {  max-width:calc(100% - 100px); margin:0 auto}
#banner .scroller__inner {  padding-block: 1rem;  display: flex;  flex-wrap: wrap;  gap: 1rem;}
#banner .scroller[data-animated="true"] {overflow: hidden; 
-webkit-mask: linear-gradient( 90deg, transparent, white 10%, white 90%, transparent  );
  mask: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);}
#banner .scroller[data-animated="true"] .scroller__inner { width: max-content; flex-wrap: nowrap;
  animation: scroll2 var(--_animation-duration, 40s)  var(--_animation-direction, forwards) linear infinite;}

#banner .scroller img {width:300px; height:auto}

#banner .scroller[data-direction="right"] {  --_animation-direction: reverse;}
#banner .scroller[data-direction="left"] {  --_animation-direction: forwards;}
#banner .scroller[data-speed="fast"] {  --_animation-duration: 20s;}
#banner .scroller[data-speed="slow"] {  --_animation-duration: 60s;}

/*ani stop*/
/*.scroller .scroller__inner:hover {  animation-play-state: paused;} */

@keyframes  scroll2 {
  to { transform: translate(calc(-50% - 0.5rem)); }
}

#banner .tag-list {  margin: 0;  padding-inline: 0;  list-style: none;}
#banner .tag-list li {  padding: 1rem;  background: var(--clr-primary-400);  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem -0.25rem var(--clr-primary-900);}
  
/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
#banner {margin:70px 0; }
#banner .scroller img {width:150px; height:auto}
#banner .head {width:100%; text-align:center;}
#banner .txt1{font-size:25px; }
#banner .txt2{font-size:14px; line-height:22px;  padding:10px 0 25px 0; }
#banner .scroller__inner {  padding-block: 0rem;  display: flex;  flex-wrap: wrap;  gap: 1rem;}
}
@media (max-width: 768px) {
}
@media (max-width: 640px) {
#banner .scroller {  max-width:calc(100% - 10px); margin:0 auto}	
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}