/* tab */
.main-prd__tab{
	position:relative;
	display:flex; align-items:center; justify-content: center;
	width: 430px;
	padding:8px;
	border-radius: 36px;
	background: rgba(235, 244, 255, .64);
	margin: 0 auto 50px;
}
.main-prd__tab::before{
	content: '';
    position: absolute; top: 8px; left: 8px;
    width: calc((100% - 16px) / 2);
    height: calc(100% - 16px);
    border-radius: 36px;
    background: #0051B2;
    transition: .3s ease-out;
}
.main-prd__tab:has(.main-prd__tab-btn[data-prd-tab='popular'].is-active)::before {
	transform: translateX(100%);
}
.main-prd__tab .main-prd__tab-btn{
	position:relative;
	flex:1 1 0;
	padding: clamp(10px, 1.1vw, 18px);
	border-radius: 36px;
	background:none;
	color:#0051B2;
	font-size: clamp(15px, 1.1vw, 18px);
	border:none;
	cursor:pointer;
}
.main-prd__tab .main-prd__tab-btn.is-active{
	color:#fff;
}

/* slide */
.main-prd__swiper{
	overflow: visible !important;
}
.main-prd__swiper::before{
	content:""; display:block;
	width:25%; height:100%;
	background: linear-gradient(to right, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 100%);
	position:absolute; left:-15%; top:50%; 
	transform:translateY(-50%);
	z-index:2;
}
.main-prd__swiper::after{
	content:""; display:block;
	width:25%; height:100%;
	background: linear-gradient(to left, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 100%);
	position:absolute; right:-15%; top:50%; 
	transform:translateY(-50%);
	z-index:2;
}
.main-prd__swiper .main-prd__list{
	align-items:center;
	padding:0;
}
.main-prd__swiper .main-prd__item .main-prd__item__wrap{
	width:100%; 
	border:1px solid #DBDBDB;
	border-radius: 18px;
	padding: 26px;
	transform: scale(0.775);
	transition: .3s ease-out;
	display:flex; flex-direction:column;
	align-items:center; justify-content:center;
	aspect-ratio: 344 / 428;
}
.main-prd__swiper .main-prd__item.swiper-slide-active .main-prd__item__wrap{
	padding:30px 30px 40px;
	transform: scale(1);
}
.main-prd__item.swiper-slide-prev .main-prd__item__wrap{
  margin-left:-20px;
}
.main-prd__item.swiper-slide-next .main-prd__item__wrap{
  margin-right:-20px;
}

.main-prd__swiper .main-prd__category{
	display:block; 
	background:#E8E8E8;
	padding:8px 15px; 
	text-align:center;
	min-width:120px;
	font-size: clamp(14px, 1vw, 16px);
	border-radius:50px;
	margin-bottom:22px;
}
.main-prd__swiper .main-prd__img-wrap{
	aspect-ratio: 256 / 318;
}
.main-prd__swiper .main-prd__img-wrap img{
	width:100%;
}

.main-prd__swiper .main-prd__name{
	font-size:clamp(16px, 1.1vw, 18px); font-weight:600;
	text-align:center;
	transition: .3s ease-out;
}
.main-prd__swiper .main-prd__name::before{
	content:""; display:block; width:28px; height:1px;
	background: rgba(0,0,0,.14);
	margin:12px auto 20px auto;
}
.main-prd__swiper .main-prd__item.swiper-slide-active .main-prd__name{
	font-size:clamp(16px, 1.3vw, 22px);
}

.main-prd__swiper .main-prd__link{
	font-size:14px;
	display:none; align-items:center; justify-content:center; gap:5px;
	line-height:1.2;
	border-bottom:1px solid transparent;
	margin-top:clamp(20px, 2.4vw, 34px);
	opacity:0;
	transition: .3s ease-out;
}
.main-prd__swiper .main-prd__item.swiper-slide-active .main-prd__link{
	opacity:1; display:flex;
}
.main-prd__swiper .main-prd__link:hover{
	border-bottom:1px solid #000;
}
.main-prd__swiper .main-prd__link::after{
	content:""; display:block;
	width:12px; height:12px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11.31' height='11.309' viewBox='0 0 11.31 11.309'%3E%3Cg id='Group_634' data-name='Group 634' transform='translate(-622.715 -1890.348) rotate(45)'%3E%3Cpath id='Path_63' data-name='Path 63' d='M-16198-20601.152v-10.008' transform='translate(17983 21505)' fill='none' stroke='%23000' stroke-width='1'/%3E%3Cpath id='Path_64' data-name='Path 64' d='M-16207.731-20611.7l4.426-4.426,4.426,4.426' transform='translate(17988.305 21509.961)' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center/contain;
	margin-top: -4px;
}

/* link */
.main-prd__panel .main-prd__more{
	display:flex; align-items:center; gap:20px;
	font-size:14px;
	border:1px solid #DBDBDB;
	border-radius:50px;
	margin:50px auto;
	width:max-content;
	padding:6px 6px 6px 19px;
}
.main-prd__panel .main-prd__more::after{
	content:""; display:block;
  width:32px; height:32px;
  background:#C7E800 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect id='Rectangle_315' data-name='Rectangle 315' width='32' height='32' transform='translate(-20377 -13937)' fill='none'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Mask_Group_4' data-name='Mask Group 4' transform='translate(20377 13937)' clip-path='url(%23clip-path)'%3E%3Cg id='Group_715' data-name='Group 715' transform='translate(-20360.924 -13928) rotate(45)'%3E%3Cpath id='Path_63' data-name='Path 63' d='M0,10.008V0' transform='translate(4.426)' fill='none' stroke='%23000' stroke-width='1'/%3E%3Cpath id='Path_64' data-name='Path 64' d='M0,4.426,4.426,0,8.852,4.426' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center/cover;
	border-radius:50px;
	transition:.3s ease-out;
}
.main-prd__panel .main-prd__more:hover::after{
	background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect id='Rectangle_315' data-name='Rectangle 315' width='32' height='32' transform='translate(-20377 -13937)' fill='none'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Mask_Group_4' data-name='Mask Group 4' transform='translate(20377 13937)' clip-path='url(%23clip-path)'%3E%3Cg id='Group_715' data-name='Group 715' transform='translate(-20360.924 -13928) rotate(45)'%3E%3Cpath id='Path_63' data-name='Path 63' d='M0,10.008V0' transform='translate(4.426)' fill='none' stroke='%23fff' stroke-width='1'/%3E%3Cpath id='Path_64' data-name='Path 64' d='M0,4.426,4.426,0,8.852,4.426' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center/cover;
}

/* button */
.nid-prd-slide__prev, .nid-prd-slide__next{
	width:16px; height:16px; border:none;
	border-bottom: 2px solid #000; border-left:2px solid #000;
	position:absolute; top:50%; transform: translateY(-50%);
	z-index: 10;
	background:none;
	cursor: pointer;
}
.nid-prd-slide__prev{
	left:-6%;
	transform: translateY(-50%) rotate(45deg);
}
.nid-prd-slide__next{
	right:-6%;
	transform: translateY(-50%) rotate(-135deg);
}

@media (max-width:1240px){
	/* 	slide  */
	.main-prd__swiper .main-prd__item .main-prd__item__wrap{
		transform: scale(1);
		padding:30px 30px 40px;
	}
	.main-prd__item.swiper-slide-prev .main-prd__item__wrap{
	  margin-left:0;
	}
	.main-prd__item.swiper-slide-next .main-prd__item__wrap{
	  margin-right:0;
	}
	.main-prd__swiper .main-prd__link{
		opacity:1; display:flex;
	}
}

@media (max-width:1024px){
	/* 	slide  */
	.main-prd__swiper .main-prd__list{
		align-items: stretch;
	}
	.main-prd__swiper .main-prd__item{
		height:auto;
	}
	.main-prd__swiper .main-prd__item .main-prd__item__wrap{
		aspect-ratio: auto;
		height:100%;
	}
	.main-prd__swiper .main-prd__name{
		flex:1;
	}
	/* button */
	.nid-prd-slide__prev{
		left: 6%;
	}
	.nid-prd-slide__next{
		right: 6%;
	}
}

@media (max-width:640px){
	/*  tab	 */
	.main-prd__tab{
		width:100%;
	}
	/* slide */
	.main-prd__swiper .main-prd__category{
		padding:4px 12px; margin-bottom:10px;
	}
	.main-prd__swiper .main-prd__name::before{
		margin:10px auto 12px auto;
	}
}