@charset "utf-8";


body main {padding-top:100px;}

/*** 메인비주얼 ***/
body main .main-visual {position:relative; height: calc(100vh - 100px);}
body main .main-visual .title {width:100%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:50; text-align:center; color:#fff;}
body main .main-visual .title h3 {width:100%; font-size:var(--fs80); font-weight:700; margin-bottom:20px;}
body main .main-visual .title h3 span {color:var(--base2);}
body main .main-visual .title p {font-size:var(--fs20);}

body main .main-visual .title .scroll-down {display:flex; gap:20px; flex-direction: row;align-items: center; position:absolute; right:100px; bottom:0; font-size:var(--fs14); writing-mode: vertical-lr; letter-spacing: 5px;}
body main .main-visual .title .scroll-down .scroll-down-icon {position:relative; display:inline-block; width:12px; height:70px; animation: scrollBounce 1.6s infinite ease-in-out;}
body main .main-visual .title .scroll-down .scroll-down-icon:after {content: ""; position: absolute; right:0; top:0px; width: 2px; height:100%; background:#fff;}
body main .main-visual .title .scroll-down .scroll-down-icon:before {content: ""; position: absolute;  right:5px; bottom: -2px; width: 15px; border-top: 2px solid #fff; transform: rotate(45deg) translateY(-9px); transition: all .3s ease !important;}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50%     { transform: translateY(8px); }
}

body main .main-visual .title .reservation ul {display:flex; justify-content: center; gap:30px;}
body main .main-visual .title .reservation ul li {background:#fff; border-radius:20px; padding:30px; margin-top:120px; color:#000; transition:.3s;}
body main .main-visual .title .reservation ul li:hover {box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.2); transform: translateY(-10px);}
body main .main-visual .title .reservation ul li {display:flex; gap:30px; align-items: center;}
body main .main-visual .title .reservation ul li h4 {font-size:var(--fs24); font-weight: 700;}
body main .main-visual .title .reservation ul li a {display:inline-block; padding:10px 55px; background:#F3F6FF; border:1px solid #DAE1EE; border-radius:10px; color:#000; font-weight:600;}

body main .main-visual .title .reservation .heading>div {display:flex; gap:10px; align-items: center;}
body main .main-visual .title .reservation .heading p {color: #616E8E; font-size:var(--fs17); font-weight:300; margin-top:15px; line-height:1;}

	/* 토글 */
	body main .main-visual .title .toggle-button-container {position: relative; box-sizing: border-box;}
	body main .main-visual .title .toggle-button {width:110px; position: relative; padding:3px; border-radius:100px; background:var(--base1);}
	body main .main-visual .title .knob, .btn-bg {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
	body main .main-visual .title .btn {position: relative; top: 50%; width: 74px; height: 36px; overflow: hidden;}
	body main .main-visual .title .btn.btn-pill, .btn.btn-pill > .btn-bg {border-radius: 100px;}
	body main .main-visual .title .btn.btn-rect {border-radius: 2px;}
	body main .main-visual .title .checkbox {position: relative; width: 100%; height: 100%; padding: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 3;}
	body main .main-visual .title .knob {z-index: 2; background:var(--base1); border-radius:100px; padding:3px; width:50%; height:100%; background:#fff; display:flex; align-items:center; justify-content:center; transition:transform 0.3s ease;}
	body main .main-visual .title .btn-bg {width: 100%; background-color: #ebf7fc; transition: 0.3s ease all; z-index: 1;}
	body main .main-visual .title .toggle-button-container .checkbox:checked + .knob:after {color: #fff;}
	body main .main-visual .title .toggle-button-container .checkbox:checked ~ .btn-bg {background-color: #fcebeb;}
	body main .main-visual .title .toggle-button-container .btn { width:100%; height:33px; background:var(--base1); border-radius:100px; position:relative; overflow:hidden; padding:3px;}
	body main .main-visual .title .toggle-button-container .knob span { font-size:var(--fs14); font-weight:700; color:#000; }
	body main .main-visual .title .toggle-button-container .btn::before { content:"진료"; position:absolute; top:50%; transform:translateY(-50%); left:16px; font-size:var(--fs14); font-weight:700; color:#fff; z-index:1; }
	body main .main-visual .title .toggle-button-container .btn::after { content:"검진"; position:absolute; top:50%; transform:translateY(-50%); right:16px; font-size:var(--fs14); font-weight:700; color:#fff; z-index:1; }
	body main .main-visual .title .toggle-button-container .checkbox:checked + .knob { transform:translateX(100%); }
	body main .main-visual .title .call .toggle-button {background:var(--base2);}
	body main .main-visual .title .call .toggle-button-container .btn {background:var(--base2);}


	/* 메인슬라이드 */
	.mySwiper {height: calc(100vh - 100px);}

	.mySwiper .swiper-wrapper .swiper-slide {position:relative;}
	.mySwiper .swiper-wrapper .swiper-slide img {width:100%; height: 100%;object-fit: cover;}
	.mySwiper .swiper-wrapper .swiper-slide:before {content:""; position:absolute; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,.45);}
	
	.mySwiper .autoplay-controls button {width:60px; height:60px; position: absolute; bottom: 100px; left: 100px; z-index: 9999; border-radius:100px;}
	.mySwiper .autoplay-controls button img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
	
	.mySwiper .autoplay-progress {
		  position: absolute;
		  bottom:95px; left:94px;
		  z-index: 10;
		  width: 70px;
		  height: 70px;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  font-weight: bold;
		  color: var(--swiper-theme-color);
		}
	
	.mySwiper .circle {width:60px; height:60px;}
	.mySwiper .circle:before {position:absolute; content:""; width:61px; height:61px; border:2px solid rgba(255,255,255,.3); border-radius:105px; bottom:100px; left:99px; z-index:5;}
	
	.mySwiper .autoplay-progress svg {
		  --progress: 0;
		  position: absolute;
		  left: 0;
		  top: 0px;
		  z-index: 10;
		  width: 100%;
		  height: 100%;
		  stroke-width: 1px;
		  stroke: #fff;
		  fill: none;
		  stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
		  stroke-dasharray: 125.6;
		  transform: rotate(-90deg);
		}
	.mySwiper .autoplay-progress span {color:transparent;}
	
	.mySwiper .swiper-pagination {position:absolute; bottom:110px !important; left:170px !important; text-align: left;}
	.mySwiper .swiper-pagination-bullet {background:rgba(255,255,255,.8) !important; margin:0 10px !important;}
	.mySwiper .swiper-pagination-bullet-active {background:#fff;}



/*** 전문의료진 소개 ***/
body main .doctor-intro .left {width: 860px; position:relative; height:100%;}
body main .doctor-intro {display:grid; gap:40px; grid-template-columns: 860px minmax(0, 1fr); align-items: start; background:var(--base1) url(/images/main/doctor-intro-element.png) no-repeat 50% 150%; padding:100px; justify-content: space-between; background-size:930px;}


body main .doctor-intro .title {position:relative; height:100%; color:#fff; line-height:1.2;}
body main .doctor-intro .title h3 {font-size:var(--fs60); font-weight:600;} 
body main .doctor-intro .title p {margin-top:30px; line-height:1.6; font-size:var(--fs17); font-weight:300; padding-bottom:60px;}
body main .doctor-intro .title .name-bg {position:absolute; bottom:-100px; width:100%; height:80px; border-radius:30px 30px 0 0; background: linear-gradient(90deg, #80B711 25%, #102760 100%);}

body main .doctor-intro .swiper-container {width:100%; position:absolute; left:0; bottom:-100px;}

body main .doctor-intro .swiper-container a {display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; padding:0 50px;}
body main .doctor-intro .swiper-container .doctor-name h3 {color:#fff; margin-bottom:20px; font-size:var(--fs24); font-weight:700;}
body main .doctor-intro .swiper-container .doctor-name h3 span {position:relative; font-size:var(--fs17); font-weight:500; padding-left:40px;}
body main .doctor-intro .swiper-container .doctor-name h3 span:before {position:absolute; content:""; width:1px; height:18px; background:#fff; left:20px; top:-1px;}
body main .doctor-intro .swiper-container .detail {position:absolute; bottom:0; right:0; height: 70px; border-radius: 20px 20px 0 0; margin-right:10px; backdrop-filter: blur(10px); background: rgba(255, 255, 255, .1); border-bottom:0; transform: translateY(50%); transition: opacity 0.3s ease, transform 0.5s ease; opacity: 0;}
body main .doctor-intro .swiper-container .detail a {position:relative; display:flex; align-items: center; flex-direction: row-reverse; justify-content: center; gap:15px; color: #102760; padding: 0 136px; font-size:var(--fs20); font-weight:600; height:100%; opacity: 0; transform: translateY(20px); transition: transform 0.5s ease, opacity 0.5s ease; transition-delay: 0.4s;}

body main .doctor-intro .swiper-container .swiper-slide:hover .detail a {opacity: 1; transform: translateY(0);}
body main .doctor-intro .swiper-container .swiper-slide:hover .detail {opacity: 1; visibility: visible; transform: translateY(0%);}



body main .doctor-intro ul {display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
body main .doctor-intro ul li {background:#fff url(/images/main/doctor-intro1.svg) no-repeat right 20px center; border-radius:20px; transition:.3s;}
body main .doctor-intro ul li:hover {box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.2); transform: translateY(-3px);}
body main .doctor-intro ul li:nth-child(2) {background:#fff url(/images/main/doctor-intro2.svg) no-repeat right 20px center;}
body main .doctor-intro ul li:nth-child(3) {background:#fff url(/images/main/doctor-intro3.svg) no-repeat right 20px center; }
body main .doctor-intro ul li:nth-child(4) {background:#fff url(/images/main/doctor-intro4.svg) no-repeat right 20px center;}
body main .doctor-intro ul li:nth-child(5) {background:#fff url(/images/main/doctor-intro5.svg) no-repeat right 20px center;}
body main .doctor-intro ul li:nth-child(6) {background:#fff url(/images/main/doctor-intro6.svg) no-repeat right 20px center;}
body main .doctor-intro ul li a {width:100%; padding:40px; display: inline-block;}
body main .doctor-intro ul li p {font-size:var(--fs20); font-weight:700; color:#000;}
body main .doctor-intro ul li:hover p {color:var(--base1);}
body main .doctor-intro ul li span {font-size:var(--fs15); color:var(--777);}




/*** 전문클리닉 ***/
body main .clinic {position:relative; padding:120px 100px 70px 100px; background:url(/images/main/clinic_bg.webp) no-repeat center right/cover;}
body main .clinic:before {content:""; position:absolute; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,.75);}

body main .clinic h3 {position:relative; font-size:var(--fs60); color:#fff; font-weight: 700; text-align:center; line-height: 100%; z-index:1;}
body main .clinic>p {position:relative; font-size:var(--fs17); color:#fff; font-weight: 400; text-align:center; margin:10px 0 50px 0; z-index:1;}

body main .clinic ul {display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
body main .clinic ul li {position:relative; background:radial-gradient(50% 50% at 50% 50%, #FFF 0%, #D7DFEF 100%); border-radius:20px; height:500px; font-weight:700; color:var(--base1); font-size:var(--fs40); line-height:1.2; overflow:hidden; transition: 0.6s;}
body main .clinic ul li:hover {/*transform: translateY(-30px);*/ background:radial-gradient(50% 50% at 50% 50%, #FFF 0%, #b4c9f3 100%);}

/*척추센터*/
body main .clinic ul li.spine:before {content:""; position:absolute; width:100%; height:100%; left:0; bottom:0; background:url(/images/main/clinic1.png) no-repeat bottom;}
body main .clinic ul li.spine:after {content:""; position:absolute; width:70px; height:70px; border-radius:100px; background:transparent; left:160px; top:260px; transition:.6s; filter: blur(15px);}

/*관절센터*/
body main .clinic ul li.joint:before {content:""; position:absolute; width:100%; height:100%; right:0; bottom:0; background:url(/images/main/clinic2.png) no-repeat right;}
body main .clinic ul li.joint:after {content:""; position:absolute; width:70px; height:70px; border-radius:100px; background:transparent; left:130px; top:290px; transition:.6s; filter: blur(15px);}

/*내과센터*/
body main .clinic ul li.internal:before {content:""; position:absolute; width:100%; height:100%; left:0; bottom:0; background:url(/images/main/clinic3.png) no-repeat bottom;}
body main .clinic ul li.internal:after {content:""; position:absolute; width:80px; height:80px; border-radius:100px; background:transparent; left:150px; top:275px; transition:.6s; filter: blur(15px);}

/* 외과센터 */
body main .clinic ul li.surgical:before {content:""; position:absolute; width:100%; height:100%; left:0; bottom:0; background:url(/images/main/surgical.png) no-repeat bottom;}
body main .clinic ul li.surgical:after {content:""; position:absolute; width:80px; height:80px; border-radius:100px; background:transparent; left:40%; top:60%; transition:.6s; filter: blur(15px);}

/*뇌신경센터*/
body main .clinic ul li.brain:before {content:""; position:absolute; width:100%; height:100%; left:0; bottom:0; background:url(/images/main/clinic4.png) no-repeat bottom;}
body main .clinic ul li.brain:after {content:""; position:absolute; width:80px; height:80px; border-radius:100px; background:transparent; left:150px; top:115px; transition:.6s; filter: blur(15px);}

/*운동재활센터*/
body main .clinic ul li.rehabilitation:before {content:""; position:absolute; width:100%; height:100%; left:0; bottom:0; background:url(/images/main/clinic5.png) no-repeat bottom;}
body main .clinic ul li.rehabilitation:after {content:""; position:absolute; width:70px; height:70px; border-radius:100px; background:transparent; left:150px; top:150px; transition:.6s; filter: blur(15px);}

/*건강검진센터*/
body main .clinic ul li.checkup:before {content:""; position:absolute; width:100%; height:100%; left:0; bottom:0; background:url(/images/main/clinic6.png) no-repeat bottom;}
body main .clinic ul li.checkup:after {content:""; position:absolute; width:50px; height:50px; border-radius:100px; background:transparent; left:260px; top:220px; transition:.6s; filter: blur(15px);}

/*영양수액*/
body main .clinic ul li.nutrient:before {content:""; position:absolute; width:100%; height:100%; left:0; bottom:0; background:url(/images/main/clinic7.png) no-repeat left;}
body main .clinic ul li.nutrient:after {content:""; position:absolute; width:80px; height:80px; border-radius:100px; background:transparent; left:15px; top:305px; transition:.6s; filter: blur(15px);}

/*세분화된*/
body main .clinic ul li.last:before {content:""; position:absolute; width:100%; height:100%; left:0; bottom:0; background:url(/images/main/clinic8.png) no-repeat bottom; background-size:100%; transition:.3s;}
body main .clinic ul li.last:hover::before {background:url(/images/main/clinic8.png) no-repeat bottom; background-size:105%;}
body main .clinic ul li.last a span {position:relative; padding-right:30px;}

body main .clinic ul li.last a span:after {content: ""; position: absolute; left: 0; bottom: -10px; width: 100%; border-top: 2px solid #fff; transition: all .3s ease !important;}
body main .clinic ul li.last a span:before {content: ""; position: absolute;  right: 5px; bottom: -11px; width: 15px; border-top: 2px solid #fff; transform: rotate(45deg) translateY(-9px); transition: all .3s ease !important;}
body main .clinic ul li.last a:hover span:after {content: ""; position: absolute; left: 0; bottom: -10px; width: 115%; border-top: 2px solid #fff; transition: all .3s ease !important;}
body main .clinic ul li.last a:hover span:before {content: ""; position: absolute;  right: -12%; bottom: -11px; width: 15px; border-top: 2px solid #fff; transform: rotate(45deg) translateY(-9px); transition: all .3s ease !important;}




body main .clinic ul li:hover::after {background:rgba(255,7,7,0.6); animation: blinkGlow 1.6s ease-in-out 0s 1;}

@keyframes blinkGlow {
  0%, 100% {
    opacity:1;
    filter: blur(15px);
  }
  50% {
    opacity: 0.2;
    filter: blur(20px);
  }
}


body main .clinic ul li a {position:relative; z-index:1; display:inline-block; width:100%; height:100%; padding:70px 50px;}
body main .clinic ul li a p {transition: transform 0.6s;}
body main .clinic ul li a:hover p {transform: translateY(-10px);}
body main .clinic ul li span {display:block; font-weight:300;}
body main .clinic ul li.last {font-size:var(--fs32); background:var(--base1); color:#fff;}
body main .clinic ul li.last p {font-size:var(--fs16); font-weight:300; line-height:1.5; margin:20px 0 10px 0; opacity:.7;}
body main .clinic ul li.last span {position:relative; z-index:1; display:inline-block; font-weight: 700; font-size: var(--fs20); padding:0; transition:.3s;}
body main .clinic ul li.last:hover p {opacity:1;}





/*** 병원소식 ***/
body main .hospital-news {padding:120px 100px 70px 100px;}
body main .hospital-news .title {display:flex; justify-content: space-between; align-items: center;}
body main .hospital-news .title h3 {font-size: var(--fs60); color:#000; font-weight:700;}
body main .hospital-news .title h3 span {position:relative; font-size: var(--fs15); color:var(--777); font-weight:500; padding-left:30px;}
body main .hospital-news .title h3 span:before {content:""; position:absolute; left:15px; top:-135px; background:url(/images/main/hospital-news-element.svg) no-repeat; width:105px; height:124px;}
body main .hospital-news .title div {display:flex; gap:10px;}
body main .hospital-news .title div a {font-size: var(--fs20); font-weight: 700; padding:15px 50px 15px 35px; background:var(--base1) url(/images/main/hospital-news-arrow.svg) no-repeat center right 35px; color:#fff; border-radius:100px;}
body main .hospital-news .title div p:nth-child(2) a {background:var(--base2) url(/images/main/hospital-news-arrow.svg) no-repeat center right 35px;}
body main .hospital-news .title div a:hover {background:var(--base1) url(/images/main/hospital-news-arrow.svg) no-repeat center right 25px;}
body main .hospital-news .title div p:nth-child(2) a:hover {background:var(--base2) url(/images/main/hospital-news-arrow.svg) no-repeat center right 25px;}

body main .hospital-news .notice {display:grid; grid-template-columns:repeat(4,1fr); gap:50px; margin-top:70px;}
body main .hospital-news .notice li a h4 {padding: 7px 15px; border-radius:100px; color:var(--base1); font-size: var(--fs13); background:var(--bg1); font-weight:700; display:inline-block; margin-bottom:20px;}
body main .hospital-news .notice li a h3 {font-size: var(--fs24); color:#000; font-weight:700; transition:.3s; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; margin-right: 10px;}
body main .hospital-news .notice li a:hover h3 {color:var(--base1);}
body main .hospital-news .notice li a p {color:#777; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
body main .hospital-news .notice li a:hover p {text-decoration: underline;}
body main .hospital-news .notice li a span {color:#777; font-size: var(--fs14);}

body main .hospital-news {position:relative; overflow:hidden;}
body main .hospital-news .news {display:grid; grid-template-columns:repeat(4,1fr); gap:50px; margin-top:70px;}
body main .hospital-news .news a .img {height:250px; border-radius:20px; overflow:hidden;}
body main .hospital-news .news a .img img {object-position: top !important;}
body main .hospital-news .news a:hover .img img {width: 100%; height: 100%;  object-fit: cover; aspect-ratio: 3 / 2; transition: all 0.5s;}
body main .hospital-news .news a h4 {padding: 7px 15px; border-radius:100px; color:var(--base2); font-size: var(--fs13); background:#f3fef3; font-weight:700; display:inline-block; margin-bottom:20px;}
body main .hospital-news .news a h3 {font-size: var(--fs17); color:#000; transition:.3s; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; margin-right: 10px;}
body main .hospital-news .news a:hover h3 {color:var(--base2);}
body main .hospital-news .news a span {color:#777; font-size: var(--fs14);}
body main .hospital-news .news .sm-title {display:flex; justify-content: space-between; margin-top:20px;}
body main .hospital-news .news a:hover img {transform:scale(1.1);}

body main .hospital-news .logo-rotate {position:absolute; right:-32%; top:-60%; animation:rotate-image 40s linear infinite; z-index:-1;}


@keyframes rotate-image{ 
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate-image2 { 
  0% {
    transform: scale(4) rotate(0deg) ;
  }
  100% {
    transform: scale(4) rotate(360deg);
  }
}




/*** 치료후기 ***/
body main .review {background:var(--bg1) url(/images/main/review_bg.webp) no-repeat left/contain; padding:70px 100px; display:grid; grid-template-columns:auto auto; justify-content: space-between; gap:50px;}
body main .review .title {color:#fff;}
body main .review .title h3 {font-size:var(--fs60); font-weight:700; line-height:1;}
body main .review .title p {font-size:var(--fs15); opacity:.7; font-weight:500; line-height:1.6; margin-top:20px;}
body main .review .title a {position:relative; display:inline-block; color:var(--base2); font-size:var(--fs17); font-weight:600; margin-top:30px; padding-right:45px;}

body main .review .title a:after {content: ""; position: absolute; left: 0; bottom: -10px; width: 100%; border-top: 2px solid var(--base2); transition: all .3s ease !important;}
body main .review .title a:before {content: ""; position: absolute;  right: 4px; bottom: -12px; width: 15px; border-top: 2px solid var(--base2); transform: rotate(45deg) translateY(-9px); transition: all .3s ease !important;}
body main .review .title a:hover::after {content: ""; position: absolute; left: 0; bottom: -10px; width: 115%; border-top: 2px solid var(--base2); transition: all .3s ease !important;}
body main .review .title a:hover::before {content: ""; position: absolute;  right: -11%; bottom: -12px; width: 15px; border-top: 2px solid var(--base2); transform: rotate(45deg) translateY(-9px); transition: all .3s ease !important;}

body main .review ul {display:grid; grid-template-columns:repeat(3,1fr); gap:50px;}
body main .review ul li a {padding:50px; border-radius:20px; box-shadow: 20px 20px 20px 0px rgba(0, 0, 0, 0.07); background:#fff; display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 1 0 0; transition:.3s;}
body main .review ul li a:hover {transform: translateY(-10px); box-shadow: 20px 20px 20px 0px rgba(0, 0, 0, 0.15);}
body main .review ul li a .ico-people {border-radius:100px; background:var(--base1);}
body main .review ul li a p {overflow: hidden; text-align: center; text-overflow: ellipsis; font-size: var(--fs15); font-style: normal; font-weight: 400; line-height: 24px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; align-self: stretch; color:var(--777);}
body main .review ul li a h3 {font-size: var(--fs18); font-weight: 500; color:#000; text-align:center; max-width: 270px; line-height:1.4;   overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}


/* ************************ (~1760) ************************ */
@media (max-width: 1755px) {
		
	/*** 전문의료진 소개 ***/
	body main .doctor-intro ul {grid-template-columns: repeat(2, 1fr);}
	body main .doctor-intro ul li,
	body main .doctor-intro ul li:nth-child(2),
	body main .doctor-intro ul li:nth-child(3),
	body main .doctor-intro ul li:nth-child(4),
	body main .doctor-intro ul li:nth-child(5),
	body main .doctor-intro ul li:nth-child(6)
	{background:#fff;}
	body main .doctor-intro .left {width: 100%;}
	body main .doctor-intro {grid-template-columns: 780px auto;}
	
	

}
	



/* ************************ 태블릿 이하(~1199) ************************ */
@media (max-width: 1199px) {
	
	/*** 메인비주얼 ***/
	body main {padding-top:0;}
	body main .main-visual .title .reservation ul {flex-direction: column; gap:10px; align-items: center; }
	body main .main-visual .title .reservation ul li {width: 90%; margin-top:0; justify-content: space-between;}
	body main .main-visual .title h3 {font-size: var(--fs60); line-height:1;}
	body main .main-visual .title > div {margin-bottom:40px;}
	body main .main-visual .title .scroll-down {bottom:-110px; right:10px;}
	
	.mySwiper .autoplay-controls button {bottom:50px; left:50px;}
	.mySwiper .autoplay-progress {bottom:45px;}
	.mySwiper .circle:before {bottom:50px; left:48px;}
	.mySwiper .swiper-pagination {bottom:70px !important; left: 120px !important;}
	.mySwiper .autoplay-progress svg {left:-50px;}
	
	/*** 전문의료진 소개 ***/
	body main .doctor-intro {grid-template-columns: auto; justify-content: normal; gap:120px; padding:100px 50px;}
	body main .doctor-intro .left {order: 2;}
	body main .doctor-intro ul {order: 1; grid-template-columns: repeat(3, 1fr);}
	body main .doctor-intro ul li {background:#fff url(/images/main/doctor-intro1.svg) no-repeat right 20px center; border-radius:20px;}
	body main .doctor-intro ul li:nth-child(2) {background:#fff url(/images/main/doctor-intro2.svg) no-repeat right 20px center;}
	body main .doctor-intro ul li:nth-child(3) {background:#fff url(/images/main/doctor-intro3.svg) no-repeat right 20px center;}
	body main .doctor-intro ul li:nth-child(4) {background:#fff url(/images/main/doctor-intro4.svg) no-repeat right 20px center;}
	body main .doctor-intro ul li:nth-child(5) {background:#fff url(/images/main/doctor-intro5.svg) no-repeat right 20px center;}
	body main .doctor-intro ul li:nth-child(6) {background:#fff url(/images/main/doctor-intro6.svg) no-repeat right 20px center;}
	
	body main .doctor-intro .swiper-container .doctor-name h3 {display:flex;flex-direction: column; margin-bottom:10px;}
	body main .doctor-intro .swiper-container .doctor-name h3 span:before {content:none;}
	body main .doctor-intro .title {width: calc(100% - 330px);}
	body main .doctor-intro .title .name-bg {width: 100vw; margin-left: -50px; border-radius: 0;}
	

	/*** 전문클리닉 ***/
	body main .clinic ul {grid-template-columns: repeat(2, 1fr);}
	body main .clinic ul li {height:400px;}
	body main .clinic {padding:120px 50px 70px 50px;}
	
	
	body main .hospital-news .notice {grid-template-columns: repeat(2, 1fr);}
	body main .hospital-news .news {grid-template-columns: repeat(2, 1fr);}
	
	/*** 치료후기 ***/
	body main .review {padding:60px 50px; grid-template-columns:auto; background: var(--bg1) url(/images/main/review_bg.webp) no-repeat 0 -250px / cover;}
	body main .review ul {gap:20px; grid-template-columns: repeat(2, 1fr);}
	
	
	/*** 병원소식 ***/
	/* body main .hospital-news {padding:120px 80px 70px 80px;} */
	body main .hospital-news .title {flex-direction: column; gap: 20px; align-items: flex-start;}
	body main .hospital-news .logo-rotate {width:75%; right:-305; top:-25%;}
	body main .hospital-news {padding:120px 50px 70px 50px;}
	
	
}





/* ************************ 모바일 ************************ */
@media (max-width: 767px) {
	
	/*** 메인비주얼 ***/
	body main .main-visual .title > div {padding:0 20px; margin-bottom: 20px;}
	body main .main-visual .title .scroll-down {display:none; right:30px;}
	body main .main-visual .title h3 {font-size: var(--fs30); line-height:1.2; margin-bottom: 10px;}
	body main .main-visual .title p {font-size: var(--fs16);}
	body main .main-visual .title .reservation ul li {width:100%; flex-direction: column; align-items: stretch; gap:5px; padding:20px; border-radius:10px;}
	body main .main-visual .title .reservation ul li a {width:100%;}
	body main .main-visual .title .reservation .heading p {text-align:left; line-height:1.2; margin-top:10px;}
	body main .main-visual .title .reservation ul li:hover {box-shadow:none; transform: translateY(0px);}
	body main .main-visual .title .toggle-button-container .btn {height:30px;}
	
	.mySwiper .autoplay-controls {display:none;}
	.mySwiper .circle {display:none;}
	.mySwiper .autoplay-controls button {left:30px;}
	.mySwiper .autoplay-progress {display:none; left:24px;}
	.mySwiper .circle:before {left:28px;}
	.mySwiper .swiper-pagination {left: 50% !important; bottom:20px !important; transform: translateX(-20%);}
	
	/*** 전문의료진 소개 ***/
	body main .doctor-intro {padding:60px 30px; padding-bottom: 100px;}
	body main .doctor-intro ul {grid-template-columns: repeat(2, 1fr); gap:10px;}
	body main .doctor-intro ul li {background:#fff url(/images/main/doctor-intro1.svg) no-repeat right 10px bottom 10px; background-size:38px;}
	body main .doctor-intro ul li:nth-child(2) {background:#fff url(/images/main/doctor-intro2.svg) no-repeat right 10px bottom 10px; background-size:38px;}
	body main .doctor-intro ul li:nth-child(3) {background:#fff url(/images/main/doctor-intro3.svg) no-repeat right 10px bottom 10px; background-size:38px;}
	body main .doctor-intro ul li:nth-child(4) {background:#fff url(/images/main/doctor-intro4.svg) no-repeat right 5px bottom 5px; background-size:38px;}
	body main .doctor-intro ul li:nth-child(5) {background:#fff url(/images/main/doctor-intro5.svg) no-repeat right 5px bottom 10px; background-size:38px;}
	body main .doctor-intro ul li:nth-child(6) {background:#fff url(/images/main/doctor-intro6.svg) no-repeat right 10px bottom 10px; background-size:38px;}
	body main .doctor-intro ul li {border-radius:10px;}
	body main .doctor-intro ul li a {padding:20px;}
	body main .doctor-intro .title h3 {font-size: var(--fs40);}
	body main .doctor-intro {gap:60px;}
	
	body main .doctor-intro .swiper-container a {padding:0; gap:15px;}
	body main .doctor-intro .swiper-container a img {width:180px;}
	body main .doctor-intro .swiper-container .detail a {padding:0;}
	body main .doctor-intro .swiper-container .detail {width:100%;}
	

	body main .doctor-intro .swiper-container .doctor-name h3 span {padding-left:0;}

	
	body main .doctor-intro .title .name-bg {width: 100vw; height:95px; margin-left: -30px; border-radius:0;}
	body main .doctor-intro .title {width: calc(100% - 100px);}
	body main .doctor-intro .swiper-container .detail {margin-right:0;}

	
	/*** 전문클리닉 ***/
	body main .clinic {padding:100px 30px; background: url(/images/main/clinic_bg.webp) no-repeat center / cover;}
	body main .clinic ul {grid-template-columns: repeat(1, 1fr); gap: 10px;}
	body main .clinic ul li:hover::after {content:none;}
	body main .clinic ul li {height:150px; font-size: var(--fs32);}
	body main .clinic ul li.last {height:350px;}
	body main .clinic ul li a {padding:30px;}
	body main .clinic ul li.last p {opacity:1;}
	body main .clinic ul li.last p br {display:none;}
	body main .clinic h3 {font-size: var(--fs50);}
	body main .clinic>p {margin: 10px 0 30px 0;}
	
	body main .clinic ul li.spine:before {background: url(/images/main/clinic1.png) no-repeat left;}
	body main .clinic ul li.joint:before {background: url(/images/main/clinic2.png) no-repeat left -260px;}
	body main .clinic ul li.internal:before {background: url(/images/main/clinic3.png) no-repeat left -200px;}
	body main .clinic ul li.surgical:before {background: url(/images/main/surgical.png) no-repeat center top -280px;}
	body main .clinic ul li.brain:before {background: url(/images/main/clinic4.png) no-repeat center top -70px;}
	body main .clinic ul li.rehabilitation:before {background: url(/images/main/clinic5.png) no-repeat left -145px;}
	body main .clinic ul li.checkup:before {background: url(/images/main/clinic6.png) no-repeat left -215px;}
	body main .clinic ul li.nutrient:before {background: url(/images/main/clinic7.png) no-repeat left -300px;}
	
	/*** 병원소식 ***/
	body main .hospital-news {padding:60px 30px;}
	body main .hospital-news .title h3 span {display:block; padding-left:0;}
	body main .hospital-news .title h3 span:before {left:135px;top:-75px; background-size: 50px;}
	body main .hospital-news .title h3 {font-size: var(--fs50);}
	body main .hospital-news .title div a {padding: 10px 50px 10px 20px;}
	body main .hospital-news .notice li a h4 {margin-bottom:10px;}
	body main .hospital-news .notice {gap:25px; margin-top:50px;}
	body main .hospital-news .notice {grid-template-columns: repeat(1, 1fr);}
	
	body main .hospital-news .news a .img {height:200px;}
	body main .hospital-news .news {margin-top:40px; gap:25px;}
	body main .hospital-news .news {grid-template-columns: repeat(1, 1fr);}
	body main .hospital-news .news a h4 {margin-bottom:0;}
	
	
	/*** 치료후기 ***/
	body main .review {padding:60px 30px; background: var(--bg1) url(/images/main/review_bg.webp) no-repeat 0 0px / cover; background-size: 150%;}
	body main .review ul {grid-template-columns: repeat(1, 1fr);}
	body main .review ul li a {padding:25px; align-items: flex-start}
	body main .review ul li a .ico-people {width:45px;}
	body main .review ul li a h3 {text-align:left; max-width:100%;}
	body main .review ul li a:hover {transform: translateY(0px); box-shadow: none;}
	body main .review ul li a p {text-align:left;}
	
	
	
	
	
	

	

	
	
	
}