/*공통*/
.flex{display: flex; align-items: center;}
.flex.js{justify-content: space-between}

.orange{color:#e5ae58;}
.bluish{color: #3DA5FF;}
.white{color: #ffffff;}
.fw400{font-weight: 400;}
.fw500{font-weight: 500;}
.fw600{font-weight: 600;}

i.fa-triangle{color:#F20707;}
i.fa-triangle.fa-rotate-180{color:#0FA7F6;}
i.fa-hyphen{color:#e5ae58; font-weight: 600; font-size: 1.2em!important;}
.ref{font-size: 0.8em; vertical-align: middle;}
.ref i{font-size: 1em!important; vertical-align: middle; line-height: 1.2em;}

/* 메인슬라이더 */
#visual{position:relative; width:100%; height:650px; margin:0 auto; position:relative; overflow:hidden; visibility:hidden;}
a{cursor:pointer}

#visual .swiper{ z-index:10;width:100% !important; height:650px; position:relative;}
#visual .swiper .swiper-slide{
	position: relative;
	width:100% !important; height:650px; background-repeat:no-repeat; background-position: center bottom; background-size:cover;
animation: imagescale 6s ease-in-out infinite alternate;
  -webkit-animation: imagescale 6s ease-in-out infinite alternate;
  -moz-animation: imagescale 6s ease-in-out infinite alternate;
  -o-webkit-animation: imagescale 6s ease-in-out infinite alternate;
}
#visual .swiper .swiper-slide::after{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
}
#visual .swiper .mv01{background-image:url(../img/main/mvisual01.png)}
#visual .swiper .mv02{background-image:url(../img/main/mvisual02.png)}
#visual .swiper .mv03{background-image:url(../img/main/mvisual03.png)}

#visual .txt{position:absolute; top:calc(50% - 20px); transform: translateY(-50%); width:100%;max-width:calc(1400px); z-index:15; color:#585f5d;}
#visual .txt.left{left:50%; transform:translate(-50%, -50%)}
#visual .txt.right{left:45%; width:calc(1500px / 2);}
#visual .txt.center{left:50%; transform:translate(-50%, -50%); text-align: center;}

#visual .txt h2{ font-size: 4.0em; margin-bottom: 30px; line-height: 1.2em; font-weight: 700;font-family: 'KHNPHD'; color: #fff}
#visual .txt h3{ font-size: 4.0em; margin-bottom: 20px; line-height: 1.2em; font-weight: 700;font-family: 'KHNPHD'; color: #fff}
#visual .txt h4{ font-size: 2.6em; margin-bottom: 14px; line-height: 1.2em; font-weight: 700;font-family: 'KHNPHD'; color: #fff}
#visual .txt h5{ font-size: 2.2em; margin-bottom: 5px; line-height: 1.4em; color: #fff}
#visual .txt p{font-size: 1.4em; color: #fff}
#visual .txt .box_list{background-color:rgba(0,0,0,0.3); padding: 30px 40px; color: #fff;
	display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; }
#visual .txt .box_list p{width: calc(100% / 2); font-weight: 400; line-height: 1.6em; margin-right: 40px;}
#visual .txt .box_list p:before{content: ""; display: inline-block; width: 4px; height: 4px; background-color: rgba(255,255,255,0.6); vertical-align: middle; margin-right: 6px; margin-top:-2px; }
#visual .txt .box_list p:nth-child(even){width: calc((100% / 2) - 40px); margin-right: 0;}
#visual .txt .diagram{display: flex; margin-top: 40px;}
#visual .txt .diagram p{ width: 120px; display: flex; align-items: center; justify-content: center; aspect-ratio:1/1; border-radius: 50%; background-color: rgba(0,0,0,0.06); text-align: center; margin-right: 10px; font-size: 1.3em; position: relative;}
#visual .txt .diagram p:before{display: block; position: absolute; left: 0px; top: 0px; color: #fff; border-radius: 50%;
	width: 30px; line-height: 30px; aspect-ratio:1/1; text-align: center; font-weight: 700; background-color: rgba(0,0,0,0.5);}
#visual .txt .diagram p:nth-child(1):before{content: "1";}
#visual .txt .diagram p:nth-child(2):before{content: "2";}
#visual .txt .diagram p:nth-child(3):before{content: "3";}
#visual .txt .diagram p:nth-child(4):before{content: "4";}
#visual .txt .diagram p:nth-child(5):before{content: "5";}

#visual .swiper-pagination{bottom: 80px; max-width: 1400px; width: 100%; font-size: 1.2em;}
#visual .swiper-pagination-current{font-weight: 700; opacity: 1; font-size: 1.2em;}
#visual .swiper-pagination-total{opacity: 0.5;}

/* 공지사항 */
.area_notice{position:absolute; bottom:-10px; left:50%; transform: translateX(-50%); z-index:52; max-width:1400px; width: 100%; min-width:220px; background:#fff; z-index:50; opacity:1; transition:all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;  border-radius: 30px 30px 0 0; display: flex; align-items: center; justify-content: space-between; padding: 5px 20px;}
.area_notice.active{bottom:0; opacity:1;}
.area_notice > div{width: calc(100% /2)}


#container_index .inr{padding: 80px 0;}
#container_index .hd_title{ text-align: left; margin-bottom: 50px;}
#container_index .eng{font-size: 1.5em; color: rgba(0,0,0,0.5); margin-bottom: 5px;}
#container_index .hd_title h3{position: relative; font-size:2.4em;font-family: 'KHNPHD'; margin-bottom: 6px;color: #222;}
#container_index .hd_title h3 span{font-weight: normal; color: #e5ae58;}
#container_index .hd_title h3 .btn_moreview{
	position: absolute;
	right: 0;
	bottom: 6px;
	font-size: 15px;
	color: #555;
	cursor: pointer;
	font-family: 'SUIT', 'Montserrat', 'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', Dotum, '돋움', 'AppleGothic', 'Apple SD Gothic Neo', sans-serif;
}
#container_index .hd_title h3 .btn_moreview i{
	margin-left: 4px;
	transition: all 0.3s ease-in-out;
}
#container_index .hd_title h3 .btn_moreview:hover i{
	transform: rotate(180deg);
}

@media screen and (max-width:1400px) {
	#visual .txt{max-width: 100%; font-size: 12px;}
	#visual .txt.left{left: 5%; transform: translateY(-50%);}
	#visual .txt.right{max-width: 60%; left: auto; right: 5%; transform: translateY(-50%);}
	#visual .txt.center{max-width: 90%;}

}
@media screen and (max-width:1024px) {
	#container_index .inr{width: 100%; padding: 35px;}
	#visual,
	#visual .swiper .swiper-slide{height:450px;}

	#visual .swiper .mv04 .diagram{display: none;}
	#visual .txt {font-size:11px;}
	#visual .txt .box_list{display: none;}

	.area_notice{width:calc(100% - 60px);}
	.area_notice > div{width: 100%;}
	.area_notice > div:last-child{display: none; }
}
@media screen and (max-width:768px) {
	#visual .swiper .mv01{background-image:url(../img/main/mvisual01_m.png)}
	#visual .swiper .mv02{background-image:url(../img/main/mvisual02_m.png)}
	#visual .swiper .mv03{background-image:url(../img/main/mvisual03_m.png)}
	#visual .txt.right{max-width: 50%;}

	#visual .txt {font-size:10px;}
	#visual .txt .diagram{display: none;}
	#visual .txt p{font-size: 12px;}

}
@media screen and (max-width:550px) {
	#visual,
	#visual .swiper .swiper-slide{height:300px;}

	/*#visual .txt.left{max-width: 60%;}*/
	#visual .txt.right{max-width: 60%;}

	#visual .txt h2{font-size: 2.5em; margin-bottom: 10px; font-family: 'Noto Sans KR',sans-serif; letter-spacing: -.050em}
	#visual .txt h3{font-size: 2.2em; margin-bottom: 10px; font-family: 'Noto Sans KR',sans-serif; letter-spacing: -.050em}
	#visual .txt h4{font-size: 2em; margin-bottom: 10px; font-family: 'Noto Sans KR',sans-serif; letter-spacing: -.050em}
	#visual .txt h5{font-size: 1.5em; margin-bottom: 10px;}
	#visual .txt p{line-height: 1.2em;}

	.area_notice{width:calc(100% - 10px); padding: 0 15px;}

	.area_overview .inr > div.lt_box{
		margin-bottom: 60px;
	}
	.area_overview .inr > div ul.list{
		margin-top: 20px;
	}
	#container_index .hd_title{
		margin-bottom: 20px;
	}
	#container_index .eng{font-size: 1em;}
	.lt .lt_title, #container_index .hd_title h3{font-size:2em; font-family: 'Noto Sans KR',sans-serif; letter-spacing: -.050em; text-align: left;}



}

/*메인 진료안내*/
.area_business .main_treat {display: inline-block;width: 100%;margin: 0 auto;}
.area_business li {width: calc((100% / 4) - 20px);padding-left: 10px;padding-right:20px;margin-right: 25px;float: left;font-size: 1.4em;font-weight: 100;border-right: 1px solid #eee;display: flex;align-items: center;filter:saturate(50%);cursor: pointer;}
.area_business li:last-child {margin-right: 0;padding-right: 0;border-right: 0;}
.area_business li .icon{display: inline-block;width: 80px; height: 80px;background-color: #eee;border-radius: 50%;margin-right: 25px;}
.area_business li .icon img{width: 130%;height: 130%;object-fit: cover;margin: -15%;opacity: 0.8;}
.area_business li h1 {font-size: 22px;line-height: 1.3em;font-weight: bold;color: #444;margin: 15px 0 0;}
.area_business li h4 {color: #444;font-weight: 900;opacity: 0.3;font-size: 1.1em; transform-origin: left;transition: all 1s;}
.area_business li:hover{filter:saturate(100%);}
.area_business li:hover .icon img{opacity: 1;}


/*제품소개*/
.area_products {width: 100%;display: inline-block;margin: 0 0;position: relative;background: #FBFBFB;}
.area_products .title {width: 50%;padding: 0 0 40px;}
.area_products .title h2 {padding: 20px 0 40px;}
.area_products ul.area_txt {margin: 0;width: 100%;bottom: 50px;display: flex;justify-content: space-between;align-items: inherit ;}
.area_products li {position: relative;margin: 0 20px 0 0;width: calc(100% / 4);background: #fff;cursor: pointer;}
.area_products li:last-child{margin: 0;}
.area_products li .img{width: 100%;aspect-ratio:1/1;overflow: hidden;}
.area_products li .img img {width: 100%; height: 100%;object-fit: cover;object-position: 50% 50%;transition: all 0.5s ease;}
.area_products li:hover .img img {width: 110%; height: 110%;margin: -5%;transition: all 0.5s ease;}
.area_products li:hover a{font-weight: 600; background:#3DA5FF;}
.area_products li .txt{background: #fff; padding: 20px; display: flex; align-items: center; justify-content: space-between; /*height: 25%;*/}
.area_products li .txt > div{width: calc(100% - 40px)}
.area_products li p{font-size: 1.6em; font-weight: 700; margin-bottom: 10px;}
.area_products li span{display: block; font-size: 1em; line-height: 1.4em;}
.area_products li a{display:inline-block; background:#333; color: #fff; font-size: 1.8em; border-radius: 50%; width: 35px!important; line-height: 35px; text-align: center;}


/*진료안내 오시는길*/
.area_overview .swiper-slide img{width:100%;}
.area_overview .swiper-slide {height:350px;}
.area_overview .inr{display: flex;}
.area_overview .inr > div{width: 50%;}

.area_overview .lt_box{position:relative; padding-right: 35px;}
/*.area_overview .lt_box::after{content:""; display:block; position:absolute; right:0; top:0; border:1px dashed #e3e3e3; width:1px; height:100%;}*/
.area_overview .rt_box{padding-left:35px;}
.area_overview .con_box{margin:25px 0; text-align:center; overflow: hidden; position: relative;}
.area_overview .con_box img{}
.area_overview p.icon{width: 60px; height: 60px; line-height: 60px; border-radius: 50%; background: #3DA5FF; color: rgba(255,255,255,0.9); text-align: center; font-size: 2em}

.area_overview .inr > div ul {
	margin:20px 0 0;
}
.area_overview .inr > div ul.list{
	border-top: 2px solid #222;
}
.area_overview .inr > div ul li{display:flex;}
.area_overview .inr > div ul li a{display:flex;}
.area_overview .inr > div ul li > div{flex:2;}
.root_daum_roughmap .cont .section.lst{
	display: none;
}
.area_overview .inr > div ul li > div:nth-of-type(1){/*display:flex;  align-items:center;*/  padding-right:0px; position:relative;}
.area_overview .inr > div ul li > div:nth-of-type(1) img{width:60px;height:60px;}
.area_overview .inr > div ul li > div:nth-of-type(1) h3{padding-left:15px; font-size:1.5em; font-family:'KHNPHD'; line-height: 1.4em;}
.area_overview .inr > div ul li > div:nth-of-type(1) h3 span{font-weight:400;}
.area_overview .inr > div ul li > div:nth-of-type(2){flex:3; padding-left:35px;}

.area_overview .inr > div ul li > div:nth-of-type(2) p { font-size:1.1em; line-height:32px;}
.area_overview .inr > div ul li > div:nth-of-type(2) p span{margin-left:15px; font-weight:700;}
.area_overview .inr > div ul li > div:nth-of-type(2) p span:nth-of-type(5){margin-left:0;}
.area_overview .inr > div ul li > div:nth-of-type(2) p strong{font-size:1.3em; color:#e5ae58; font-family:'KHNPHD';}

.area_overview .inr > div:nth-of-type(2) ul li p{
	line-height: normal;
}
.area_overview .inr > div:nth-of-type(2) ul li p strong.l_txt1{
	font-size:2.2em !important; color: rgba(0, 0, 0, 0.5); !important;
	margin-bottom: 10px; display: block;line-height: normal;
	font-weight: 500;
}
.area_overview .inr > div:nth-of-type(2) ul li p strong.l_txt2{font-size:1.1em !important; color:#222 !important; font-family:'Noto Sans KR' !important; font-weight:400; margin-top:-6px; display:block;}
.area_overview .inr > div:nth-of-type(2) ul li h2{
	font-weight:700; font-size: 2.2em; color: #3DA5FF;
}


@media screen and (max-width:1024px) {
	.area_business .main_treat{flex-wrap: wrap;}
	.area_business li{width: calc((100% / 2) - 13px); margin-bottom: 40px; }
	.area_business li:nth-child(2n){border-right:0; margin-right: 0;}

	.area_products ul.area_txt{flex-wrap: wrap;}
	.area_products li{width: calc((100% / 2) - 20px); margin-bottom: 40px;}
	.area_products li:nth-child(2n){margin-right: 0;}

	.area_overview .inr{display: block;}
	.area_overview .inr > div{width: 100%; padding: 0px;}
	/*.area_overview .lt_box::after{content:""; position: relative; display:block; border:1px dashed #e3e3e3; width:100%; height:1px; margin:35px 0;}*/
}
@media screen and (max-width:768px) {
	.area_overview .inr > div ul li > div:nth-of-type(1){display: flex; align-items: center; margin-bottom: 20px;}
	.area_overview .inr > div:nth-of-type(2) ul li p strong.l_txt1,
	.area_overview .inr > div:nth-of-type(2) ul li h2{
		font-size: 1.2em!important;
	}
	.area_overview .inr > div ul li > div:nth-of-type(1){
		display: block;
	}

	.area_overview .inr > div:nth-of-type(2) ul li p strong.l_txt2{font-size: 1em!important; margin-bottom: 10px;}
}
@media screen and (max-width:550px) {
	.area_business li{width: 100%; border: 0; padding-right: 0; padding-bottom: 20px; border-bottom: 1px solid #eee;}
	.area_business li h4{font-size: 1.2em;}
	.area_business li h1{font-size: 18px}

	.area_products li{width: 100%; margin-right: 0; margin-bottom: 20px;}
	.area_products li .img{height: 150px;}
	.area_products li .txt{height: auto;}

	.area_overview .swiper-slide{height: 150px;}
	.area_overview .inr > div ul li{display: block;}
	.area_overview .inr > div ul li > div:nth-of-type(1)::after,
	.area_overview .inr > div:nth-of-type(2) ul li > div:nth-of-type(1)::after{display: none;}

	.area_overview .inr > div ul li > div:nth-of-type(2){padding-left: 0;}
}