@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-inner{display: none}

@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*/

/*certification 섹션*/
.sec-certification{text-align: center}
.certification-wrap p{line-height: 170%; font-weight: 300}
.certification-wrap > p > strong{font-weight: 600}
.certification-img{background: url(/image/halal/certification_img_3.png) no-repeat center; background-size: cover; position: relative}
.certification-img-txt{position: relative; z-index: 1}
.certification-img-txt h2{color: var(--color-text-1); letter-spacing: 0.1em}
.certification-img-txt p{color: var(--color-text-1)}
.certification-img .overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(94, 47, 47, 0.38)}

@media screen and (min-width:428px) and (max-width:767px){
	.certification-wrap p{white-space: pre-line}
}

@media screen and (max-width:767px){
	.certification-img-logo img{width:180px}
}

@media screen and (min-width:768px) and (max-width:1280px){
	.certification-wrap p,
	.certification-img-txt p{white-space: pre-line}
}

@media screen and (max-width:1280px){
	.sec-certification{padding: 7.25rem 0 0}
	.certification-wrap > p{font-size: 15px; margin: 3.313rem 0 6rem; padding: 0 1rem}
	.certification-img{padding: 5rem 0}
	.certification-img-txt p{margin-top: 2.75rem; font-size: 15px; padding: 0 1rem}
}

@media screen and (min-width:1281px){
	.sec-certification{padding: 12.5rem 0 0}
	.certification-wrap p{white-space: pre-line}
	.certification-wrap > p{font-size: 1.13rem; margin: 4.38rem 0 6.88rem}
	.certification-img{padding: 11.56rem 0}
	.certification-img-txt p{margin-top: 4.81rem; font-size: 1.25rem; white-space: pre-line}
}
/*certification 섹션*/

/*The excellence of Halal 섹션*/
.sec-excellence-halal h2{text-align: center}
.excellence-halal-wrap h2 > span{font-family: "Playfair Display", serif; font-weight: 400; color: var(--color-primary); line-height: 100%}
.excellence-halal-cont{display: flex; align-items: center; gap: 30px}
.excellence-halal-cont:last-child{margin-bottom: 0}
.excellence-halal-cont-txt h3{line-height: 170%}
.excellence-halal-cont-txt span{color: var(--color-text-9); font-weight: 300}
.excellence-halal-cont-txt p{line-height: 170%; font-weight: 300; color: var(--color-text-2)}
.excellence-halal-cont-txt p:last-child{color: var(--color-primary); font-weight: 500; line-height: 100%}
.excellence-halal-cont-img img{display: block; object-fit: cover; width: 100%}

@media screen and (min-width:428px) and (max-width:767px){
	.excellence-halal-cont-txt p{white-space: pre-line}
}

@media screen and (min-width:768px) and (max-width:1280px){
	.excellence-halal-cont-txt p{white-space: pre-line}
}

@media screen and (max-width:1280px){
	.sec-excellence-halal{padding: 7.25rem 1rem 0}
	.excellence-halal-cont{flex-direction: column}
	.excellence-halal-cont-wrap{margin-top: 3.31rem}
	.excellence-halal-cont{margin-bottom: 4.25rem}
	.excellence-halal-cont.txt-reverse{flex-direction: column-reverse}
	
	.excellence-halal-cont-txt{text-align: center}
	.excellence-halal-cont-txt h3{font-size: 1.34rem}
	.excellence-halal-cont-txt span,
	.excellence-halal-cont-txt p{font-size: 15px}
	.excellence-halal-cont-txt p:first-of-type{margin: 1.33rem 0}
	.excellence-halal-cont-img img{max-width: 500px}
}

@media screen and (min-width:1281px){
	.sec-excellence-halal{padding: 13.31rem 1rem 0}
	.excellence-halal-cont-wrap{margin-top: 6.88rem}
	.excellence-halal-cont{justify-content: space-between; margin-bottom: 6.25rem}
	
	.excellence-halal-cont-txt{text-align: left}
	.excellence-halal-cont-txt h3{font-size: 1.88rem}
	.excellence-halal-cont-txt span,
	.excellence-halal-cont-txt p{font-size: 1.125rem; white-space: pre-line}
	.excellence-halal-cont-txt p:first-of-type{margin: 2.5rem 0 1.88rem}
}
/*The excellence of Halal 섹션*/

/*core-values 섹션*/
.sec-core-values{background: url(../image/halal/core_values_background.png) no-repeat; background-size: cover; background-position: center}
.core-values-cont{display: flex; align-items: center; justify-content: space-between}
.core-values-cont:last-child{margin-bottom: 0}
.core-values-cont-txt{color: var(--color-text-2)}
.core-values-cont-txt span{font-family: "Playfair Display", serif; font-weight: 700; color: var(--color-primary); letter-spacing: 0.1em; line-height: 100%}
.core-values-cont-txt p{line-height: 170%; font-weight: 300}
.core-values-cont-img{box-shadow: 0 0px 30px rgba(0, 0, 0, 0.2)}
.core-values-cont-img img{display: block; object-fit: cover; width: 100%}

@media screen and (min-width:428px) and (max-width:767px){
	.core-values-cont-txt p{white-space: pre-line}
}

@media screen and (max-width:767px){
	.core-values-cont-txt{text-align: center}
	.core-values-cont.txt-1{flex-direction: column}
	.core-values-cont.txt-2{flex-direction: column-reverse}
}

@media screen and (min-width:768px) and (max-width:1280px){
	.core-values-cont-txt p{white-space: pre-line}
}

@media screen and (max-width:1280px){
	.sec-core-values{margin-top: 7.25rem; padding: 7.25rem 1rem}
	.core-values-cont{margin-bottom: 3rem; gap: 3.33rem}
	.core-values-cont-txt span{font-size: 2.25rem}
	.core-values-cont-txt h3{font-size: 1.34rem; margin: 2.44rem 0}
	.core-values-cont-txt p{font-size: 15px}
	.core-values-cont-img img{aspect-ratio: 2 / 1.5}
}

@media screen and (min-width:1281px){
	.sec-core-values{margin-top: 12.5rem; padding: 12.5rem 1rem}
	.core-values-cont{margin-bottom: 3rem; gap: 30px}
	.core-values-cont-txt span{font-size: 4.375rem}
	.core-values-cont-txt h3{font-size: 1.88rem; margin: 3.13rem 0}
	.core-values-cont-txt p{font-size: 1.13rem; white-space: pre-line}
	.core-values-cont-img img{aspect-ratio: 1 / 1}
}
/*core-values 섹션*/

/*피부과 병/의원 전문가들의 선택 섹션*/
.sec-clinic-choice{text-align: center; color: var(--color-text-2)}
.sec-clinic-choice h2{font-family: 'Pretendard'; color: var(--color-text-2); font-weight: 700}
.sec-clinic-choice p{line-height: 170%; font-weight: 300}
.clinic-choice-bg{background: url(../image/halal/clinic_choice_bg.jpg) no-repeat; background-size: cover; background-position: center 60%; max-height: 576px}
.clinic-choice-img{display: flex}
.clinic-choice-img img{object-fit: cover; display: block}

@media screen and (min-width:428px) and (max-width:767px){
	.sec-clinic-choice p{white-space: pre-line}
}

@media screen and (min-width:768px) and (max-width:1280px){
	.sec-clinic-choice p{white-space: pre-line}
}

@media screen and (max-width:1280px){
	.sec-clinic-choice{padding: 7.25rem 0 10rem}
	.sec-clinic-choice p{font-size: 15px; margin: 2.44rem 0}
	.clinic-choice-bg{height: 280px}
	.clinic-choice-img{margin-top: 1.5rem}
	.clinic-choice-img div{width:calc(100% / 3)}
	.clinic-choice-img div img{width: 100%; aspect-ratio: 1 / 1}
}

@media screen and (min-width:1281px){
	.sec-clinic-choice{padding: 12.81rem 0 13.5rem}
	.sec-clinic-choice h2{font-size: 3.13rem}
	.sec-clinic-choice p{font-size: 1.13rem; margin: 4.19rem 0 7.06rem; white-space: pre-line}
	.clinic-choice-bg{height: 576px}
	.clinic-choice-img{margin-top: 6.25rem; gap: 30px}
	.clinic-choice-img div:nth-child(1){flex: 2}
	.clinic-choice-img div:nth-child(2),
	.clinic-choice-img div:nth-child(3){flex: 1}
	.clinic-choice-img img{max-height: 440px; width: 100%; height: 100%}
}
/*피부과 병/의원 전문가들의 선택 섹션*/