/* -------------------- 상단 상품 이미지/정보 영역 -------------------- */
/* 간편구매 - 온보딩 팝업 */
.onboarding-popup-modal{
  display: none;
}
.onboarding-popup-modal.active{
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  position: fixed; top: 0; left: 0; z-index: 100000;
}
.onboarding-popup-modal .dimmed{
  width: 100%; height: 100%; background-color: rgba(0, 0, 0, .25);
  position: absolute; top: 0; left: 0;
}
.onboarding-popup-modal .contents-wrap{
  background-color: #fff;
  display: flex;
  flex-direction: column;
	filter: drop-shadow(1.19544px 0.956348px 9.56348px rgba(0, 0, 0, 0.25));
  position: relative;
}
.onboarding-popup-modal .btn-popup-close{
  background: url(/resources/images/renewal_category/icon/popup-close-icon.png) no-repeat center center;
  position: absolute;
}
.onboarding-popup-modal .swiper-pagination-popup{
  display: flex;
  align-items: center;
  justify-content: center;
}
.onboarding-popup-modal .swiper-pagination-bullets .swiper-pagination-bullet{
  background-color: #D9D9D9;
  opacity: 1;
}
.onboarding-popup-modal .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active{
  background-color: #ED174D;
}
.onboarding-popup-modal .slide-area{
  width: 100%;
}
.onboarding-popup-modal .swiper{
  width: 100%;
  height: 100%;
}
.onboarding-popup-modal .swiper .swiper-slide img{
  width: 100%;
  height: 100%;
}
.onboarding-popup-modal .swiper-btn{
  width: 100%;
  margin-top: auto;
}
.onboarding-popup-modal .swiper-btn button{
  width: 100%;
  height: 100%;
  color: #fff;
  font-weight: bold;
}
.onboarding-popup-modal .swiper-btn-next{
  background-color: #3C3C3C;
}
.onboarding-popup-modal .swiper-btn-goto{
  background-color: #ED174D;
  display: none;
}

@media screen and (min-width: 1160px) {
  .onboarding-popup-modal .contents-wrap{
    width: 400px;
    height: 466px;
  }
  .onboarding-popup-modal .btn-popup-close{
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
    top: 15px;
    right: 15px;
  }
  .onboarding-popup-modal .swiper-pagination-popup{
    padding: 20px 0 16px;
  }
  .onboarding-popup-modal .swiper-pagination-bullets .swiper-pagination-bullet{
    width: 8px;
    height: 8px;
    margin: 0 3px;
  }
  .onboarding-popup-modal .slide-area{
    height: 376px;
  }
  .onboarding-popup-modal .swiper-btn{
    height: 46px;
    min-height: 46px;
  }
  .onboarding-popup-modal .swiper-btn button{
    font-size: 18px;
  }
}

@media screen and (max-width: 1159px) {
  .onboarding-popup-modal .contents-wrap{
		width: 80vw;
    max-width: 600px;
    height: 93.33334vw;
    max-height: 700px;
  }
  .onboarding-popup-modal .btn-popup-close{
		width: 4.8vw;
    max-width: 36px;
    height: 4.8vw;
    max-height: 36px;
    background-size: min(4.26667vw, 32px) min(4.26667vw, 32px);
    top: min(2.13334vw, 16px);
    right: min(2.13334vw, 16px);
  }
  .onboarding-popup-modal .swiper-pagination-popup{
		padding: min(4vw, 30px) 0 min(3.2vw, 24px);
  }
  .onboarding-popup-modal .swiper-pagination-bullets .swiper-pagination-bullet{
		width: min(1.6vw, 12px);
    height: min(1.6vw, 12px);
    margin: 0 min(0.66667vw, 5px);
  }
  .onboarding-popup-modal .slide-area{
    height: min(75.2vw, 564px);
  }
  .onboarding-popup-modal .swiper-btn{
    height: min(9.33334vw, 70px);
  }
  .onboarding-popup-modal .swiper-btn button{
    font-size: clamp(10px, 3.46667vw, 26px);
  }
}


/* 상품 옵션 */
.product_data .prod-condition > [class^="prod-option-"]{
	margin: 0 0 20px;
}
.prod-condition .prod-option-install-type,
.prod-condition .prod-option-payment{
  display: flex;
}
.prod-condition .prod-option-title{
	font-weight: 500;
	line-height: 24px;
	letter-spacing: -0.6px;
}
.prod-condition .prod-option-cont{
	color: #767676;
	display: flex;
}

/* 상품 옵션 - 납부기간 */
.prod-detail-page .prod-option-payment{
  align-items: center;
}
.prod-detail-page .prod-option-payment .prod-option-cont .payment_plan{
	width: 100%;
	height: 45px;
	border-radius: 9999px;
	background-color: #D9DADB;
	display: flex;
	align-items: center;
}
.prod-detail-page .prod-option-payment .prod-option-cont .payment_plan.full-pay-box{
	margin: 0 10px 0 0;
	position: relative;
}
.prod-detail-page .prod-option-payment .prod-option-cont .payment_plan.full-pay-box .badge-icon-new{
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background-color: var(--main-color);
	color: #fff;
	font-size: 9px;
	font-weight: bold;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
}
.prod-detail-page .prod-option-payment .prod-option-cont .payment_plan [class^="payment_option0"]{
	flex: 1;
	flex-shrink: 0;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	text-align: center;
	font-weight: 500;
	letter-spacing: -0.6px;
	cursor: pointer;
}
.prod-detail-page .prod-option-payment .prod-option-cont .payment_plan [class^="payment_option0"].active{
	background-color: #fff;
	color: var(--main-color);
	box-shadow: 0px 8px 16px rgba(74, 76, 88, 0.2);
}

/* 상품 옵션 - 설치유형 */
.prod-option-install-type .prod-option-title{
	line-height: 45px;
}
.prod-option-install-type .prod-option-cont{
	flex-direction: column;
}
.prod-option-install-type .instlTyp-wall-info{
	color: #808080;
	padding: 8px 0 0;
	display: none;
}
.prod-condition .select2-container--default .select2-dropdown{
	width: 100% !important;
}
.prod-condition .select2-container .select2-dropdown--below{
	margin: 4px 0 0;
}
.prod-condition .select2-container .select2-dropdown--above{
	margin: -4px 0 0;
}
.prod-condition .select2-container .select2-results__options{
	padding: 12px 8px;
	border-radius: 4px;
	box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.12);
}
.prod-condition .select2-container .select2-results__option{
	padding: 2px 4px;
	font-weight: 400;
}
.prod-condition .select2-container .select2-results__option[aria-selected=true]{
	color: #767676;
	font-weight: 700;
}

@media (min-width: 1160px) {
	.prod-condition .prod-option-title{
		width: 93px;
	}
	.prod-condition.product_option .prod-option-title{
		font-size: 14px;
	}
	.prod-condition .option_wrap .prod-option-title{
		font-size: 13px;
	}
	.prod-condition .prod-option-cont{
		width: calc(100% - 93px);
	}

	/* 납부기간 */
	.prod-detail-page .prod-option-cont .payment_plan{
		padding: 0 8px;
	}
	.prod-detail-page .prod-option-cont .payment_plan.full-pay-box{
		width: 96px;
		min-width: 96px;
		max-width: 96px;
	}
	.prod-detail-page .prod-option-cont .payment_plan.full-pay-box .badge-icon-new{
		top: -2px;
		right: 6px;
	}
	.prod-detail-page .prod-option-cont .payment_plan [class^="payment_option0"]{
		font-size: 15px;
	}

	/* 설치유형 */
	.pd-footer2 .prod-condition .prod-option-title{
		font-size: 13px;
	}
	.prod-option-install-type .instlTyp-wall-info{
		font-size: 13px;
		line-height: 16px;
	}
	.prod-condition .select2-container--default{
		width: 390px;
	}
	.prod-condition .select2-container .select2-results__option{
		font-size: 14px;
		line-height: 30px;
	}
}

@media (max-width: 1159px) {
	.prod-condition .prod-option-title{
		width: 73px;
		font-size: 14px;
	}
	.prod-condition .prod-option-cont{
		width: calc(100% - 73px) !important;
	}

	/* 납부기간 */
	.prod-detail-page .sticky_bar .prod-option-payment{
		margin: 0 0 10px;
	}
	.prod-detail-page .prod-option-payment .prod-option-cont .payment_plan{
		padding: 0 6px;
	}
	.prod-detail-page .prod-option-payment .prod-option-cont .payment_plan.full-pay-box{
		width: 64px;
		min-width: 64px;
		max-width: 64px;
	}
	.prod-detail-page .prod-option-payment .prod-option-cont .payment_plan.full-pay-box .badge-icon-new{
		top: 0;
		right: 2px;
	}
	.prod-detail-page .prod-option-payment .prod-option-cont .payment_plan [class^="payment_option0"]{
		font-size: 14px;
	}

	/* 설치유형 */
	.sticky_bar .prod-option-install-type{
		margin: 0 0 10px;
	}
	.prod-option-install-type .instlTyp-wall-info{
		font-size: 12px;
		line-height: 15px;
	}
	.prod-condition .select2-container:not(.select2){
		width: calc(100% - 113px) !important;
		max-width: 380px;
	}
	.prod-condition .select2-container .select2-results__option{
		font-size: 12px;
		line-height: 24px;
	}
}

/* 가격 정보 영역 */
	.final-price-sub-label{
		color: #808080;
		white-space: nowrap;
	}
	@media (min-width: 1160px) {
		.final-price-sub-label{
			padding: 0 0 0 3px;
			font-size: 11px;
			font-weight: 400;
			line-height: 16px;
			letter-spacing: -1px;
			vertical-align: middle;
		}
	}

	@media (max-width: 1159px) {
		.final-price-sub-label{
			font-size: 10px;
			line-height: 12px;
			letter-spacing: -0.8px;
			vertical-align: middle;
		}
	}


/* -------------------- 탭 영역 -------------------- */
.detail-content picture{
	width: fit-content;
	height: fit-content;
	display: inline-block;
}
.detail-content .panel-area__detail-info{
	padding: 20px 0 0;
}
.detail-content .panel-area__detail-info .banner-wrap{
	margin: 0 0 16px;
}
.detail-content .panel-area__detail-info .banner-usp{
	width: 100%;
	max-width: 690px;
	height: clamp(302.4px, 108vw, 835px);
	margin: 0 auto;
	padding: clamp(10.45334px, 3.73334vw, 30px) 0 0;
	background: url(/resources/images/product/usp/banner-usp-mo-bg_260612.jpg) no-repeat center center / 100% 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.detail-content .panel-area__detail-info .banner-usp *{
	font-family: "Paperlogy";
	text-align: center;
}
.detail-content .panel-area__detail-info .banner-usp .ci{
	width: clamp(54.50667px, 19.46667vw, 146px);
	margin: 0 0 clamp(7.46667px, 2.66667vw, 20px);
	display: block;
}
.detail-content .panel-area__detail-info .usp__title{
	color: #2E292A;
	font-weight: 800;
	font-size: clamp(15.68px, 5.6vw, 42px);
	line-height: 130%;
	letter-spacing: -0.6px;
	white-space: nowrap;
}
.detail-content .panel-area__detail-info .usp__title span{
	color: #ED174D;
}
.detail-content .panel-area__detail-info .usp__sub-title{
	margin: clamp(1.49334px, 0.53334vw, 4px) 0 0;
	color: #2E292AE5;
	font-weight: 500;
	font-size: clamp(12.69334px, 4.53334vw, 34px);
	line-height: 130%;
	letter-spacing: -0.6px;
	white-space: nowrap;
}
.detail-content .panel-area__detail-info .usp__list{
	width: 100%;
	margin: clamp(7.46667px, 2.66667vw, 20px) 0 0;
	padding: 0 clamp(24.93151px, 8.90411vw, 65px);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(2.98667px, 1.06667vw, 8px) clamp(11.50685px, 4.10959vw, 30px);
}
.detail-content .panel-area__detail-info .usp__item{
	padding: clamp(5.97334px, 2.13334vw, 24px) 0 clamp(13.69864px, 5.47946vw, 40px);
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: clamp(12.27398px, 4.38357vw, 32px);
}
.detail-content .panel-area__detail-info .usp__item-img{
	width: clamp(57.49334px, 20.53334vw, 154px);
	height: clamp(56.74667px, 20.26667vw, 155px);
}
.detail-content .panel-area__detail-info .usp__item-desc{
	margin: 0;
	color: #2E292A;
	font-weight: 500;
	font-size: clamp(8.43836px, 3.0137vw, 22px);
	line-height: 140%;
	letter-spacing: 0;
}
.detail-content .panel-area__detail-info .usp__item-desc span{
	position: relative;
	z-index: 2;
}
.detail-content .panel-area__detail-info .usp__item-desc .usp__desc-highlight{
	z-index: 1;
}
.detail-content .panel-area__detail-info .usp__desc-highlight::before{
	content: '';
	width: 104%;
	height: clamp(6.13699px, 2.19178vw, 16px);
	background-color: #FFC3D2;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
}

.detail-content .panel-area__detail-info .md_pick,
.detail-content .panel-area__detail-info .wacom-wrap,
.detail-content .panel-area__detail-info .extra-wrap,
.detail-content .panel-area__detail-info .prod-standbyme{
	margin: 16px 0;
}
.detail-content .panel-area__detail-info .extra-wrap .youtube-area,
.detail-content .panel-area__detail-info .extra-wrap .shark-banner{
	margin: 0 0 50px;
}
.detail-content .panel-area__detail-info .extra-wrap .banner-area img{
	width: 100%;
}
.detail-content .panel-area__detail-info .prod-standbyme-area,
.detail-content .panel-area__detail-info .prod-standbyme-area video{
	width: 100%;
}
.detail-content .panel-area__detail-info .detail-img-wrap{
	position: relative;
}
.detail-content .panel-area__review .review_list_wrap{
	margin: 30px 0 0;
	padding: 30px 0 0;
}
.detail-content .panel-area__review .bestReview_whole_wrap{
	margin: 50px 0 0;
}
.detail-content .panel-area__recommended{
	padding: 100px 0 0;
}
.detail-content .panel-area__recommended .recommended__title{
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -0.6px;
	color: #000000;
	display: flex;
	align-items: center;
}

@media (min-width: 1160px) {
	.detail-content .panel-area__detail-info{
		padding: 40px 0 0;
	}
	.detail-content .panel-area__detail-info .banner-usp{
		max-width: 1160px;
		height: 338px;
		padding: 16px 218px 25px;
		background: url(/resources/images/product/usp/banner-usp-pc-bg_260612.jpg) no-repeat center center / 100% 100%;
	}
	.detail-content .panel-area__detail-info .banner-usp .ci{
		width: 93px;
		height: 14px;
		margin: 0 0 16px;
	}
	.detail-content .panel-area__detail-info .usp__title{
		font-size: 34px;
		letter-spacing: 0;
	}
	.detail-content .panel-area__detail-info .usp__sub-title{
		color: #393334E5;
		font-size: 22px;
		letter-spacing: -0.4px;
	}
	.detail-content .panel-area__detail-info .usp__list{
		padding: 0;
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
	}
	.detail-content .panel-area__detail-info .usp__item{
		padding: 14px 0 25px;
		row-gap: 20px;
	}
	.detail-content .panel-area__detail-info .usp__item-img{
		width: 96px;
		height: 97px;
	}
	.detail-content .panel-area__detail-info .usp__item-desc{
		color: #393334;
		font-size: 14px;
	}
	.detail-content .panel-area__detail-info .usp__item-desc .usp__desc-highlight::before{
		height: 12px;
		top: 36%;
	}
	
	.detail-content .panel-area__detail-info .md_pick,
	.detail-content .panel-area__detail-info .wacom-wrap{
		margin: 16px 0;
	}
	.detail-content .panel-area__detail-info .wacom-wrap .wacom-area a{
    width: fit-content;
    height: fit-content;
		display: inline-block;
	}
	.detail-content .panel-area__detail-info .extra-wrap{
		margin: 120px 0 0;
	}
	.detail-content .panel-area__detail-info .extra-wrap .youtube-area iframe{
		width: 850px;
		height: 600px;
	}
	.detail-content .panel-area__detail-info .prod-standbyme,
	.detail-content .panel-area__detail-info .detail-img-wrap{
		margin: 60px 0 0;
	}
	.detail-content .panel-area__detail-info .prod-standbyme-area{
		width: 850px;
		margin: 0 auto;
	}
	.detail-content .panel-area__review .review_list_wrap{
		margin: 100px 0 0;
		padding: 20px 0 0;
	}
	.detail-content .panel-area__review .bestReview_whole_wrap{
		margin: 120px 0 0;
	}
	.detail-content .panel-area__recommended{ padding: 120px 0 0; }
	.detail-content .panel-area__recommended > .pc{ margin: 0; }
	.detail-content .panel-area__recommended .recommended__title{
		font-weight: 500;
		font-size: 24px;
		line-height: 34px;
	}

}

@media (max-width: 1159px){
	.detail-content .panel-area__detail-info .usp__item:nth-child(1) .usp__desc-highlight::before{
		width: 120%;
	}
	.detail-content .panel-area__detail-info .usp__item:nth-child(2) .usp__desc-highlight::before{
		width: 120%;
	}
	.detail-content .panel-area__detail-info .extra-wrap .youtube-area{
		position: relative;
		padding-bottom: 56.25%;
		padding-top: 30px;
		height: 0;
		overflow: hidden;
	}
	.detail-content .panel-area__detail-info .extra-wrap .youtube-area iframe{
		position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	}
}

/* 할인카드 */
.panel-area{
	display: flex;
	flex-direction: column;
}
.panel-area .list-title{
	margin: 0 0 24px;
	border-bottom: 1px solid #4A4C58;
	font-weight: 500;
}
.panel-area .description-list{
	display: flex;
	flex-direction: column;
	row-gap: 10px;
}
.panel-area .description-item{
	position: relative;
}
.panel-area .description-item::before{
	content: '';
	border-radius: 50%;
	background-color: #000;
	position: absolute;
}
.panel-area .description-text{
	letter-spacing: -0.6px;
}
.panel-area .btn-info-icon img{
	width: 16px;
	height: 16px;
	cursor: pointer;
	display: block;
}
.panel-area .info-tooltip{
	padding: 14px;
	background-color: white;
	border: 1px solid #000;
	border-radius: 12px;
	position: absolute;
	z-index: 1;
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
	display: none;
}
.panel-area .info-tooltip ul{
	list-style: disc;
	padding-inline-start: 20px;
}
.panel-area .info-tooltip li::marker{
	font-size: 12px;
}
.panel-area .info-tooltip button{
	width: 36px;
	height: 36px;
	position: absolute;
	top: 0;
	right: 0;
}
.panel-area .info-tooltip button img{
	width: 12px;
	height: 12px;
}

.panel-area .card-list{
	display: flex;
}
.panel-area .card-item .card-name{
	margin: 0 0 16px;
	font-weight: 500;
	line-height: 30px;
	letter-spacing: -0.6px;
}
.panel-area .card-item .card-wrap{
	width: 100%;
	background-color: #F7F7F7;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
}
.panel-area .card-item .card-content{
	display: flex;
}
.panel-area .card-item img{
	object-fit: cover;
}
.panel-area .card-item .card-content-text{
	flex: 1;
}
.panel-area .card-item .card-content-text ul{
	display: flex;
	flex-direction: column;
}
.panel-area .card-item [class^="text-item0"]{
	display: flex;
	align-items: center;
	justify-items: center;
	column-gap: 10px;
	letter-spacing: -0.6px;
}
.panel-area .card-item .text-item02{
	position: relative;
}
.panel-area .card-item .text01{
	font-weight: 300;
	display: flex;
	justify-items: center;
	align-items: center;
	background-color: #D9DADB;
	border-radius: 999px;
}
.panel-area .card-item .text02{
	font-weight: 500;
}
.panel-area .card-item .bubble-disc-card{
	width: 100%;
	border-radius: 999px;
	background-color: var(--main-color);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.panel-area .card-item .bubble-disc-card p{
	color: #fff;
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: center;
}
.panel-area .card-item .bubble-disc-card strong{
	font-weight: 600;
}
.panel-area .card-item .bubble-disc-card::before{
	content: '';
	display: block;
	background-color: var(--main-color);
	position: absolute;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.panel-area .card-item .bottom-text{
	display: flex;
	flex-direction: column;
	row-gap: 8px;
	margin-top: auto;
}
.panel-area .card-item .bottom-text .info{
	font-weight: 300;
	letter-spacing: -0.6px;
	color: #767676;
	font-size: 12px;
	line-height: 20px;
}
.panel-area .card-item .bottom-text .view-more{
	margin: 0 0 0 auto;
	font-weight: 300;
	font-size: 14px;
	line-height: 24px;
	text-decoration: underline;
	text-align: right;
	display: inline-block;
}
.panel-area .link-more{
	height: 54px;
	background-color: #000;
	color: #fff;
	border-radius: 8px;
	font-weight: 500;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media screen and (min-width: 1160px){
	.panel-area{
		padding: 60px 0 0;
		row-gap: 80px;
	}
	.panel-area .list-title{
		padding: 0 0 10px;
		font-size: 24px;
		line-height: 34px;
	}
	.panel-area .description-item{
		padding-left: 24px;
	}
	.panel-area .description-item::before{
		width: 3px;
		height: 3px;
		top: 10px;
		left: 10px;
	}
	.panel-area .description-item .text-info-wrap{
		display: flex;
		align-items: center;
		column-gap: 10px;
	}
	.panel-area .description-text{
		font-size: 16px;
		line-height: 26px;
	}
	.panel-area .info-wrap{
		position: relative;
	}
	.panel-area .info-tooltip{
		width: 460px;
		top: 0;
		left: 26px;
	}
	.panel-area .info-tooltip,
	.panel-area .info-tooltip p{
		font-size: 14px;
		line-height: 24px;
	}

	.panel-area .card-list{
		column-gap: 28px;
	}
	.panel-area .card-item{
		flex: 1;
		flex-direction: column;
		display: flex;
	}
	.panel-area .card-item .card-name{
		font-size: 20px;
	}
	.panel-area .card-item .card-wrap{
		flex: 1;
		padding: 48px 32px 24px;
	}
	.panel-area .card-item .card-content{
		column-gap: 8px;
	}
	.panel-area .card-item img{
    width: 255px;
    height: 178px;
		margin: -16px 0 0 -24px;
	}
	.panel-area .card-item .card-content-text{
		padding: 12px 0 0;
	}
	.panel-area .card-item .card-content-text ul{
		row-gap: 12px;
	}
	.panel-area .card-item [class^="text-item0"]{
		font-size: 18px;
		line-height: 30px;
	}
	.panel-area .card-item .text01{
		padding: 5px 16px;
	}
	.panel-area .card-item .bubble-disc-card{
		height: 36px;
		padding: 9px 16px;
		margin: 11px 0 0;
	}
	.panel-area .card-item .bubble-disc-card p{
		font-size: 12px;
		column-gap: 4px;
	}
	.panel-area .card-item .bubble-disc-card strong{
		font-size: 15px;
	}
	.panel-area .card-item .bubble-disc-card::before{
		width: 12px;
		height: 10px;
		top: -9px;
		right: 28px;
	}
	.panel-area .link-more{
		width: 340px;
		margin: 48px auto 0;
	}
}

@media screen and (max-width: 1159px){
	.panel-area{
		padding: 36px 0 0;
		row-gap: 60px;
	}
	.panel-area .list-title{
		padding: 0 0 5px;
		font-size: 20px;
		line-height: 29px;
	}
	.panel-area .description-item{
		padding-left: 20px;
	} 
	.panel-area .description-item::before{
		width: 3px;
		height: 3px;
		top: 10px;
		left: 8px;
	}
	.panel-area .description-text{
		font-weight: 400;
		font-size: 14px;
		line-height: 24px;
	}
	.panel-area .description-item.info .description-text{
		display: inline;
	}
	.panel-area .description-item.info .info-wrap{
		height: 18px;
		display: inline-block;
		padding: 4px 0 0;
	}
	.panel-area .btn-info-icon img{
		width: 14px;
		height: 14px;
	}
	.panel-area .info-tooltip{
		width: fit-content;
		max-width: 100%;
		padding: 14px 28px 14px 14px;
		word-break: break-all;
		left: 500px;
		bottom: 0;
		transform: translateY(100%);
	}
	.panel-area .info-tooltip,
	.panel-area .info-tooltip p{
		font-size: 12px;
		line-height: 18px;
	}
	
	.panel-area .card-list{
		flex-direction: column;
		row-gap: 30px;
	}
	.panel-area .card-item .card-name{
		font-size: 16px;
	}
	.panel-area .card-item .card-wrap{
		padding: 16px;
	}
	.panel-area .card-item .card-content{
		column-gap: 5px;
	}
	.panel-area .card-item img{
    width: 116px;
    height: 81px;
		margin: -7px 0 0 -11px;
	}
	.panel-area .card-item .card-content-text ul{
		row-gap: 6px;
	}
	.panel-area .card-item [class^="text-item0"]{
		white-space: nowrap;
	}
	.panel-area .card-item .text01{
		font-size: 12px;
    line-height: 20px;
		padding: 3px 12px;
	}
	.panel-area .card-item .text02{
    font-size: 14px;
    line-height: 20px;
	}
	.panel-area .card-item .bubble-disc-card{
		max-width: 194px;
		min-height: 28px;
		margin: 10px 0 0;
		padding: 5px 12px;
	}
	.panel-area .card-item .bubble-disc-card p{
		font-size: 11px;
		line-height: 18px;
		column-gap: 4px;
	}
	.panel-area .card-item .bubble-disc-card strong{
		font-size: 13px;
	}
	.panel-area .card-item .bubble-disc-card::before{
		width: 10px;
		height: 10px;
		top: -8px;
		right: 28px;
	}
	.panel-area .card-item .bottom-text .view-more{
		padding: 4px 8px;
	}
	.panel-area .link-more{
		width: 100%;
		max-width: 340px;
		margin: 60px auto 0;
	}
}

@media screen and (max-width: 780px){
	.panel-area .info-tooltip{
		left: auto;
		right: 0;
	}
}


/* -------------------- 스티키 바 -------------------- */

/* 소셜티커 */
.social-ticker.ticker-wrap{
	display: flex;
	justify-content: center;
}
.social-ticker.ticker-wrap .ticker{
	background-color: rgba(51, 51, 51, 0.8);
	display: inline-block;
	overflow: hidden;
}
.social-ticker.ticker-wrap .text{
	color: #fff;
	font-size: 16px;
	line-height: 19px;
	letter-spacing: -0.03em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Pretendard', sans-serif;
	font-weight: 400;
}
.social-ticker.ticker-wrap .text b{ font-family: inherit; font-weight: 700; }

@media screen and (min-width: 1160px) {
	.pd-footer .ticker-wrap, 
	.pd-footer2 .ticker-wrap{
		padding: 0 0 0 659px;
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0);
	}
	.pd-footer .ticker-wrap{
		bottom: 50px;
	}
	.pd-footer2 .ticker-wrap{
		top: 10px;
		z-index: -1;
	}
	.pd-footer .ticker,
	.pd-footer2 .ticker{
		width: 264px;
		height: 31px;
		border-radius: 30px;
	}

	.pd-footer .ticker .text,
	.pd-footer2 .ticker .text{
		padding: 6px 0;
	}
}

@media screen and (max-width: 1159px) {
	.mo .sticky_bar .ticker-wrap{
		position: absolute;
		top: 5px;
		left: 50%;
		transform: translate(-50%, 0);
		z-index: -101;
	}
	.mo .sticky_bar .ticker{
		width: 262px;
		height: 29px;
		border-radius: 20px; 
	}
	.mo .sticky_bar .ticker .text{
		padding: 5px 0;
	}
}


.pc .red_btn .bubble,
.mo .red_btn .bubble{
	--bubble-tail-offset: 46px;
	--bubble-tail-ratio: 33%;
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1;
	pointer-events: none;
}
.pc .red_btn .bubble::before,
.mo .red_btn .bubble::before,
.pc .red_btn .bubble::after,
.mo .red_btn .bubble::after{
	content: '';
	width: 18px;
	height: 17px;
	display: block;
	position: absolute;
	/* 버튼 좌표계 기준 — '간편구매' 텍스트 바로 좌측 (PC/MO 공통) */
	left: calc(50% - var(--bubble-tail-offset));
	transform: translateX(-50%);
	clip-path: polygon(0 0,100% 0,50% 100%);
}
.pc .red_btn .bubble::before,
.mo .red_btn .bubble::before{
	background-color: var(--main-color);
	bottom: -14px;
}
.pc .red_btn .bubble::after,
.mo .red_btn .bubble::after{
	background-color: #000;
	bottom: -12px;
}
/* 실제 말풍선 알약 — 폭은 내용(아이콘 + 문구)에 따라 가변.
   max-width 를 두지 않는다: 상한을 두면 알약(검은 배경)만 성장을 멈추고
   nowrap 텍스트는 계속 흘러나가 글자가 배경 밖에 뜬다.
   문구가 길면 화면 밖으로 잘리는 것은 허용하되, 항상 한 줄 + 항상 배경 위를 보장한다. */
.pc .red_btn .bubble p,
.mo .red_btn .bubble p{
	min-width: 70px;
	width: max-content;
	max-width: none;
	height: 100%;
	border-radius: 4px;
	background-color: #000;
	color: #fff;
	font-weight: 700;
	text-align: center;
	/* 한 줄 고정 — body 의 word-wrap/overflow-wrap:break-word 상속을 여기서 차단한다.
	   nowrap 하나에만 의존하면 상위 스타일 변경 시 바로 두 줄로 무너진다. */
	white-space: nowrap;
	flex-wrap: nowrap;
	word-break: keep-all;
	overflow-wrap: normal;
	display: flex;
	align-items: center;
	position: absolute;
	top: 0;
	left: calc(50% - var(--bubble-tail-offset));
	transform: translateX(calc(-1 * var(--bubble-tail-ratio)));
	z-index: 1;
}
.pc .red_btn .bubble span,
.mo .red_btn .bubble span{
	color: #D5FB06;
}

/*Task 1*/
/* 말풍선 앞 아이콘(선물) - 관리자에 아이콘이 등록된 경우에만 <img>가 삽입됨.
   인라인 flex 아이템이라 아이콘 폭이 알약 폭 계산에 그대로 포함된다. */
.pc .red_btn .bubble .bubble_img,
.mo .red_btn .bubble .bubble_img{
	display: block;
	flex-shrink: 0;
	object-fit: contain;
}
/*Task 1*/
.pc .red_btn .bubble .bubble_strong,
.mo .red_btn .bubble .bubble_strong{
	color : #FFB2D0;

}

@media screen and (min-width: 1160px) {
	.pc .red_btn{
		position: relative;
	}
	.pc .red_btn .bubble{
		height: 42px;
		/*border: 2.5px solid var(--main-color);*/
		filter: drop-shadow(-3px 4px 16.1px #ED174DB3);
	}
	.pc .option_button .red_btn .bubble{
		top: -35px;
	}
	.pc.pd-footer .red_btn .bubble{
		top: -35px;
	}
	.pc.pd-footer2 .red_btn .bubble{
		top: -35px;
	}
	.pc .red_btn .bubble p{
		padding: 0 20px;
		font-size: 15px;
		letter-spacing: -0.72px;
		/* 강조 문구 <span> 앞뒤에 없는 공백이 생겨 제거 (column-gap: 4px) */
	}
	/* 아이콘이 붙으면 아이콘 자체의 여백(margin-right 7px)만큼 좌측 패딩을 덜어낸다.
	   admin 미리보기(bubbleTxt/detail.jsp)와 동일하게 유지할 것. */
	.pc .red_btn .bubble p:has(.bubble_img){
		padding-left: 13px;
	}

	/*Task 1*/
	.pc .red_btn .bubble .bubble_img{
		width: 19px;
		height: 19px;
		margin-right: 7px;
	}
}

@media screen and (max-width: 1159px) {
	.mo .red_btn .bubble{
		height: 36px;
		/*border: 2px solid var(--main-color);*/
		filter: drop-shadow(-3px 4px 16.1px #ED174DB3);
		top: -22px;
	}
	.mo .red_btn .bubble p{
		padding: 0 15px;
		font-size: 14px;
		letter-spacing: -0.6px;
		/* 강조 문구 <span> 앞뒤에 없는 공백이 생겨 제거 (column-gap: 3px) */
	}
	/* PC 와 같은 규칙 — 아이콘 여백(margin-right 6px)만큼 좌측 패딩을 덜어낸다 */
	.mo .red_btn .bubble p:has(.bubble_img){
		padding-left: 9px;
	}
	/*Task 1*/
	.mo .red_btn .bubble .bubble_img{
		width: 17px;
		height: 17px;
		margin-right: 6px;
	}
	/* 하단 고정 '상담신청 + 간편구매' 2버튼 바 — 간편구매가 화면 우측 절반이라
	   알약이 기본 비율로는 오른쪽으로 잘린다. 화살표 위치는 그대로 두고
	   알약만 왼쪽으로 뻗도록 비율을 뒤집는다. */
	.mo .sticky_bar .button_wrap:has(.black_btn) .red_btn .bubble{
		--bubble-tail-ratio: 62%;
	}

}


/* 카테고리가 대명헬로라이프전용관인 상품에 한해 추가되는 가격 강조 뱃지 */
.hellolife-price-badge-pc{
	width: 218px;
	height: 32px;
	border-radius: 6px;
	background-color: #FFF3F6;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hellolife-price-badge-pc img{
	width: 13px;
	height: 13px;
	margin: 0 6px 0 0;
}
.hellolife-price-badge-pc p{
	color: #ED174D;
	font-size: 12px;
}
.hellolife-price-badge-pc p strong{
	font-weight: 700;
}
.pc .total_sum .sum_bottom .sum_bottom_text01.hello_life::after{
	display: none;
}
.product_option .hellolife-price-badge-pc{
	margin: 12px 0 0 auto;
}
.pd-footer .pc_sticky_wrap01 .pc_sticky_bar01 .total{
	width: 320px;
	max-width: 320px;
	margin-left: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
}
.pd-footer2 .option_right .hellolife-price-badge-pc{
	margin: -33px 0 30px auto;
}
.hellolife-price-badge-mo{
	width: 190px;
	height: auto;
	display: block;
}
.product_option .hellolife-price-badge-mo{
	margin-left: auto;
}
.sticky_bar .hellolife-price-badge-mo{
	margin: -14px 0 24px auto;
}

/* 바로구매 팝업 */
.popup-buynow{
  display: none;
}
.popup-buynow.active{
  width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
  position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 100000;
}
.popup-buynow .dimmed{
  width: 100%; height: 100%; background-color: rgba(0, 0, 0, .25);
  position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}
.popup-buynow .contents-wrap{
  background-color: #fff;
	filter: drop-shadow(10px 22px 14px 13px rgba(0, 0, 0, 0.1));
	box-shadow: 10px 22px 14px 13px rgba(0, 0, 0, .1);
  position: relative;
	border-radius: 8px;
	overflow: hidden;
}
.popup-buynow .btn-popup-close{
	background: url(/resources/images/product/buynow/icon-close.png) no-repeat center center / 20px 20px;
  position: absolute;
	width: 36px; height: 36px; top: 8px; right: 8px;
}
.popup-buynow .cont-img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.popup-buynow .btn-group{
	width: 100%;
	flex-direction: column;
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
}
.popup-buynow .btn-benefit, .popup-buynow .btn-prod{
	width: 100%;
	border-radius: 8px;
	font-size: 14px;
	font-weight: bold;
}
.popup-buynow .btn-benefit{
	background-color: var(--main-color);
	color: white;
}
.popup-buynow .btn-prod{
	background-color: white;
	border: 1px solid #000;
	color: #000;
}

@media screen and (min-width: 1160px) {
	.popup-buynow .contents-wrap{
		width: 620px;
		height: 380px;
	}
	.popup-buynow .btn-group{
		padding: 0 80px;
	}
	.popup-buynow .btn-benefit, .popup-buynow .btn-prod{
		height: 40px;
	}
	.popup-buynow .btn-prod{
		margin-top: 6px;
	}
}

@media screen and (max-width: 1159px) {
	.popup-buynow{
		padding: 32px 16px;
	}
	.popup-buynow .contents-wrap{
		width: 320px;
		height: 432px;

		position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	}
	.popup-buynow .btn-group{
		padding: 0 30px;
	}
	.popup-buynow .btn-benefit, .popup-buynow .btn-prod{
		height: 42px;
	}
	.popup-buynow .btn-prod{
		margin-top: 8px;
	}
}