@charset "utf-8";


/* ******************* *
* 메인: 메인 비주얼
* ******************* */
#mvis {margin-bottom: 40px;position: relative;}
.mvis__slide {overflow: visible;}
.mvis__item {max-width: 1400px;width: 80% !important;border-radius: 20px;overflow: hidden;}
.mvis__item > a {display: block;width: 100%;height: 100%;}
.mvis__item > a img {width: 100%;}
.mvis__slide-ctrls button {width: 60px;aspect-ratio: 1 / 1;border-radius: 50%;background: var(--color-main);position: absolute;top: 50%;z-index: 10;}
.mvis__slide-ctrls button::before {content: '';width: 100%;height: 100%;background: url(../img/main/mvis-ico_arrow.png) center / cover no-repeat;position: absolute;inset: 0;margin: auto;}
.mvis__slide-ctrls .btn-prev {left: max(10%, calc((100% - 1400px) / 2));transform: translate(-50%, -50%);}
.mvis__slide-ctrls .btn-next {right: max(10%, calc((100% - 1400px) / 2));transform: translate(50%, -50%);}
.mvis__slide-ctrls .btn-next::before {transform: rotate(180deg);}

@media all and (max-width: 1199px){
    .mvis__item {width: 85% !important;}
    .mvis__slide-ctrls button {width: 50px;}
    .mvis__slide-ctrls .btn-prev {left: 7.5%;}
    .mvis__slide-ctrls .btn-next {right: 7.5%;}
}
@media all and (max-width: 1024px){
    .mvis__item {border-radius: 0;}
    .mvis__item {width: 100% !important;}
    .mvis__slide-ctrls button {transform: none !important;}
    .mvis__slide-ctrls .btn-prev {left: 20px;}
    .mvis__slide-ctrls .btn-next {right: 20px;}
}
@media all and (max-width: 768px){
    .mvis__slide-ctrls button {width: 40px;}
}
@media all and (max-width: 640px){
    .mvis__slide-ctrls .btn-prev {left: 10px;}
    .mvis__slide-ctrls .btn-next {right: 10px;}
}


/* ******************* *
* 메인: 퀵메뉴
* ******************* */
#mitemCate {margin-bottom: 50px;}
#mitemCate .list {display: flex;justify-content: center;align-items: center;gap: 60px;max-width: 780px;width: 95%;margin: 0 auto;}
#mitemCate .item {width: 25%;aspect-ratio: 1 / 1;}
#mitemCate .item a {display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 5px;width: 100%;height: 100%;border-radius: 50%;background: #F0F8E6;font-family: var(--font-Aritaburi);font-weight: 700;transition: .35s ease;}
#mitemCate .item a span {transition: .35s ease;}
#mitemCate .item .num {color: #CCE2B2;font-size: max(.1.70rem, 17px);}
#mitemCate .item .title {color: #406115;font-size: 2.50rem;font-weight: 700;}
#mitemCate .item a:hover {background: var(--color-main-hover);}
#mitemCate .item a:hover span {color: #fff;}

@media all and (max-width: 1024px){
    #mitemCate .list {gap: 40px;}
}
@media all and (max-width: 768px){
    #mitemCate .list {gap: 20px;}
}
@media all and (max-width: 640px){
    #mitemCate .list {width: 100%;}
    #mitemCate .list {flex-wrap: wrap;gap: 12px;max-width: 520px;}
    #mitemCate .item {width: calc(50% - 6px);aspect-ratio: auto;}
    #mitemCate .item a {padding: 16px 0;border-radius: 12px;}
}



/* ******************* *
* 메인: 프로모션 배너
* ******************* */
#mpromo {margin-bottom: 50px;padding: 100px 0;background: #F8FFEF;}
.mpromo__list {display: flex;gap: 60px;}
.mpromo__list .mpromo__item {width: calc(50% - 30px);}
.mpromo__list .mpromo__item a,
.mpromo__list .mpromo__item picture {display: block;width: 100%;height: 100%;border-radius: 15px;overflow: hidden;transition: .35s ease;cursor: pointer;}
.mpromo__list .mpromo__item a:hover,
.mpromo__list .mpromo__item picture:hover {border-radius: 0;opacity: .9;}

@media  all and (max-width: 1199px) {
    .mpromo__list {gap: 40px;}
    .mpromo__list .mpromo__item {width: calc(50% - 20px);}
}
@media  all and (max-width: 1024px) {
    #mpromo {padding: 80px 0;}
    .mpromo__list {gap: 20px;}
    .mpromo__list .mpromo__item {width: calc(50% - 10px);}
}
@media  all and (max-width: 768px) {
    .mpromo__list {gap: 0;}
    .mpromo__list .mpromo__item {width: 100%;}
}
@media  all and (max-width: 640px) {
    #mpromo {padding: 60px 0;}
}



/* ******************* *
* 메인: 이벤트 배너
* ******************* */
#mevent {margin-bottom: 100px;}
.mevent__item a,
.mevent__item picture {display: block;width: 100%;height: 100%;border-radius: 15px;overflow: hidden;transition: .3s ease;}
.mevent__item a:hover,
.mevent__item picture:hover {opacity: .9;}
.mevent__slide .mevent__slide-pagination {display: flex;justify-content: center;align-items: center;gap: 10px;margin-top: 15px;position: relative;top: auto  !important;bottom: auto !important;left: auto !important;}
.mevent__slide-pagination .swiper-pagination-bullet {width: 10px;height: 10px;margin: 0 !important;background: #D9D9D9;opacity: 1;}
.mevent__slide-pagination .swiper-pagination-bullet-active {background: var(--color-main);}

@media all and (max-width: 640px){
    .mevent__item a,
    .mevent__item picture {border-radius: 8px;}
    .mevent__slide .mevent__slide-pagination {gap: 8px;}
    .mevent__slide-pagination .swiper-pagination-bullet {width: 8px;height: 8px;}
}



/* ********************* *
* 메인: 공지사항, 고객센터
* ********************** */
#mcommunity {padding: 80px 0;background: #F4F4F4;}
#mcommunity .cinner {display: flex;justify-content: space-between;align-items: flex-start;gap: 45px;}
.cmn__latest {width: 450px;position: relative;}
.cmn__latest .latest__title {margin-bottom: 12px;font-size: 3.0rem;font-weight: 600;}
.cmn__latest .latest__more {color: #636363;font-family: var(--font-Outfit);font-size: max(1.70rem, 17px);position: absolute;top: 8px;right: 0;transition: .35s;}
.cmn__latest .latest__more:hover {color: var(--color-main-hover);}
.cmn__latest .latest__list {border-top: 3px solid #000;}
.cmn__latest .latest__item {display: flex;justify-content: space-between;align-items: center;gap: 20px;padding: 20px 0;border-bottom: 1px solid #DFDFDF;}
.cmn__latest .latest__item .item__title {display: block;font-size: max(1.70rem, 17px);overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.cmn__latest .latest__item .item__title:hover {color: #333}
.cmn__latest .latest__item .item__date {color: #4A4A4A;font-size: max(1.70rem, 17px);}
.cmn__cs {display: flex;justify-content: space-between;align-items: flex-start;gap: 30px;width: calc(100% - 450px);padding: 32px 54px 62px;box-sizing: border-box;border-radius: 30px;background: #fff;}
.cmn__cs .cs__info {flex: 0 0 auto;}
.cmn__cs .cs__info .title {margin-bottom: 16px;font-size: 2.50rem;font-weight: 500;}
.cmn__cs .cs__info .tel {margin-bottom: 5px;font-family: var(--font-Outfit);font-size: 4.50rem;font-weight: 700;}
.cmn__cs .cs__info .time {display: flex;gap: 10px;font-size: max(1.70rem, 17px);font-weight: 600;line-height: 1.335;}
.cmn__cs .cs__info .time > span {color: #7E7E7E;font-weight: 400;}
.cmn__cs .quick__menu {display: flex;justify-content: space-between;gap: 15px;max-width: 462px;width: 100%;margin-top: 15px;}
.cmn__cs .quick__menu li {text-align: center;}
.cmn__cs .quick__menu li a img {max-width: 70px;margin: 0 auto 25px;}
.cmn__cs .quick__menu li a span  {font-size: max(1.70rem, 17px);font-weight: 500;}

@media all and (max-width: 1399px){
    .cmn__latest {max-width: calc(100% - 610px);width: 100%;}
    .cmn__cs {flex-direction: column;width: 565px;}
}
@media all and (max-width: 1199px){
    #mcommunity .cinner {gap: 30px;}
    .cmn__latest {max-width: calc(100% - 510px);}
    .cmn__cs {width: 480px;}
}
@media all and (max-width: 1024px){
    #mcommunity .cinner {flex-direction: column;}
    .cmn__latest {max-width: none;width: 100%;}
    .cmn__cs {flex-direction: row;width: 100%;padding: 32px 44px 62px;}
}
@media all and (max-width: 768px){
    .cmn__cs {flex-direction: column;align-items: center;gap: 20px;padding: 32px 25px 62px;border-radius: 20px;}
    .cmn__cs .cs__info .title {text-align: center;}
    .cmn__cs .quick__menu {justify-content: center;gap: 50px;width: 100%;margin-top: 0;}
    .cmn__cs .quick__menu li a img {max-width: 60px;margin: 0 auto 15px;}
}
@media all and (max-width: 640px){
    .cmn__cs {padding: 32px 25px 42px;}
    .cmn__cs .quick__menu {gap: 35px;}
}
@media all and (max-width: 480px){
    .cmn__cs .quick__menu {flex-wrap: wrap;gap: 20px;}
    .cmn__cs .quick__menu li {width: calc(50% - 10px);}
}




/* ********************************* *
* 메인 : 베스트 상품, 이달의 추천상품
* ********************************** */
#mbestGoods {margin-bottom: 100px;}
#mrcmdGoods {margin-bottom: 150px;}
.main__goods-title {margin-bottom: 25px;font-size: 3.50rem;font-weight: 600;}
.main__goods .goods__list {display: flex;gap: 40px;}
.main__goods .goods__item {width: calc(25% - 30px);}
.main__goods .goods__item .item__img {width: 100%;aspect-ratio: 1 / 1;margin-bottom: 18px;border: 1px solid #EBEBEB;box-sizing: border-box;position: relative;}
.main__goods .goods__item .item__img a {display: block;width: 100%;height: 100%;position: relative;overflow: hidden;}
.main__goods .goods__item .item__img img {width: 100%;height: 100%;object-fit: cover;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) scale(1);transition: .3s ease;}
.main__goods .goods__item .item__img a:hover img {transform: translate(-50%, -50%) scale(1.05);}
.main__goods .goods__item .item__img .soldout {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: rgba(0,0,0,.5);color: #fff;font-family: var(--font-Outfit);font-size: max(.90rem, 17px);font-weight: 600;position: absolute;inset: 0;margin: auto;}
.main__goods .goods__item .item__contents .item__basic {display: block;margin-bottom: 3px;color: var(--color-main);font-size: max(1.50rem, 15px);font-weight: 600;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.main__goods .goods__item .item__contents .item__title {min-height: calc(1.4em * 2);max-height: calc(1.4em * 2);margin-bottom: 10px;font-size: max(1.80rem, 18px);display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;line-height: 1.4;}
.main__goods .goods__item .item__contents .item__cost {font-size: 2.50rem;font-weight: 600;}

@media all and (max-width: 1199px){
    .main__goods .goods__list {display: flex;gap: 20px;}
    .main__goods .goods__item {width: calc(25% - 15px);}
}
@media all and (max-width: 1024px){
    .main__goods .goods__list {gap: 0;}
}