/*
##Device = Desktops
##Screen = B/w 1000px to 1281px
##Device = 데스크탑, 랩탑
##Screen = 1000px에서 1281px 사이 해상도 데스크탑
*/

@media (max-width: 1239px)  {
  .mo-dn-w1239 {
    display: none;
  }


  #header {
    width: 100%;
    padding: 20px 0;
  }

  #header > .container.flex {
    width: calc(100% - 32px);
  }

  .container {
    width: 100%;
  }

  #header .container.flex {
    justify-content: space-between;
  }
 
  #header .logo-area {
    margin-right: 0;
  }

  #header .search-bar {
    margin-right: 0;
  } 

  #header .search-bar {
    width: 30vw;
  }

  #header .search-bar > input {
    width: 23vw;
  }

  .mainSlide {
    height: 68vh;
  }

  .mainSlide .swiper-slide .title {
    width: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }

  .mainSlide .swiper-slide .title h3 {
    color: #FFF;
    text-align: center;
    font-family: DIN 2014;
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }

  .mainSlide .swiper-slide .title p {
    margin: 0 auto;
    color: #FFF;
    text-align: center;
    font-family: Noto Sans KR;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .rotate-img {
    top: 59vh;
    right: -72px;
  }

  .best-seller {
    width: calc(100% - 16px);
    margin-left: 16px;
  }

  .best-seller .swiper-button-prev {
    left: -16px;
  }

  .best-seller .swiper-button-next  {
    right: -16px;
  }

  footer > div {
    width: calc(100% - 48px) !important;
  }

  footer > div .footer-info {
      width: 248px;
      flex-wrap: wrap;
      justify-content: end;
  }

}

@media (max-width: 1000px) {
  .best-seller .swiper-button-prev {
    top: 38%;
    left: -16px;
  }

  .best-seller .swiper-button-next {
    top: 38%;
    right: -16px;
  }
}