@charset "utf-8";

/* ******************* *
* MAIN COMMON
* ******************* */
.msec-title {margin-bottom: 16px;font-size: 2.0em;font-weight: 700;}
.btn-link {display: inline-block;color: #fff;font-size: 16px;position: relative;}
.btn-link::after {content: '';display: block;width: 100%;height: 1px;background: #fff;position: absolute;top: calc(100% + 5px);left: 0;right: 0;margin: auto;transform: scaleX(1);transform-origin: right center;transition: .35s;}
.btn-link:hover::after {transform: scaleX(0);}


/* 상품 목록 스킨(MD'S PICK / BEST SELLER) main.60.skin */
.mitem-list_wrap {}
.mitem-list {display: flex;flex-wrap: wrap;gap: 90px 30px;}
.mitem-list > .item {width: calc(25% - 22.5px);}
.mitem-list > .item > .thumb {width: 100%;aspect-ratio: 72 / 95;margin-bottom: 15px;position: relative;overflow: hidden;}
.mitem-list > .item > .thumb > a {display: block;width: 100%;height: 100%;}
.mitem-list > .item > .thumb > a > img {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;transition: .35s;}
.mitem-list > .item > .thumb > a:hover > img {transform: scale(1.05);}
.mitem-list > .item > .item-info {font-size: 16px;}
.mitem-list > .item > .item-info > .name {margin-bottom: 5px;display: -ms-flexbox;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;overflow: hidden;-webkit-line-clamp: 2;}
.mitem-list > .item > .item-info > .price {font-weight: 700;}

@media all and (max-width: 1399px){
    .mitem-list {gap: 60px 20px;}
    .mitem-list > .item {width: calc(25% - 15px);}
}
@media all and (max-width: 768px){
    .mitem-list {gap: 60px 20px;}
    .mitem-list > .item {width: calc(50% - 10px);}
}
@media all and (max-width: 640px){
    .mitem-list {gap: 40px 10px;}
    .mitem-list > .item {width: calc(50% - 5px);}
}


/* ******************* *
* MVIS
* ******************* */
#mvis {width: 100%;position: relative;}
#mvis .cinner {height: 100%;margin: 0;}
#mvis .mvis__img {width: 100%;height: 100%;}
#mvis .mvis__img img {width: 100%;height: 100%;object-fit: cover;}
#mvis .mvis-title {color: #fff;font-size: 2.20em;font-weight: 200;text-align: center;line-height: 1.5;position: relative;bottom: 10%;}
#mvis .mvis-title b {font-weight: 700;}

@media all and (max-width: 1024px){
    #mvis {max-height: none;height: auto;}
}
@media all and (max-width: 768px){
    #mvis .mvis-title {font-size: 2.0em;}
}
@media all and (max-width: 640px){
    #mvis .mvis-title {font-size: 24px;}
}
@media all and (max-width: 480px){
   #mvis .mvis-title {font-size: 20px;}
}


/* ******************* *
* MD'S PICK
* ******************* */
#mmdpick {padding: 90px 0 100px;}

@media all and (max-width: 768px){
    #mmdpick {padding: 80px 0;}    
}





/* ******************* *
* BRAND BANNER
* ******************* */
/* #mbrand {padding: 284px 0;background-image: url(../img/main/mbrand-img_bg.jpg);background-size: cover;background-attachment: fixed;position: relative;} */
#mbrand {position: relative;}
#mbrand::after {content: '';display: block;width: 100%;height: 100%;position: absolute;inset: 0;z-index: 0;transition: .35s;}
#mbrand .img {}
#mbrand .img img {min-height: 416px;object-fit: cover;}
#mbrand .cinner {position: absolute;inset: 0;z-index: 10;}
#mbrand .contents {width: 100%;color: #fff;text-align: center;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 10;}
#mbrand .title {margin-bottom: 20px;font-size: 2.0em;font-weight: 700;}
#mbrand .txt {margin-bottom: 70px;font-size: .90em;line-height: 1.5;}
#mbrand:has(a:hover)::after,
#mbrand:has(a:focus)::after{backdrop-filter: blur(5px);}

/* @media all and (max-width: 1399px){
    #mbrand {padding: 180px 0;}
}
@media all and (max-width: 1199px){
    #mbrand {padding: 120px 0;}
}
@media all and (max-width: 640px){
    #mbrand {padding: 90px 0;}
} */



/* ******************* *
* PROMOTION BANNER
* ******************* */
#mpromo {padding: 90px 0 100px;}
#mpromo .contents {/* padding: 12px 0; */background: #000;}
#mpromo .cnt-wrap {display: flex;justify-content: space-between;align-items: center;max-width: 1300px;width: 85%;min-height: 240px;margin: 0 auto;box-sizing: border-box;position: relative;}
#mpromo .desc-cont {color: #fff;}
#mpromo .desc-cont > .title {margin-bottom: 15px;font-size: 2.0em;font-weight: 500;line-height: 1.2;}
#mpromo .desc-cont > .txt {font-size: 16px;}
#mpromo .img-cont {width: 368px;position: absolute;bottom: 0;right: 0;}
#mpromo .img-cont > img {width: 100%;}

@media all and (max-width: 1399px){
    #mpromo .cnt-wrap {width: 90%;}
    #mpromo .img-cont {width: 308px;}
}
@media all and (max-width: 1199px){
    #mpromo .desc-cont > .title {font-size: 1.80em;}
    #mpromo .img-cont {width: 280px;}
}
@media all and (max-width: 1024px){
    #mpromo {padding: 80px 0;}
    #mpromo .cnt-wrap{flex-direction: column;gap: 30px;padding: 50px 0 0 0;}
    #mpromo .desc-cont {text-align: center;}
    #mpromo .img-cont {width: 250px;position: relative;}
}
@media all and (max-width: 640px){
    #mpromo .cnt-wrap {width: auto;margin: 0 50px;}
    #mpromo .desc-cont > .title {font-size: 28px;}
    #mpromo .desc-cont > .txt {font-size: 15px;}
    #mpromo .img-cont {width: 220px;}
}


/* ******************* *
* BEST SELLER
* ******************* */
#mbest {margin-bottom: 115px;}
#mbest .tab-menu {margin-bottom: 50px;}
#mbest .tab-menu > ul {display: flex;flex-wrap: wrap;gap: 10px;}
#mbest .tab-menu > ul > li > a {display: block;padding: 12px 30px;border: 1px solid #E0E0E0;box-sizing: border-box;border-radius: 23px;color: #B7B7B7;font-size: 16px;font-weight: 600}
#mbest .tab-menu > ul > li.active > a {border-color: #000;background: #000;color: #fff;}
#mbest .tab-content {display: none;}
#mbest .tab-content.active {display: block;}

@media all and (max-width: 1199px){
    #mbest .tab-menu {margin-bottom: 30px;}
}
@media all and (max-width: 768px){
    #mbest {margin-bottom: 80px;}
    #mbest .tab-menu > ul > li > a {padding: 8px 26px;font-size: 14px;}
}


/* ******************* *
* LOOKBOOK
* ******************* */
#mlbook {margin-bottom: 150px;}
#mlbook .list-swiper-cont {position: relative;}
#mlbook .list-swiper .img-cont {width: 100%;aspect-ratio: 179 / 130;}
#mlbook .list-swiper .img-cont > a {display: block;width: 100%;height: 100%;overflow: hidden;position: relative;transition: .35s;}
#mlbook .list-swiper .img-cont > a > img {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;}
#mlbook .list-swiper .img-cont > a > .over {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: rgba(0,0,0,.5);position: absolute;inset: 0;margin: auto;opacity: 0;visibility: hidden;transition: .35s;}
#mlbook .list-swiper .img-cont > a:hover,
#mlbook .list-swiper .img-cont > a:focus {border-radius: 50px;}
#mlbook .list-swiper .img-cont > a:hover > .over,
#mlbook .list-swiper .img-cont > a:focus > .over {opacity: 1;visibility: visible;}
#mlbook .list-swiper-ctrls {display: flex;justify-content: center;align-items: center;}
#mlbook .list-swiper-ctrls .data-nav button {display: block;width: 60px;aspect-ratio: 1 / 1;border: 1px solid #E3E3E3;border-radius: 50%;box-sizing: border-box;background: #fff;position: absolute;top: 50%;z-index: 10;}
#mlbook .list-swiper-ctrls .data-nav button:after {content: '';display: block;border-width: 2px;border-style: solid;border-color: transparent #000 #000 transparent;border-radius: 2px;box-sizing: border-box;width: 25%;height: 25%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
#mlbook .list-swiper-ctrls .data-nav .btn-prev {left: 0;transform: translate(-50%, -50%);}
#mlbook .list-swiper-ctrls .data-nav .btn-next {right: 0;transform: translate(50%, -50%);}
#mlbook .list-swiper-ctrls .data-nav .btn-prev:after {transform: rotate(135deg) translate(-22%, -22%);}
#mlbook .list-swiper-ctrls .data-nav .btn-next:after {transform: rotate(-45deg) translate(-11%, -11%);}
#mlbook .list-swiper-ctrls .data-nav button.swiper-button-lock {display: none;}

@media all and (max-width: 1199px){
    #mlbook .list-swiper-ctrls .data-nav button {width: 50px;}
}
@media all and (max-width: 1024px){
    #mlbook {margin-bottom: 120px;}
}
@media all and (max-width: 768px){
    #mlbook {margin-bottom: 100px;}
    #mlbook .list-swiper-ctrls .data-nav button {width: 36px;}
}
@media all and (max-width: 480px){
}




/* ******************* *
* ROLLING BANNER
* ******************* */
/* #mrollingbn {padding: 20px 0;border-top: 1px solid #000;box-sizing: border-box;overflow: hidden;}
.mrollingbn-txt {font-size: 2.50em;font-weight: 800;white-space: nowrap;}
.mrollingbn-txt span {display: inline-block;}
.mrollingbn-txt span:not(:last-child) {margin-right: 115px;}

@media all and (max-width: 1199px){
    #mrollingbn {padding: 15px 0;}
    .mrollingbn-txt {font-size: 2.0em;}
    .mrollingbn-txt span:not(:last-child) {margin-right: 90px;}
}
@media all and (max-width: 768px){
    .mrollingbn-txt {font-size: 1.76em;}
    .mrollingbn-txt span:not(:last-child) {margin-right: 50px;}
} */