@import "tailwind.css";
@import "variable.css";


.fix-size{max-width:1100px; margin:0 auto }
.half{width:100%;}
img{width:100%; height:auto;}

/*  배경색 */
.point-color-1{background-color:#f2f2f2;}
.point-color-2{background-color:#f5f1e9; padding:4vw 0;}
@media (min-width: 768px){
.point-color-1{}
.point-color-2{padding:4vh 0;}

}

/*  마진 */
.mb{margin-bottom:100px; }

/*  아이콘 */
.icon-check::before {
    content:"\f004";
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 18px;
}


@media (min-width: 768px){
	.flex-row{display:flex;}
	.nav_container{width: 100%;}
}
@media (max-width: 767px){
	.mainContents_container{padding-top:0;}
	.nav_container{width: 96%;}
}

.mainContents_container{margin: 40px auto 100px auto;}

#container_title {width:100%; text-align:center; font-size:28px; margin: 40px 0 32px 0;}
.no-bg-title{margin: 80px 0;}



/*  서브페이지 2차메뉴 */
.nav_container{display: flex; text-align: center; margin: 0 auto; max-width: 1120px; padding: 0;}
.nav_container>p{display:none;}
.sub-menu{display: flex; justify-content: center; text-align:center; width: 100%;}
.sub-menu a{font-size:12px; color:red; margin:0 4px;}

@media (min-width: 480px){
	.sub-menu a {font-size:14px; }	
}

@media (min-width: 767px){
	.sub-menu a {font-size: 16px; padding:0 1em;}
}

@media (min-width: 1536px){
	.sub-menu a {font-size: 17px; padding:0 2em;}
}

.sub-menu li{
	display: block;
	border: 1px solid #e6e9ed;
	margin-left: -1px;
	margin-top: -1px;
	background: #fff;
	float: left;
	width: 25%;
	text-align: left;
	-webkit-transition: all 0.30s ease-in-out;
	word-break: keep-all;
}
.sub-menu li a{text-decoration: none; text-align: center; display: block; color: #656565; margin: 0; position: relative; position: relative; padding: 10px 0; /* line-height: 40px; */}

@media (max-width: 639px){
	.sub-menu{display: block;}
	.sub-menu li {width: 33.333%;}
}
.test-joo{width:1600px; margin:0 auto;}
.test-joo img{width:100%; height:auto;}

/*  이미지위에 필터 씌우기 */

.filter{ border:8px;  filter: brightness(32%); transition: all 2s;}
.filter:hover{ filter: brightness(100%)}

/* 색소 상단 배경이미지 및 설명 */

.color-Head-container h1{font-size:28px; font-weight:600;  margin-bottom:2vw; }
.color-Head-container p{font-size:15px; text-align:justify; margin-bottom:1em;line-height:1.8;}
.color-Head_info{font-size:12px; }
.color-Head_bg{	background-repeat: no-repeat;  padding:2em; min-height: 400px;}
@media (min-width: 1536px){	
.color-Head-container p{font-size:17px; }
.color-Head_bg{	}}

.bg-freckles{ background-image:url('/skin/content/images/bg-freckles.jpg');}

.bg-melasma{ background-image:url('/skin/content/images/bg-melasma.jpg');}
.facial_mole{ background-image:url('/skin/content/images/bg-facial_mole.jpg');}
.bg-Nevus_of_Ota{ background-image:url('/skin/content/images/bg-Nevus_of_Ota.jpg');}
.bg-ABNOM{ background-image:url('/skin/content/images/bg-ABNOM.jpg');}
.bg-vascular_disease{ background-image:url('/skin/content/images/bg-vascular_disease.jpg');}

.AcneClinic-bg{ background-image:url('/skin/content/images/bg-AcneClinic.jpg');}
.bg-pore{ background-image:url('/skin/content/images/bg-pore.jpg');}
.bg_Tattoo{ background-image:url('/skin/content/images/bg_Tattoo.jpg');}

.bg-Disease_Clinic{background-image:url('/skin/content/images/bg_Disease_Clinic.jpg');}
.bg-skincare{ background-image:url('/skin/content/images/bg-skincare.jpg');}
.bg-Athletes_Foot_Clini{ background-image:url('/skin/content/images/bg-Athletes_Foot_Clini.jpg');}

@media (min-width: 768px){
	.color-Head-container{display:flex; padding:10vw;}
	.color-Head-container h1{margin-bottom:40px; }
	.color-Head_bg{	background-size: cover; 	}
	.color-Head_info{font-size:14px; }
}
@media (min-width: 1024px){
	.color-Head-container{display:flex; padding:4vw;  }
	.color-Head{margin:0 0 0 40%;  }
	.color-Head_info{font-size:16px; }
}
@media (min-width: 1560px){
	.color-Head{margin:0 10vw 0 50vw;  }

}

/* 폰트 */
.text-1{font-size:28px;}
.text-2{font-size:14px; line-height:1.6;}
@media (min-width: 768px){
.text-1{font-size:32px; }
.text-2{font-size:15px; }
}
@media (min-width: 960px){}
@media (min-width: 1024px){}
@media (min-width: 1056px){
.text-1{font-size:40px; }
.text-2{font-size:16px;  }
}


/**********************************************
*************** 인 사 말  ***********************
***********************************************/
.forest{ padding:2em 0; font-size:14px; background-image:url('/skin/content/images/forest.jpg'); color:#fff; }}
.greeting{font-size:14px; }
.greeting-hi{font-size:1.2em; font-weight:600; font-family: ""; margin-bottom:20px;  }
.greeting-1{background: linear-gradient(45deg, #f6f4f7, #fcf8fe); padding:2em; margin-bottom:20px;  line-height:1.8;    }
.greeting-1 span{display:block;}

.greeting-2{
	padding:2em; 
	margin:20px;
	border-radius:20px; 
	column-width: 200px;
  column-gap: 40px;  column-count: 3;
  column-gap: 40px;
  column-rule: 1px dotted rgb(177, 177, 177);
  text-align:justify; line-height:1.8;
  background-color : rgb(0, 0, 0,0.4);
  }
	.greeting-2 p{margin-bottom:1em;
	}
@media (min-width: 960px){
	.greeting-1{padding:80px 0; margin-bottom:40px;  }
	.greeting-1 span{display:inline;}

	.greeting-2 {margin:100px auto; padding:80px;  }
	.greeting-2 p{		margin-bottom:0; }
	}



/**********************************************
*************** 진 료 안 내 ***********************
***********************************************/

.information{border:11px solid #eee; max-width:700px; margin:0 auto 2em  auto; padding:3em; 
	
	
	}
.information> div{display:flex;  margin-bottom:2em;  }
.information h3{font-weight:600; width:6em;   }
.information> div,
.information h3{font-size:14px; }

.information span{color:#757575;}
.information span:nth-child(1){display:inline-block; width:4em; color:#333;}
.information span:nth-child(2){margin-right:0.5em; }

@media (min-width: 768px){
.information{ 
	background-image:url("/skin/content/images/information-icon.jpg");
	background-repeat: no-repeat;
	background-position: 60px 24px;	
	}
.information >div{margin-left:20%; }


}


/**********************************************
***************  오 시 는 길  ***********************
***********************************************/
.kakaomap{width:100%; height:40vh; }
.map_container{flex-direction: column;  flex-direction: column-reverse;}
.address_container{padding-top:40px;  }
.address_container span{font-size:14px;}

@media (min-width: 1530px){
	.map_container{max-width:1100px; margin:0 auto; flex-direction: row; }
	.address_container{width:500px; padding-top:40px;  }
	.address_container li{margin-bottom:8px;}
	.address_container span{  font-size:16px;}
	.yellim{display:block; }
}


/* 제목 */
.title{	font-size:28px;	 text-align:center; font-family: 'Roboto', sans-serif; font-weight:600;	color: var(--title);	margin-bottom:0.4em;}
@media (min-width: 768px){
	.title{margin-bottom:3vw;}
	}
@media (min-width: 1536px){
	.title{margin-bottom:28px;}
	}

/* 목록 센터 정렬*/
.list-center{display:flex; flex-wrap: wrap; justify-content:center;margin-left:1em; }
@media (min-width: 1280px){


}


/* 효과*/
.AcneClinic_effect{color:#181818 ; font-size:1.1em; font-weight:600; padding:2em; }
.effect_container{max-width:1180px; margin-left:1em; display:flex; flex-wrap: wrap;}
.effect{margin:0 4em 1em 0; }
.effect::before {
    content:"\e168";
    display: inline-block;
    font-family: 'Material Icons';
    font-weight: 900;
    margin-right: 8px;
}
@media (min-width: 1200px){
.effect_container{margin:0 auto; align-items: center;justify-content:center;}}


/*  원인 */
.chapter-section{padding:8vw 1em;}
.chapter{margin-bottom:2em;}

@media (min-width: 1560px){
	.chapter-section{padding:6vw 1em;}
	.chapter span{display:block; margin-bottom:8px; }
}

/* 빌생부위*/
.area_container{padding:10vw 0 6vw 0;}
@media (min-width: 768px){.area_container{padding:8vw 0 4vw 0;}}
@media (min-width: 1056px){.area_container{padding:80px 0 ;}}

/* 치료방법*/
.method-section{padding:10vw 1em; margin:0 auto;  }
.method-section span{margin-bottom:4px; }
.title_explanation{text-align:center;}
@media (min-width: 768px){
	
	
	}
@media (min-width: 1560px){
	.method-section{padding:120px 0;}
	
	}

/* 치료 후 관리*/
.care-section{padding:8vw 0;}
@media (min-width: 768px){.care-section{padding:6vw 0;}}
.care-after_container{margin:1em;}
.care-after{
	position:relative; 
	background-color:#fff; 
	padding:1em;
	margin-bottom:1em; border-radius:8px;}

.care-after:hover{  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}
@media (min-width: 768px){
	.care-after_container{max-width:1300px; margin:0 auto; display:flex;}
	.care-after{margin:1em; line-height:1.6;}
	.care-after::before {
	position:absolute;
	top:-12px;
	left:48%;
    content:"\e86c";
	font-size:20px;
	font-family: 'Material Icons';
    display: inline-block;
    font-weight: 900;
    margin-right: 18px;}
}
@media (min-width: 1560px){
.care-after{  padding:3em 1.5em 1em 1.5em;}
.care-after::before {
	top:-24px;
	left:47%;
    font-size:32px;	
    margin-right: 18px;}
}

.explanation{}
	@media (min-width: 768px){.explanation{text-align:center; }}




/**********************************************
***************  피부질환클리닉 공통  ***********************
***********************************************/
.skin-title{font-size:20px;  text-align:center; font-weight:600; margin-bottom:1.5em; }



/**********************************************
***************  질환 클리닉  ***********************
***********************************************/
.disease-cair_container{background-color:#eee; margin:0.5em; padding:2em; border-radius:8px; }
.disease-cair-content{}
.disease-cair-img,
.disease-cair-info{border-radius:8px;}
.disease-cair-info{background-color:#fff important;padding:0.5em; margin:1em 0;    }  /* 설명 */
.disease-cair-img{background-color:#fff ;  padding:1em 2em; }  /* 이미지 */

@media (min-width: 1024px){
.disease-cair_container{background-color:#fff; }
.disease-cair{display:flex; flex-direction: row;flex-direction: row-reverse;}
.disease-cair-img,
.disease-cair-info{width:48%;}
.disease-cair-img{border:1px solid #666; border-radius:0;}


}

/**********************************************
***************  스킨케어클리닉  ***********************
***********************************************/
.skinCair_container{ padding:1em; }
.skinCair{background-color:#f2f2f2; padding:3em 2em 2em 2em; margin-bottom:1.5em;  }

/**********************************************
***************   기 미   ***********************
***********************************************/
.color_container img{width:100%;}

.color-cause li{
	width:8em;
	min-width:8em;
	max-width:240px;
	height:8em;
	min-height:8em;
	max-height:240px;
	margin:0.4em;
	border-radius:50%;
	text-align:center; 
	background-color:#f0e8e5;
	}
.color-cause li span{
	display:inline-block;
	margin-top:46%;
	}
	
.half > div {width:100%;}


@media (min-width: 768px){
	.freckles-01{
		width:62%;
		max-width:720px;
		margin:0 auto;
		}
	.half > div:nth-child(1){width:55%; margin:40px 0 0 0;  }
	.half > div:nth-child(2){width:45%;  }	
	}

@media (min-width: 1024px){
	.half > div:nth-child(1){  margin:120px 0 0 0; padding:0 40px;  }
	.half > div:nth-child(2){  }	
	}


/**********************************************
*************** 여드름   ***********************
***********************************************/
.AcneClinic-effect  img{width:120px; display:block;}
.AcneClinic-effect{font-family: 'YanoljaYacheR'; font-size:30px;}
.AcneClinic-progress{ max-width:700px;  margin:0 auto;  text-align:center; }
.AcneClinic-progress img{ }


/**********************************************
*************** 쁘띠클리닉 ***********************
***********************************************/
/* 강조 */
.point-keyword{font-size:1.2rem; }

.beautyClinic_container{
	margin:0 auto 80px auto;
	max-width:1920px;
	background-position : right; background-position : right -300px top 0;  
	padding:2em;}
.beautyClinic{color:#fff; background-color:rgb(0,0,0,0.3)  ; padding:2em;  border-radius:8px; line-height:2;}


.BotoxFiller{	 background-image:url('/skin/content/images/BotoxFiller.jpg'); }
.Sculptra{	 background-image:url('/skin/content/images/Sculptra.jpg'); }
.Rejuran{	 background-image:url('/skin/content/images/Rejuran.jpg'); }


@media (min-width: 960px){
.beautyClinic{width:60%;  padding:100px;  }
}
@media (min-width: 1536px){
.beautyClinic_container{ background-position : right 0px top 0; 	padding:2em;}
.beautyClinic{width:40%;  padding:80px; margin: 80px 0 80px 10vw }

}


/**********************************************
*************** 장비   ***********************
***********************************************/
.razer-head{max-width:1120px; border:1px solid #eee; padding:1em; margin:0 1em 40px 1em;  font-size:14px;  }
@media (min-width: 1024px){
.razer-head{margin: 0 auto 40px auto; padding:2em;  font-size:16px;  }
.razer-head p{text-align: justify ;}
}

/*  추천합니다 suggestion*/
.suggestion{max-width:700px; margin:0 auto; padding:0 1em; }
.suggestion li{border-bottom:1px dashed #333 ; padding:8px 0.5em;font-size:14px ;}
@media (min-width: 1024px){
	.suggestion{margin-bottom:80px; }
	.suggestion li{padding:12px 1em;font-size:16px ;}}

/*   장비사진 */
.equi-pico,
.equi-rev,
.equi-Noblex,
.equi-airjet,
.equi-triderm{background-repeat: no-repeat;  background-attachment:fixed;}
.equi-pico     {background-image : url('/skin/content/images/equi-pico.png');     background-position:84% 50%;}
.equi-rev       {background-image : url('/skin/content/images/equi-rev.png');       background-position:92% 50%;}
.equi-Noblex{background-image : url('/skin/content/images/equi-Noblex.png');  background-position:92% 50%;}
.equi-airjet   {background-image : url('/skin/content/images/equi-airjet.png');     background-position:92% 50%;}
.equi-triderm{background-image : url('/skin/content/images/equi-triderm.png');  background-position:92% 50%;}

 
 


/*특장점*/
.Advantages_container{background-color:#f1edf4; padding:10vw 0; margin-bottom:40px ; }
.Advantages_container  ul{max-width:760px; margin:0 auto;   }
.Advantages{display:inline-block; border:1px #e4dfe7; font-size:14px; background-color:#fff;  padding:12px 1.5em; margin:0 1em 1em 1em; border-radius:2em;  }
.Advantages::before{content:'#'; margin-right:4px;}
@media (min-width: 1024px){
	.Advantages_container{ padding:80px 0; margin-bottom:80px; }
	
	}

/*  Q&A*/
.qna_container {margin:1em; }
.qna_container dt{margin:0 1em 8px 1em;font-size:1.2rem; }
.qna_container dd{margin-bottom:2em; font-size:14px; background-color: #eee; border-radius:4px ; padding:1em; }

/*  주의사항 */
.razer-caution_container{padding:40px 0; margin:40px 0; background-color:#f2cd9c; }
.razer-caution{display:flex;}
.razer-caution li{}
.Revlite-razer li,
.triderm-razer li{ background-color:#fff;  padding:1.4em 1em; margin:1em; border-radius:8px; font-size:14px;  }
.Revlite-razer li{ width:50%;  flex-wrap: wrap;}
.triderm-razer li{width:25%;  }

@media (min-width: 1024px){
.Revlite-razer li{width:;  }
.qna_container dd,
.triderm-razer li,
.Advantages{font-size:16px; }
}

/* 언더라인 */
.underline{margin-bottom:80px; padding-bottom:80px;  border-bottom:1px solid #c7c7c7;}