@charset "utf-8";

.section{position:relative;}

/* 상단 비주얼 */
#mVisual {width:100%;height:950px;background-repeat:no-repeat;background-position:center top;background-size:cover;overflow:hidden;}
#mVisual .mVisualIn {position:absolute;left:0;top:45%;width:100%; text-align:center; }
#mVisual .mVisualIn dl {padding:60px 0;color:#fff; }
#mVisual .mVisualIn dt { font-size:1.58em; border-bottom: 3px solid #fff; padding-bottom: 8px; display: inline-block; *zoom:1; *display: block; word-break: keep-all;}
#mVisual .mVisualIn dd { letter-spacing: -0.05em; word-break: keep-all;}
#mVisual .mVisualIn dd.t1 { font-size:3.53em; margin-top: 40px; line-height: 1.1em; font-weight: 300; text-shadow:rgba(0,0,0,.2) 1px 1px 1px; margin: 40px 0; }
#mVisual .mVisualIn dd.t2 { font-size: 1.17em; font-weight: 400; line-height: 1.4em; text-shadow:rgba(0,0,0,.2) 1px 1px 1px; font-family: 'Noto Sans KR', 'Noto Sans Korean'; }

.mVisualIn4 { top: 30% !important; }
.mVisualIn4 .t1 img { position: relative; width: 90%; max-width: 559px; margin: 0 auto;  }
.mVisualIn4 .t2 img { position: relative; width: 99%; max-width: 1222px; margin: 0 auto; }
.mVisualIn4 .t2 .show-977 { max-width: 977px;  }

@media all and (max-width:1024px) {
	#mVisual{height:950px;}
}

@media all and (max-width:767px) {
	#mVisual{height:600px;}
	#mVisual .mVisualIn { }
	#mVisual .mVisualIn dl { padding:6%;}
	#mVisual .mVisualIn dl dt { padding-bottom: 5px; }
	#mVisual .mVisualIn dl dd.t1 { margin: 5% 0; }
	#mVisual .mVisualIn5 dd.t1 { font-size:2.9em; }
}



/*slider*/

.slider { float: left; }

.slider .jquery-reslider .slider-block {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 97;
  background-position: 50% 50%;
  background-size: cover;
  opacity: 0;
}

.slider .jquery-reslider .slider-dots {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 76%;
}

.slider .jquery-reslider .slider-dots li {
  width: 12px;
  height: 12px;
  display: inline-block;
  *zoom:1; *display:block;
  margin: 8px;
  background-color:rgba(255,255,255,0.3);
  border:1px solid rgba(255,255,255,0.8); 
  cursor: pointer;
  border-radius: 50%;
}

.slider .jquery-reslider .slider-dots li.active { background-color: #fff; border-color:#fff; }

@media screen and (max-width: 768px) {

.slider .jquery-reslider .slider-dots li { width: 8px;  height: 8px; margin: 4px; }

}


/* scroll */
.scroll2 { position: absolute; bottom:20px; left: 50%; margin-left: -32px; width: 64px; height: 32px; z-index: 99; 
	animation: scrollAni 2.0s ease-in-out reverse; animation-iteration-count: infinite; 
	-webkit-animation: scrollAni 2.0s ease-in-out reverse; -webkit-animation-iteration-count: infinite; 
	-moz-animation: scrollAni 2.0s ease-in-out reverse; -moz-animation-iteration-count: infinite; 
}
.fp-viewing-footPage .scroll { display: none; }
 @keyframes scrollAni{
	0%{bottom: 25px;} 
	50%{bottom: 10px;} 
	100%{bottom: 25px;}
}
@-webkit-keyframes scrollAni{
	0%{bottom: 25px;} 
	50%{bottom: 10px;} 
	100%{bottom: 25px;}
}
@-moz-keyframes scrollAni{
	0%{bottom: 25px;} 
	50%{bottom: 10px;} 
	100%{bottom: 25px;}
}

/* 청명소개 */

.mSection { position: relative; width: 100%; clear: both; overflow: hidden; text-align: center; }
.mSection h2 { font-size: 1.58em;  display: inline-block; *zoom:1; *display: block; padding-bottom: 48px;  }
.mSection h2 span { padding-bottom: 3px; }

#mIntro { background:url("/images/main/m_introBG.png") no-repeat center; background-size: cover; color:#fff; padding: 75px 0; }


#mIntro h2 { background:url("/images/main/titBG_wh.png") no-repeat center bottom;  }
#mIntro h2 span { border-bottom: 3px solid #fff; }
#mIntro dl { overflow: hidden; margin-bottom: 3%; }
#mIntro dl dt { font-size: 2.64em; font-weight: 100; margin: 30px 0 22px; line-height: 1.0em;  }
#mIntro dl dd { font-size: 1.41em; }
#mIntro a { font-size: 1.17em; border:2px solid #fff; line-height: 70px; padding: 0 3.5%; display: inline-block; *zoom:1; *display: block; color:#fff; 
			box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
#mIntro a:hover { color:#ff8500; background-color:#fff; transition-duration: 300ms;   transition-property: color, border-color, background-color;   transition-timing-function: ease; }


@media screen and (max-width: 976px) {

#mIntro { padding: 7% 0; }
#mIntro dl { margin-bottom: 5%; }
#mIntro a { line-height: 3em; }

}

#mClinic { padding: 45px 0 0; }
#mClinic h2 { background:url("/images/main/titBG_gr.png") no-repeat center bottom; color:#151515;  }
#mClinic h2 span { border-bottom: 3px solid #ff8500; }
#mClinic ul { border:1px solid rgba(0,0,0,0.1); }
#mClinic ul li { padding-top: 80px; background-size: 100% auto !important;  overflow: hidden; height: 580px; }
#mClinic ul li.clinic1 { background: #f3f3f3 url("/images/main/m_clinic1.png") no-repeat center bottom;  }
#mClinic ul li.clinic2 { background: url("/images/main/m_clinic2.png") no-repeat center bottom;  }
#mClinic ul li.clinic3 { background: url("/images/main/m_clinic3.png") no-repeat center bottom;  }
#mClinic ul li.clinic4 { background: #f3f3f3 url("/images/main/m_clinic4.png") no-repeat center bottom;  }

#mClinic ul li dl { max-width: 80%; margin: 0 auto; }
#mClinic ul li dl dt { font-size: 2.35em; color:#101010; margin-bottom: 20px; }
#mClinic ul li dl dd { display: inline-block; *zoom:1; *display: block; color:#4c4c4c; margin: 3px 1.5px;  }
#mClinic ul li:nth-child(even) dl dd a{ background-color:#f3f3f3; }
#mClinic ul li dl dd a { border: 1px solid #b6b6b6; background-color:#fff; display: block; padding: 3px 15px; }
#mClinic ul li dl dd a:hover { border: 1px solid #333; background-color:#333; color:#fff; transition-duration: 300ms;   transition-property: color, border-color, background-color;   transition-timing-function: ease; }

@media screen and (max-width: 1399px) {

#mClinic { padding: 5% 0 0; }
#mClinic ul li { height: 40vw; padding-top: 5%;  }
#mClinic ul li dl { max-width: 90%; }
#mClinic ul li dl dd { font-size: 0.95em; margin: 2px 0; }

}

@media screen and (max-width: 976px) {

#mClinic ul li { height:55vw; }

}

@media screen and (max-width:568px) {

#mClinic ul li { height:100vw; }
#mClinic ul li dl dd { font-size: 1.0em; }

}


#mSpecial { background:url("/images/main/m_specialBG.png") no-repeat center; background-size: cover;  padding: 105px 0; color:#fff; }
#mSpecial h2 { background:url("/images/main/titBG_wh2.png") no-repeat center bottom; }
#mSpecial h2 span { border-bottom: 3px solid #fff; }

#mSpecial p.t-tit { color:#acacac; font-size: 1.05em; }

#mSpecial > ul { padding-top: 1.5%; }
#mSpecial > ul li { float: left; width: 20%; counter-increment: number; }
#mSpecial > ul li:before { content: counter(number, decimal-leading-zero) ;  text-align: center;  font-size: 5.88em; font-family: 'D-DIN'; } 
#mSpecial > ul li p { font-size: 2.23em; font-weight: 100; line-height: 1.2em; margin-bottom: 50px; }

@media screen and (max-width: 1399px) {

#mSpecial > ul{ font-size: 0.9em; }

}

@media screen and (max-width: 1199px) {

#mSpecial { padding: 10% 0; }
#mSpecial > ul { font-size: 0.7em; }
#mSpecial > ul li img { width: 30%; }
#mSpecial > ul li p { margin-bottom: 30px;  }

}

@media screen and (max-width: 976px) {

#mSpecial > ul { font-size: 0.6em; }

}

@media screen and (max-width: 767px) {

#mSpecial > ul { font-size: 0.75em; }
#mSpecial > ul li { float: none; display: inline-block; *zoom:1; *display: block; width: 30%; }
#mSpecial > ul li p { margin-bottom: 7%;  }


}

@media screen and (max-width:568px) {

#mSpecial > ul li { width: 33%; }

}


#mContact { position: relative; width: 100%; clear: both; overflow: hidden; color:#fff; }

#mMap { position: relative; width: 100%; height: 650px; overflow: hidden; }

#mDoctor { position: relative; height: 325px; background: #949494 url("/images/main/m_doctor_200302.png") no-repeat; background-position: right bottom; background-size: 100% auto; padding: 70px 90px; 
		   box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
#mDoctor h3 { font-size: 2.94em; line-height: 1.0em; letter-spacing: -0.06em; }
#mDoctor p { margin: 3% 0 5%; }
#mDoctor a { border: 2px solid #fff; color:#fff; font-size: 0.94em; line-height:45px; min-width: 30%; text-align: center; display: inline-block; padding: 0 5%; }
#mDoctor a:hover { border: 2px solid #6d6d6d; background-color: #6d6d6d; transition-duration: 300ms;   transition-property: color, border-color, background-color;   transition-timing-function: ease; }


#mCS { position: relative; width: 100%; height: 325px; background: #ff8500; display:flex; align-items:center; padding: 0 12% 0 10%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
#mCS .csTel { float: left; text-align: center;  margin-right: 6.5%; }
#mCS .csTel h3 { font-size: 1.05em; line-height: 2.4em;  }
#mCS .csTel p { font-size: 2.05em; font-family:'Noto Sans KR', 'Noto Sans Korean'; font-weight: 700; line-height: 1.0em; letter-spacing:-.04em;}

#mCS .csHour { float: left; width: 59%; overflow: hidden; }
#mCS .csHour p { font-size: 0.82em; margin-bottom: 3%;}
#mCS .csHour ul { border-top: 1px solid #fff; }
#mCS .csHour ul li { line-height: 2.7em; /*line-height: 2.4em; line-height: 3em;*/ border-bottom: 1px dotted #fff; overflow: hidden; padding-left: 10px;  font-size: 0.94em; /*font-size: 0.9em;*/ }
#mCS .csHour ul li dl dt { float: left; width: 25%;   }
#mCS .csHour ul li dl dd { float: left; width: 75%; letter-spacing:-0.05em}

#mbtTypo { height: 50px; display:flex; align-items:center; justify-content:center; text-align: center; }
#mbtTypo img { width: 70%; max-width: 356px; }

@media screen and (max-width:1900px) {

#mCS .csTel img { max-width: 60%; }
#mCS .csTel p { font-size: 1.9em; }

}

@media screen and (max-width:1800px) {

#mCS { padding: 0 8% }
#mCS .csHour { width: 60%; }

}

@media screen and (max-width:1700px) {

#mCS .csTel p { font-size: 1.7em; }

}

@media screen and (max-width:1605px) {

#mCS { padding: 0 7%; } 
#mCS .csHour ul li { font-size: 0.9em;}

}

@media screen and (max-width:1199px) {

#mMap { height: 350px; }
#mDoctor { width: 50%; float: left; padding: 5% 3%; background-size: auto 85%; background-position: 65% bottom;}
#mCS { width: 50%; float: left; }
#mCS { padding: 0 2%; }  
#mCS .csHour ul li { padding-left: 5px; }

/*180510 진료시간 늘어나면서 추가*/
#mCS .csHour ul li dl dt { float: left; width: 20%;   }
#mCS .csHour ul li dl dd { float: left; width: 80%; }


}

@media screen and (max-width:1099px) {

#mCS { flex-direction: column; padding: 0 3%; }
#mCS .csTel { width: 100%; height: 33%; /*height: 40%;*/ clear: both; margin: 0; text-align: left; padding: 6% 0 0; align-items: center; }
#mCS .csTel img { float: left; width: 17%; margin-right: 4%;}
#mCS .csTel h3 { line-height: 1.8em; padding-top: 1%;}
#mCS .csTel p { font-size: 2.05em; }
#mCS .csHour { width: 100%; clear: both; }
#mCS .csHour p { margin-bottom: 2%; }
#mCS .csHour ul li { line-height: 2.5em; }

#mDoctor, #mCS { height: 400px; }

}

@media screen and (max-width:976px) {

#mMap, #mDoctor, #mCS { height: 370px; }

#mDoctor h3 { font-size: 2.5em;}
#mDoctor a { line-height: 2.5em; }

#mCS .csTel img { width: 20%; }

#mbtTypo { height: auto; padding: 2% 0;}


}

@media screen and (max-width:767px) {

#mCS .csTel { padding-top: 8%; }

}

@media screen and (max-width:568px) {

#mDoctor, #mCS { width: 100%; height: auto; }

#mDoctor { padding: 6% 6% 12%; background-size: auto 100%; }

#mCS { padding: 5% 6%; }
#mCS .csTel { height: auto; padding: 0 0 3%;}
#mCS .csTel img { width: 13%; }

#mCS .csHour ul li dl dt { width: 15%;   }
#mCS .csHour ul li dl dd { width: 85%; }

}