@charset "utf-8";
/* mobile 750 이하 적용 */

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

html::-webkit-scrollbar {width: 5px;background: #f7f7f7;}
html::-webkit-scrollbar-thumb {background-color: #363e4f;border-radius: 5px;}

#mainWrap .title {display: flex;flex-wrap: wrap;align-items: center;margin-bottom: 20px; justify-content: space-between;}
#mainWrap .title h5 {color: #222;}
#mainWrap .title a {margin-top: 0;margin-left: 15px;width: 90px;height: 30px;border: 1px solid #ccc;border-radius: 15px;box-sizing: border-box;text-align: center;font-family: 'empty';font-size: 0;}
#mainWrap .title a span {display: inline-block;vertical-align: top;padding-right: 15px;font-family: noto;font-size: 12px;line-height: 30px;color: #333;letter-spacing: -0.5px;background: url('../images/main/main_more_ico.png') no-repeat right center;background-size: auto 35%;}

#main #mo1 {border-bottom: 1px solid #ddd;padding-bottom: 20px;}
#main #mo1 .inner {overflow: visible;}
/* #main #mo1 .inner {overflow: hidden;overflow-x: scroll;white-space: nowrap;} */
/* #main #mo1 .inner::-webkit-scrollbar {height: 5px;background: #f7f7f7;}
#main #mo1 .inner::-webkit-scrollbar-thumb {background-color: #363e4f;border-radius: 5px;} */
#main #mo1 ul {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;
    text-overflow: ellipsis;
}
#main #mo1 ul > li {
    width: calc(25% - 10px); 
    margin-bottom: 0px; 
    margin-right: 0; 
    display: block; 
    vertical-align: top;
    white-space: normal;
    position: relative;
}

ul.bd_list2 P{
    font-weight: 600;
    color: #000000;
}
#main #mo1 ul > li .link {position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 11;}
#main #mo1 ul > li .ico {width: 100%;padding-bottom: 100%;border-radius: 28px;overflow: hidden;position: relative;}
#main #mo1 ul > li .ico img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}
#main #mo1 ul > li p {display: block;padding: 0;text-align: center;font-size: 12px;color: #333;line-height: 1.4em;word-break: break-all !important;}

#main #mo2 .roll {margin-right: -25vw !important;}

#main #mo3 .title {margin-bottom: 15px;}

#main #mo4 .ajaxBtn {margin: -3px;margin-bottom: 19px;margin-right: -13px;padding-right: 10px;padding-bottom: 3px;display: block;overflow: hidden;overflow-x: scroll;white-space: nowrap;font-family: 'empty';font-size: 0;}
#main #mo4 .ajaxBtn::-webkit-scrollbar {height: 5px;background: #f7f7f7;}
#main #mo4 .ajaxBtn::-webkit-scrollbar-thumb {background-color: #363e4f;border-radius: 5px;}
#main #mo4 .ajaxBtn a {display: inline-block;vertical-align: middle;font-size: 12px;margin: 3px;padding: 0 15px;height: 40px;line-height: 36px;border-radius: 20px;border: 1px solid #ddd;background: #fff;box-sizing: border-box;}
#main #mo4 .ajaxBtn a.active {background-color: #333;border-color: #333;color: #fff;}
#main #mo4 .ajaxBtn a.active:after {display: none;}
#main #mo4 .banner_mo {position: relative;margin-bottom: 20px;}
#main #mo4 .banner_mo .link {position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 11;}
#main #mo4 .banner_mo .thumb {position: relative;overflow: hidden;border-radius: 15px;padding-bottom: 100%;box-shadow: 0 0 3px rgba(0,0,0,0.08);padding-bottom: 36.76%;/* padding-bottom: 61.53%; pc 기준 크기*/}
#main #mo4 .banner_mo .thumb > img {object-fit: cover;position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;display: block;}
#main #mo4 .roll_mo {margin: 0 -10px;margin-right: -25vw !important;}
#main #mo4 .roll_mo .item {position: relative; margin: 0 10px;}
#main #mo4 .roll_mo .item a {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10}
#main #mo4 .roll_mo .item .thumb {position: relative; padding-bottom: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 8px;}
#main #mo4 .roll_mo .item .info {margin-top: 20px}
#main #mo4 .roll_mo .item .info .cate {font-size: 12px; line-height: 18px;}
#main #mo4 .roll_mo .item .info h6 {margin: 2px 0 5px; font-size: 14px; line-height: 21px;font-weight: normal;color: #333; letter-spacing: -0.5px;display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
#main #mo4 .roll_mo .item .info .cost > * {line-height: 26px;}
#main #mo4 .roll_mo .item .info .cost del {font-size: 13px; color: #888;}
#main #mo4 .roll_mo .item .info .cost strong {font-size: 16px; color: #333;}
#main #mo4 .roll_mo .item .info .cost strong b {color: #df0076}
#main #mo4 .roll_mo .item .info .cost strong span {font-weight: normal; font-size: 15px; color: inherit}
#main #mo4 .roll_mo .item .info .stt {margin-top: 8px; font-size: 0}
#main #mo4 .roll_mo .item .info .stt span {display: inline-block; vertical-align: top; margin: 0 3px 3px 0; padding: 0 5px;font-size: 10px; line-height: 16px;border-radius: 3px;text-align: center; color: #fff;}
#main #mo4 .roll_mo .item .info .stt .rec {background: #df0076}
#main #mo4 .roll_mo .item .info .stt .hot {background: #0071bb}
#main #mo4 .roll_mo .item .info .stt .new {background: #12b2bf}
#main .info .cost > * {line-height: 18px !important;}
#main .info .cost del {font-size: 11px !important;}
#main .info .cost strong {font-size: 13px !important;}
#main .info .cost strong span {font-size: 12px !important;}

/* mo6 브랜드 슬라이드 - 모바일 전용 2행 4열 레이아웃 (rows 모드) */

    #main #mo6 .roll_mo {
        margin: 0 !important;
        padding: 0 !important;
    }

    #main #mo6 .slick-list {
        margin: 0 -5px !important;
    }

    #main #mo6 .slick-track {
        display: block !important;
    }

    #main #mo6 .slick-slide {
        height: auto !important;
        margin-bottom: 0 !important;
    }

    /* rows 모드에서 Slick이 자동으로 만드는 구조 */
    #main #mo6 .slick-slide .slick-slide {
        margin: 0 5px 10px 5px !important;
    }

    #main #mo6 .item {
        margin: 0 !important;
        padding: 0 !important;
    }

    #main #mo6 .item a {
        display: block !important;
        overflow: hidden;
        border: 1px solid #ddd;
        border-radius: 16px;
        background: #fff;
        transition: all 0.2s ease;
        padding: 8px;
    }

    #main #mo6 .item a:hover {
        border-color: #999;
        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    #main #mo6 .item a img {
        width: 100% !important;
        height: 50px !important;
        object-fit: contain !important;
        display: block !important;
    }

    #main #mo6 .item p {
        display: block;
        padding: 6px 0 0 0;
        text-align: center;
        font-size: 11px;
        color: #333;
        line-height: 1.3em;
        word-break: keep-all;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #main #mo6 .slick-dots {
        display: block !important;
        bottom: -30px;
        text-align: center;
        padding-top: 15px;
    }

    #main #mo6 .slick-dots li {
        display: inline-block;
        margin: 0 3px;
    }

    #main #mo6 .slick-dots li button:before {
        font-size: 8px;
        opacity: 0.3;
        color: #333;
    }

    #main #mo6 .slick-dots li.slick-active button:before {
        opacity: 1;
        color: #333;
    }


#main #mo7 .roll_mo {margin: 0 -5px;margin-right: -25vw !important;}
#main #mo7 .item {position: relative; margin: 0 5px}
#main #mo7 .item a {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10}
#main #mo7 .item .thumb {position: relative; padding-bottom: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 8px;}
#main #mo7 .item .thumb .numb {position: absolute; top: 0; left: 0; width: 32px; height: 32px; border-radius: 8px 0 8px 0; font-weight: bold; font-size: 15px; line-height: 32px; text-align: center; color: #fff; background: var(--point-color2)}
#main #mo7 .item .thumb .numb.first {background: #df0076}
#main #mo7 .item .info {margin-top: 20px}
#main #mo7 .item .info .cate {font-size: 12px; line-height: 18px; color: #666666}
#main #mo7 .item .info h6 {margin: 2px 0 5px;font-weight: normal;font-size: 14px; line-height: 21px;color: #333333; letter-spacing: -0.5px;display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
#main #mo7 .item .info .cost > * {line-height: 26px}
#main #mo7 .item .info .cost del {font-size: 13px; color: #888888}
#main #mo7 .item .info .cost strong {font-size: 16px; color: #333333}
#main #mo7 .item .info .cost strong b {color: #df0076}
#main #mo7 .item .info .cost strong span {font-weight: normal; font-size: 15px; color: inherit}
#main #mo7 .item .info .stt {margin-top: 8px; font-size: 0}
#main #mo7 .item .info .stt span {display: inline-block; vertical-align: top; margin: 0 3px 3px 0; padding: 0 5px;font-size: 10px; line-height: 16px;border-radius: 3px;text-align: center; color: #fff}
#main #mo7 .item .info .stt .rec {background: #df0076}
#main #mo7 .item .info .stt .hot {background: #0071bb}
#main #mo7 .item .info .stt .new {background: #12b2bf}

#main #mo8 .roll .item .thumb {padding-bottom: 21.57%;}

#main #mo9 .title {justify-content: space-between;
    /* flex-wrap: nowrap; */
}
#main #mo9 .title button[type=button] {margin-top: 0;}
#main #mo9 .roll_mo {display: flex; flex-flow: row wrap; margin: 0 -5px;margin-right: -25vw !important;}
#main #mo9 .item {position: relative; width: calc(100% / 3 - 10px); margin: 0 10px}
#main #mo9 .item a {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10}
#main #mo9 .item .thumb {position: relative; padding-bottom: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 12px}
#main #mo9 .item .info {margin-top: 20px}
#main #mo9 .item .info h6 {margin: 5px 0; font-weight: normal; font-size: 16px; line-height: 24px; color: #333333; letter-spacing: -0.5px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: block;}
#main #mo9 .item .info .cost > * {line-height: 28px}
#main #mo9 .item .info .cost del {font-size: 14px; color: #888888}
#main #mo9 .item .info .cost strong {font-size: 18px; color: #333333}
#main #mo9 .item .info .cost strong b {color: #df0076}
#main #mo9 .item .info .cost strong span {font-weight: normal; font-size: 15px; color: inherit}
#main #mo9 .item .info .stt {margin-top: 12px; font-size: 0}
#main #mo9 .item .info .stt span {display: inline-block; vertical-align: top; margin: 0 3px 3px 0; padding: 0 7px; font-size: 12px; line-height: 20px; border-radius: 4px; text-align: center; color: #fff}
#main #mo9 .item .info .stt .rec {background: #df0076}
#main #mo9 .item .info .stt .hot {background: #0071bb}
#main #mo9 .item .info .stt .new {background: #12b2bf}

/* 0911 모바일 유튜브+블로그 섹션 스타일 */
    #main #mo_youtube.section-youtube-mobile {
        margin: 40px 0 !important;
        /* padding: 0 10px !important; */
    }

    #main #mo_youtube.section-youtube-mobile .title {
        margin-bottom: 20px !important;
    }

    #main #mo_youtube.section-youtube-mobile .title h5 {
        font-size: 20px !important;
        line-height: 24px !important;
        color: #222 !important;
        /* margin: 0 !important; */
        /* margin-left: -20px; */
    }

    /* 유튜브 동영상 1열 배치 강제 적용 */
    #main #mo_youtube.section-youtube-mobile .video-container-mobile {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 15px !important;
        margin-bottom: 40px !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }

    #main #mo_youtube.section-youtube-mobile .video-item-mobile {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        background: #fff !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
        display: block !important;
        margin: 0 !important;
    }

    #main #mo_youtube.section-youtube-mobile .video-wrapper-mobile {
        position: relative !important;
        width: 100% !important;
        padding-bottom: 56.25% !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    #main #mo_youtube.section-youtube-mobile .video-item-mobile iframe {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border: 0 !important;
        border-radius: 8px !important;
    }

    /* 블로그 섹션 2x2 배치 유지 */
    #main #mo_youtube.section-youtube-mobile .blog-section-mobile {
        margin-top: 30px !important;
    }

    #main #mo_youtube.section-youtube-mobile .blog-section-mobile .title {
        margin-bottom: 20px !important;
    }

    #main #mo_youtube.section-youtube-mobile .blog-section-mobile .title h5 {
        font-size: 20px !important;
        line-height: 24px !important;
        color: #222 !important;
        /* margin-left: -20px; */
    }

    #main #mo_youtube.section-youtube-mobile .blog-container-mobile {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    #main #mo_youtube.section-youtube-mobile .blog-item-mobile {
        width: calc(50% - 5px) !important;
        background: #fff !important;
        border: 1px solid #e5e5e5 !important;
        border-radius: 8px !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        text-decoration: none !important;
        color: inherit !important;
        display: flex !important;
        flex-direction: column !important;
        transition: all 0.2s ease !important;
        height: 160px !important;
        flex: none !important;
    }

    #main #mo_youtube.section-youtube-mobile .blog-item-mobile:hover {
        box-shadow: 0 3px 8px rgba(0,0,0,0.1) !important;
        transform: translateY(-1px) !important;
    }

    #main #mo_youtube.section-youtube-mobile .blog-content-mobile {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #main #mo_youtube.section-youtube-mobile .blog-title-mobile {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #333 !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
        margin-top:5px;
        height: 34px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #main #mo_youtube.section-youtube-mobile .blog-summary-mobile {
        font-size: 11px !important;
        color: #666 !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin-bottom: 8px !important;
    }

    #main #mo_youtube.section-youtube-mobile .blog-date-mobile {
        font-size: 10px !important;
        color: #999 !important;
        display: flex !important;
        align-items: center !important;
        padding-top: 6px !important;
        border-top: 1px solid #f0f0f0 !important;
        margin-top: auto !important;
    }

    #main #mo_youtube.section-youtube-mobile .blog-date-mobile::before {
        content: '' !important;
        display: inline-block !important;
        width: 10px !important;
        height: 10px !important;
        background: #00c73c !important;
        border-radius: 50% !important;
        margin-right: 5px !important;
        flex-shrink: 0 !important;
    }

    .sub-title-0911 {
        display: block;
        width: 100%;
        margin-top: 5px;
    }

    /* 251016 갓파츠 혜택 변경 */
    /* 2x2 그리드 레이아웃 */
    .image-grid.mo-layout {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px; 
        margin-top: 20px;
    }

    .image-grid.mo-layout .grid-item:last-child{
  
    }

    .image-grid.mo-layout a{
        border-radius: 10px;
        overflow: hidden;
    }

    .image-grid.mo-layout .grid-item img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* 20251027 */
    /* ajaxBtns 그리드 레이아웃: 3열 배치 (모바일) */
        #main #mo9 .ajaxBtns-grid {
            display: grid !important;
            grid-template-columns: repeat(5, 1fr) !important;
            /* gap: 2px; */
            /* margin-bottom: 20px; */
            margin: 0 !important;
            padding: 0 !important;
        }
        #main #mo9 .ajaxBtns-grid a:nth-child(20) {
            display: none !important;
        }

        #main #mo9 .ajaxBtns-grid a {
            /* display: flex; */
            /* flex-direction: column; */
            /* align-items: center; */
            justify-content: center;
            padding: 6px 3px;
            /* border: 1px solid #ddd; */
            border-radius: 12px;
            background: #fff;
            text-align: center;
            transition: all 0.2s ease;
            text-decoration: none;
            color: #333;
            font-size: 10px;
            line-height: 1.3;
        }

        /* #main #mo9 .ajaxBtns-grid a:hover, */
        #main #mo9 .ajaxBtns-grid a.active {
            background-color: #333;
            border-color: #333;
            color: #fff;
        }

        #main #mo9 .ajaxBtns-grid a .img {
            width: 35px;            /* 아이콘 크기 축소 */
            height: 35px;
            margin-bottom: 4px;
            position: relative;
        }

        #main #mo9 .ajaxBtns-grid a .img img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            position: absolute;
            top: 0;
            left: 0;
            transition: opacity 0.2s ease;
        }

        #main #mo9 .ajaxBtns-grid a .img .def {
            opacity: 1;
        }

        #main #mo9 .ajaxBtns-grid a .img .act {
            opacity: 0;
        }

        #main #mo9 .ajaxBtns-grid a:hover .img .def,
        #main #mo9 .ajaxBtns-grid a.active .img .def {
            opacity: 0;
        }

        #main #mo9 .ajaxBtns-grid a:hover .img .act,
        #main #mo9 .ajaxBtns-grid a.active .img .act {
            opacity: 1;
        }



    /* .prdList.gallery-list {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    .prdList.list-view {
        display: none !important;
    } */

}

/* 251001 모바일 섹션1 하단 버튼 */

.btn1011mo-wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin:16px 0 4px;
  padding:0 10px;
}

/* 공통 버튼(콘텐츠 길이만큼 너비) */
.btn1011-mo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;              /* 터치 여백 */
  min-height:44px;                /* 손가락 터치 기준 */
  border-radius:9999px;           /* 필 형태 */
  background:#0ea5e9;
  width: 150px;
  text-decoration:none !important;/* 글로벌 밑줄 방지 */
  font-size:16px;
  line-height:1;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
  transform:translateY(0);
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.btn1011-mo__title{
  font-weight:800;
  letter-spacing:-0.2px;
  text-align:center;
  color:#fff !important;
}

/* 상태 */
.btn1011-mo:active{ transform:translateY(1px) scale(.98); }
.btn1011-mo:focus-visible{ outline:3px solid rgba(255,255,255,.9); outline-offset:2px; }

/* 개별 색상 (데스크톱과 톤 일치) */
.onestop1011-mo{ background:black }
.bom1011-mo{     background:black }



/* 0911 모바일&블로그 섹션 더 작은 모바일에서의 추가 반응형 */
/* @media screen and (max-width: 480px) {
    #main #mo_youtube {
        padding: 0 15px;
    }
    
    #main #mo_youtube .video-container-mobile {
        gap: 12px;
        margin-bottom: 30px;
    }
    
    #main #mo_youtube .blog-container-mobile {
        gap: 12px;
    }
    
    #main #mo_youtube .blog-item-mobile {
        padding: 12px;
    }
} */