/* BASIC css start */
#mainSpot { position:relative; width:100%; height:100%; }
#mainSpot img { width:100%; }
#mainSpot .swiper-pagination { text-align:center; bottom:35px; padding:0 30px; box-sizing:border-box; z-index:99; }
#mainSpot .swiper-pagination .swiper-pagination-bullet { width:9px; height:9px; border-radius:20px; border:2px solid #fff; opacity:1; box-sizing:border-box; background:none; margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 6px);}
#mainSpot .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background:#fff; }
.main-slide_txt { position: absolute; left: 15px; bottom: 80px; z-index: 1; }

.main-slide_title { font-size: 24px; font-weight: 500; line-height: 1.2; color: #fff; margin-bottom: 15px; }
.main-slide_desc { font-size: 13px; line-height: 1.2; color: #fff; }
.mySwiper .swiper-slide {}
.main-slide_btn {
    display: block;
    width: 120px;
    height: 40px;
    line-height: 38px;
    margin-top: 15px;
    color: #000;
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    border-radius: 30px;
    cursor: pointer;
    position: relative;
    z-index:50;
    background: #fff;
}
.swiper-slide.iframe {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto;
    padding-bottom: 50%; /* 🔥 16:8 비율 */
    overflow: hidden;
    background:url('/design/heyskorea/img/mobile/iframe_bg.jpg') no-repeat;
    background-size:100%;
    display: block !important;
    visibility: visible !important;

}

.swiper-slide.iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1 !important; /* 🔥 강제 적용 */
    visibility: visible !important;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none; /* 🔥 Swiper 터치 이벤트가 iframe에 의해 차단되지 않도록 설정 */
} 


.video-box { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-box iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


.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;

}
.discover-box { width: 100%; overflow:hideen;}
.discover-list { width: 100%; padding: 50px 0; overflow: hidden; }
.discover-list ul li { position:relative;display: flex; justify-content: center; align-items: center; transition: transform 0.3s ease-in-out; }
.discover-list ul li img { width: 100%; /*max-width: 400px;*/ height: auto; transition: all 0.3s ease-in-out; }
.discover-list ul li p { font-size:16px; font-weight:600; text-align:center; width:100%; position:absolute; bottom:30px; left:0; color:#fff; font-family:'Montserrat'; }
.discover-list ul li.swiper-slide-active p { }
.discover-list ul li.swiper-slide-active img { transform: scale(1);  }
.discover-list ul li.swiper-slide-prev img,
.discover-list ul li.swiper-slide-next img { transform: scale(1); }

.collection-box { width: 100%; margin: 30px auto 80px; overflow:hidden; }
.collection-box > h3 { text-align:center; font-size:17px; font-weight:700; margin-bottom:30px; }
.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:12px; font-family:'Montserrat'; font-weight:500; margin-top: 20px; }
.collection-box ul li .prd-hashtag { font-size:12px; color:#9a9a9a; margin-top:6px; }

.middle-list > a { display:block; margin-bottom:30px; }
.middle-list .middle-card .zoom-box { font-family: 'Montserrat'; position: relative; overflow: hidden; }
.middle-list .middle-card .zoom-box img { width: 100%; }
.middle-list .middle-card .zoom-box .middle-card_content { position: absolute; left: 0; width: 100%; bottom: 40px; z-index: 1; color: #fff; text-align: center; letter-spacing: 1px; }

.middle-list .middle-card .zoom-box .middle-card_content .small-txt { font-weight:500; color: #fff; font-size: 12px; margin-bottom: 10px; }
.middle-list .middle-card .zoom-box .middle-card_content .big-txt { color: #fff; font-size: 16px; font-weight: 600; margin-bottom:18px; }
.middle-list .middle-card .zoom-box .middle-card_content .button { font-size:11px; font-weight:500; width: 120px; height: 36px; line-height: 36px; border: 1px solid #fff; background:#fff; }

.product-list h3 { display:block; margin:80px auto 30px; font-size:17px; font-weight:700; }
/* 인스타그램 영역*/
.insta_wrap {position:relative;width:95%;margin:40px auto 0;box-sizing: border-box;} 
.insta_wrap h1 {display:block;text-align:center;font-size: 17px;font-weight: 700;color:#000;letter-spacing:2px;margin-bottom: 30px;font-family: 'Montserrat', sans-serif;} 
.insta_wrap h1 img { display:block; text-align:center; margin: 0 auto 15px; } 
.insta_wrap h1 a { display:block; text-align:center; margin-top: 16px; } 
.insta_wrap .grid-container { display:grid; grid-template-columns: repeat(3,1fr); gap: 15px 10px; align-content:center; justify-content: space-between; } 
.insta_wrap .grid-container .item a { position: relative; display:inline-block; } 
.insta_wrap .grid-container .item a img { width:100%; } 
.insta_wrap .grid-container .item a span { position: absolute; top: 0; left: 0; right: 0; bottom: 0; font-size: 12px; font-weight: 400; font-family: 'Pretendard-Regular', sans-serif; line-height: 1.5em; color: #fff; background: rgb(20 20 20 / 60%); padding: 5px; opacity: 0; transition: opacity 0.3s ease; } 
.insta_wrap .grid-container .item a:hover span { opacity:1; } 
.insta_wrap .grid-container .item.mid { grid-row:span 2; grid-column:span 1; } 
.main .more { margin-top:0; margin-bottom:50px; }
/* BASIC css end */