.hero-banner-slider{
    width: 100%;
}
/* height: 700px; */
/* 높이를 주면 화면 크기를 줄일 경우 페이지네이션이 그 위치로 고정이 되는데 고정을 할 경우에는 그 클래스를 따로 빼서 아래처럼 크기를 지정해줘야함 */
/* .hero-banner-slider{
    width: 100%;
    height: 100%;
    object-fit: cover;
} */
.hero-banner-slider .swiper-pagination-bullet {
    background: #fff;
    border-radius: var(--swiper-pagination-bullet-border-radius,50%);
    display: inline-block;
    height: 1rem;
    opacity: 1;
    width: 1rem;
}
.hero-banner-slider .swiper-pagination-bullet-active {
    background: var(--Midnight-Whisper-main-color);
    width: 2.5rem;
    border-radius: 2.5rem;
}
.hero-banner-slider .swiper-pagination-bullet {
    margin: 0 1rem;
}
.hero-banner-slider .swiper-horizontal>.swiper-pagination-bullets, 
.hero-banner-slider .swiper-pagination-bullets.swiper-pagination-horizontal,
.hero-banner-slider .swiper-pagination-custom,
.hero-banner-slider .swiper-pagination-fraction {
    left: 0;
    top: initial;
    width: 100%;
    bottom: 34px;
}
.tab-slide, .mo-slide{
    display: none;
}
main{
    margin-top: 120px;
    /* 헤더의 높이만큼 */
    /* transition: margin-top 0.6s ease 0s; */
}
/* header.fold~main{
    margin-top: 12px;
} */
.signature-slider{
   width: 100%;
}
.signature{
    padding: var(--space-3x-large) 0;
}
.signature>h1{
    margin-bottom: var(--space-normal);
}
.signature>p{
    margin-bottom: var(--space-2x-large);
}
.sig-item img{
    width: 100%;
    aspect-ratio: 1/1;
}
.sig-item figure{
    margin-bottom: var(--space-x-large);
}
.sig-item h4{
    margin-bottom: var(--space-x-small);
}
.banner-cake{
    background: url("../img/banner-cake.jpg") no-repeat 50% 50% / cover ;
    height: 422px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
    margin-bottom: var(--space-3x-large);
}
.banner-cake h1{
    margin-bottom: 0.5rem;
}
.off-store{
    display: flex;
    gap: var(--space-normal);
}
.off-store section{
    text-align: right;
    flex: 1;
}
.off-store h1{
    padding-bottom: var(--space-normal);
}
.off-store h3{
    padding-bottom: 7rem;
}
.off-store p{
    padding-bottom: 1.5rem;
}
.off-store figure{
    width: 953px;
    flex-shrink: 0; 
}
.news{
    margin-top: var(--space-3x-large);
    display: flex;
    justify-content: space-between;
    gap: var(--space-normal);
}
.news-list{
    flex: 7;
    border-top: 5px solid var(--Midnight-Whisper-main-color);
}
.news-title{
    flex: 5;
    text-align: right;
}
.news-list li{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--Midnight-Whisper-main-color);
    padding: 1.5rem 0;
}
.news-list li a{
    display: inline-block;
    font-weight: var(--font--strong);
    max-width: 600px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.news-title p{
    margin-top: var(--space-normal);
}
.benefit{
    background: url("../img/banner.card.jpg") no-repeat 50% 50% / cover;
    width: 100%;
    height: 575px;
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--space-3x-large);
}
.benefit p{
    margin-top: var(--space-normal);
}