#banner {margin:0 0 20px 0; clear:both; overflow:hidden; }

#banner .head {margin-bottom:50px; color:#333; text-align:center}
#banner .head h3{font-size:65px; font-weight:600;    /*text-transform: uppercase;*/}
#banner .head .txt {font-size:20px;  padding-top:10px}

#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: scroll 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*/
#banner .scroller .scroller__inner:hover {  animation-play-state: paused;} 

@keyframes scroll {
  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);}

/*slide backgrkound - white*/
.fp-viewing-slide5 .gnb a, .fp-viewing-slide5 .gnb:hover .depth1 a,
.fp-viewing-slide5 .gnb .menu:hover .depth1 a{display:block;   color:#333 !important;  }
.fp-viewing-slide5 .gnb .menu:hover .depth1:before{ background-color:#333; color: #fff;  }
.fp-viewing-slide5 .logo .logo1 {display:none !important}
.fp-viewing-slide5 .logo .logo2 {display:block !important;}
.fp-viewing-slide5 #nav-icon1 span {background:#333;}
.fp-viewing-slide5 .mtit h3, 
.fp-viewing-slide5 .mtit p {color:#333 !important;}  
.fp-viewing-slide5 .logo .logo1 {display:none !important}
.fp-viewing-slide5 #header > div.select_wrap > div > a:nth-child(1)::after,
.fp-viewing-slide5 #header > div.select_wrap > div > a:nth-child(2)::after {color: #000;}
  
/*---------------------------------------
  MOBILE RESPONSIVE               
-----------------------------------------*/
@media (max-width: 1023px) {
#banner  .head {margin-bottom:30px}
#banner  .head h3{font-size:35px; font-weight:600;  }
#banner  .head .txt {font-size:14px;  padding-top:10px}	
#banner .scroller img {width:150px; height:auto}
#banner {margin:0 0 50px 0; }
#banner .scroller__inner {  padding-block: .5rem;  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) {
}