<style type="text/css">
    html, body {
  overflow-x: hidden;
        max-width: 100%;
}


.page{
  width: 100%;
  overflow-x: hidden;
  position: relative;
}

.redbotten,
.orange,
.bluee {
  max-width: 100%;
}

 .overflow-wrap {
  position: relative;
  overflow: hidden;
}

    html{
      font-family: "Noto Serif KR", serif;
      font-weight: 600;
      font-size: 30px;
      line-height: 1.6;
      word-break: keep-all;
    }

    img {border-radius: 20px}
    body, h1, h2, h3, p, ol, ul{margin:0; padding:0}
    section{background: blue; padding: 100px 0px}

   
    h2{
      margin: 50px 0px 20px;
      font-size: 3.0rem;
      line-height: 1.5;
      

  font-family: "Teko", sans-serif;
  font-weight: 700;
  letter-spacing: 1px;  
  text-transform: uppercase;
} 



   


    p{margin: 10px 0px}
    .left-spacing{padding-left: 200px;}
    .right-spacing{padding-right:200px;}

    .wrap{width: 1100px; margin:auto; position: relative;}

    .bg-darkred{background: darkred;}
    .softred {
  color: #E85C5C;
  font-weight: 700;
}
.brightred {
  color: #D62828;
  font-weight: 700;
}

    .bg-warn{
      background: url("./img/warn.jpg");
      background-attachment: fixed;
      background-size: cover;
    }

    /* 도로 */
    .bg-road{
      background-color: #000;   
      background-image:
        radial-gradient(ellipse at center,
          rgba(255,255,255,0.08) 0,
          rgba(255,255,255,0.02) 35%,
          rgba(0,0,0,1) 70%),       
        repeating-linear-gradient(
          to bottom,
          transparent 0px,
          transparent 90px,
          rgba(255,255,255,0.95) 90px,    
          rgba(255,255,255,0.95) 180px,
          transparent 180px,
          transparent 200px
        ),
        linear-gradient(to bottom, #ff3333 0%, #ff3333 100%),          linear-gradient(to bottom, #ff3333 0%, #ff3333 100%);  
      background-size:
        100% 100%,  
        6px 200px,   
        4px 100%,   
        4px 100%;    
      background-repeat:
        no-repeat,
        repeat-y,
        no-repeat,
        no-repeat;
      background-position:
        center center,
        center 0,
        20% 0,      
        80% 0;     
      background-attachment: fixed;
      animation: roadStripe 0.3s linear infinite;
    }

    @keyframes roadStripe {
      0% {
        background-position: center center, center 0, 20% 0, 80% 0;
      }
      100% {
        background-position: center center, center 200px, 20% 0, 80% 0;
      }
    }
    /*----------------------------*/

    .bg-dot{
      background: url("./img/dot.jpg");
      background-attachment: fixed;
      background-size: cover;
    }
    .bg-fast{
      background: url("./img/fast.gif");
      background-attachment: fixed;
      background-size: cover;
      border: 4px dashed darkred;
      padding: 40px;
      box-sizing: border-box;
    }
    .bg-white2{
      background: url("./img/white.gif");
      background-attachment: fixed;
      background-size: cover;
    }

    .bg-redred{
      background: url("./img/redred.gif");
      background-attachment: fixed;
      background-size: cover;
    }
    .bg-ooo{
      background: url("./img/ooo.gif");
      background-attachment: fixed;
      background-size: cover;
    }
    .bg-dia{
      background: url("./img/dia.jpg");
      background-attachment: fixed;
      background-size: cover;
    }
    .bg-whiteblack{
      background: url("./img/whiteblack.jpg");
      background-attachment: fixed;
      background-size: cover;
    }
    .bg-two{
      background: url("./img/two.gif");
      background-attachment: fixed;
      background-size: cover;
    }
    .bg-earth{
      background: url("./img/earth.gif");
      background-attachment: fixed;
      background-size: 500px;
    }
    .bg-weel{
      background: url("./img/weel.gif");
      background-attachment: fixed;
      background-size: 500px;
      border: 4px dashed darkred;
      padding: 40px;
      box-sizing: border-box;
      background-color: darkred;      
  background-blend-mode: multiply;
    }
    .bg-ready{
      background: url("./img/ready.gif");
      background-attachment: fixed;
      background-size: cover;
    }
    .bg-car{
      background: url("./img/car.gif");
      background-attachment: fixed;
      background-size: cover;
    }
    .bg-car2{
      background: url("./img/car2.gif");
      background-attachment: fixed;
      background-size: 500px;
    }
    .bg-cool{
      background: url("./img/cool.gif");
      background-attachment: fixed;
      background-size: 400px;
    }
    .bg-boom{
      background: url("./img/boom.gif");
      background-attachment: fixed;
      background-size: 1000px;
    }
    .bg-black2{
      background: url("./img/black.gif");
      background-attachment: fixed;
      background-size: 300px;
    }
    .bg-white{background: white;border: 6px dotted black;}
    .bg-black{background: black;border: 6px dotted black; }
    .bg-red{background: darkred;border: 6px ; }
    .white{color: white;}
    .darkred{color: darkred;}

    .img-large{ width: 90%;  margin: 0 auto;display: block;}
    .img-medium{width: 60%;margin: 0 auto;display: block;}
    .img-small{width: 40%;margin: 0 auto;display: block;}

    .gif-area{
      position: relative;
      width: 100%;
      height: 400px;
    }

    body {
      background: #000;      
      background-size: cover;
      background-attachment: fixed;
      margin: 0;
     
      user-select: none;
    }

    img{width: 100%}
    .flex{display: flex; justify-content: space-between;}
    ul,il{list-style: none;}
    ul li a{
      text-decoration: none;
      display: block;
      padding: 8px 12px;
      color:white;
    }
    ul li a:hover{
      background: white;
      color: black;
      transition: all 1s;
    }
    .logo{position: relative;}
    .logo h1{
      color: white;
      font-size: 1rem;
      padding: 8px 12px;
      cursor: pointer;
    }
    .bg-header{
      background: url("./img/helmet.jpg")
      background-size: cover;
      background-position: center;
    }


    header{padding: 350px 0px;
      position:relative;}
    header {
      border-top: 4px dotted white;
      border-bottom: 4px dotted white;
    }

    header h1{
      font-size: 2.5rem;
      color: white;
      text-shadow: 0px 0px 4px white;
      animation: glow 4s infinite alternate cubic-bezier(0, 0.76, 0.16, 1);
      position: relative; left: 0px; top: -188px
    }
    header p{
      font-size: 1rem;
      color: white;
      text-shadow: 0px 0px 4px white;
      animation: glow 4s infinite alternate cubic-bezier(0, 0.76, 0.16, 1);
    }

    @keyframes glow{
      from{text-shadow: 0px 0px 0px white;}
      to{text-shadow: 0px 0px 13px white;}
    }

    .big{
      font-size: 15rem;
      color: white;
      position: absolute;
      left: 0px; top: 0px
    }

    .container {position: relative;width: 50%;}
    .center-text {text-align: center;}

    .image {display: block;width: 100%;height: auto;}

    .overlay {
      position: absolute; top: 0;bottom: 0;left: 0;right: 0;
      height: 100%;width: 100%;
      opacity: 0;
      transition: .5s ease;
      background-color: #000;
    }

    .container:hover .overlay { opacity: 1; }

    .text {
      color: darkred;
      font-size: 50px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
    }

    .ani {
      width: 350px;
      height: 70px;
      position: relative;
      animation-name: myAnimation;
      animation-duration: 3s;
      animation-fill-mode: forwards;
      animation-direction: alternate;
      animation-iteration-count: infinite;
    }

    img{border-radius: 0px}

    #img1 { animation-timing-function: linear;   animation-delay: 0s; }
    #img2 { animation-timing-function: ease;     animation-delay: 0.4s; }
    #img3 { animation-timing-function: ease-in;  animation-delay: 0.8s; }
    #img4 { animation-timing-function: ease-out; animation-delay: 1.2s; }

    @keyframes myAnimation {
      from { left: -500px; }
      to { left: 500px; }
    }

    .ani-img {
      width: 400px;
      height: 80px;
      position: relative;
      background-size: cover;
      background-position: center;
      animation: moveChange 2s infinite linear;
    }

    @keyframes moveChange {
      0% {
        left: -1000px; top: 10px;
        background-image: url('./img/orange.png');
      }
      25% {
        left: 2000px; top: 10px;
        background-image: url('./img/orange.png');
      }
      50% {
        left: 2000px; top: 500px;
        background-image: url('./img/orange.png');
      }
      75% {
        left: -1000px; top: 500px;
        background-image: url('./img/orange.png');
      }
      100% {
        left: -1000px; top: 10px;
        background-image: url('./img/orange.png');
      }
    }

    .fade-img { opacity: 0.3; }
    .section-line { border-bottom: 6px solid darkred; }

    /* 포지션 이미지 */
    .reed{
      position: relative;
      top: 180px;
      left: 20px;
      width: 1000px;
      height: 180px;
      z-index: 999;
    }


  
.reed-move{
  animation: moveOffscreenBounce 1.5s linear infinite;
}

@keyframes moveOffscreenBounce { 0% { transform: translateX(0); } 20% { transform: translateX(120vw); } 70% { transform: translateX(-120vw); } 100% { transform: translateX(0); } }







    .redbotten{
      position: absolute;
      top: 1730px;
      left: 0px;
      width: 2110px;
      height: 400px;
      z-index: 999;
    }

    .dotflag{
      position: absolute;
      top: 2550px;
      left: 300px;
      width: 800px;
      z-index: 999;
    }

    .dotflag2{
      position: absolute;
      top: 3850px;
      left: 900px;
      width: 930px;
      z-index: 999;
    }


    .orange{
      position: absolute;
      top: 2500px;
      left: 200px;
      width: 1100px;
      z-index: 999;
    }




    .bluee{
      position: absolute;
      top: 3850px;
      left: 700px;
      width: 900px;
      z-index: 999;
    }


    @keyframes moveOffscreenLR {
  0% {
    transform: translateX(-120vw);    
  }
  30% {
    transform: translateX(120vw); 
  }
  70% {
    transform: translateX(-120vw);   
  }
  100% {
    transform: translateX(0);        
  }
}


@keyframes moveOffscreenRL {
  0% {
    transform: translateX(120vw);     
  }
  30% {
    transform: translateX(-120vw);    
  }
  70% {
    transform: translateX(120vw);   
  }
  100% {
    transform: translateX(0);        
  }
}
.orange-move{
  animation: moveOffscreenLR 100s;
  animation-timing-function: linear;

  animation-timeline: view();
  animation-range: entry 0% exit 300%;
   animation-duration: 100s
}

.bluee-move{
  animation: moveOffscreenRL 100s ;
  animation-timing-function: linear;

  animation-timeline: view();
  animation-range: entry 0% exit 300%;
   animation-duration: 100s
}






/*-----------------------------------------------*/

    .redwheel {
  position: absolute;
  width: 150px;

  animation: spin 0.2s linear infinite,
             moveWheel 4s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


@keyframes moveWheel {
  0%   { left: -200px; top: 1000px; }
  50%  { left: 1600px; top: 1000px; }  
  100% { left: -200px; top: 1000px; }  
}

    .redwheel2 {
      position: absolute;
      width: 150px;
      animation: spin 0.2s linear infinite,
                 moveWheel2 4s linear infinite;
    }

    @keyframes moveWheel2 {
      0%   { left: -200px; top: 530px; }
      50%  { left: 1600px; top: 530px; }
      100% { left: -200px; top: 530px; }
    }

    /* 스크롤 */

    .scroll-text{
      animation-name: foldText;
      animation-duration: 1s;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }

    @keyframes foldText {
      0%{
        opacity: 0;
        transform: translateY(40px);
        letter-spacing: -0.08em;
        line-height: 0.8;
        filter: blur(4px);
      }
      100%{
        opacity: 1;
        transform: translateY(0);
        letter-spacing: 0;
        line-height: 1.6;
        filter: blur(0);
      }
    }


footer .wrap {
  width: 800px;        
  margin: 0 auto;
  padding: 5px 0;
  text-align: center;
}

footer h2 {
  margin: 20px 0 10px; 
  line-height: 1.2;
}

footer h3 {
  margin: 10px 0;
  line-height: 1.3;    
}

footer p {
  margin: 5px 0 20px;
  line-height: 1.3;    
  font-size: 0.9rem;   
}

.f1title {
  position: absolute;
  top: 250px;
  left: 29%;
  transform: translateX(-50%);
  z-index: 10;
}



</style>






