@charset "utf-8";

/* **************************************** *
* 공통 레이아웃
* **************************************** */
/* #content{margin:0 auto; padding-top:55rem; padding-bottom:110rem; max-width:450rem;} */
#content{margin:0 auto; padding-top:55rem; max-width:450rem;}
#content:has(#footer){padding-bottom:0;}
#content.commu {padding-bottom: 30rem;}
.content-wrap{position:relative; overflow:hidden; width:100%; margin-right:auto; margin-left:auto; padding-bottom:50rem; padding-right:16rem; padding-left:16rem; /* z-index:2; :*/;}
.content-wrap:has(.commu-filter, .mypage-menu) {background: #fff }
.content-wrap:has(.tab__item--none) {min-height: 100vh; background: #fff}
.content-wrap:has(.mypage-menu) {padding-bottom: 0;}
.sec-line--v2{display:block; margin-top: 17rem; border-bottom:1px solid #ededed;}
/* .min-but {background-color: var(--c-02); max-width: 85rem;  padding: 8rem 12rem; text-align: center; border-radius: 18rem; font-size: 12rem; color: var(--c-01); font-weight: 600;} */

.sec-line{display:block; border-bottom: 10px solid #f5f5f5;}

.button-gruop-wrap {position: fixed; bottom: 110rem; left: 16rem; width: calc(100% - 32rem); margin-left: 0; z-index: 1000;}


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

#content.custom,
#content.shop,
#content.mypage {padding-top: 20rem;}




/* **************************************** *
02 주문 제작
* **************************************** */
.custom .main-header h2 {font-size: 17rem; font-weight: 700;}
.custom .button-gruop-wrap {display: flex; flex-direction: column; gap: 8rem;}
.custom .button-gruop-wrap > button {padding: 16rem; border: 1px solid var(--c-01); border-radius: 7rem;} 
.custom .button-gruop-wrap > button:nth-child(1) {background-color: #fff; color: var(--c-01); font-size: 15rem} 
.custom .button-gruop-wrap > button:nth-child(2) {background-color: var(--c-01); color: #fff; font-size: 15rem}

.custom .custom-page-wrap {display: flex; flex-direction: column; gap: 40rem;}
.custom .custom-page-top {display: flex; flex-direction: column; gap: 30rem;}
.custom .custom-tang-txt-wrap > h3 {display: block; font-size: 20rem; font-weight: 800;}
.custom .custom-tang-txt-wrap > h3 > span {display: inline-block; font-weight: 800; color: var(--c-01);}
 
.custom .custom-tang-info-wrap {width: 100%; display: flex; flex-direction: column; gap: 8rem;}
.custom .custom-tang-info-wrap > li {border-radius: 7rem; color: var(--b-01);}
.custom .custom-tang-info-wrap > li:nth-child(1) {background-color: #FFFAEB;}
.custom .custom-tang-info-wrap > li:nth-child(2) {background-color: #F8F6F1;}
.custom .custom-tang-info-wrap > li > p {display: block; padding: 16rem; font-size: 15rem;}

.custom01 .join-input-wrap {margin-top: 30rem;}

.custom01 .select-filter {margin-top: 30rem;}

.custom01 .phone_box > .img_preview {border: 1px dashed var(--b-05); width: 100%; height: 350rem; line-height: 300rem; padding: 16rem; border-radius: 7rem; text-align: center;}
/* .custom01 .phone_box > .img_preview > i {} */
.custom01 .phone_box > .img_preview > img{width: 100%; height: 100%; object-fit: contain; object-position: center;}
.custom01 .phone_box > .img_un_txt {display: block; margin-top: 16rem; color: var(--c-01);}

.custom_end_box > .small-tit {font-size: 18rem;}
.custom_end_wrap {display: flex; flex-direction: column; gap: 30rem;}
.custom_end_wrap .custom_box01_list {margin-top: 16rem; width: 100%; display: flex; justify-content: space-between;}
.custom_end_wrap .custom_box01_list > li {width: calc((100% - 16rem)/ 3); border: 1px solid var(--b-05); border-radius: 7rem; padding: 8rem; text-align: center;}
.custom_end_wrap .custom_box01_list > li > p {display: block; font-size: 12rem; text-align: center;}
.custom_end_wrap .custom_box01_list > li > b {display: block; font-size: 14rem; text-align: center; font-weight: 600;}

.custom_end_wrap > .custom_end_box_02 {display: flex; flex-direction: column; gap: 16rem;}
.custom_end_wrap > .custom_end_box_02 > strong > b {color: var(--c-02);}
.custom_end_wrap > .custom_end_box_02 .recipe_img_box {width: 100%; height: 250rem; overflow: hidden; border-radius: 7rem;}
.custom_end_wrap > .custom_end_box_02 .recipe_img_box > img {width: 100%; height: auto; object-fit: cover; object-position: center;}

.custom_end_wrap .ingredient_wrap {display: flex; flex-direction: column; gap: 4rem; background-color: var(--c-05); padding: 16rem; border-radius: 7rem;}
.custom_end_wrap .ingredient_wrap small {font-weight: 700; font-size: 14rem; color: var(--c-01);}
.custom_end_wrap .ingredient_wrap p {font-weight: 500; font-size: 15rem; color: #333;}

.custom_end_wrap .custom_end_box_03 > ul {display: flex; flex-direction: column; gap: 16rem;}
.custom_end_wrap .custom_end_box_03 > ul > li {width: 100%;}
.custom_end_wrap .custom_end_box_03 > ul > li > figure {width: 100%; height: 220rem; border-radius: 7rem; overflow: hidden;}
.custom_end_wrap .custom_end_box_03 > ul > li > figure > img {width: 100%; height: auto; object-fit: cover; object-position: center;}
.custom_end_wrap .custom_end_box_03 > ul > li > div {margin-top: 14rem;}
.custom_end_wrap .custom_end_box_03 > ul > li > div > b {font-weight: 700; font-size: 16rem;}
.custom_end_wrap .custom_end_box_03 > ul > li > div > p {font-weight: 500; font-size: 14rem; color: #333; padding-left: 14rem;}

.custom_end_box_04 {padding: 16rem; background-color: var(--b-06); border-radius: 7rem;}
.custom_end_box_04 > ul {margin-top: 8rem; display: flex; flex-direction: column; gap: 8rem;}
.custom_end_box_04 > ul > li > p {display: block; padding-left: 14rem;}

.custom-end > .content-wrap {padding-bottom: 90rem;}







/* **************************************** *
02 - 02 상담요청
* **************************************** */
.counsel .custom-input-wrap {display: flex; flex-direction: column; gap: 16rem;}

.custom01.counsel .select-filter {margin-top: 8rem;}

/* ** 데이트 피커 ** */
.counsel .calendar-control {display: flex; justify-content: center; align-items: center; gap: 8rem; text-align: center; margin: 10px 0;}
.counsel #year-month { width: calc(100% / 3); display: inline-block; font-size: 18px; font-weight: bold; }
.counsel #calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; max-width: 100%; margin: 20px auto;}
.counsel #calendar div { text-align: center; padding: 10px 8px 20px; cursor: pointer;}
.counsel .cali-arrow {width: auto; min-width: calc(100% / 10); padding: 0; margin: 0; color: #ddd !important; border: 0; background-color: #fff;}
.counsel #calendar .day-header { font-weight: bold; }
.counsel #calendar .selected { background-color: var(--c-01); border-radius: 7rem; border: 1px solid var(--c-01); color: #fff; position: relative;}
.counsel #calendar .selected::after {position: absolute; content: '선택'; bottom: 0; left: 50%;  font-size: 10rem; transform: translate(-50%, -3rem);}
.counsel #calendar .prev-month,
.counsel #calendar .next-month { color: #d0d0d0;}


.counsel .join-tit strong{font-size: 16rem;}
.counsel .counsel_box03 ul {display: flex; width: 100%; justify-content: space-between;}
.counsel .counsel_box03 ul > li {width: calc((100% - 8rem) / 3); cursor: pointer; padding: 12rem; text-align: center; border-radius: 7rem; border: 1px solid var(--b-05);} 
.counsel .counsel_box03 ul > li.on {color: #fff; border: 1px solid var(--b-01); background-color: var(--b-01);}

.counsel .un_txt {display:none; font-size: 13rem; margin-top: 16rem;}
.counsel .un_txt {position: relative; color: var(--c-01); padding-left: 10rem;}
.counsel .un_txt::before {content: '*'; position: absolute; left: 0; color: var(--c-01);}










/* **************************************** *
03 쇼핑 (공통)
**************************************** */



div[class^="shop_product_"] {margin-top: 50rem;}
.shop .product_slide {margin-top: 30rem;}

.shop .main-header img {width: 100%; height: auto;}
.shop .main-header__inr {position: relative; display: flex;}
.shop .main-header__inr.main-header_left {width: 22%; height: auto; justify-content: flex-start;} 
.shop .main-header__inr.main-header_right {width: 22%; gap:16rem; justify-content: flex-end;} 
.shop .main-header__inr.main-header_right > span {width: 24rem;}
.shop .main-header__inr.main-header_right img {width: 100%; height: auto;}

.toggle-switch { display: flex; justify-content: center; align-items: center; margin: 0 auto; border-radius: 30px;background-color: var(--c-05); overflow: hidden;}

.toggle-option {flex: 1; padding: 5rem 12rem 6rem; text-align: center; font-size: clamp(13rem, 1.5vw, 16rem); font-weight: bold; border: none; cursor: pointer; background-color: transparent; color: var(--c-03); transition: all 0.3s ease; }

.toggle-option.active { background-color: var(--c-02); color: white; font-weight: bold; border-radius: 30px;}

.shop .shop-nav_wrap > ul {width: 100%; display: flex; justify-content: space-between;}
.shop .shop-nav_wrap li {width: calc(100% / 5); text-align: center;}
.shop .shop-nav_wrap li > p {display: block; padding: 8rem 0; color: var(--b-04);}
.shop .shop-nav_wrap li.on > p {color: var(--b-01); font-weight: bold; border-bottom: 2px solid var(--c-01);}

.content {
    width: 100%;
    text-align: center;
    border-radius: 10px;
    margin: 40rem 0 0;
}

.shop .shop_category_wrap {display: flex; justify-content: space-between; gap: 8rem;}
.shop .shop_category_wrap > li {width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8rem;} 
.shop .shop_category_wrap > li > div { width: 100%; height: 70rem; background-color: var(--c-05); border-radius: 7rem; padding: 8rem;}
.shop .shop_category_wrap > li > div > span {display: inline-block; width: 45rem; height: 45rem; position: relative;}
.shop .shop_category_wrap > li > div > span > img{display: inline-block; width: 100%; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -40%);}
.shop .shop_category_wrap > li > span.shop_category_name {font-weight: 500;}

.shop .shop-list-con {display: flex; flex-direction: column; gap: 16rem;}
.shop .shop-list-con > .main-list__thum {width: 100%; height: 210rem; border-radius: 7rem; overflow: hidden; position: relative;}
.shop .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;} 
.shop .shop-list__txt {display: flex; flex-direction: column; gap: 4rem; text-align: left; }
.shop .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;}
.shop .shop-list__txt > .prd-name {line-height: 1.3; font-size: 17rem; font-weight: 700;}
.shop .prd-pay,
.shop .prd-review {display: flex; align-items: center; gap: 5rem;}
.shop .prd-pay .prd-pay_discount {font-size: 18rem; font-weight: 800; color: var(--c-01);}
.shop .prd-pay .prd-pay_won {font-size: 18rem; font-weight: 800; color: var(--b-01);}
.shop .prd-pay .prd-pay_un {position: relative; font-size: 17rem; font-weight: 700; color: var(--b-04); text-decoration: none; position: relative;}
.shop .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%);}

.shop .prd-review > i {display: inline-block; width: 14rem; height: 14rem;}
.shop .prd-review > small {font-size: 14rem; font-weight: 600; color: var(--b-04);}

.shop .shop_product_recomend_wrap .main-list__thum {height: 175rem;}
.shop .shop_product_recomend_wrap .main-list__thum .main-list__thum  > img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover;}
.shop .shop_product_recomend_wrap .shop-list__txt {gap: 8rem;}
.shop .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;}
.shop .shop_product_recomend_wrap .prd-pay_un {position: relative; font-size: 17rem; font-weight: 500; color: var(--b-04); text-decoration: none;} 
.shop .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%);} 

.shop .shop_product_event_banner_wrap {height: 110rem;}
.shop .shop_product_event_banner_wrap > div {height: 100%;}
.shop .shop_product_event_banner_wrap .swiper-slide {position: relative; border-radius: 7rem; overflow: hidden;}
.shop .shop_product_event_banner_wrap .swiper_group_wrap {position: absolute; width: 100%; height: 110rem; padding: 16rem; display: flex; justify-content: space-between; align-items: center;}
.shop .shop_product_event_banner_wrap .swiper_group_wrap .swiper_group_txt {text-align: left; color: #fff;}
.shop .shop_product_event_banner_wrap .swiper_group_wrap .swiper_group_txt > h3 {font-size: 20rem; font-weight: 800;}
.shop .shop_product_event_banner_wrap .swiper_group_wrap .swiper_group_txt > p {font-size: 13rem;}
.shop .shop_product_event_banner_wrap .swiper_group_wrap .swiper_group_img {width: 110rem; height: auto;}

.shop .shop_product_custom_banner_wrap {width: 100%; height: 160rem; border-radius: 7rem; position: relative;  background-image: url(../img/shop_custom_bg.svg); background-position: center; background-size: cover; background-repeat: no-repeat;}
.shop .shop_product_custom_banner_wrap > .shop_custom_txt_wrap {position: absolute; display: flex; flex-direction: column; gap: 3rem; text-align: left; left: 0; top: 50%; transform: translate(16rem, -50%); color: #fff;}
.shop .shop_product_custom_banner_wrap > .shop_custom_txt_wrap > p {font-size: 13rem;}
.shop .shop_product_custom_banner_wrap > .shop_custom_txt_wrap > h3 {font-size: 20rem; font-weight: 800;}
.shop .shop_product_custom_banner_wrap > .shop_custom_txt_wrap > span {width: fit-content; display: inline-block; text-align: center; padding: 2rem 16rem; background-color: rgba(0,0,0,0.4); border-radius: 50rem;}
.shop .shop_product_custom_banner_wrap > .shop_custom_txt_wrap > span > i {position: relative;}
.shop .shop_product_custom_banner_wrap > .shop_custom_txt_wrap > span > i::after {content: ''; position: absolute; background-size: cover; background-repeat: no-repeat;}
.shop .shop_product_custom_banner_wrap > .shop_custom_character_wrap {position: absolute; z-index: 1; right: 0; bottom: 0; transform: translate(-16rem, 16rem); width: 120rem;}
.shop .shop_product_custom_banner_wrap > .shop_custom_character_wrap > img {width: 100%; height: auto;}

.shop .shop_age_category_wrap {width: calc(100% + 10rem) !important; margin-left: 0rem !important; margin-top: 20rem;}
.shop .age_category_tabs {display: flex; gap: 8rem; overflow-x: auto;}
.shop .age_category_tabs > li {min-width: max-content; padding: 4rem 8rem; border-radius: 50rem; background-color: var(--b-06); color: var(--b-02);}
.shop .age_category_tabs > li.on {background-color: var(--b-01); color: #fff;}
.shop .shop_age_content_wrap > .tab-content { display: none;}
.shop .shop_age_content_wrap > .tab-content.on {display: block;}

.shop .shop-nav_wrap li {display: block; padding: 8rem 0; color: var(--b-04);}
/* .shop .shop-nav_wrap li.on {border-bottom: 2px solid var(--c-01); color: var(--b-01); font-weight: bold;} */
.shop .shop-nav_wrap li.on > span {font-weight: bold;}
 
/* **************************************** *
03-01 쇼핑 ver. 소매몰
**************************************** */
/* 소매몰 - 전체 */



/* 소매몰 - 신상품 */
.shop.shop01-02 div[class^="shop_product_"],
.shop.shop01-04 div[class^="shop_product_"] {margin-top: 0rem;}
.shop.shop01-02 .shop-sec-02{padding-bottom: 80rem;}
.shop .tool_nav_wrap {padding: 15rem 0; display: flex; justify-content: space-between;}
.shop .tool_nav_wrap > .filter_box {display: flex; gap: 5rem;}
.shop .tool_nav_wrap > .filter_box > p {display: flex; border: 1px solid var(--b-05); background-color: #fff; overflow: hidden; border-radius: 50rem; width: fit-content; padding: 3rem 20rem 4rem 8rem; font-weight: 500;}
.shop .tool_nav_wrap > .count_box > p {font-weight: 600; font-size: clamp(14rem , 1.5vw, 16rem);}
.shop .tool_nav_wrap > .count_box > p > span {display: inline-block; font-weight: 600; color: var(--c-01);}

.shop .shop_product_new_list_wrap > ul{display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; gap: 16rem;}
.shop .shop_product_new_list_wrap > ul > li {width: calc((100% - 16rem) / 2); display: flex; flex-direction: column; gap: 8rem;}
.shop .shop_product_new_list_wrap > ul > li > figure {border-radius: 7rem; overflow: hidden;}
.shop .shop_product_new_list_wrap > ul > li > figure > img {width: 100%; height: auto; object-fit: cover; text-align: center;} 
.shop .shop_product_new_list_wrap > ul > li > .main-list-txt-wrap {display: flex; flex-direction: column; gap: 4rem;}
.shop .shop_product_new_list_wrap > ul > li > .main-list-txt-wrap > b {font-weight: 700; font-size: clamp(14rem, 1.5vw, 16rem);}
.shop .shop_product_new_list_wrap > ul > li > .main-list-txt-wrap > div > u {position: relative; color: var(--b-04); text-decoration: none; font-size: clamp(13rem, 1.5vw, 15rem); font-weight: 500;}
.shop .shop_product_new_list_wrap > ul > li > .main-list-txt-wrap > div > u::after {content: ''; position: absolute; width: 100%; height: 1px; background-color: var(--b-04); top: 50%; left: 50%; transform: translate(-50%, -50%);}
.shop .shop_product_new_list_wrap > ul > li > .main-list-txt-wrap > div mark {font-size: clamp(14rem, 1.5vw, 16rem); font-weight: 800; color: var(--c-01);}
.shop .shop_product_new_list_wrap > ul > li > .main-list-txt-wrap > div > .prd-pay {display: flex; gap: 5rem;}
.shop .shop_product_new_list_wrap > ul > li > .main-list-txt-wrap > div strong {font-size: clamp(14rem, 1.5vw, 16rem); font-weight: 800; color: var(--b-01);}
/* 소매몰 - 베스트 */

/* 소매몰 - 브랜드관 */
.shop.shop01-04 .shop_product_new_list_wrap > ul > li {width: 100%; display: flex; flex-direction: column; gap: 8rem;}
.shop.shop01-04 .shop_product_new_list_wrap > ul > li > figure {width: 100%; height: 160rem; position: relative; border-radius: 7rem; overflow: hidden;}
.shop.shop01-04 .shop_product_new_list_wrap > ul > li > figure > img {display: block; position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); }
/* **************************************** * 
03-02 쇼핑 ver. 도매몰
**************************************** */





/* 알림 */
.alarm_list{border-bottom: 1px solid #eee; }
.alarm_list li + li{border-top: 1px solid #eee;}
.alarm_list li{padding: 20rem 16rem; padding-left: 70rem; background: url(../img/alarm_img.png) no-repeat left 16rem center; background-size: 40rem;}
.alarm_list li > div{display: flex; align-items: center; gap: 8rem;}
.alarm_list li i{color: #999; font-size: .9em;}
.alarm_list li > p{color: #555; margin-top: 2rem; font-size: 13rem;}