@charset "utf-8";
.container > section {overflow-x: hidden;}

/* 배너 섹션 */
#mainBanner .eyebrow,
#stripBanner .eyebrow {font-family: "Pretendard", sans-serif !important;}
/* 메인 배너 섹션 */
#mainBanner {height: auto; width: 100%; aspect-ratio: 1920/800;}
#mainBanner .inner {height: 100%; padding-block: var(--header-height); display: flex; align-items: flex-start; justify-content: center;}
#mainBanner,
#mainBanner .swiper-slide,
#stripBanner,
#stripBanner .swiper-slide {background-repeat: no-repeat; background-size: cover; background-position: center center;}
#mainBanner .eyebrow {color: var(--grayscale10);}

/* 띠배너 섹션 */
#stripBanner .inner {padding-block: var(--space-60);}

/* 메인디스플레이 01 */
#mainDisplay1 {--display1-size:calc((min(calc(100vw - 100px), 1520px) - var(--fs-32) * 3) * 0.41011236);}
#mainDisplay1 .goods-list {display:flex; align-items:flex-start; flex-wrap:nowrap; column-gap:var(--fs-32);}
#mainDisplay1 .goods-item {width:calc(var(--display1-size) * 0.47945205); min-width:0; flex:none; transition:width 0.4s ease;}
#mainDisplay1 .goods-item.active {width:var(--display1-size);}
#mainDisplay1 .goods-thumb {width:100%; height:var(--display1-size); aspect-ratio:auto; opacity:1; overflow:hidden;}
#mainDisplay1 .goods-thumb .thumb-swiper .swiper-wrapper {transform-origin: left center;}

/* 메인디스플레이 02 */
#mainDisplay2 {display: flex; align-items: stretch; column-gap: var(--space-80);}
#mainDisplay2 .display2-banner {flex-shrink: 0; width: 50%; align-self:stretch; background-repeat: no-repeat; background-size: cover; background-position: center center;}
#mainDisplay2 .display2-banner-mo {display: none;}
#mainDisplay2 .goods-item {width: calc(100% / 3 - var(--fs-24) * 2 / 3);}
#mainDisplay2 .goods-thumb {aspect-ratio: 209/257.6;}
#mainDisplay2 .goods-price {font-size: var(--fs-20);}
#mainDisplay2 .inner {overflow: hidden; width: calc(50% - var(--space-80)); padding-right: max(50px, calc((100vw - 1520px) / 2));}

/* 메인디스플레이 03 */
#mainDisplay3 .goods-thumb {aspect-ratio: 491/720;}

/* 기획전 */
#mainExhibition .exhibition-list {display: flex; align-items: center; column-gap: var(--fs-24);}
#mainExhibition .exhibition-item {position: relative; flex: 1; width: auto; height: auto; aspect-ratio: 748/380;}
#mainExhibition .exhibition-item .thumb-wrap {width: 100%; height: 100%; overflow: hidden;}
#mainExhibition .exhibition-item .thumb-wrap img {transition: transform 0.5s ease; width: 100%; height: 100%; object-fit: cover;}
#mainExhibition .exhibition-item:hover .thumb-wrap img {transform: scale(1.1);}
#mainExhibition .exhibition-item .txt-wrap {position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; background: #000000; background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); padding: var(--fs-30); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; row-gap: 4px;}
#mainExhibition .exhibition-item .txt-wrap strong,
#mainExhibition .exhibition-item .txt-wrap p {color: var(--color-white);}

/* 이벤트 */
#mainEvent .inner {grid-template-columns:362px minmax(0, 1fr) !important;}
#mainEvent .event-list-swiper {width:100%; min-width:0; overflow:hidden;}
#mainEvent .event-list {align-items:flex-start;}
#mainEvent .event-item {width:auto; display:flex; flex-direction:column; row-gap:var(--fs-20);}
#mainEvent .event-item .thumb-wrap {overflow:hidden; width:100%; height: auto; aspect-ratio:1/1;}
#mainEvent .event-item .thumb-wrap img {transition:transform 0.5s; width:100%; height:100%; object-fit:cover;}
#mainEvent .event-item:hover .thumb-wrap img {transform:scale(1.1);}
#mainEvent .event-item .event-info {display:flex; flex-direction:column; row-gap:var(--fs-20);}
#mainEvent .event-item .event-info p {color:var(--color-static3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#mainEvent .event-item .event-info .date {color:var(--color-static3);}
/* 고객지원 */
#mainSupport {overflow: visible;}
#mainSupport .main-support-wrap {display: flex; align-items: stretch; column-gap: var(--fs-24);}
#mainSupport .main-support-wrap > * {flex: 1; height: auto; align-self: stretch;}
#mainSupport .main-support-wrap .right {display: flex; flex-direction: column; row-gap: var(--fs-20);}
#mainSupport .main-support-wrap .right .main-support-box {flex: 1;}
#mainSupport .main-support-wrap .right .main-support-box:hover .ico-btn[data-title]::before,
#mainSupport .main-support-wrap .right .main-support-box:hover .ico-btn[data-title]::after {opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);}
#mainSupport .main-support-box {position: relative; padding: var(--fs-30); display: flex; flex-direction: column; row-gap: var(--fs-24);}
#mainSupport .main-support-box .ico-btn {position: absolute; right: var(--fs-30); bottom: var(--fs-30);}
#mainSupport .main-support-box .txt-wrap {display: flex; flex-direction: column; row-gap: 4px;}
#mainSupport .main-support-box.cs-box {background-color: var(--color-static3); color: var(--color-white);}
#mainSupport .main-support-box.cs-box .cs-tel {font-size: var(--fs-32); font-weight: 700;}
#mainSupport .main-support-box.cs-box .cs-list {margin-top: auto; display: flex; align-items: center;}
#mainSupport .main-support-box.cs-box .cs-list li {flex: 1;}
#mainSupport .main-support-box.cs-box .cs-list .txt-btn {font-size: var(--fs-20); font-weight: 500;}
#mainSupport .main-support-box.faq-box {background-color: var(--color-bg1); color: var(--color-static3);}
#mainSupport .main-support-box.notice-box {background-color: var(--color-bg2); color: var(--color-static3);}

@media screen and (max-width: 1440px) {
    #mainEvent .event-item .thumb-wrap {}
    #mainDisplay1 .goods-info-txt .goods-price-wrap,
    #mainDisplay2 .goods-info-txt .goods-price-wrap {flex-direction: column; align-items: flex-start;}
}

@media screen and (max-width: 1280px) {
}

@media screen and (max-width: 1024px) {
    #stripBanner .inner {padding-block: 40px;}
    #mainDisplay1 .goods-list {flex-wrap: wrap;}
    #mainDisplay1 .goods-item.active,
    #mainDisplay1 .goods-item {width: calc(50% - var(--fs-32) / 2);}
    #mainDisplay1 .goods-thumb {height: auto; aspect-ratio: 1/1;}
    #mainDisplay1 .goods-item:hover .goods-thumb {opacity: 0.7;}
    #mainEvent .inner {grid-template-columns:1fr !important;}
    #mainEvent .event-list-swiper {overflow: visible;}
    #mainSupport .main-support-wrap {flex-direction: column; row-gap: var(--fs-20);}
}

@media screen and (max-width: 768px) {
    #mainBanner {height: calc(100vh - var(--header-banner-height)); max-height: 800px;}
    #mainBanner .swiper-slide {background-position: 60% center;}
    #mainDisplay2 .inner {width: calc(100% - 48px); padding-right: 0; overflow: visible;}
    #mainDisplay2 .display2-banner {display: none;}
    #mainDisplay2 .display2-banner-mo {width: 100%; height: auto; aspect-ratio: 370/200; display: block; background-repeat: no-repeat; background-size: cover; background-position: center top;}
    #mainExhibition .exhibition-list {flex-direction: column; row-gap: var(--fs-24);}
    #mainExhibition .exhibition-item {width: 100%;}
    #mainSupport .main-support-box.cs-box .cs-list li {width: 100%;}
    #mainSupport .main-support-box.cs-box .cs-list a {width: 100%; padding-block: 10px;}
}

@media screen and (max-width: 500px) {
    #stripBanner .inner {padding-block: 36px;}
    #mainDisplay1 .goods-item.active,
    #mainDisplay1 .goods-item {width: 100%;}
    #mainSupport .main-support-box.cs-box .cs-list {flex-direction: column; row-gap: 4px;}
}

/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */