#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:55px; 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: 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
#banner .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);}

/*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;  }
.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 .logo .logo2 {display:block !important;}
.fp-viewing-slide5 #fp-nav ul li a span,.fp-viewing-slide5 .fp-slidesNav ul li a span {background:rgba(0,0,0,0.8)}
.fp-viewing-slide5 #fp-nav ul li::after {background:rgba(0,0,0,0.1)}
.fp-viewing-slide5 div.circul text {fill:#222;} 
.fp-viewing-slide5 div.modal:after {background: url(../../modal/img/ico2_b.png) no-repeat center;
    background-size: 40px;   opacity: 0.3;}

/*---------------------------------------
  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) {
}