@import url('./header.css');
@import url('./main.css');
@import url('./footer.css');
@import url('./product.css');

/* swiper */
@import url('https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css');
/* font  */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css");

/* 초기화 */

*{
   margin: 0;   
   padding: 0;
   box-sizing: border-box;
   text-decoration: none;
   list-style: none;
   line-height: 1.5;
}
html, body{
   color: #333;
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
*:focus{
   outline: none;
}
a{
   color: #333;
}
table{
   border-spacing: 0;
   border-collapse: collapse;
}
img{
   max-width: 100%;
   vertical-align: bottom;
}
th, td{
   font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
p{
   word-break: break-all;
   word-break: keep-all;
   
}
/* class */
.flex{
   display: flex;
}
.mobile{
   display: none;
}
.inner{
   width: calc(100% - 1.875rem);
   max-width: 87.5rem;
   margin: 0 auto;
}
.main-title{
   font-size: 3rem;
   font-weight: 400;
}
.main-title strong{
   color: #c9821a;
}

/* animation */
.fade{
   opacity: 0;
}
.fade.active{
   animation: fade 0.7s .1s ease-out forwards;
}
.fade-up {
   opacity: 0;
}
.fade-up.active {
   animation: fadeUp 0.7s .1s ease-out forwards;
}
.fade-left {
   opacity: 0;
}
.fade-left.active {
   animation: fadeleft 0.7s .1s ease-out forwards;
}
.fade-right {
   opacity: 0;
}
.fade-right.active {
   animation: fadeRight 0.7s .1s ease-out forwards;
}
.delay1 {
   animation-delay: 0.5s !important;
}
.delay2 {
   animation-delay: 0.6s !important;
}
.delay3 {
   animation-delay: 0.7s !important;
}
.delay4 {
   animation-delay: 0.8s !important;
}

@keyframes fade {
   0% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}
@keyframes fadeUp {
   0% {
      opacity: 0;
      transform: translatey(3.75rem);
   }
   100% {
      opacity: 1;
      transform: translatey(0);
   }
}
@keyframes fadeleft {
   0% {
      opacity: 0;
      transform: translatex(-6.25rem);
   }
   100% {
      opacity: 1;
      transform: translatex(0);
   }
}
@keyframes fadeRight {
   0% {
      opacity: 0;
      transform: translatex(6.25rem);
   }
   100% {
      opacity: 1;
      transform: translatex(0);
   }
}
@keyframes slideFadeUp {
   0% {
      opacity: 0;
      transform: translatey(1rem);
   }
   100% {
      opacity: 1;
      transform: translatey(0);
   }
}
@keyframes slideFadeDown {
   0% {
      opacity: 1;
      transform: translatey(0);
   }
   100% {
      opacity: 0;
      transform: translatey(-1rem);
   }
}

@media (max-width:1024px){
   .pc{
      display: none;
   }
   .mobile{
      display: block;
   }
   html, body{
      font-size: 87.5%;
   }
   .inner{
      max-width: 42.8571rem;
      width: calc(100% - 2.1429rem);
   }
   .main-title{
      font-size: 2.2857rem;
   }
   @keyframes fadeUp {
      0% {
         opacity: 0;
         transform: translatey(2.1429rem);
      }
      100% {
         opacity: 1;
         transform: translatey(0);
      }
   }
   @keyframes fadeleft {
      0% {
         opacity: 0;
         transform: translatex(-1.0714rem);
      }
      100% {
         opacity: 1;
         transform: translatex(0);
      }
   }
   @keyframes fadeRight {
      0% {
         opacity: 0;
         transform: translatex(1.0714rem);
      }
      100% {
         opacity: 1;
         transform: translatex(0);
      }
   }
}