/* BASIC css start */
/* 메인 비쥬얼 배너 */
.mySwiper { width:100%;max-width: 100%; text-align:center; }
.mySwiper .swiper-slide iframe { width: 100%;  height: 56.25vw; }
#mainSpot { position:relative; width:100%; min-width:1100px; height:100%; }
#mainSpot .swiper-pagination { text-align:right; bottom:100px; padding:0 57px; box-sizing:border-box; }
#mainSpot .swiper-pagination .swiper-pagination-bullet { width:12px; height:12px; border-radius:20px; border:2px solid #fff; opacity:1; box-sizing:border-box; background:none; margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 12px);}
#mainSpot .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background:#fff; }
.swiper-slide.iframe {
    position: relative;
    width: 100% !important;
    height: auto;
    padding-bottom: 48.97%; /* 🔥 960px / 1960px * 100 = 40.8% (16:8 비율) */
    overflow: hidden;
    background:url('/design/heyskorea/img/main/iframe_bg.jpg') no-repeat;
    background-size:100%;
}

.swiper-slide.iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* 🔥 Swiper 터치 이벤트가 iframe에 의해 차단되지 않도록 설정 */
}

.mySwiper .swiper-slide img { width:100%; object-fit: cover; }
.main-slide_txt { position: absolute; left: 100px; bottom: 70px; z-index: 1; text-align:left; }
.main-slide_title { font-size: 36px; font-weight: 500; line-height: 1.5; color: #fff; margin-bottom: 15px;}
.main-slide_desc { font-size: 14px; line-height: 1.5; color: #fff; }
.main-slide_btn {
    display: block;
    width: 150px;
    height: 50px;
    line-height: 48px;
    margin-top: 20px;
    color: #000;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    border-radius: 50px;
    cursor: pointer;
    position: relative;
    z-index:50;
    border-radius: 50px;
    background: #fff;
}
.swiper-slide .main-slide_txt * { opacity: 0; visibility: hidden; -webkit-transform: translateY(10px); transform: translateY(10px);}
.swiper-slide-active .main-slide_txt * { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); }
.swiper-slide-active .main-slide_title { transition-duration:0.7s; -webkit-transition-delay: 0.2s !important; transition-delay: 0.2s  !important;}
.swiper-slide-active .main-slide_desc { transition-duration: 0.7s; -webkit-transition-delay: 0.4s !important; transition-delay: 0.4s !important; }
.swiper-slide-active .main-slide_btn { transition-duration: 0.7s; -webkit-transition-delay: 0.6s !important; transition-delay: 0.6s !important;}
.swiper-slide iframe { width:100%; }


h3.main-tit { text-align:center; font-size:20px; font-weight:700; margin-bottom:70px; }
.discover-box { margin:180px 0 0 0; }
.discover-box .discover-list { width:100%; padding:0 57px; box-sizing:border-box; margin:0 auto; }
.discover-box .discover-list ul li a{ display: grid; place-items: center; position: relative; overflow: hidden;}
.discover-box .discover-list ul li { float:left; width:20%; padding:0 10px; box-sizing:border-box; font-family: Montserrat; }
.discover-box .discover-list ul li img { width: 100%; height: auto; margin: 0; }
.discover-box .discover-list ul li p { font-weight: 500; text-align:center; font-size:14px; margin-top:30px; font-family:'Montserrat'; }
@media screen and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .zoom-image {
    transform-origin: center;
    transition: scale 8s cubic-bezier(.25, .46, .45, .94);
  }

  .group:hover img {
    scale: 1.2;
  }
}

.collection-box { width: 90%; margin: 180px auto 0; overflow:hidden; }

.collection-box ul { display:flex; }
.collection-box ul li { display:block; text-align:center; }
.collection-box ul li.img-list img { width:100%; }
.collection-box ul li .prd-tit { font-size:18px; font-family:'Montserrat'; font-weight:500; margin-top: 30px; }
.collection-box ul li .prd-hashtag { font-size:13px; color:#9a9a9a; margin-top:15px; }

.middle-banner-box { margin-top:180px; margin-bottom:180px; }
.middle-banner-box .middle-list { display:flex; padding:0 47px; }
.middle-banner-box .middle-list .middle-card { display:grid; align-content:start; overflow:hidden; padding:0 10px; width:50%; }
.middle-banner-box .middle-list .middle-card .zoom-box img { width:100%; }
.middle-banner-box .middle-list .middle-card .zoom-box { font-family:'Montserrat'; position:relative; overflow:hidden; }
.middle-banner-box .middle-list .middle-card .zoom-box .middle-card_content {  position: absolute; left: 40px; width: calc(100% - 80px); bottom: 40px; z-index: 1; color:#fff !important;  text-align:center; letter-spacing: 1px; }
.middle-banner-box .middle-list .middle-card .zoom-box .middle-card_content .small-txt {  color:#fff !important; font-size:14px; margin-bottom:20px; }
.middle-banner-box .middle-list .middle-card .zoom-box .middle-card_content .big-txt {  color:#fff !important; font-size:25px; font-weight:600; margin-bottom:30px; }
button.button:hover {background: #000000; color: white; border-color: black; -webkit-transition: all 0.4s ease;} 
.middle-banner-box .middle-list .middle-card .zoom-box .middle-card_content .button { 
    width:156px;
    height:46px;
    line-height:46px;
    border:1px solid #fff;
    appearance:none;
    background-position:var(--initial-background-position);
    --initial-background-position: var(--transform-origin-end);
    background-size: 101% 101%, 0 101%;
    transition: background-size .45s cubic-bezier(.785, .135, .15, .86), 
    background-position .45s step-end, 
    color .45s cubic-bezier(.785, .135, .15, .86), 
    border .45s cubic-bezier(.785, .135, .15, .86);
}

@media screen and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .middle-card_content .button:hover {
    background-size: 0 101%, 101% 101%;
    background-color: #000;
    color:#fff;
    transition:all 0.4s ease;
  }
  
}
.video-box { width:100%; margin:180px auto; text-align:center; }
.more-box { width:100%; text-align:center; cursor:pointer; }
.more-box .btn-more { display:inline-block; width:170px; height:50px; line-height:50px; box-sizing:border-box; border:1px solid #bbb;border-radius: 30px; text-align:center; background:#fff; font-weight:500; font-size:14px; color:#1c1c1c; }
.more-box .btn-more.hidden { display:none; }
.more-box i { display:inline-block; margin-left:5px; }

/* 인스타그램 영역*/
.insta_wrap {position:relative;width:100%; padding:0 57px; box-sizing:border-box; margin:80px auto; } 
.insta_wrap h1 {display:block;text-align:center;font-size:20px;font-weight: 700;color:#000;letter-spacing:1px;margin-bottom:70px;font-family: 'Montserrat', sans-serif;} 

.insta_wrap .grid-container { display: grid; grid-template-columns: 1fr 1fr 2fr 1fr 1fr;  grid-template-rows: 1fr 1fr; object-fit: cover; gap: 10px; width: 100%; box-sizing: border-box; overflow: hidden;}
.insta_wrap .grid-container .item {display: flex; justify-content: center; align-items: center;}
.insta_wrap .grid-container .item.mid { grid-column: 3 / span 1; grid-row: 1 / span 2;}
.insta_wrap .grid-container .item.small { grid-row: span 1; grid-column: span 1;}
.insta_wrap .grid-container .item a {position: relative;display:inline-block; height:100%; }

.insta_wrap .grid-container .item a img { width: 100%; height: 100%; object-fit: cover; }
.insta_wrap .grid-container .item a span{position: absolute;top: 0;left: 0;right: 0;bottom: 0;font-size: 14px;font-weight: 400;font-family: 'Pretendard-Regular', sans-serif;line-height: 30px;color: #fff;background: rgb(20 20 20 / 60%);padding: 20px 0 0 20px;opacity: 0;transition: opacity 0.3s ease;}
.insta_wrap .grid-container .item a:hover span{opacity:1; }

/* 이미지 배너 */
.imgBanner { margin:30px auto 0; position:relative; width:1100px; overflow:hidden }
.imgBanner ul { *zoom:1 }
.imgBanner ul:after { display:block; clear:both; content:'' }
.imgBanner ul li { padding-right:10px; float:left }

/* 상품 목록 영역 */
.product-wrap { margin:0 auto; position:relative; width:100%; }

/* 고정 이미지 배너 */
.fixedBnnr { position:relative; width:100%; min-width:1100px; height:220px; background:url(//image.makeshop.co.kr/makeshop/d3/basic_simple/main/fixbn.jpg) center top no-repeat fixed }
.fixedBnnr .inner { margin:0 auto; position:relative; width:1100px; text-align:center }
.fixedBnnr .inner .tx { padding-top:100px; font-size:16px; color:#fff; letter-spacing:16px }
/* BASIC css end */