/* Mobile Device */
/* 768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. 미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다.*/

/* 아이폰 SE */
.screen-blind {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
@media only screen and (min-device-width : 320px) and (max-device-width : 374px) {

}

/* 스마트폰 모바일(세로) */

@media only screen and (min-device-width : 375px) and (max-device-width : 479px) {

}

/*스마트폰 모바일(가로)*/

@media only screen and (min-device-width : 480px) and (max-device-width : 767px) {

}

/*태블릿, 아이패드 */

@media only screen and (min-device-width : 768px) and (max-device-width : 1023px) {

}

/* 아이패드 프로 */
@media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) {

}

/* Desktop Device */
@media all and (min-width:1500px) {
	.card_book_text{
	font-size: 13px !important;
	}
}

@media all and (min-width:1024px) and (max-width:1190px) {
	.card_book_text{
	font-size: 11px !important;
	}
}

@media all and (min-width:350px) and (max-width:399px) {
	.card_book_text{
	font-size: 11px !important;
	}
}
@media all and (min-width:400px) and (max-width:499px) {
	.card_book_text{
	font-size: 12px !important;
	}
}

@media all and (min-width:500px) and (max-width:700px) {
	.card_book_text{
	font-size: 13px !important;
	}
}

@media all and (min-width:701px) and (max-width:900px) {
	.card_book_text{
	font-size: 14px !important;
	}
}

@media all and (max-width:349px) {
	.card_book_text{
	font-size: 10px !important;
	}
}
@media all and (max-width:500px) {
	.card_book_text{
	font-size: 13px;
	}
.boxes img{
	height: 110px;
	width: 110px;
}
	.container ul.boxes{
    /*position: absolute;*/
    display: flex;
    /*gap: 0 20px;*/
    width: max-content;
    margin: 0px;
    padding: 0px;
    animation: aniScroll 38s linear infinite;
   
/* border-radius: 20px;;*/
   }
   .container ul.boxes  li{
      list-style: none;
      width:120px;
      height: 81px;
      line-height: 100px;
      text-align: center;
      color: #fff;
     
    }
    
	.card__name{
	    font-size: 0.7rem !important;
   		margin-top: 5px !important;
	}
	
	
	.card__image img{
	    width: 100%;
	    height: 100%;
/* 	    border-radius: 5px; */
	    /* object-fit: cover;*/

	}
	.card{
	   FONT-VARIANT: JIS83;
    background-color: #fff;
            border-radius: 10px;
    box-shadow: 0 0 0.5em rgba(0, 0, 0, .2);
    /* padding: 15px; */
    display: flex;
    /* align-items: center; */
    flex-direction: column;
    width: 42%;
    height: 90%;
    /* margin: 15px; */
    margin-left: 2.5%;
    margin-right: 2.5%;
	}
	.card_books{
		display:flex;
		margin-top:15px;
		justify-content: center;
		
	}
	.card__content{
	      display: block;
	    /* position: relative; */
	    margin: -5px 3px 12px 3px;
	    text-align: center;
	}
	.card__image{
	      width: 100%;
    height: 100%;
    /* border-radius: 50%; */
    /* border: 5px solid var(--color); */
    /* padding: 3px; */
    /* margin-top: 0.8rem; */
    /* padding-bottom: 0px; */
    text-align: center;
    /* margin-bottom: 0px;*/
	}
	.card__title{
	  font-size: 1rem;
    font-weight: 500;
    /* position: relative; */
    /* top: 0.2em; */
    text-align: center;
    margin-top: 0px;
    margin-bottom: 11px;
	}
	
	.container{
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 150px;
  overflow: hidden;
  background: #ffffff;
  
  
}
}

/* All Device */
/* 모든 해상도를 위한 공통 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨.*/

/* Tablet Device */
@media all and (min-width:500px) and (max-width:1023px) {
	
	.card_book_text{
	font-size: 11px;
	}
	/*  사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨. 아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다.*/
		.card__name{
	    font-size: 0.7rem !important;
   		margin-top: 5px !important;
	}
	.container ul.boxes  li{
      list-style: none;
      width:150px;
      height: 150px;
      line-height: 100px;
      text-align: center;
      color: #fff;
     
    }
    
	.container ul.boxes{
    /*position: absolute;*/
    display: flex;
    gap: 0 20px;
    width: max-content;
    margin: 0px;
    padding: 0px;
    animation: aniScroll 55s linear infinite;
   
/* border-radius: 20px;;*/
   }
		
	.card__image img{
	    width: 100%;
	    height: 100%;
/* 	    border-radius: 5px; */
	    /* object-fit: cover;*/

	}
	.card{
	      FONT-VARIANT: JIS83;
    background-color: #fff;
            border-radius: 10px;
    box-shadow: 0 0 0.5em rgba(0, 0, 0, .2);
    /* padding: 15px; */
    display: flex;
    /* align-items: center; */
    flex-direction: column;
   width: 45%;
    height: 90%;
    /* margin: 15px; */
    margin-left: 2%;
    margin-right: 2%;

	}
	.card_books{
		display:flex;
		margin-top:25px;
		justify-content: center;
	}
	.card__content{
	      display: b
	      3lock;
	    /* position: relative; */
	    margin: -5px 3px 12px 3px;
	    text-align: center;
	}
	.card__image{
	      width: 100%;
    height: 100%;
    /* border-radius: 50%; */
    /* border: 5px solid var(--color); */
    /* padding: 3px; */
    /* margin-top: 0.8rem; */
    /* padding-bottom: 0px; */
    text-align: center;
    /* margin-bottom: 0px;*/
	}
	.card__title{
	  font-size: 1rem;
    font-weight: 500;
    /* position: relative; */
    /* top: 0.2em; */
    text-align: center;
    margin-top: 0px;
    margin-bottom: 11px;
	}
	.card_book_title{
	word-break: break-all;
    padding-left: 10px;
    padding-right: 10px;
	}
	.container{
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 150px;
  overflow: hidden;
  background: #ffffff;
  margin-top: 40px;
  
}

.boxes img{
	height: 150px;
	width: 150px;
}
}

/* Desktop Device */
@media all and (min-width:1024px) {
	
	.card_book_text{
	font-size: 11.5px;
	}
.boxes img{
	height: 150px;
	width: 150px;
}
		/*  사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨. 아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다.*/
		.card__name{
	    font-size: 0.7rem !important;
   		margin-top: 5px !important;
	}
		.container ul.boxes  li{
      list-style: none;
      width:150px;
      height: 150px;
      line-height: 100px;
      text-align: center;
      color: #fff;
     
    }
	.container ul.boxes{
    /*position: absolute;*/
    display: flex;
    gap: 0 20px;
    width: max-content;
    margin: 0px;
    padding: 0px;
    animation: aniScroll 150s linear infinite;
   
/* border-radius: 20px;;*/
   }
		
	.card__image img{
	    width: 100%;
	    height: 100%;
/* 	    border-radius: 5px; */
	    /* object-fit: cover;*/

	}
	.card{
	      FONT-VARIANT: JIS83;
    background-color: #fff;
            border-radius: 10px;
    box-shadow: 0 0 0.5em rgba(0, 0, 0, .2);
    /* padding: 15px; */
    display: flex;
    /* align-items: center; */
    flex-direction: column;
   width: 45%;
    height: 90%;
    /* margin: 15px; */
    margin-left: 2%;
    margin-right: 2%;

	}
	.card_books{
		display:flex;
		margin-top:15px;
		justify-content: center;
	}
	.card__content{
	      display: b
	      3lock;
	    /* position: relative; */
	    margin: -5px 3px 12px 3px;
	    text-align: center;
	}
	.card__image{
	      width: 100%;
    height: 100%;
    /* border-radius: 50%; */
    /* border: 5px solid var(--color); */
    /* padding: 3px; */
    /* margin-top: 0.8rem; */
    /* padding-bottom: 0px; */
    text-align: center;
    /* margin-bottom: 0px;*/
	}
	.card__title{
	  font-size: 1rem;
    font-weight: 500;
    /* position: relative; */
    /* top: 0.2em; */
    text-align: center;
    margin-top: 0px;
    margin-bottom: 11px;
	}
	.card_book_title{
	word-break: break-all;
    padding-left: 10px;
    padding-right: 10px;
	}
	.container{
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 150px;
  overflow: hidden;
  background: #ffffff;
  margin-top: 40px;
  
}
	
}

 .swiper {
   width: 100%;
   height: 100%;
 }

 .swiper-slide {
   text-align: center;
   font-size: 18px;
   background: #fff;

   /* Center slide text vertically */
   display: -webkit-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: block;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   align-items: center;
 }

 .swiper-slide img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
 
 .slider {
  position: relative;
  overflow: hidden;
  margin-bottom:10px;
  width: 600px;
  height: 400px;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  margin-right:10px;
  height: 100%;
  background-size: cover;
  background-position: center;

  animation: slider 6s infinite linear;
}

.slide:nth-child(1) {
  background-image: url(img1.jpg);
  animation-delay: 0;
}
.slide:nth-child(2) {
  background-image: url(img2.jpg);
  animation-delay: -2s;
}
.slide:nth-child(3) {
  background-image: url(img3.jpg);
  animation-delay: -4s;
}

.card_book_text{
    margin: auto;
    font-weight: bold;
    height: 60px;
    /* width: 100%; */
    display: flex;
    /* vertical-align: middle; */
    text-align: center;
    /* position: relative; */
    align-items: center;
    padding: 5px;
}

@keyframes slider {
  0% {
    transform: translateX(0);
  }

  26% {
    transform: translateX(0);
  }
  33% {
    transform: translateX(-100%);
    animation-timing-function: step-end;
  }
  93% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0);
  }
}




.slider2{

  margin: auto;
  position:relative;
  width: 120%;
  display:grid;
  place-items:center;
  overflow:hidden;
  left:-10%;
  margin-top: 40px;
}

.slider2 .slide-track{
  display:flex;
  width: calc(300px * 6);
  animation: scroll1 15s linear infinite;
  

}
.slider-branding{
    animation: scroll2 15s linear infinite;
  }

.slider2 .slide-track:hover{
  animation-play-state:paused;
}

@keyframes scroll1{
   0% {
      transform: translate(0, 0);
  }
  100% {
      transform: translate(-80%, 0);
  }
}


.slider2 .slide{
  height: 250px;
  width: 300px;
  display: flex;
  align-items:center;
  padding: 15px;
  perspective:100px;
}

.slider2 .train-card{
  margin-right:10px;
  transition:transform 1s;
  border-radius:10px;
  overflow:hidden;
    width:150px;
   
}
.slider2  .train-card img{
	height:150px;
    width: 150px
	}
.slider2 .train-card:hover{
  transform:translateZ(18px);
}

/* 슬라이더 그라데이션 그림자 */

.slider2::before,
.slider2::after {
  background:linear-gradient(to right, #f6f4f2 0%,
  rgba(255,255,255,0) 100%);
  content:'';
  height:100%;
  position:absolute;
  width:15%;
  z-index:2;
}

.slider2::before{
  left:0;
  top:0;
}

.slider2::after{
  right:0;
  top:0;
  transform: rotateZ(180deg);
}



  
    

   

    
.list2{
        
/* animation: aniScroll-2 15s linear infinite;*/
    }
@keyframes aniScroll{
  0%{ transform: translateX(0%) }
  100%{ transform: translateX(-100%) }
}

@keyframes aniScroll-2{
  0%{ transform: translateX(60%) }
  100%{ transform: translateX(0%) }
}