div.stnMainSectionWrap {
    max-width: calc(var(--max-width));
    margin: 0 auto;
}

section#sideNavZoneStart {
    max-width: calc(var(--max-width));
    margin: 0 auto;
    padding:0 2rem;
}

#sideNav {
    padding:0 0 0 0;
    margin:0 0 0 0;
    position: absolute;
    top: 0;
    z-index: 99;
    opacity: 1;
    pointer-events: auto;
    transition: opacity .25s ease;
}

#sideNav.is-visible {
    opacity: 1;
    pointer-events: auto;
}

#sideNav.is-fixed {
    position: fixed;
    top: 50px;
}
#sideNav li {
    padding:0 0 0 0;
    position: relative;
    width: 41px;
    height: 35px;
    margin:0 0 1px 0;
    background: #111;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#sideNav li div.icon {
    position: absolute;
}
#sideNav li div.text {
    display: none;
}
#sideNav li.active {
    background: var(--bg);
}
#sideNav li.active div.text {
    display: flex;
    align-items:center;
    position: absolute;
    left: 41px;
    width:200px;
    height: 35px;
    transition: all .25s ease;
    background: var(--bg);
    font-size:12px;
    padding-left:10px;
}
/*
#sideNav li .label {
    position: absolute;
    left: 41px;
    top: 50%;
    transform: translateY(-50%) translateX(-10px);
    background: #4CAF50;
    color: #fff;
    height:35px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all .25s ease;
    font-size:12px;
}
#sideNav li.active {
    background: #4CAF50;
}
#sideNav li.active .label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
*/
section#sideNavZoneStart {
    max-width: calc(var(--max-width));
    margin: 0 auto;
    position: relative;
}

section.spy-section {
    max-width: calc(var(--max-width));
    padding:0 2rem;
    margin: 0 auto;
    z-index: -1;
}
section.spy-section > div.stnCateGoodsWrap {
    width:calc(100% - 41px);
    margin-left:41px;
    min-height: 200px;
}
section.spy-section > div.stnCateGoodsWrap > div.stnCateGoods {
    display: grid;
    grid-template-columns:auto 1fr;
    border-top:2px solid #222;
    padding-bottom:2rem;
}
section.spy-section > div.stnCateGoodsWrap > div.stnCateGoods > article.cate > img {
    width:100%; height:100%; object-position: center; object-fit: cover;
}

article.goodsList {
    display: grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    border-bottom:1px solid #ebebeb;
}
article.goodsList > div.goodsListBox {
    padding:.5rem .5rem;
    cursor: pointer;
    transition: all .3s;
    font-size: .875rem; font-weight: 500;
    border-right:1px solid #ebebeb;
    border-top:1px solid #ebebeb;
    display: flex; flex-direction: column; justify-content:space-between;
}
article.goodsList > div.goodsListBox.none {
    background: #ebebeb;
    cursor: unset;
}
article.goodsList > div.goodsListBox > div.goodsListImg {
    display:flex;align-items:center;justify-content:center;
}
article.goodsList > div.goodsListBox > div.goodsListImg > img {
    width:90%;
}
article.goodsList > div.goodsListBox > div.goodsListGoods {
    display: flex; flex-direction: column; gap: .5rem;
}
article.goodsList > div.goodsListBox > div.goodsListGoods > div.goodsListGoodsName {
    font-size:12px;
    font-family: Pretendard;
    font-weight: 400;
    color:#a2a2a2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}
article.goodsList > div.goodsListBox > div.goodsListGoods > div.goodsListGoodsPrice {
    margin-top:auto;
    display: flex; justify-content:flex-end;
    color:#1a1a1a;
    font-size:1rem;
    font-family: Pretendard;
    font-weight: 500;
}




section.stnMainBn1 {

}
section.stnMainBn2 {

    margin: 0 auto;
    padding:1rem 0;
}


div.stnMainBg {
    background: #f4f4f4;
    padding-bottom:1rem;
}
div.stnMainBn2 {

}
.swiper-bottom-nav {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    justify-content: center;
}

/* 숫자 */
.swiper-count {
    font-size: 14px;
    color: #111;
    white-space: nowrap;
}

.swiper-count .current {
    font-weight: 600;
}

/* 네비 라인 */
.swiper-lines {
    display: flex;
    gap: 8px;
}

/* 기본 라인 */
.nav-line {
    width: 28px;
    height: 2px;
    background: rgba(0,0,0,0.2);
    cursor: pointer;
    transition: background .3s ease, transform .3s ease;
}

/* 활성 라인 */
.nav-line.active {
    background: #111;
    transform: scaleX(1.2);
}

/* hover */
.nav-line:hover {
    background: rgba(0,0,0,0.4);
}
/* 화살표 공통 */
.stnMainBn2 .swiper-button-prev,
.stnMainBn2 .swiper-button-next {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    color: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.2);
    transition: opacity .3s ease, transform .3s ease;
}

/* 기본 Swiper 화살표 아이콘 제거 */
.stnMainBn2 .swiper-button-prev::after,
.stnMainBn2 .swiper-button-next::after {
    font-size: 18px;
    font-weight: bold;
}
.swiper-button-next, .swiper-button-prev {
    top:50% !important;
}
/* 위치 조정 (카드 중앙 기준) */
.stnMainBn2 .swiper-button-prev {

}

.stnMainBn2 .swiper-button-next {

}

/* hover 효과 */
.stnMainBn2 .swiper-button-prev:hover,
.stnMainBn2 .swiper-button-next:hover {
    opacity: 1;
    transform: scale(1.1);
}



.productSwiper .swiper-slide {

}

.productSwiper img {
    width: 100%;
    border-radius: 6px;
}

/* 좌우 화살표 위치 */
.swiper-wrap {
    position: relative;
}

.swiper-button-prev,
.swiper-button-next {
    color: #000;
    width: 44px;
    height: 44px;
}

.swiper-button-prev {
    left: -10px;
}

.swiper-button-next {
    right: -10px;
}
.swiper-button-next, .swiper-button-prev {
    color:#FFF !important;
}
/* 하단 텍스트 분류 */
.swiper-category {
    margin-top:1rem !important;
    display: grid;
    grid-template-columns:repeat(8,minmax(0,1fr));
    background: #4c7ccd;
}
.swiper-category,
.swiper-category li {
    padding:0 0 0 0; margin:0 0 0 0; list-style: none;
}
.swiper-category li {
    position: relative;
    cursor: pointer;
    text-align: center;
    font-size: 14px;
    color: #fff;
    font-weight: 300;
    padding:19px 0;
}

.swiper-category li.active:after {
    content: '';
    position: absolute;
    bottom:-5px;
    left:10%;
    width:80%;
    height:10px;
    background: #FFF;
}
section.stnHeaderCate {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
}
section.stnHeaderCate.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}


article.stnMainHpBn {
    display: grid; grid-template-columns:repeat(6,minmax(0,1fr)); margin-bottom: 2rem;
}
article.stnMainFocusBn {
    display: flex; flex-direction: column;
}
article.stnMainFocusBn > div.stnMainFocusBn2 {
    display: grid; grid-template-columns:repeat(3,minmax(0,1fr));
}
article.stnMainFocusBn > div.stnMainFocusBn1 > img,
article.stnMainFocusBn > div.stnMainFocusBn2 > img {
    width:100%;
}


article.stnMainReviewBn {
    background: #e6ebff; display: grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom: 2rem; justify-items:center; align-items:center; gap: 2rem;
}
article.stnMainReviewBn > img:first-child { padding:1rem 1rem; }

section.stnMainBoard {
    display: grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin: 2rem auto 2rem auto; gap: 2rem;
}

article.stnMainReviewWrap > h3 {
    border-bottom:1px solid #000; padding-bottom:.5rem; font-weight: 500; margin-bottom:0;
}
article.stnMainReviewWrap > div {
    border-bottom:1px solid #ebebeb; font-size:.875rem; color:#666;
    display: grid; grid-template-columns:1fr 100px; transition: all .3s;
}
article.stnMainReviewWrap > div:hover {
    background: #f9f9f9; cursor: pointer;
}
article.stnMainReviewWrap > div > div {
    display:flex;align-items:center;justify-content:center; padding:.5rem 0;
}
article.stnMainReviewWrap > div > div.title {
    padding:.5rem .5rem;
    display: inline-block;
    justify-content:flex-start;
    color:#000;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

article.stnMainReviewWrap > div > div.date { font-size:.75rem; padding:.5rem .5rem; }



article.stnMainEstimateWrap > h3 {
    border-bottom:1px solid #000; padding-bottom:.5rem; font-weight: 500; margin-bottom:0;
}
article.stnMainEstimateWrap > div {
    border-bottom:1px solid #ebebeb; font-size:.875rem; color:#666;
    display: grid; grid-template-columns:1fr 50px 100px 80px; transition: all .3s;
}
article.stnMainEstimateWrap > div:hover {
    background: #f9f9f9; cursor: pointer;
}
article.stnMainEstimateWrap > div > div {
    display:flex;align-items:center;justify-content:center; padding:.5rem 0;
}
article.stnMainEstimateWrap > div > div.title {
    padding:.5rem .5rem;
    display: inline-block;
    justify-content:flex-start;
    color:#000;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
article.stnMainEstimateWrap > div > div.date { font-size:.75rem; }
article.stnMainEstimateWrap > div > div.status > span.complete {
    background: #b21f2d; color: #FFF; font-size: .75rem; padding:0 .5rem; border-radius: .25rem .25rem;
}
article.stnMainEstimateWrap > div > div.status > span.ready {
    background: #6c757d; color: #FFF; font-size: .75rem; padding:0 .5rem; border-radius: .25rem .25rem;
}


article.sntSpecialWrap {
    display: grid; grid-template-columns:auto 1fr; margin-bottom:2rem;
}
article.sntSpecialWrap > div.sntSpecialWrapHeader{
    padding:2rem 0;
    border-top:6px solid #04A4E0;
    border-right:1px solid #ebebeb;
    border-bottom:1px solid #ebebeb;
    display: flex; flex-direction: column; justify-content:space-between;
}

article.sntSpecialWrap > div.sntSpecialWrapBox {

}

.tab-swiper-zone .tab-panel {
    display: none;
}

.tab-swiper-zone .swiper-button-prev,
.tab-swiper-zone .swiper-button-next {
    color: #000 !important;
}

.tab-swiper-zone .tab-panel.active {
    display: block;
}

.tab-swiper-zone .tab-menu {
    display: flex; justify-content:space-between;
    margin-bottom: 16px;
    padding:0 0 0 0; list-style: none;
    background: #F6F7F8;
}

.tab-swiper-zone .tab-menu li {
    cursor: pointer; padding:0 0 0 0; list-style: none;
    color: #000;
    width:100%;
    border: 1px solid #e1e1e1;
    text-align: center;
    padding:.875rem 0;
    font-size: .875rem;
}

.tab-swiper-zone .tab-menu li.active {
    color: #0298D5;
    border: 1px solid #0298D5;
    background: #FFF;
    margin-left:0;
}
.tab-contents div.swiper-slide { cursor: pointer; display: flex;  height: auto; }

.tab-contents div.swiper-slide div.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    gap: 1rem;
}
.tab-contents div.swiper-slide div.card > div.cardBody {
    display: flex; flex-direction: column; gap: .5rem;
}
.tab-contents div.swiper-slide div.card > div.cardFooter {
    border-top:1px solid #ECECEE; padding:.5rem 0;
}
.tab-contents div.swiper-slide div.card > div.cardFooter > div.goodsListGoodsPrice {
    font-size: 1rem; font-weight: 500; text-align: right;
}
.tab-contents div.swiper-slide div.card div.goodsListGoodsName {
    font-size:13px;
    font-family: Pretendard;
    font-weight: 400;
    color:#222;
    word-break: break-all;
    overflow-wrap: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}




@media (max-width: 599px) {
    .swiper-category { display: none; }
    section.stnMainBoard { grid-template-columns:repeat(1,minmax(0,1fr)); }
    article.stnMainHpBn { grid-template-columns:repeat(2,minmax(0,1fr)); justify-items:center; }

    section.spy-section > div.stnCateGoodsWrap > div.stnCateGoods { grid-template-columns:1fr; }
    section.spy-section > div.stnCateGoodsWrap > div.stnCateGoods > article.cate > img { aspect-ratio: 400/120; object-position: 50% 10%; }
    article.goodsList { border-left:1px solid #ebebeb; grid-template-columns:repeat(2,minmax(0,1fr)); }
    #sideNav { display: none !important; }
    section.spy-section > div.stnCateGoodsWrap { width:100% !important; margin-left:0 !important; }
    article.stnMainReviewBn {
        background: #e6ebff;
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        margin-bottom: 2rem;
        justify-items: center;
        align-items: center;
        gap: 1rem;
        padding:2rem 0;
    }
    article.stnMainReviewBn > img { padding:0 1rem; }
    article.stnMainReviewBn > img:first-child { width:50%; padding:0 0 0 0 !important; }
    article.sntSpecialWrap { grid-template-columns:1fr; }
    article.sntSpecialWrap > div.sntSpecialWrapHeader {
        padding:2rem 0 0 0;
        border-top:6px solid #04A4E0;
        border-right:0px solid #ebebeb;
        border-bottom:0px solid #ebebeb;
        display: flex; flex-direction: row;
        height: 150px;
    }
    article.sntSpecialWrap > div.sntSpecialWrapHeader > div.text { text-align: center; flex: 1; display: flex; flex-direction: column; justify-content:center; align-items:center;  gap: 0; font-size: 1.25rem;}
    .tab-swiper-zone .tab-menu li {
        padding:.75rem 0;
        font-size: .5rem;
    }
}

@media (min-width: 600px) and (max-width: 767px) {
    .swiper-category { display: none; }
    section.stnMainBoard { grid-template-columns:repeat(1,minmax(0,1fr)); }
    article.stnMainHpBn { grid-template-columns:repeat(3,minmax(0,1fr)); justify-items:center; }

    section.spy-section > div.stnCateGoodsWrap > div.stnCateGoods { grid-template-columns:1fr; }
    section.spy-section > div.stnCateGoodsWrap > div.stnCateGoods > article.cate > img { aspect-ratio: 400/120; object-position: 50% 10%; }
    article.goodsList { border-left:1px solid #ebebeb; grid-template-columns:repeat(2,minmax(0,1fr)); }
    #sideNav { display: none !important; }
    section.spy-section > div.stnCateGoodsWrap { width:100% !important; margin-left:0 !important; }
    article.stnMainReviewBn { gap: 1rem; }

    article.sntSpecialWrap { grid-template-columns:1fr; }
    article.sntSpecialWrap > div.sntSpecialWrapHeader {
        padding:2rem 0 0 0;
        border-top:6px solid #04A4E0;
        border-right:0px solid #ebebeb;
        border-bottom:0px solid #ebebeb;
        display: flex; flex-direction: row;
        height: 150px;
    }
    article.sntSpecialWrap > div.sntSpecialWrapHeader > div.text { text-align: center; flex: 1; display: flex; justify-content:center; align-items:center;  gap: 1rem; font-size: 1.25rem;}
    .tab-swiper-zone .tab-menu li {
        padding:.75rem 0;
        font-size: .75rem;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .swiper-category { display: none; }
    article.stnMainHpBn { grid-template-columns:repeat(3,minmax(0,1fr)); justify-items:center; }

    section.spy-section > div.stnCateGoodsWrap > div.stnCateGoods { grid-template-columns:1fr; }
    section.spy-section > div.stnCateGoodsWrap > div.stnCateGoods > article.cate > img { aspect-ratio: 400/120; object-position: 50% 10%; }
    article.goodsList { border-left:1px solid #ebebeb; }
    #sideNav { display: none !important; }
    section.spy-section > div.stnCateGoodsWrap { width:100% !important; margin-left:0 !important; }

    article.sntSpecialWrap { grid-template-columns:1fr; }
    article.sntSpecialWrap > div.sntSpecialWrapHeader {
        padding:2rem 0 0 0;
        border-top:6px solid #04A4E0;
        border-right:0px solid #ebebeb;
        border-bottom:0px solid #ebebeb;
        display: flex; flex-direction: row;
        height: 150px;
    }
    article.sntSpecialWrap > div.sntSpecialWrapHeader > div.text { text-align: center; flex: 1; display: flex; justify-content:center; align-items:center;  gap: 1rem; font-size: 1.25rem;}
}