@charset "utf-8";

/*CSS Common*/
*{box-sizing: border-box; font-family: 'pretendard'}
body{background-color: var(--color-background-lightest)}
.sec{max-width: 1600px; margin: 0 auto}
h2{font-family: "Playfair Display", serif; font-weight: 400; color: var(--color-text-3); line-height: 100%}
.page-title-bg{background-position: top !important}

@media screen and (max-width:320px){
	h2{font-size: 30px}
}

@media screen and (min-width:320px) and (max-width:1280px){
	h2{font-size: 2rem}
}

@media screen and (max-width:1280px){
}

@media screen and (min-width:1281px){
	h2{font-size: 5.13rem}
}
/*CSS Common*/

/*회원 혜택 섹션*/
.membership-wrap{text-align: center}
.membership-wrap > p{color: var(--color-primary); font-weight: 700}
.membership-wrap > h2{font-family: 'Pretendard'; color:  var(--color-text-2); font-weight: 500}
.membership-cont-wrap{display: flex; flex-wrap: wrap}
.membership-cont-wrap .membership-cont-box.color-box{background-color: var(--color-primary); color: var(--color-text-1)}
.membership-cont-wrap .membership-cont-box.color-box p{color: var(--color-text-1)}
.membership-cont-wrap .membership-cont-box.color-box p:nth-of-type(2){margin: 1.375rem 0 0}
.membership-cont-wrap .membership-cont-box.color-box div{border-radius: 50px; background-color: rgba(255, 255, 255, 0.19); max-width: 167px; height: 26px; padding: 0 20px;font-weight: 600; display: flex; justify-content: center; align-items: center; margin: 22px 0 13px}
.membership-cont-wrap .membership-cont-box.color-box > span{font-size: 14px !important; display: block; margin-top: 30px; word-break: keep-all; line-height: 137%; opacity: .7; font-weight: 300; padding: 0 20px}
.membership-cont-wrap .membership-cont-box{background-color: var(--color-background-11); color: var(--color-text-2); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 10px}
.membership-cont-wrap .membership-cont-box p:nth-of-type(2){font-weight: 600}
.membership-cont-wrap .membership-cont-box p:nth-of-type(3){line-height: 170%}

@media screen and (max-width:564px){
	.membership-cont-wrap .membership-cont-box{width: calc((100% - (1.33rem * 0)) / 1)}
}

@media screen and (max-width:767px){
	.membership-cont-wrap .membership-cont-box p:nth-of-type(1) > i > svg{width: 70px}
}

@media screen and (min-width:428px) and (max-width:767px){
	.membership-cont-wrap .membership-cont-box p{white-space: pre-line}
}

@media screen and (min-width:565px) and (max-width:1024px){
	.membership-cont-wrap .membership-cont-box{width: calc((100% - (1.33rem * 1)) / 2); aspect-ratio: 1 / 1}
}

@media screen and (min-width:768px) and (max-width:1280px){
	.membership-cont-wrap .membership-cont-box p{white-space: pre-line}
}

@media screen and (min-width:1024px) and (max-width:1280px){
	.membership-cont-wrap .membership-cont-box{width: calc((100% - (1.33rem * 3)) / 3); aspect-ratio: 1 / 1}
}

@media screen and (max-width:1280px){
	.membership-wrap{padding: 7.25rem 1rem}
	.membership-wrap > p{font-size: 1.2rem}
	.membership-wrap > h2{margin: 2rem 0 3rem}
	.membership-cont-wrap{gap: 1.33rem}
	.membership-cont-wrap .membership-cont-box p:nth-of-type(2){font-size: 1.34rem; margin: 1rem 0}
	.membership-cont-wrap .membership-cont-box p:nth-of-type(3),
	.membership-cont-wrap .membership-cont-box p:nth-of-type(4),
	.membership-cont-wrap .membership-cont-box.color-box span{font-size: 15px}
}

@media screen and (min-width:1281px){
	.membership-wrap{padding: 12.81rem 1rem}
	.membership-wrap > p{font-size: 1.25rem}
	.membership-wrap > h2{font-size: 2.5rem; margin: 2.25rem 0 5.38rem}
	.membership-cont-wrap{gap: 1.25rem}
	.membership-cont-wrap .membership-cont-box{width: calc((100% - (1.25rem * 4)) / 5); aspect-ratio: 1 / 1}
	.membership-cont-wrap .membership-cont-box p{white-space: pre-line}
	.membership-cont-wrap .membership-cont-box p:nth-of-type(2){font-size: 1.5rem; margin: 2.38rem 0}
	.membership-cont-wrap .membership-cont-box p:nth-of-type(3),
	.membership-cont-wrap .membership-cont-box p:nth-of-type(4),
	.membership-cont-wrap .membership-cont-box.color-box span{font-size: 1rem}
}
/*회원 혜택 섹션*/