@charset "utf-8";

/* **************************************** *
 * 공통 슬라이드
 *********************************************/
.swiper-container{overflow:visible; margin-left: 0; margin-right: 0;}
.swiper-slide img{width:100%; height: 100%; max-height: 100%; object-fit: cover;}

/* 슬라이드 페이지네이션 */
.swiper-controls{position: absolute; right: 16rem; bottom: 16rem;}
.swiper-pagination{position: relative; bottom: auto; display:inline-flex; justify-content:center; align-items:center; position:relative; gap:5rem; padding: 3rem 10rem 2rem; font-size: 12rem; font-weight: 500; color: #fff; border-radius: 20rem; background:rgba(0, 0, 0, .7);}
.swiper-pagination-current {color: var(--f);}

.swiper-pagination.two-row{margin-top: 30rem; background-color: transparent; gap: 0;}
.swiper-container-horizontal>.swiper-pagination-bullets.two-row .swiper-pagination-bullet {width: 8rem; height: 8rem; border-radius: 7rem; background-color: var(--c-03);}
.swiper-container-horizontal>.swiper-pagination-bullets.two-row > .swiper-pagination-bullet-active { opacity: 1; background: var(--c-01);}
/* **************************************** *
 * 메인
 *********************************************/
#content.main{padding-top:20rem;}
section[class^="main-"] {padding-top: 50rem;}
section[class^="main-"] .sec-line {margin-top: 50rem;}

.main > .content-wrap {padding-bottom: 50rem; padding-left: 16rem; padding-right: 16rem;}

.main-header, .main-visual {padding-top: 0 !important;}
.main-header .sec-line, .main-event .sec-line {margin-top: 0 !important;}

/* header */
.main-header {display: flex; justify-content: space-between; align-items: center; padding-bottom: 22rem; position: relative;}
.main-header__inr {position: relative; display: flex;}
.main-header img {width: 100%; height: auto;}
.main .main-header__inr {display: flex;;}
.main .main-header__inr.main-header_left {width: 22%; height: auto; justify-content: flex-start;} 
.main .main-header__inr.main-header_right {justify-content: flex-end;} 
.main .main-header__inr.main-header_right > img {width: 100%; height: auto;}


/* 메인 섹션 */
.main-sec-box {display: flex; flex-direction: column; gap: 12rem;}

/* ********************************************* */


.shop_short_button {display: flex; justify-content: space-between; width: 100%;}
.shop_short_button > li {width: calc((100% / 2) - 8rem); height: 80rem; border-radius: 7rem; display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--c-02); background-color: var(--c-02);}
.shop_short_button > li > div {display: flex; flex-direction: column; padding: 16rem; color: var(--f-01);}
.shop_short_button > li > div > b {font-size: 17rem;}

.shop_short_button .shop_short_button-icon { position: relative; width: 100%; height: 100%; padding: 16rem; text-align: center; display: flex ; justify-content: center;}
.shop_short_button .shop_short_button-icon > img {position: absolute; width: 45rem; height: 45rem; left: 50%; top: 50%; transform: translate(-50%, -50%);}

.main-sec-01 .main-sec-box {display: flex; flex-direction: column; gap: 30rem;}
.main-sec-01 .main-list-wrap > ul {display: flex; flex-direction: column; gap: 16rem;}
.main-sec-01 .main-list-con{ display: flex; gap: 16rem;}
.main-sec-01 .main-list-con > figure {flex-grow: 1; flex-shrink: 1; flex-basis: 0%; border-radius: 7rem; overflow: hidden;}
.main-sec-01 .main-list-con > figure > img {max-width: 100%; height: auto; object-fit: cover; text-align: center;}
.main-sec-01 .main-list-txt-wrap {flex-grow: 2; flex-shrink: 0; flex-basis: 0%; display: flex; flex-direction: column; justify-content: space-between;}
.main-sec-01 .main-list-txt-wrap > b {font-size: 16rem; font-weight: 700; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;}
.main-sec-01 .main-list-txt-wrap > div > u {color: var(--b-04); font-size: 15rem; font-weight: 700; text-decoration: none; position: relative;}
.main-sec-01 .main-list-txt-wrap > div > u::after {content: ''; position: absolute; left: 50%; bottom: 50%; transform: translate(-50%, -50%); width: 100%; height: 1px; background-color: var(--b-03);}
.main-sec-01 .main-list-txt-wrap > div > div > mark {font-size: 16rem; font-weight: 800; color: var(--c-01);}
.main-sec-01 .main-list-txt-wrap > div > div > strong {font-size: 16rem; font-weight: 800; color: var(--b-01);}


.main-sec-01 .swiper-slide {width: 100%; display: flex; flex-direction: column; gap: 16rem;}
.main-sec-01 .swiper-slide > div {display: flex; gap: 16rem;}
.main-sec-01 .swiper-slide > div > figure {flex-grow: 1; flex-shrink: 1; flex-basis: 0%; border-radius: 7rem; overflow: hidden;}
.main-sec-01 .swiper-slide > div > figure > img {max-width: 100%; height: auto; object-fit: cover; text-align: center;}



.main .shop_product_recomend_wrap .main-list__thum {height: 175rem;}
.main .shop_product_recomend_wrap .main-list__thum .main-list__thum  > img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover;}
.main .shop_product_recomend_wrap .shop-list__txt {gap: 8rem;}
.main .shop_product_recomend_wrap .prd-name {font-size: 15rem; display: -webkit-box;/* Flexbox 설정 */ -webkit-box-orient: vertical;/* 세로 방향으로 정렬 */ -webkit-line-clamp: 2; /* 표시할 줄 수 */overflow: hidden;/* 넘치는 부분 숨김 */text-overflow: ellipsis;}
.main .shop_product_recomend_wrap .prd-pay_un {position: relative; font-size: 17rem; font-weight: 500; color: var(--b-04); text-decoration: none;} 
.main .shop_product_recomend_wrap .prd-pay_un::after {content: '';  position: absolute; width: 100%; height: 1rem; background-color: var(--b-04); top: 50%; left: 50%; transform: translate(-50%, -50%);} 
.main .shop_age_category_wrap {width: calc(100% + 10rem) !important; margin-left: 0rem !important; margin-top: 20rem;}
.main .age_category_tabs {display: flex; gap: 8rem; overflow-x: auto;}
.main .age_category_tabs > li {min-width: max-content; padding: 4rem 8rem; border-radius: 50rem; background-color: var(--b-06); color: var(--b-02);}
.main .age_category_tabs > li.on {background-color: var(--b-01); color: #fff;}
.main .shop_age_content_wrap > .tab-content { display: none;}
.main .shop_age_content_wrap > .tab-content.on {display: block;}
.main .shop-list-con {display: flex; flex-direction: column; gap: 16rem;}
.main .shop-list-con > .main-list__thum {width: 100%; height: 210rem; border-radius: 7rem; overflow: hidden; position: relative;}
.main .prd-rank {position: absolute; background-color: var(--c-02); font-size: 17rem;  font-weight: 800; color: #fff; left: 0; width: 45rem; height: 45rem; padding: 10rem; border-end-end-radius: 7rem;} 
.main .shop-list__txt {display: flex; flex-direction: column; gap: 4rem; text-align: left; }
.main .shop-list__txt > .prd-info_txt {line-height: 1.3; font-size: 13rem; font-weight: 500; color: var(--b-04); display: -webkit-box;/* Flexbox 설정 */ -webkit-box-orient: vertical;/* 세로 방향으로 정렬 */ -webkit-line-clamp: 2; /* 표시할 줄 수 */overflow: hidden;/* 넘치는 부분 숨김 */text-overflow: ellipsis;}
.main .shop-list__txt > .prd-name {line-height: 1.3; font-size: 17rem; font-weight: 700;}
.main .prd-pay,
.main .prd-review {display: flex; align-items: center; gap: 5rem;}
.main .prd-pay .prd-pay_discount {font-size: 18rem; font-weight: 800; color: var(--c-01);}
.main .prd-pay .prd-pay_won {font-size: 18rem; font-weight: 800; color: var(--b-01);}
.main .prd-pay .prd-pay_un {position: relative; font-size: 17rem; font-weight: 700; color: var(--b-04); text-decoration: none; position: relative;}
.main .prd-pay .prd-pay_un::after {content: ''; position: absolute; width: 100%; height: 1rem; background-color: var(--b-04); top: 50%; left: 50%; transform: translate(-50%, -50%);}
.prd-pay .prd-pay_un::after {content: ''; position: absolute; width: 100%; height: 1rem; background-color: var(--b-04); top: 50%; left: 50%; transform: translate(-50%, -50%);}
.main .product_slide {margin-top: 16rem;}