/* BASIC css start */
/* main.css */
/* 기존 코드 옮김 */
.popup-wrap img {
    height: auto !important;
}

#popup1>div,
#popup2>div {
    padding-right: 1.5rem;
}

#popup2>div {
    top: 0 !important;
}

/* //기존 코드 옮김 */

/* 메인 공통 css */
.main_display section { margin-top: 60px;}
.main_display section h3 { 
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.72px;
    color: var(--black);
    margin-bottom: 20px;
    text-align: center;
    padding: 0;
}

/* 관리자 사용 메인 배너 */
/* 롤링배너 */
#event .MS_img-wrap { position: relative; width: 100%; overflow: hidden; }
#event .event-imgs { position: relative; }
#event .MS_img-area { float: left; }
/*#event .MS_img-area:not(:first-child) { display: none; }*/
#event .MS_img-area img { width: 100%; }
#event .pagination { z-index:3; *zoom:1; display:inline-block; position: relative; left: 50%;  transform: translateX(-50%); bottom: 11.166667vw; text-align: center; width: 90%; }
/*#event .pagination .swiper-pagination-switch { display: inline-block; margin: 0 2px; text-indent: -9999px; width: 10px; height: 10px; }*/

#MS_event{/*height: 114.5vw; */ overflow: hidden;}



#event .pagination .swiper-active-switch { background-position: -12px 50%; }*/
/* //롤링배너 */
.main h3 {font-size:1.250em; display: inline-block; margin:45px 0 18px 0; padding-top:6px; border-top:1px solid #3b3b3b;}
.main .topBanner {margin-top:15px;}
.main .topBanner .topBannerLeft {width:49%; float:left; position:relative;}
.main .topBanner .topBannerRight {width:49%; float:right; position:relative;}
.main .topBanner img {width:100%; vertical-align:top;}
.main .topBanner .topBannerTitle {width:100%; font-size:1.083em; font-weight:bold; padding:2px 0; background-color:rgba(0,0,0,0.4);; text-align:center; color:#fff; position:absolute; bottom:0; left:0;}

#event .pagination .swiper-pagination-bullet{
  /* transition: 0.3s all; */
  background-color: #fff;
  border: 0;
  box-sizing: content-box;
  /* width: 12px; */
  /* width: 3vw; */
  height: 1px;
  margin: 0px 5.6px;
  margin: 0;
  opacity:1;
    border-radius: 0;
}

#event .pagination .swiper-pagination-bullet-active{
  border: none;
  /* width: 40px; */
  height: 5px;
  border-radius: 0;
  position: relative;
  top: 2px;
}


/* 메인배너 */
.mainBanner {
    position: relative;
}

.mainBanner {
    width: 100%;
}

.mainBanner .swiper-slide {
    position: relative;
}

.mainBanner .swiper-slide img {
    width: 100%;
}

.mainBanner .txtBox {
    position: absolute;
    top: 128px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 60px);
}

.mainBanner .swiper-slide[data-color="white"] .txtBox > * {
    color: var(--white);
}

.mainBanner .swiper-slide[data-color="white"] .txtBox a {
    border: 1px solid var(--white);
}

.mainBanner .swiper-slide[data-color="black"] .txtBox > * {
    color: var(--brown);
}
.mainBanner .swiper-slide[data-color="black"] .txtBox a {
    border: 1px solid var(--brown);
}

.mainBanner .txtBox h2 {
    font-size: 36px;
    font-weight: 600;
    line-height: 120%;
}

.mainBanner .txtBox p {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.42px;
}

.mainBanner .txtBox a {
    display: block;
    font-size: 12px;
    font-weight: 500;
    line-height: 36px;
    width: 120px;
    height: 36px;
    margin-top: 36px;
    text-align: center;
}

/* 메인 배너 페이징 */
#mainSpot .mainBanner .swiper-pagination {
    position: absolute;
    bottom: 30px;
}

#mainSpot .mainBanner .swiper-pagination-bullet {
    background: #CCC;
    opacity: 1;
    margin: 0 7.5px;
}

#mainSpot .mainBanner .swiper-pagination-bullet-active {
    background: #333;
    opacity: 1;
}



/* 수동 링크 */
.menuList {
    margin: 40px 0;
}



/* NOW */
section.now {
    margin-top: 40px !important;
    padding: 0 16px;
}

section.now .tabBtn {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

section.now .tabBtn > div {
    line-height: 30px;
    border-bottom: 1px solid var(--white500);
    width: 55px;
    text-align: center;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: -0.5px;
    cursor: pointer;
}

section.now .tabBtn > div.on {
    border-bottom: 2px solid var(--black);
    color: var(--black);
    font-weight: 500;
}

section.now .tabCont .item {
    display: none;
}

section.now .tabCont .item.on {
    display: block;
}

section.now .tabCont .item div[class^="mySwiper"] {
    position: relative;
    padding: 0 20px;
}

section.now .tabCont .item .swiper-slide {
    margin-bottom: 40px;
}

section.now .tabCont .item .swiper-slide:nth-child(4),
section.now .tabCont .item .swiper-slide:nth-child(5),
section.now .tabCont .item .swiper-slide:nth-child(6) {
    margin-bottom: 0;
}

section.now .tabCont .item .swiper-button-prev {
    background: url(/design/skinfood/skinfood/images/wib/MO/common/new_arrow_icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    width: 18px;
    height: 18px;
    left: 0;
    top: 50%;
    transform:translateY(-50%);
}

section.now .tabCont .item .swiper-button-next {
    background: url(/design/skinfood/skinfood/images/wib/MO/common/new_next_arrow_icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    width: 18px;
    height: 18px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

section.now .tabCont .item .swiper-button-prev::after,
section.now .tabCont .item .swiper-button-next::after {
    display: none;
}

section.now .tabCont .item .swiper-pagination {
    position: absolute;
    bottom: -40px;
    top: auto;
    width: 200px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--white400);
}

section.now .tabCont .item .swiper-pagination-progressbar-fill {
    background: var(--Ypoint);
}

section.now .tabCont .item .swiper-slide .goodsDisplayImage {
    min-width: 145px;
    width: 100%;
}

section.now .tabCont .item .swiper-slide .goodsDisplayTextWrap {
    margin-top: 5px;
}



/* 중간 배너 영역 01 */
.bannerSec img { 
    width: 100%;
}



/* EVENT 영역 */
.eventsec {
    padding: 0 25px;
}

.eventsec ul {
    display: flex;
    flex-flow: column;
    gap: 20px 0;
}

.eventsec ul li .imgBox img {
    border-radius: 4px;
    width: 100%;
}

.eventsec ul li .txtBox {
    margin: 10px 0 0;
}

.eventsec ul li .txtBox .tit {
    font-size: 15px;
    font-weight: 600;
    color: var(--black);
}

.eventsec ul li .txtBox .day {
    margin-top: 15px;
    font-size: 13px;
    font-weight: 500;
    color: var(--black300);
}



/* MD'S PICK! */
.mdPick {
    padding: 60px 25px;
    background: #FCDB041A;
}

.mdPick h3 {
    position: relative;
}

.mdPick h3 strong {
    color: var(--Ypoint);
}

.mdPick h3 a {
    position: absolute;
    right: 0;
    top: 12px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.42px;
    color: var(--black600);
}

.mdPick .flexBox {
    flex-flow: column;
}

.mdPick .top img {
    width: 100%;
}

.mdPick .top .goodsTit {
    margin-top: 20px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.48px;
    color: var(--black);
}

.mdPick .top  p {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.42px;
    color: var(--black300);
}

.mdPick .bottom .goods_wrap {
    margin-top: 40px;
    display: flex;
    flex-wrap: nowrap;
    gap: 0 15px;
}

.mdPick .bottom .goods_wrap .goodsDisplayImage{
    min-width: 155px;
    width: 100%;
}

.mdPick .bottom .goods_wrap .goodsDisplayTextWrap {
    margin-top: 10px;
}

.mdPick .bottom .goods_wrap .goodsDisplayTextWrap .icon_solo_discount {
    color: var(--Orpoint);
}



/* SKINFOOD LINE */
.skinfoodLine .lineFlex .top img {
    width: 100%;
    border-radius: 5px;
    margin-bottom: 20px;
}

.skinfoodLine .lineFlex .top h4 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.48px;
    color: var(--black);
}

.skinfoodLine .lineFlex .top p {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.42px;
    color: var(--black300);
}

.skinfoodLine .lineFlex .goods_wrap {
    margin-top: 20px;
}

.skinfoodLine .lineFlex .goods_item:first-child {
    padding: 0 0 15px;
    border-bottom: 1px solid #CCC;
}

.skinfoodLine .lineFlex .goods_item {
    padding: 15px 0;
}

.skinfoodLine .lineFlex .goods_item .goodsDisplayItemWrap {
    display: flex;
    flex-wrap: nowrap;
}

.skinfoodLine .lineFlex .goods_item .goodsDisplayTextWrap {
    width: calc(100% - 80px);
    margin-left: 10px;
}

.skinfoodLine .lineFlex .goods_item .goodsDisplayTextWrap .brandName {
    margin-top: 9px;
}

.skinfoodLine .lineFlex .goods_item .goodsDisplayTextWrap .goods_name {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    -webkit-line-clamp: 1;
    margin-top: 4px;
}

.skinfoodLine .lineFlex .goods_item .goodsDisplayTextWrap .priceBox {
    justify-content: left;
    gap: 0 10px;
}

.skinfoodLine .lineFlex .goods_item .goodsDisplayTextWrap .icon_solo_discount {
    color: var(--Orpoint);
}

/* 장바구니 담기 */
.cartBtn {
    border: none;
    background: transparent;
}

.cartBtn img {
    width: 25px;
    height: 25px;
}



/* bannerSec 중간배너 02 */
.bannerSec.swiper {
    background: url(/design/skinfood/skinfood/images/wib/MO/main/main_bannerSec02.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-top: 60px;
    height: 370px;
}

.bannderBox {
    overflow: hidden;
    height: 240px;
    margin: 65px 48px;
} 

.bannderBox .swiper-slide {
    background: var(--white);
    border-radius: 18px;
}

.bannderBox .swiper-slide .bannerSec img {
    max-height: 129px;
}

.bannderBox .swiper-slide .txtBox {
    text-align: center;
}

.bannderBox .swiper-slide .txtBox strong {
    font-size: 16px;
    font-weight: 700;
    color: var(--brown);
}

.bannderBox .swiper-slide .txtBox p {
    margin-top: 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
    color: var(--black300);
}

.bannderBox .swiper-button-prev {
    background: url(/design/skinfood/skinfood/images/wib/MO/common/new_arrow_icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    width: 18px;
    height: 18px;
    left: 20px;
    top: 50%;
}

.bannderBox .swiper-button-next {
    background: url(/design/skinfood/skinfood/images/wib/MO/common/new_next_arrow_icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    width: 18px;
    height: 18px;
    right: 20px;
    top: 50%;
}

.bannderBox .swiper-button-prev::after,
.bannderBox .swiper-button-next::after {
    display: none;
}



/* 리뷰영역 */
.reviewSec {
    background: url(/design/skinfood/skinfood/images/wib/MO/main/main_reviewsSec.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.reviewSec h3 {
    position: relative;
    margin: 0 15px 20px;
}

.reviewSec h3 a {
    position: absolute;
    right: 0;
    top: 12px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.42px;
    color: var(--black600);
}

.reviewSec .swiper {
    padding: 0 40px;
    height: 455px;
}

.reviewSec .swiper-slide {
    width: 160px; /* 각 슬라이드 너비 - 적절히 조절 */
    opacity: 0.5;
    margin-top: 30px;
    text-align: center;
}

.reviewSec .swiper-slide img {
    width:100px;
}

.reviewSec .swiper-slide .txtBox {
    display: none;
}

.reviewSec .swiper-slide.swiper-slide-active {
    opacity: 1;
    margin-top: 0;
}

.reviewSec .swiper-slide.swiper-slide-active .txtBox {
    display: block;
    transition: transform 0.3s ease;
    width: 100%;
    min-width: 271px;
    transform: translateX(-50%);
    background: var(--white);
    padding: 16px 23px;
    border-radius: 20px;
    text-align: center;
    margin-top: 20px;
    position: absolute;
    left: 50%;
}

.reviewSec .swiper-slide.swiper-slide-active .txtBox .keyworld {
    background: var(--Orpoint);
    display: inline-block;
    padding: 6px 10px;
    border-radius: 100px;
    color: var(--white);
    margin-bottom: 8px;
}

.reviewSec .swiper-slide.swiper-slide-active .txtBox .revieTit {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.36px;
}

.reviewSec .swiper-slide.swiper-slide-active .txtBox .revieSub {
    font-size: 11px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: -0.33px;
    color: var(--black600);
}

.reviewSec .swiper-slide.swiper-slide-active .txtBox::after{
    content: '';
    display: inline-block;
    background: url(/design/skinfood/skinfood/images/wib/MO/main/main_reviewsSec_txtBox_arrow.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 41px;
    position: absolute;
    top: -19px;
    left: 50%;
    transform: translateX(-50%);
    width: 41px;
    height: 41px;
    z-index: -1;
}

.reviewSec .swiper-slide.swiper-slide-active .imgBox {
    margin-bottom: 20px;
}

.reviewSec .swiper-slide.swiper-slide-active .imgBox img {
    width: 160px;
}

/* 리뷰 별점 */
.reviewSec .swiper-slide .txtBox .star {
    position: relative;
    margin: 0 auto 8px;
    width: 79px;
    height: 15px;
    background: url(/design/skinfood/skinfood/images/wib/MO/main/main_reviewsSec_star_off.svg) repeat-x;
}

.reviewSec .swiper-slide .txtBox .star::before {
    content: '';
    display: inline-block;
    height: 15px;
    background: url(/design/skinfood/skinfood/images/wib/MO/main/main_reviewsSec_star_on.svg) repeat-x;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
}

.star.rating-0::before { width: 0% !important; }
.star.rating-0_5::before { width: 10% !important; }
.star.rating-1::before { width: 20% !important; }
.star.rating-1_5::before { width: 30% !important; }
.star.rating-2::before { width: 40% !important; }
.star.rating-2_5::before { width: 50% !important; }
.star.rating-3::before { width: 60% !important; }
.star.rating-3_5::before { width: 70% !important; }
.star.rating-4::before { width: 80% !important; }
.star.rating-4_5::before { width: 90% !important; }
.star.rating-5::before { width: 100% !important; }


.reviewSec .swiper-button-prev {
    background: url(/design/skinfood/skinfood/images/wib/MO/common/new_arrow_icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    width: 18px;
    height: 18px;
    left: 86px;
    top: 86px;
}

.reviewSec .swiper-button-next {
    background: url(/design/skinfood/skinfood/images/wib/MO/common/new_next_arrow_icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    width: 18px;
    height: 18px;
    right: 86px;
    top: 86px;
}

.reviewSec .swiper-button-prev::after,
.reviewSec .swiper-button-next::after {
    display: none;
}

/* adout */
.adout {
    position: relative;
}

.adout .bg_fixed {
    height: 300px;
    clip-path: inset(0 0 0 0);
}

.adout .bg_fixed img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 668px;
    object-fit: cover;
}

.adout .txtBox {
    position: absolute;
    top: 85px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
}

.adout .txtBox p {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.42px;
    color: var(--white);
    margin-bottom: 30px;
}

.adout .txtBox h3 {
    font-size: 36px;
    font-weight: 600;
    line-height: 120%;
    color: var(--white);
    white-space: nowrap;
}
/* BASIC css end */