@charset "utf-8";
ul {list-style:none; margin:0; padding:0;}
body .nutrient {position:relative;}

.nutrient .bannerType1 {padding:13px 0 0; width:calc(100% - 45px); display:flex; background: linear-gradient(90deg, #8FC31F 0%, #445D0F 100%); position:relative;border-radius: 20px;}
.nutrient .bannerType1:before {width:211px; height:216px; background:url(/images/clinic/nutrient-bgIcon.svg)0 0 no-repeat; left:7px; top:0; position:absolute; display:block; content:'';}
.nutrient .bannerType1 .tit {width:305px; padding:0 0 20px 80px; gap:5px; display:flex; flex-direction:column; justify-content: center;}
.nutrient .bannerType1 .tit p {color: #FFF;font-size: var(--fs16);font-weight: 400; line-height: 1.2;}
.nutrient .bannerType1 .tit h4 {
	color:#FFF; font-size: var(--fs40); font-weight: 800; line-height: 1.2;
	display:inline-block;
}
.nutrient .bannerType1 .con {width:calc(100% - 305px); padding:50px 55px; border-radius:20px 20px 20px 0;background:#fff;box-shadow: 12px 9px 30px 0px rgba(0, 0, 0, 0.15); position:relative; transform:translateX(45px);}
.nutrient .bannerType1 .con img {height:300px; position:absolute; left:-120px; bottom:0;}
.nutrient .bannerType1 .con p {font-size:var(--fs20); color:#000;}
.nutrient .bannerType1 .con p b {font-weight:600;}


.nutrient .nutrient-con {display:flex; gap:110px; width:1180px; padding:0 40px 0 0; margin:0 auto;}
.nutrient .nutrient-tit {padding:65px 0 0; width:calc(100% - 810px); display:flex; flex-direction:column; align-self:start; gap:30px; position:sticky; top:0;}
.nutrient .nutrient-tit h4 {color: #000;font-size: var(--fs45);font-weight: 600;line-height: normal}
.nutrient .nutrient-tit p {color: #000;font-size: var(--fs18);font-weight: 400;}
.nutrient .nutrient-tit p b {display:block; font-weight:600;}
.nutrient .nutrient-list {width:700px; display:flex; flex-wrap:wrap; gap:50px;}
.nutrient .nutrient-item {padding:65px 45px; width:calc((100% - 50px)/2); display:flex; flex-direction:column; align-items:start; border-radius: 20px 40px;background: #FFF;box-shadow: 12px 9px 40px 0px rgba(0, 0, 0, 0.10);}
.nutrient .nutrient-item img {height:65px;}
.nutrient .nutrient-item .tit {padding:25px 0 0;color: #000;font-size: var(--fs20);font-weight: 700;line-height:normal;}
.nutrient .nutrient-item ul {padding:15px 0 20px;}
.nutrient .nutrient-item ul li {color: #000;font-size: var(--fs18);font-weight: 400;line-height: 1.27}
.nutrient .nutrient-item .price {color:var(--base2);color: #8FC31F;font-size: var(--fs25);font-weight: 700;line-height: normal;}
.nutrient .nutrient-item:nth-child(even) {transform:translateY(48px);}
.nutrient .nutrient-item:hover {transform:rotateY(360deg); transition:all .5s;}
.nutrient .nutrient-item:nth-child(even):hover {transform:translateY(48px) rotateY(360deg);}

.nutrient .nutrient-info {padding:50px 20px; text-align:center; border-radius: 20px; background: #F1F2F4; color:#7f838c; font-weight:600; line-height:1.44}


/* ************************ 태블릿 이하(~1199) ************************ */
@media (max-width: 1199px) {
	
	.nutrient .bannerType1 {width:100%; padding:0; flex-direction:column;}
	.nutrient .bannerType1 .tit {width:100%; padding:40px 50px 30px;}
	.nutrient .bannerType1 .con {padding:30px 50px; width:100%; border-radius:0 0 20px 20px; transform:none;}
	.nutrient .bannerType1 .con img {left:90%; }
	
	.nutrient .nutrient-con {width:100%; gap:40px; padding:0; flex-direction:column;}
	.nutrient .nutrient-tit {width:100%; padding:0; gap:20px; position:static;}
	.nutrient .nutrient-list {width:100%; gap:20px;}
	.nutrient .nutrient-item {padding:50px 40px; width:calc((100% - 40px)/3);}
	.nutrient .nutrient-item:nth-child(even) {transform:translateY(40px);}
	.nutrient .nutrient-item:hover {transform:none;}
	.nutrient .nutrient-item:nth-child(even):hover  {transform:translateY(40px);}
	
	.nutrient .nutrient-info {padding:40px 20px;}

}

/* ************************ 모바일 ************************ */
@media (max-width: 767px) {
	
	.nutrient .bannerType1 {}
	.nutrient .bannerType1 .tit {padding:30px 40px;}
	.nutrient .bannerType1 .con {padding:30px 40px; width:100%;border-radius:0 0 20px 20px;}
	.nutrient .bannerType1 .con img {height:150px; left:auto; bottom:100%; right:0;}
	
	
	.nutrient .nutrient-con {gap:20px;}
	.nutrient .nutrient-tit {}
	.nutrient .nutrient-list {gap:20px;}
	.nutrient .nutrient-item {padding:30px 20px; width:calc((100% - 20px)/2);}
	.nutrient .nutrient-item img {height:55px;}
	.nutrient .nutrient-item .tit {padding:18px 0 0;}
	.nutrient .nutrient-item ul {padding:10px 0 12px;}
	.nutrient .nutrient-item:nth-child(even) {transform:translateY(40px);}
	.nutrient .nutrient-item:hover {transform:none;}
	.nutrient .nutrient-item:nth-child(even):hover  {transform:translateY(40px);}

	.nutrient .nutrient-info {padding:30px 20px;}
	.nutrient .nutrient-info br {display:none;}





}