@charset 'utf-8';

/* common */

h2.mainTit{
	font-size: 4rem;
	font-weight: 400;
	text-align: center;
	margin-bottom: 80px;
	color: #444;
}

h2.mainTit strong{
	font-weight: 600;
	padding: 0;
	margin: 0;
	font-size: 1em;
	vertical-align: baseline;
}

h2.mainTit::before{
	content: 'BARUN HIFU';
	display: block;
	letter-spacing: 15px;
	font-size: 0.3em;
	margin-bottom: 20px;
	color: #1c4069;
	font-weight: 900;
	transform: scaleY(1.4);
}



/* 메인 비쥬얼 슬라이드 */
.mainVisual .slick-slide{
	height: auto;
	
}

.mainVisual .visualUl{
	opacity: 0; visibility: hidden; transition: opacity 1s ease; -webkit-transition: opacity 1s ease;
}

.mainVisual .visualUl.slick-initialized{
	visibility: visible; opacity: 1;
}

.mainVisual .slick-dots{
	bottom: 0;
}

.mainVisual .slick-dots li{
	width: 250px;
	height: 50px;
	line-height: 50px;
	font-size: 1.7rem;
	background: rgba(0,0,0,1);
	color: #fff;
	margin: 0;
	padding: 0;
	margin-right: 10px;
}

.mainVisual .slick-dots li:last-child{
	border-right: 0;
}

.mainVisual .slick-dots li.slick-active{
	background: rgba(0,0,0,0.5);
}

.mainVisual .slick-dots li button:before{
	opacity: 0 !important;
}

.mainVisual  .visualLi img{
	width: 100%;
	max-width: 100%;
	height: auto;
}


/* 병원 정보 단락 */
.mainInfo{
	background: #eff5fb;
	padding: 100px 0;
}

.mainInfo h2{
	font-size: 5rem;
	text-align: center;
	margin-bottom: 70px;
}

.mainInfo h2 span{
	display: block;
	font-size: 2rem;
	margin-bottom: 15px;
	color: #444;
	font-weight: 400;
}

.mainInfo h2 strong{
	text-transform: uppercase;
	color: #1c4069;
	letter-spacing: 20px;
}

.mainInfo .inner{
	display: flex;
}

.mainInfo .inner article{
	width: calc(65% - 10px);
	margin-right: 20px;
}

.mainInfo .inner article:last-child{
	width: calc(35% - 10px);
	margin-right: 0;
}

.mainInfo .inner article > div{
	border-radius: 15px;
	overflow: hidden;
	box-shadow: rgba(0,0,0,0.1) 0px 0px 15px;
}

.mainInfo .inner .map .top{
	position: relative;
	height: 350px;
	background: url(/include/img/map.png) no-repeat center / cover;
}

.mainInfo .inner .map .top > a{
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	background: rgba(0,0,0,0.7);
	opacity: 0;
	transition: all 0.4s
}

.mainInfo .inner .map .top > a:hover{
	opacity: 1;
}

.mainInfo .inner .map .top > a::after{
	content: '클릭하시면 지도로 보실 수 있습니다.';
	font-size: 1.6rem;
	color: #fff;
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	letter-spacing: 2px;
	transform: translate(-50%,-20%);
	transition: all 0.4s
}

.mainInfo .inner .map .top > a:hover::after{
	transform: translate(-50%,-50%);
}

.mainInfo .inner .map .top iframe{
	width: 100%;
	height: 100%;
}

.mainInfo .inner .map .bottom{
	background: #fff;
	height: 130px;
	width: 100%;
	box-sizing: border-box;
	margin-top: 20px;
	padding: 20px;
	display: flex;
	position: relative;
	flex-wrap: wrap;
}

.mainInfo .inner .map .bottom img{
	margin-right: 10px;
}

.mainInfo .inner .map .bottom p.addTxt{
	white-space: nowrap;
	line-height: 40px;
	font-size: 1.7rem;
	font-weight: 500;
}

.mainInfo .inner .map .bottom p.addTxt .mb{
	display: none;
}

.mainInfo .inner .map .bottom ul.mapLink{
	position: absolute;
	right: 20px;
	top: 15%;
	transform: translate(0,0%);
	display: flex;
	width: 20%;
}

.mainInfo .inner .map .bottom ul.mapLink li{
	width: 49%;
	margin-right: 2%;
	height: 40px;
	line-height: 40px;
	font-size: 1.4rem;
	background: #ccc;
	border-radius: 100px
}

.mainInfo .inner .map .bottom ul.mapLink li.navermap{
	background: #00c300;
}

.mainInfo .inner .map .bottom ul.mapLink li.kakaomap{
	background: #fae300;
}

.mainInfo .inner .map .bottom ul.mapLink li.kakaomap a{
	color: #391b1b;
	font-weight: 500;
}

.mainInfo .inner .map .bottom ul.mapLink li:last-child{
	margin-right: 0;
}

.mainInfo .inner .map .bottom ul.mapLink li a{
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
	color: #fff;
}

.mainInfo .inner .bbsBox{
	/* height: 500px; */
}

.mainInfo .inner .bbsBox > div{
	background: #fff;
	height: calc(50% - 10px);
	box-sizing: border-box;
	padding: 20px;
}

.carUl{
	display: block;
	clear: both;
	width: 100%;
	height: 40px;
	margin-top: 10px;
	display: flex;
	position: relative;
}

.carUl::after{
	content: '';
	display: block;
	width: 1px;
	height: 100%;
	background: #ccc;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%,0);
}

.carUl li{
	width: 48%;
	display: flex;
	position: relative;
}

.carUl li:nth-child(1){
	/* border-right: 1px solid #ccc; */
	margin-right: 4%;
}

.carUl li h6{
	font-size: 1.8rem;
	line-height: 40px;
}

.carUl li h6 span{
	font-size: 0.7em;
	font-weight: 300;
}

.carUl li p{
	display: inline-block;
	padding: 0px 20px;
	background: #78b1e3;
	color: #fff;
	border-radius: 100px;
	height: 40px;
	line-height: 40px;
	position: absolute;
	right: 0;
	top: 50%;
	font-size: 1.6rem;
	transform: translate(0,-50%);
}

.carUl li:nth-child(1) p{
	background: #d94f4f;
}

.carUl li p strong{
	vertical-align: baseline;
}

.mainInfo{
	display: none;
}

.mainInfo .inner .bbsBox .news{
	margin-bottom: 20px;
}

.mainInfo .inner .bbsBox > div h3{
	font-size: 2rem;
	height: 40px;
	line-height: 40px;
	position: relative;
}

.mainInfo .inner .bbsBox > div h3 a{
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	overflow: hidden;
	background: #78b1e3;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0,-50%);
}

.mainInfo .inner .bbsBox > div h3 a::before,
.mainInfo .inner .bbsBox > div h3 a::after{
	content: '';
	display: block;
	width: 35%;
	height: 2px;
	background: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
}

.mainInfo .inner .bbsBox > div h3 a::before{
	transform: translate(-50%,-50%) rotate(0);
}

.mainInfo .inner .bbsBox > div h3 a::after{
	transform: translate(-50%,-50%) rotate(90deg);
}

.mainInfo .inner .bbsBox > div .rollBox{
	height: calc(100% - 40px);
	overflow: hidden;
}

.mainInfo .inner .bbsBox > div .rollBox ul li{
	display: flex;
	height: 20%;
	font-size: 1.6rem;
	line-height: 1.8;
}

.mainInfo .inner .bbsBox > div .rollBox ul li p{
	font-size: 1em;
	width: 70%;
	white-space: nowrap;
}

.mainInfo .inner .bbsBox > div .rollBox ul li span{
	font-size: 0.8em;
	opacity: 0.7;
	display: block;
	width: 30%;
	text-align: right;
}


@media screen and (max-width: 1024px){
	.mainVisual .slick-dots li{
		width: calc(100% / 3 - 20px);
	}
}


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


h2.mainTit{
	margin-bottom: 5vw;
}

h2.mainTit::before{
	margin-bottom: 3vw;
}

/* 비주얼 */
.mainVisual .slick-dots{
	bottom: 15px;
}

.mainVisual .slick-dots li{
	text-indent: -9999px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	margin: 0 5px;
	background: #626262;
}

.mainVisual .slick-dots li.slick-active{
	background: var(--mainCol);
}

.clinicCon .conBox ul li:nth-child(-n+8){
	width: 48%;
	/* margin-right: 4%; */
	margin-bottom: 0;
}

/*  */
.clinicCon .conBox ul li:nth-child(2n){
	margin-right: 0;
}

.clinicCon .conBox ul li:nth-child(-n+6){
	/* margin-bottom: 3vw; */
}

.clinicCon .conBox ul li .txtBox p{
	display: block;
}

/* 지도부분 */
.mainInfo{
	padding: 10vw 0;
}

.mainInfo .inner{
	display: block;
}

.mainInfo h2{
	margin-bottom: 5vw;
}

.mainInfo h2 strong{
	letter-spacing: 2vw;
}

.mainInfo h2 span{
	margin-bottom: 1vw;
}

.mainInfo .inner article{
	width: 100%;
	margin-right: 0;
}

.mainInfo .inner .map{
	margin-bottom: 5vw;
}

.mainInfo .inner .map .top{
	height: 50vw;
}

.mainInfo .inner .map .top > a::after{
	white-space: nowrap;
}

.mainInfo .inner .map .bottom{
	height: auto;
}

.mainInfo .inner .map .bottom img{
	width: 30px;
}

.mainInfo .inner .map .bottom p.addTxt{
	line-height: 1.5;
	width: calc(100% - 40px);
	font-size: 2rem;
}

.mainInfo .inner .map .bottom ul.mapLink {
    position: static;
    right: auto;
    top: auto;
    transform: none;
    display: flex;
    width: 100%;
	margin-top: 5vw;
}

.mainInfo .inner .map .bottom ul.mapLink li {
    width: 49%;
    margin-right: 2%;
    height: 30px;
    line-height: 30px;
    font-size: 2rem;
    background: #ccc;
    border-radius: 100px;
}

.carUl{
	flex-wrap: wrap;
	height: auto;
}

.carUl::after{
	display: none;
}

.carUl li{
	width: 100%;
	margin-right: 0 !important;
}

.carUl li:first-child{
	border-bottom: 1px solid #eee;
}

.carUl li h6{
	width: calc(100% - 120px);
	font-size: 2.5rem;
}

.carUl li p{
	font-size: 2rem;
	text-align: center;
	padding: 0;
	width: 120px;
	height: 30px;
	line-height: 30px;
}

.mainInfo .inner article:last-child{
	width: 100%;
	height: auto;
}

.mainInfo .inner .bbsBox > div{
	width: 100%;
	height: auto;
}

.mainInfo .inner .bbsBox > div h3{
	height: auto;
	line-height: 1.5;
	margin-bottom: 3vw;
	font-size: 2.5rem;
}

.mainInfo .inner .bbsBox > div .rollBox ul li{
	height: auto;
	line-height: 2;
	font-size: 2rem;
}

.mainInfo .inner .bbsBox > div .rollBox{
	height: auto;
}







}