/** Shopify CDN: Minification failed

Line 309:22 Unexpected "{"

**/
/* main_page.css */

.hidden-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); /* 구형 브라우저 호환 */
  clip-path: inset(50%);
  white-space: nowrap;
}

.section-wrap {
  
}

.section01, .section02, .section03, .section04, .section05, .section06, .section07 , .section08 , .section09 , .section10 , .section11 {
  padding: 0;
}

/* section01 */
.section01 .intro { 
  position: relative; 
  padding: 0; 
  overflow: hidden; 
}

.section01 .introSlider { 
  display: flex; 
  width: 100%; 
  height: 60vh; 
  padding: 0; 
  transition: transform 0.5s ease; 
}

.section01 .introSlider .inSlide { 
  position: relative; 
  width: 100%; 
  flex-shrink: 0; 
}

.section01 .introSlider .inSlide img { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

.section01 .intro .progress-container {     
  width: 100%;
  height: 30px;
  display: flex;
  position: absolute;
  top: 55vh;
  align-items: center;
  justify-content: center;
}

.section01 .intro .progress-bar { 
  position: absolute; 
  left: 50%; 
  transform: translate(-50%); 
  width: 35%; 
  height: 3px; 
  background-color: #929292; 
}

.section01 .intro .progress-bar .progress { 
  display: block; 
  height: 100%; 
  background-color: #000; 
  width: 0%; 
  transition: width 5s linear; 
}

.section01 .intro .progress-no {
  position: absolute;
  display: flex;
  justify-content: space-between;
  width: 50%;
  height: 30px;
  color: #000;
}

.section01 .intro .progress-btn { 
  position: absolute; 
  display: flex; 
  left: 77%; 
  align-items: center;
  width: 16px; 
  height: 16px; 
  color: #fff;
  background: url(/cdn/shop/files/pause.png) no-repeat center; 
  background-size: cover; 
  border: none; 
}

.section01 .intro .progress-btn.play { 
  background-image: url(/cdn/shop/files/play.png); 
}

.section01 .intro .inContent { 
  position: absolute; 
  top: 70px; 
  right: 20px; 
  width: 100%; 
}

.section01 .intro .inContent h2 { 
  font-size: 32px; 
  font-weight: 200; 
  text-align: right; 
  line-height: 38px; 
  margin-bottom: 10px; 
  color: #282828; 
}

.section01 .intro .inContent p { 
  margin-top: 5px; 
  font-size: clamp(14px, 4.5vw, 20px); 
  font-weight: 700; 
  text-align: right; 
  color: #282828; 
}

.section01 .intro .btnWrap { 
  padding: 10px 13px 40px; 
  color: #282828;
  margin: 0;
}

.section01 .intro .btnWrap p {
  font-size: clamp(14px, 4vw, 23px);
  margin: 5px 0;
}

.section01 .intro .btnWrap strong {     
  font-size: clamp(13px, 3.9vw, 23px);
}

.section01 .intro .mainBtn {
  display: block;
  width: 100%;
  margin: 20px auto 0;
  padding: 5px 0;
  border: 1px solid #000;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  color: #282828;
  text-decoration: none;
}

.section01 .intro-pc { 
  position: relative; 
  max-height: 856px; 
  height: 856px; 
  padding: 0; 
  background: url('/cdn/shop/files/241209_BO_JP_main_1900.jpg') center / cover no-repeat;
}

.section01 .intro-pc .inContent { 
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 5vh;
}

.section01 .intro-pc .inContent .text-container {   
  width: 1200px;
  padding: 50px;
  color: #282828;
}

.section01 .intro-pc .inContent .text-container .title {     
  font-size: 50px;
  margin: 0;
  font-weight: bold;
}

.section01 .intro-pc .inContent .text-container .sub-title {      
  font-size: 30px;
  margin: 0;
  font-weight: bold; 
}

.section01 .intro-pc .inContent .text-container .content {  
  font-size: 28px; 
}


/* section02 */
.section02 {
  
}

/* section03 */
.section03 {
  background-color: #000;
}
.section03 .img-container {
  display: flex; justify-content: center; background-color: #000;
}

.section03 .mo-layout .img-container img{
  width: 100%;
}

.section03 .pc-layout .img-container img{
  width: 100%;
}

/* section04 */
.section04 {
  
}

/* section05 */
.section05 {
  
}

.section05 .card-img {
  object-fit: cover;
  border-radius: 0.5rem;
  width: 100%;
}

.section05 .card-text {
  object-fit: cover;
  border-radius: 0.5rem;
  width: 100%;
}

.section05 .text-color-white{
  color: #fff;
}

.section05  .text-color-black{
  color: #000;
}

.section05  .bg-color-white {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: #fff;
  padding: 5px 0 0 0;
}
    
.section05  .section02-bg-img {
  width: 100%;
  background-image: url('/cdn/shop/files/dev-story-01.jpg?v=1734077936');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
  
      
.section05 .more-stories-container {
  width: 100%;
  margin: 0 auto;
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(3, 1fr); /* 3 columns */
  gap: 1px; /* Space between items */
}
  
.section05  .more-stories-container a {
  display: flex;
  gap: 16px;
  padding: 10px 20px 10px 20px;
  background-color: #fff;
  border-radius: 8px;
}

.section05  .more-stories-container a div {
  flex-shrink: 0;
  height: 100px; /* Increased image size */
  width: 200px; /* Consistent width */
  background-size: cover;
  background-position: center;
  border-radius: 4px;
}

.section05  .title-font{
  font-size: calc(max(25px, 2.2vw));
}

.section05  .content-title-font{
  font-size: calc(max(18px, 1.3vw));
}

.section05  .blog_section01 {
  background-color: #FAEEDC;
  padding: 3vh 2vh 3vh 2vh
}

.section05 .blog_section01 img,
.blog_section02 img,  {
  margin-bottom: 2vh;
}
  
.section05 .blog_section02 {
 background-color: #FFF5E7;
 padding: 3vh 2vh 3vh 2vh
}


.mg-top-2 {
  margin-top: 2vh;
}

.mg-top-1 {
  margin-top: 1vh;
}

.gap-1 {
  gap: 1vh;
}

/* section06*/
.section06 {
  max-height: 950px;
  color: #282828;
}

.section06 .text{
  width: 50%;
  font-size: clamp(14px, 4.5vw, 25px); 
  white-space : nowrap;

}

.section06 .grid-banner { 
  width: 50%; 
  max-height: 800px;
  align-items: center;
  overflow: hidden;
}

.section06 .text-container {
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.section06 .grid-banner .section06-btn {     
  border: 1px solid #000;
  padding: 3px;
  width: 50%;
  text-align: center;
  text-decoration: none;
  color: black; 
}

.section06 .grid-banner .img-container { width: 50%; max-height: 950px;}

.img100 {
  width: 100%;
}

.img90 {
  width: 90%;
}
.img45 {
  width: 45%;
}

.img50 {
  width: 50%;
}

/* section07 */
.section07 {
}

/* 보오글 상품리스트 슬라이더 */
.section07 .prdSlider_pc {
  padding: 150px 0 150px;
}
.section07 .prdSlider_pc .title { padding-bottom: 80px; color: #000000; display: flex; justify-content: center; }
.section07 .prdSlider_pc .title h3 { font-weight: 100; }
.section07 .prdSlider_pc .title p { margin: 10px 0 50px; }


/* section08 */
.section08 {
  background: #faeedc;
}

.section08 .mo-layout .img-container img {
  width: 100%;
}

.section08 .product-layout01 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


/* slider */
.section08 .slider { display: flex; 
                    align-items: flex-start; 
                    overflow-x: scroll; 
                    scroll-snap-type: x mandatory; 
                    width: 100vw; 
                    margin: 0 auto; 
                    scroll-padding: 0 15px; }
.section08 .slide { flex: 0 0 auto; 
                   width: 88vw; 
                   display: flex; 
                   flex-direction: column; 
                   justify-content: center; 
                   align-items: center; 
                   text-align: center; 
                   font-size: 24px; color: 
                     white; scroll-snap-align: 
                     start; margin-right: 15px; }
.section08 .slide p {margin: 0; 
                     text-decoration: none;   
                     color: #282828;}
.section08 .slide:first-child { margin-left: 15px; }
.section08 .slider::-webkit-scrollbar { display: none; }
.section08 .slide.slide-center { width: 90vw; margin: 0 auto; }

/* section 03 - 제품 슬라이드 (세트) */
.section08 .silde-box { padding: 40px 0 60px; }
.section08 .silde-box .title { padding: 15px; }

/* section 03, 04 공통 */
.section08 .prdWrap .title h3 { font-size: 22px; font-weight: 300 !important; line-height: 32px; }
.section08 .prdWrap .title p { font-size: 14px; margin-bottom: 15px; text-decoration: none;   color: #282828;}
.section08 .prdWrap .coupon { display: flex; justify-content: center; align-items: center; width: 60px; height: 36px; margin-top: 10px; }
.section08 .prdWrap p { color: #282828; }
.section08 .prdWrap p.prdName { font-size: 18px; text-decoration: none; }
.section08 .prdWrap .price05 .beforePrice { font-size: 14px; color: #aeaeae;}
.section08 .prdWrap .price05 .afterPrice { font-size: 18px; }

.section08 .imgWrap img {
  width: 100%;
}

.section08  a:hover {
  color:#282828;
}

.section08 .section08-btn-mo {
  display: flex; 
  justify-content: center;  
  border: 1px solid #000; 
  margin: 2vh; 
  height: 5vh; 
  align-items: center;
}

.section08 .section08-btn-mo a {
  color: #000;
  text-decoration: none;
}


/* section11 */
.section11 {
  background-color: #000;
  padding-bottom: 20px;
}

.section11 .main-img {
  padding-top: 60px;
}
.section11 .img-container {
  display: flex; justify-content: center; background-color: #000;
}

.section11 .mo-layout .img-container img{
  width: 100%;
}

.section11 .pc-layout .img-container img{
 margin: 20px;
}

.section11 .section11-btn-mo {
  display: flex; 
  justify-content: center;  
  border: 1px solid #fff; 
  margin: 2vh; 
  height: 5vh; 
  align-items: center;
}

.section11 .section11-btn-mo a {
  color: #fff;
  text-decoration: none;
}

.section11 .section11-btn-pc {
  display: flex; 
  justify-content: center;  
  align-items: center;
}

.section11 .section11-btn-pc a {
  color: #fff;
  text-decoration: none;
  width: 40vw;
  justify-content: center;
  border: 1px solid #fff;
  display: flex;
  height: 5vh;
  align-items: center;
  margin: 40px;
}