/* BASIC css start */
/*--------------------------------------------------------------------------------
//
//            공통
//
--------------------------------------------------------------------------------*/
.main section,
.main section *{
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
            box-sizing:border-box;
}

.main section{
    margin-bottom:5.222vw;
}

.main section h2.secTit,
.main section h2.secTit a{
    display:block;
    margin-bottom:4.167vw;
    font-size:5.556vw;
    font-weight:600;
    line-height:8.333vw;
}

html body {
    padding:0;
}


body header .etcPageHeader{
    display:none;
}

/*--------------------------------------------------------------------------------
//
//            swiper overflow 수정
//
--------------------------------------------------------------------------------*/
.mainSec04,
.mainSec06,
.mainSec07{
    overflow:hidden;
}

.mainSec04 .swiper,
.mainSec06 .swiper,
.mainSec07 .swiper{
    overflow:visible;
}


/*--------------------------------------------------------------------------------
//
//            메인 대분류 카테고리 리스트
//
--------------------------------------------------------------------------------*/
.categoryListWrap .fixedArea{
    border-bottom:0.278vw solid #e9e9e9;
    background:#fff;
    transition:all 0.3s;
}

.categoryListWrap .fixedArea.fixed{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    z-index:99;
}

.categoryListWrap ul li{
    width:auto;
    margin-right:1.389vw;
}

.categoryListWrap ul li:last-child{
    margin-right:0;
}

.categoryListWrap ul li a{
    display:block;
    position:relative;
    padding: 2.778vw 4.167vw;
    font-size:3.889vw;
    line-height:5vw;
}

.categoryListWrap ul li a.active:after{
    content:'';
    display:block;
    position:absolute;
    bottom:0;
    left: 3.167vw;
    width: calc(100% - 6.333vw);
    height:0.556vw;
    background:#000;
}

/*--------------------------------------------------------------------------------
//
//            section01
//
--------------------------------------------------------------------------------*/
.main .mainSec01{
    width:100%;
    margin-bottom:1.389vw;
    overflow:hidden;
}

.mainSec01 .swiper .swiper-slide img{
    display:block;
    width:100%;
}

.mainSec01 .swiper-horizontal>.swiper-pagination-progressbar,
.mainSec01 .swiper-pagination-progressbar.swiper-pagination-horizontal,
.mainSec01 .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.mainSec01 .swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{
    width:70%;
    height:2px;
    top:auto;
    bottom:20px;
    left:15%;
}

.mainSec01 .swiper-pagination-progressbar{
    background:#000;
}

.mainSec01 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
    background:#fff;
}

.mainSec01 ul li{
    overflow:hidden;
}

.mainSec01 ul li a{
    display:block;
    position:relative;
}

.mainSec01 ul li .textBox{
    position:absolute;
    bottom:34.444vw;
    left:15px;
}

.mainSec01 ul li .textBox strong{
    display:block;
    margin-bottom:5.556vw;
    font-size:8.333vw;
    line-height:9.722vw;
    font-weight:400;
    color:#fff;
    opacity:0;
    margin-left:-100%;
    
    transition:all 0.5s;
}

.mainSec01 ul li .textBox span{
    display:block;
    font-size:4.167vw;
    line-height:5.556vw;
    color:#fff;
    opacity:0;
    margin-left:-100%;
    
    transition:all 0.8s;
}

.mainSec01 ul li.swiper-slide-active .textBox strong{
    opacity:1;
    margin-left:0;
}

.mainSec01 ul li.swiper-slide-active .textBox span{
    opacity:1;
    margin-left:0;
}



/*--------------------------------------------------------------------------------
//
//            section02
//
--------------------------------------------------------------------------------*/
.mainSec02 .sec02Wrap{
    display:flex;
}

.mainSec02 .box1{
    width:50%;
    padding:1.722vw 1.167vw 0;
    text-align:center;
}




.mainSec02 .box2{
    width:50%;
    padding:1.722vw 1.167vw 0;
    overflow:hidden;
}

.mainSec02 .box2 .swiper{
    overflow:visible;
}

.mainSec02 .box2 ul{
    padding-right:15px;
}

.mainSec02 .box2 ul li img{
    display:block;
    width:100%;
}

.mainSec02 .box2 ul li span{
    display:block;
    padding-top:1.389vw;
    text-align:center;
    line-height:4.444vw;
    font-size:3.333vw;
    font-weight:500;
}

/*--------------------------------------------------------------------------------
//
//            section03
//
--------------------------------------------------------------------------------*/
.mainSec03 img{
    display:block;
    width:100%;
    padding-top: 30px;
}

/*--------------------------------------------------------------------------------
//
//            mainSec05
//
--------------------------------------------------------------------------------*/
.mainSec05{
    overflow:hidden;
}

.mainSec05 .goodsListWrap {
    margin-bottom:11.111vw;
}

.mainSec05 .goodsListWrap .swiper{
    overflow:visible;
}


.mainSec05 .goodsListWrap li:nth-child(1){
    position:relative;
    width:83.333vw;
    margin-left:-4.167vw;
}

.mainSec05 .goodsListWrap li:nth-child(1) a{
    display:block;
}

.mainSec05 .goodsListWrap li:nth-child(1) img{
    width:100%;
}

.mainSec05 .goodsListWrap li:nth-child(1) .textBox{
    position:absolute;
    bottom:13.889vw;
    left:4.167vw;
}

.mainSec05 .goodsListWrap li:nth-child(1) .textBox strong{
    display:block;
    margin-bottom:5.278vw;
    font-size:6.667vw;
    font-weight:400;
    line-height:8.333vw;
    color:#fff;
}

.mainSec05 .goodsListWrap li:nth-child(1) .textBox .hashTag span{
    display:inline-block;
    margin-right:0.556vw;
    padding:0 4.167vw;
    font-size: 3.056vw;
    line-height:6.667vw;
    text-align:center;
    background:#fff;
    border-radius:3.333vw;
}

.mainSec05 .goodsListWrap li:nth-child(n+2){
    width:43.056vw;
    margin-top:11.667vw;
}

.mainSec05 .goodsListWrap li:nth-child(1),
.mainSec05 .goodsListWrap li:nth-child(n+2){
    margin-right:4.167vw;
}

.mainSec05 .goodsListWrap li:last-child{
    margin-right:0;
}

.mainSec05 .goodsListWrap .moreAndPaging{
    padding:4.167vw;
}

.mainSec05 .goodsListWrap .moreAndPaging a{
    display:block;
    width:17.778vw;
    font-size:2.778vw;
    line-height:6.667vw;
    text-align:center;
    color:#fff;
    background:#000;
    border-radius:3.333vw;
}

.mainSec05 .goodsListWrap .moreAndPaging .swiper-pagination-progressbar.swiper-pagination-horizontal{
    width: 59.444vw;
    height: 0.556vw;
    top: auto;
    bottom: 7.222vw;
    left: 23.889vw;
    background:#d9d9d9;
}

.mainSec05 .goodsListWrap .moreAndPaging .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
    background:#000;
}


/*--------------------------------------------------------------------------------
//
//            mainSec06
//
--------------------------------------------------------------------------------*/
section.mainSec06 h2.secTit, section.mainSec06 h2.secTit a{
    margin-bottom:2.778vw;
}

.mainSec06 .tabBtn{
    padding:0 0 2.778vw;
}


.mainSec06 .bestSellTab{
    display:none;
}

.mainSec06 .bestSellTab:nth-child(1){
    display:block;
}

.mainSec06 .tabBtn li{
    margin-right:6.944vw;
}

.mainSec06 .tabBtn li:last-child{
    margin-right:0;
}

.mainSec06 .tabBtn li a{
    display:block;
    font-size:3.333vw;
    line-height:5.556vw;
    color:#969696;
    font-weight:500;
}

.mainSec06 .tabBtn li.active a{
    color:#000;
}



/*--------------------------------------------------------------------------------
//
//            mainSec07
//
--------------------------------------------------------------------------------*/
.mainSec07 .leftBox{
    margin-bottom:90px;
}

.mainSec07 .planBox .box1{
    margin-bottom:6px;
}

.mainSec07 .planBox .box1 a img{
    width:100%;
}



/* Top Search Form & Suggest Keywords  */

.hk-search-r{border-top: 40px solid #f5f5f5; border-bottom: 40px solid #f5f5f5;}
.top-search-area {display: flex; align-items: center;   background-color: #f5f5f5;}
.top-search-area .sgk {position: relative;}
.suggestKeywordsDisp {display: flex; /* 플렉스 박스 사용 */ align-items: center; /* 수직 가운데 정렬 */position: relative; margin-right: 20px; width: 250px; height: 32px; overflow: hidden;}
.suggestKeywordsDisp .b-toggle {
    content: ''; display: inline-block; margin-left: 8px; width: 20px; height: 33px;
    position: absolute; top: 4px; left:199px;
    background: url(/design/theonme/img/arrow6-d.png) center no-repeat;
    background-size: 16px auto;
    cursor: pointer;
}
.suggestKeywordsDisp .mk_keyword {position: absolute;}
.suggestKeywordsDisp  li a {font-size: 13px; line-height: 32px; color: #111; transition: color .2s;}
.suggestKeywordsDisp  a strong {color: #111;}
.suggestKeywordsDisp  a:hover {color: #ccc;}
.suggest-keywords-container {display: none; position: absolute; top: 100%; left: 133px; width: 250px; background-color: #fff; border: 1px solid #e7e7e7;  text-align: left; z-index: 10010;}
.mk_new_ranking .mk_keyword_wrap .mk_keywords li.mk_txt_date {display:none;}
.mk_new_ranking { position: relative; border : 0px ! important; margin: 0 auto; }
li.mk_txt_date {display:none;}
.mk_keywords_num {display:none;}

.suggest-keywords-container .w-inner {}
.suggest-keywords-container h4 { padding: 8px 12px;  border-bottom: 1px solid #e7e7e7; font-size: 13px; font-weight: 600; color: #111;}

.suggest-keywords-container .mk_keywords span {padding: 2px 0;}
.suggest-keywords-container .mk_keywords li a {display: block; padding: 0 2px; font-size: 13px; line-height: 20px; color: #111; transition: color .2s ! important;}
.suggest-keywords-container .mk_keywords a strong {color: #111;}
.suggest-keywords-container .mk_keywords a:hover {color: #ccc;}


.hs-dib.sgk {display: flex; align-items: center; margin:0 auto;}
.title-container { margin-right: 30px; white-space: nowrap; color: #000; font-size: 16px; font-weight: bold; line-height: 1.4; margin-left:30px}
.suggestKeywordsDisp {
    display: flex;
    align-items: flex-start;
    padding: 5px 10px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 300px;
    justify-content: space-between;
}

.best_p{display: grid; grid-template-columns: repeat(2, 1fr);  gap: 10px;  list-style: none;  padding: 0;}
.up {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 7px solid red; /* 빨간 삼각형 */
    position: relative;
    top: -1px;
}

/* BASIC css end */