*{
    margin: 0;
    padding: 0;
    font-family: 'Anuphan', sans-serif;
}

body{
    transition: 1s;
    width: 100%;
    overflow-y: visible;
    background-color: #fff;

}


:root{
    --or: #ff4500;
    --rd: #ff0000;
}

::selection{
    background: #000000;
    color: white
}

@keyframes grow-progress {
  from { transform: scaleX(0); background: linear-gradient(300deg,  blue, indigo, violet);}
  to { transform: scaleX(1); background: linear-gradient(300deg, red, orange, yellow, green, blue, indigo, violet);}
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; 
    height: .5em;
    border-radius: 10px;
  display: none;
  z-index: 100;
  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}
        .scroller {
  scroll-timeline-name: --my-scroller;
  scroll-timeline-axis: inline;
}

.scroller .subject {
  animation: animate-it linear;
  animation-timeline: --my-scroller;
}

p a {
  background:
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
      
    ),
    linear-gradient(
      to right,
      rgba(250, 0, 0, 1),
      rgba(250, 0, 0, 1)
  );
  background-size: 100% 3px, 0 3px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
}
p a:hover {
  background-size: 0 3px, 100% 3px;
}
        body{
            font-family: 'Kanit', sans-serif;
            max-height: 10rem;
        }
        .intropage2f{
          position:absolute;
          width:100%;
          min-height:100%;
          top:0;
          left:0;
          background-position: top left;
          background-size: 100% 100%;
  
/*           background-color: #ffac00 ; */
              background-image: url(https://img.freepik.com/premium-photo/flag-thailand-3d-illustration-thai-flag-waving_2227-1844.jpg);

  
        }
        .control-intropage2f{
          max-width:950px;
          margin:50px auto;
          width:80%;
        }
        .slideintro{
          padding: 0;
          margin: 0;
          list-style-type: none;
        }
        .slideintro img{ width: 50%;}
        .btn-intro{ text-align: center; margin: 50px 0;}
        .btn {
          display: inline-block;
          padding: 6px 12px;
          margin-bottom: 0;
          font-size: 23px;
          font-weight: 400;
          line-height: 23px;
          text-align: center;
          white-space: nowrap;
          vertical-align: middle;
          -ms-touch-action: manipulation;
          touch-action: manipulation;
          cursor: pointer;
          background-image: none;
          border: 1px solid transparent;
          border-radius: 4px;
          color: #ffac00;
          text-decoration: none;
          margin: 5px;
        }
        .btn-blue{background-color: #02449b;}
        .btn-grey{background-color: #444;}
        .btn-red{background-color: #fff;}
        .btn-blue:hover,.btn-grey:hover,.btn-red:hover{background-color: #222;}