/* BASIC css start */
.close-icon{
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' id='_레이어_1' data-name='레이어_1' viewBox='0 0 55.63 49.85'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;stroke:%233e3a39;stroke-miterlimit:10;stroke-width:2px%7D%3C/style%3E%3C/defs%3E%3Cpath d='m23.22 21.04 9.18 9.18M23.22 30.22l9.18-9.18' class='cls-1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    width: 42px;
    height: 42px;
}

.onload-img {
    height: 100vh;  /* 화면 높이의 100%로 설정 */
    background: url('http://theatre.img4.kr/A_MINA/2024_Etoile_de_la_Vie/season_image/main_pc_20241203.jpg') 50% 50% no-repeat;
    background-size: cover;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.mainSwiper {height:100%;}
.image-container {
    display: grid;
    grid-template-columns:1fr minmax(auto, 560px) 1fr minmax(auto, 560px) 1fr;
    justify-content: center;
    height: calc(100% - 140px);
    padding: 90px 0 0 0;
}

.image-item {
    height: 100%;
    width: 100%;
    background-size : cover !important;
}
/* 첫 번째 이미지 */
.image-item:first-child {
    grid-column: 2;
}
<-- /* 두 번째 이미지 */
.image-item:nth-child(2) { 
grid-column: 2; 
} -->

/* 세 번째 이미지 */
.image-item:last-child {
    grid-column: 4;
}

.centered-text {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:20px;
}
.item-wrap {overflow: hidden;margin: 0 auto;min-width: 1060px; padding:0;}

.item-wrap .item-contt{
    display: flex;
}
.item-wrap .item-contt:after { content: ""; display: block; clear: both; }
.item-wrap .item-contt .item-list {float:left;width: calc(32% - 1px); margin:30px 0 0 0; /*border-bottom:1px solid #eee*/}
.item-wrap .item-contt .item-list:first-child {border-left: none;}
.item-wrap .item-contt .item-list:last-child {border-right: none;}*/
.item-wrap .item-contt .item-list .thumb { position: relative; }
.item-wrap .item-contt .item-list .thumb a { display:block; overflow:hidden }
.item-wrap .item-contt .item-list .thumb a img { width:100%;-webkit-transition: -webkit-transform 0.5s ease;transition:transform 0.5s ease;}
.item-wrap .item-contt .item-list .thumb a:hover img {-webkit-transform: scale(1.05);transform: scale(1.05) }
.item-wrap .item-contt .item-list .thumb .clChip {position: absolute;left: 7px;bottom: 5px;}
.item-wrap .item-contt .item-list .thumb .clChip span {display: inline-block;width: 8px;height: 8px;border-radius: 100%;margin: 0 1px;}
.item-wrap .item-contt .item-list dd {padding-top: 17px; padding-left: 10px; text-align:left; height:80px; position:relative;}
.item-wrap .item-contt .item-list .prd-name { font-size: 14px;}
.item-wrap .item-contt .item-list .prd-line {margin: 5px 0;width:100%;height:0px; /*background: #eaeaea;*/}
.item-wrap .item-contt .item-list .prd-subname {color:#8e8d8d;line-height:18px; padding-bottom: 7px;font-size: 14px;}
.item-wrap .item-contt .item-list .prd-price {font-size: 14px; position:absolute; bottom:0; }
.item-wrap .item-contt .item-list .prd-price del,
.item-wrap .item-contt .item-list .prd-price strike { color:#8e8d8d; font-weight: normal; font-size: 12px; margin-right: 5px; }
/* .item-wrap .item-contt .item-list .prd-preview { margin: 15px 0; } */
.item-wrap .item-contt .item-list .prd-preview i { font-size: 20px; }
.item-wrap .item-contt .item-list .MK-product-icons img { vertical-align: middle }

/* 할인 영역 */
.discountPer {
    margin-left: 3px !important;
    color: red;
    display:inline !important;
}


#menu li { display:block; margin:10px;color: #000;background: rgba(255,255,255, 0); -webkit-border-radius: 100%; border-radius: 100%; text-align:center;}
#menu li.active{ background: rgba(0,0,0,0);color: #fff;}
#menu li a { width:30px; height:30px;  line-height:30px; font-size:12px;font-family: 'Dancing Script','Poppins', sans-serif;  color:#B5B5B5; font-weight: 700;}
#menu li.active a:hover{ color: #000;}
#menu li a:hover{	background: rgba(255,255,255, 0); font-size:18px; color:#000; }
#menu li a,
#menu li.active a { display:block;}
#menu li.active a {color: #000; font-size:18px; border-top:1px solid #000; border-bottom:1px solid #000; }
#menu{position:fixed;top:50%; transform: translateY(-50%);right:10px;height: auto;	z-index: 70;padding: 0;}

/* 메인 이미지 배너 */
#slides{position:relative;z-index:10;min-width:1200px;/*margin-top:80px*/}

/*
#slides .slides-pagination{position:absolute;bottom: 40px;left:0;right:0;z-index:40;text-align:center;font-size:0;}
#slides .slides-pagination a{display:inline-block;margin: 5px;width: 12px;height: 12px;border: 1px solid #333;border-radius:50%;font-size:0;}
#slides .slides-pagination a:hover, #slides .slides-pagination .current{background-color:#333;}
*/
/* NEW ARRIVALS */
#newWrap .item-wrap .item-cont .item-list {float:left;width: 23.5%;}


#slides > div > a > img {width : 100%;}

.animate {
  text-align: center;
  opacity: 1;
  position: relative;
  bottom: -1000px;
  transition: bottom 2.5s ease-in-out;
  width:45%;
}

.animate.move-up {
  bottom: calc(0% + 1px);
}

@font-face {
    font-family: 'Pretendard-ExtraLight';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff') format('woff');
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard-Light';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
    font-style: normal;
}

.content-tit{
    font-family: 'Pretendard-Light';
    color: #fff;
    font-size: 22px;
    letter-spacing: 0.4em;
    line-height: 30px;

}

.content-con{
    font-family: 'Pretendard-ExtraLight';
    color:#fff;
    font-size: 16px;
    letter-spacing: 0.25em;
    line-height: 64px;

}

.content-border{
    width: 50px;
    border-top: 1px solid #FFF;
    margin: auto;
    margin-bottom: 20px;

}






.main-type1-popup-module { 
    position:fixed;
    display:none;
    bottom:60px;
    right:20px;
    width:420px;
    max-height:70vh;
    background:rgba(231,231,231,0.7);
    z-index:99;
    border-radius:8px;
    overflow:auto;
}

@media (max-width: 460px) {
    .main-type1-popup-module {
        width: auto;
        left:20px;
        right:20px;
    }
}
.main-type1-popup-contents { padding:20px; }
.main-type1-popup-contents a { 
    display:block;
    margin:0 auto;
    line-height: 18px;
}
.main-type1-popup-module > div > a > b { line-height:20px; }
.close-1 { 
    position: absolute;
    top: 10px;
    right: 5px;
    font-size: 14px;
    cursor: pointer;
    color: #777;
}



.main-type2-popup-module { 
    position:fixed;
    display:none;
    bottom:60px;
    left:20px;
    width:420px;
    background:#FFF;
    z-index:99;
    overflow:auto;
}

@media (max-width: 460px) {
    .main-type2-popup-module {
        width: auto;
        left:20px;
        right:20px;
    }
}
.main-type2-popup-contents a { 
    display:block;
    margin:0 auto;
    line-height: 18px;
}
.main-type2-popup-module > div > a > b { line-height:20px; }
.close-2 { 
    margin-left:20px;
    font-size: 14px;
    cursor: pointer;
        display: inline-flex;
    align-items: center;
}
#dont-show-today{
margin-bottom:2px;
}

.main-type2-popup-close-area {
display: flex;
font-size: 14px;
    justify-content: flex-end; 
    padding:4px;
}


/* 화면 너비가 1200px 이하일 경우 */
@media (max-width: 1200px) {
  .image-container {
    grid-template-columns: 1fr minmax(auto, 520px) 1fr minmax(auto, 520px) 1fr;
  }
  .image-item {

    background-size : cover !important;
}
  
}

/* 화면 너비가 1100px 이하일 경우 */
@media (max-width: 1100px) {
  .image-container {
    grid-template-columns: 1fr minmax(auto, 470px) 1fr minmax(auto, 470px) 1fr;
    background-size : cover !important;
  }
}
/* BASIC css end */

