*{
    padding:0;
}

.slider .slide{
    
    font-family: 'Arial';
    color: #fff;
    font-weight: bold;
    font-size: 1em;
    text-align: center;
    padding: 250px;
}
ul,li{list-style:none;
}

.slider{width:100%;
     height: 100%;
     overflow:hidden;
     z-index: 1;
    margin-top: -6%;
}


.slider ul{width:calc(100% * 3);
    display:flex;
    animation:slide 12s infinite;
} /* slide를 12초동안 진행하며 무한반복 함 */

.slider li{
    width:calc(100% * 3);
    height:50%;

    margin: 0 auto;
   }

.slider li:nth-child(1){background-image:url(/image/cuper_image/cuper_001.png);
                        background-size: cover; background-position: center;
                        width:100%;
                         }
.slider li:nth-child(2){background-image:url(/image/lanzam_image/lanzam_001.png);
                        background-size: cover; background-position: center;
                        width:100%;
                         }
.slider li:nth-child(3){background-image:url(/image/kocus_image/kocus_001.png);
                        background-size: cover; background-position: center;
                        width:100%;
                        }

@keyframes slide {
  0% {margin-left:0;} /* 0 ~ 10  : 정지 */
  10% {margin-left:0;} /* 10 ~ 25 : 변이 */
  25% {margin-left:-100%;} /* 25 ~ 35 : 정지 */
  35% {margin-left:-100%;} /* 35 ~ 50 : 변이 */
  50% {margin-left:-100%;}
  60% {margin-left:-200%;}
  75% {margin-left:-200%;}
  85% {margin-left:-200%;}
  100% {margin-left:0;}
}

@media screen and (max-width:640px) {
    

    .section .slider {
        width:100%;
        position: absolute;
        left:0;
        top:0;
 
        overflow: hidden;
     
    }
    .section .slider ul{
        max-width:100%;
        min-width: 50%;
    }
    .section .slider ul li{
        width:100%;
        height:250px;
    }
.slider .slide{
    width:100%;
    font-family: 'Arial';
    color: #fff;
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
    margin-left: -25%;
    margin-top: -120px;


    }
}
@media screen and (max-width:440px) {
    .slider{
        width:100%;
    }
    .slider ul {
        width:100%;
        height: 30%;
    }
    .slider .slide div{
        width:100%;
        text-align: center;
    }
}