/* ============================ main style start ============================= */
@charset "utf-8";

/* youtube responsive*/
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.swiper-slide img {width: 100%;}

main {position: relative; margin-top: 133px;}
.content:first-of-type {padding-top: 0;}
#footer {border-top: none;}
#header {position: fixed;}

.sub-title{position: relative;}
.sub-title > p{letter-spacing: 0.4em;}
.sub-title > p:first-child{position: relative; display: inline-block; margin-left: 200px;}
.sub-title > p:first-child:before{position: absolute; content: ''; width: 150px; height: 3px; left: -170px; bottom:5px; background:#7c6f66 ;}
.sub-title > p:first-child:after{position: absolute; content: attr(data-num); font-size: 15px; font-weight: 500; left: -200px; letter-spacing: -1px; top: 50%; transform: translateY(-50%);}
.sub-title h4, .sub-title h5{white-space: pre-line; margin: 25px 0; line-height: 1.3; font-weight: 500;}
.sub-title p.sub-title-text{letter-spacing: -1px; font-weight: 500; color: #767676;}


.main1{padding: 120px 0;}
.main1 ul.flex li div > div{border: 2px solid #08254f; border-radius:40px; padding: 5px 20px;}
.main1 ul.flex li div img{max-width: 40px; margin-right: 5px;}
.main1 .main1-txt{margin: 30px 0; text-align: center;}
.main1 .detail-btn{margin-top: 20px; text-align: center;}
.main1 .detail-btn a{display: inline-block; background: #404040	; color: #fff; padding: 8px 26px; border-radius:40px; transition:0.5s;}
.main1 .detail-btn a:hover{background: #08254f;}
.main1 .detail-btn a:hover > div > div{margin-left: 20px;}
.main1 .detail-btn a > div > div{max-width: 30px; margin-left: 10px; transition:0.5s;}
.main1 .detail-btn a > div > div img{width: 100%;}

.main2{background:url(../img/main/doctor_bg.jpg) center/cover no-repeat; padding: 120px 0 370px;}
.main2.doctor2, .main2.doctor3{padding: 120px 0 230px;}
.main2 .doctor-slide img{max-width: 500px;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
.main2 .doctor-slide{ width: 100%; position: relative; padding: 0; text-align: center; transform: translateX(-15%);}
/* .main2 .doctor-slide .swiper-slide{background:url(../img/main/doctor_bg.png) no-repeat; background-position-x: 120px; background-size: 200px;} */
.main2 .doctor-slide .swiper-pagination2{margin-top: 20px;}
.main2 .doctor-slide .swiper-pagination-bullet{border: 1px solid #aaa; background-color: #fff; z-index: 999; position: relative;}
.main2 .doctor-slide .swiper-pagination-bullet-active{background-color: #2a3f57;}
.main2 .doctor-txt-bg{position: absolute; top: 20px; right: 100px;}


.main2 .doctor-txt{position: absolute; top: 0; right: -10%; z-index: -1; max-width: 525px; width: 100%; font-weight: 300;}
.main2 .doctor-txt > div{padding: 10% 5% 10% 20%; color: #fff; text-align: left; background-color: #2a3f57;}
.main2 .doctor-txt h2{white-space: pre-line; line-height: 1; padding: 50px 0; text-align: left; max-width: 350px; margin: 0 auto;}
.main2 .doctor-txt .doctor-name1{font-size: 150%; font-weight: 400;}
.main2 .doctor-txt .doctor-name2{color: #f1c970;}
.main2 .doctor-txt p{line-height: 1.8em;}
.main2 a{position: absolute;left: 50%;transform: translateX(-50%);bottom: -150px;background-color: rgba(255,255,255,0.5); color: #404040; padding: 10px 30px; border-radius:40px;
display: inline-block; font-weight: 300; border: 2px solid #08254f; font-family:"nanumSQB"; font-size: 18px; line-height: 1; transition:0.5s;}
.main2 a span{transition:0.5s; display: inline-block;}
.main2 a:hover{background: #404040; color: #fff; border: 1px solid #404040;}
.main2 a:hover span{transform: rotate(90deg);}

.main2 .swiper-pagination{margin-top: 20px;}
.main2 .swiper-pagination-bullet { width: 12px; height: 12px; background: transparent; border: 1px solid #fff; opacity: 1; background-color: rgba(255,255,255,0.4); }
.main2 .swiper-pagination-bullet-active { width: 40px; transition: width .5s; border-radius: 5px; background: #fff; border: 1px solid #fff; }

.main2-mobile{display: none;}

.main3{overflow: hidden; padding-top: 0; margin-top: 120px;}
.main3-wrap{display: flex; justify-content:center;}
.main3-wrap > li:first-child{width: 25%;}
.main3-wrap > li:last-child{width: 75%; position: relative;}

.main3 .special-slide{width: 100%; height: 100%;/*  overflow: hidden;  */position: relative;}
.main3 .special-slide .special-grid{display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap:10px; justify-items: center;}
.main3 .special-img img{width: 100%;}
.main3 .special-txt{margin: 15px 0 20px;}
.main3 .swiper-container-vertical > .swiper-pagination-bullets{right: -10px;}
.main3 .swiper-pagination-bullet{width: 15px; height: 15px; background: #fff; border: 2px solid #777; transition:0.4s;}
.main3 .swiper-pagination-bullet-active{background: #08254f; height: 30px; border: 0; border-radius:10px;}

.main3-mobile{display: none;}

.main4 {background:url(../img/main/treatment_bg.jpg) center/cover no-repeat; padding: 80px 0 40px;}
.main4 .tr-swiper{padding-bottom: 60px;}
.main4 .swiper-slide{text-align: center;}
.main4 .swiper-slide img{width: auto;}

.main4 .swiper-pagination{bottom: 0;}
.main4 .swiper-pagination-bullet { width: 12px; height: 12px; background: transparent; border: 1px solid #fff; opacity: 1; background-color: rgba(255,255,255,0.4); }
.main4 .swiper-pagination-bullet-active { width: 40px; transition: width .5s; border-radius: 5px; background: #fff; border: 1px solid #fff; }

.main4-mobile{display: none;}

.main5{padding-top: 0;}
.main5 ul.flex > li:first-child > div{background:url(../img/main/footer_interior.jpg) center/cover no-repeat; width: 100%; height: 100%;}
.main5 ul.flex > li:last-child > div{background: #f9f9f9; color: #333; padding: 100px 60px 100px 100px;}
.main5 .time > ul{display: flex; flex-direction:column; margin-left: 10px;}
.main5 .time > ul > li:not(:first-child){margin-top: 15px;}
.main5 .time > ul > li > ul{display: flex; align-items: center;}
.main5 .time > ul > li > ul > li p{white-space: pre-line;}
.main5 .time > ul > li > ul > li p span.colon{display: inline-block; margin: 0 10px;}
.main5 .time > ul > li > ul > li:first-child p{width: 80px; font-weight: 500; text-align-last: justify;}
.main5 .time .night{color: #fff; background: #101443; border-radius:15px; padding: 2px 10px; margin-left: 5px;}
.main5 .map{margin-top: 40px;}
.main5 .map p{margin-left: 10px;}

.main5 .time h5, .main5 .map h5{width: 80%; padding-bottom: 15px; margin-bottom: 15px; font-weight: 500; border-bottom: 1px solid #333;}

/* ===================== Mobile size : 1800px ======================= */

@media screen and (max-width:1800px){
.main2 .doctor-txt-bg{display: none;}
}


/* ===================== Mobile size : 1500px ======================= */

@media screen and (max-width:1500px){
.main3 .swiper-container-vertical > .swiper-pagination-bullets{right: auto; left: -20px;}
}


/* ===================== Mobile size : 1200px ======================= */

@media screen and (max-width:1200px){
	main {margin-top: 83px;}

	.main2{padding: 100px 0 180px;}
	.main2.doctor2, .main2.doctor3{padding: 100px 0 180px;}
	.main2 .doctor-slide{transform:none; margin-top: 20px;}
	.main2 .doctor-slide .swiper-slide{display: flex; align-items: center; justify-content: space-between; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; background: none;}
	.main2 .doctor-txt{position: static; right: auto; max-width: 100%; background: #2a3f57;}
	.main2 .doctor-txt h2{display: none;}
	.main2 .doctor-txt p{font-size: 15px;}
	.main2 .doctor-txt > div{padding: 5% 0px 5% 8%; height: 768px;}
	.main2 .doctor-slide img{box-shadow:none;}
	.main2 a{bottom: -120px;}

	.main5 ul.flex > li:last-child > div{padding: 80px 30px 80px 50px;}

}


/* ===================== Mobile size : 1024px ======================= */

@media screen and (max-width:1025px){
.main3-wrap{flex-direction: column; align-items: center;}
.main3-wrap > li:first-child{width: 100%;}
.main3-wrap .main3-tit{text-align: center; margin-bottom: 40px;}

.main3 .special-slide{overflow: hidden;}
.main3 .swiper-container-vertical > .swiper-pagination-bullets{right: auto; left: -40px;}

.main5 ul.flex > li:last-child > div{padding: 60px 30px;}
.main5 .map > ul.flex{flex-direction:column; align-items:flex-start;}
.main5 .map h5{margin-right: 0;}
.main5 .map p {margin: 20px 0 0 10px;}
}


/* ===================== Mobile size : 900px ======================= */

@media screen and (max-width:900px){
.main2 .doctor-slide img{max-width: 450px;}
.main2 .doctor-txt > div{height: 692px;}
}




/* ===================== Mobile size : 767px ======================= */

@media screen and (max-width:769px){
	.main1{padding: 80px 0 20px;}
	.main1 .sign img{max-width: 250px;}

	.main2 {display: none;}
	.main2.doctor2, .main2.doctor3{padding: 100px 0 0px;}
	.main2 .doctor-slide .swiper-slide{flex-wrap:wrap; box-shadow:none; padding: 0 8%;}
	.main2 .doctor-slide .swiper-pagination2{position: absolute; bottom: auto; top: 10px;}
	.main2 .doctor-slide img{ margin: 0 auto; max-width: 100%;}
	.main2 a{bottom: -80px;}
	.main2 .doctor-txt > div{height: auto;}

	.main2-mobile{display: block;}
	.main2-mobile h6{border: 1px solid #ccc; background: #08254f; max-width: 600px; margin: 0 auto;}
	.main2-mobile h6 a{display: block; padding: 8px 10px; color: #fff;}

	.main3{margin-top: 80px;}

	.main5 ul.flex > li:first-child > div{height: 500px;}
	.main5 .time > ul > li > ul > li p span.colon{margin: 0 15px 0 20px;}
	.main5 p {font-size: 17px;}
}

/* ===================== Mobile size : 425px ======================= */

@media screen and (max-width:426px){
	main {margin-top: 76px !important;}

	.sub-title > p{letter-spacing: 0.3em;}
	.sub-title > p:first-child{margin-left: 100px;}
	.sub-title > p:first-child:before{width: 80px; left: -90px;}
	.sub-title > p:first-child:after{font-size: 12px; left: -110px;}
	.sub-title h4, .sub-title h5{margin: 20px 0;}

	.main1{padding: 60px 0 0;}
	.main1 ul.flex li div img{max-width: 25px;}
	.main1 ul.flex > li > div{margin: 5px 10px;}
	.main1 ul.flex span.x0_9{font-size: 1em;}
	.main1 .main1-txt{margin: 20px 0;}
	.main1 .sign img{max-width: 200px;}

	.main2{padding: 60px 0 160px; background: none;}
	.main2.doctor2, .main2.doctor3{padding: 60px 0 0;}
	.main2 .doctor-txt > div{padding: 5% 8%;}
	.main2 .doctor-txt p{font-size: 13px;}
	.main2 a {width: 80%;font-size: 14px;}
	.main2 .doctor-slide .swiper-pagination2{margin-top: 0;}

	/* .main3{margin-top: 0px;} */
	.main3{background: #deebf7; margin-top: 40px; padding: 40px 0 20px;}
	.main3-wrap .main3-tit{margin-bottom: 20px;}
	.main3-wrap .main3-tit > h5:first-child{font-size: 13px; letter-spacing: 0.05em;}
	.main3-wrap .main3-tit > h5.mt10{margin-top: 5px !important;}
	.main3-wrap > li:last-child{width: 85%;}
	.main3 .swiper-pagination-bullet{width:10px; height: 10px;}
	.main3 .swiper-pagination-bullet-active{height: 18px;}
	.main3 .swiper-container-vertical > .swiper-pagination-bullets{left: -25px;}
	.main3 .swiper-container-vertical{display: none;}
	.main3-mobile{display: flex;}

	.main4{display: none;}
	.main4-mobile{display: block;}
	.main4-mobile ul.flex article {position: absolute; color: #fff;}
	.main4-mobile ul.flex img{width: 100%;}
	.main4-mobile ul.flex article p{font-family:"nanumSQ"; transform: skew(-0.1deg);}
	.main4-mobile ul.flex article h6{font-family:"nanumSQB"; transform: skew(-0.1deg); font-size: 20px;}
	.main4-mobile ul.flex article a{color: #fff; font-size: 11px; letter-spacing: 0.05em;}
	.main4-mobile ul.flex > li:first-child > div article, .main4-mobile ul.flex > li:last-child > div article {left: 20px; top: 50%; transform:translateY(-50%);}
	.main4-mobile ul.flex > li:last-child > div article{color: #333;}
	.main4-mobile ul.flex > li:last-child > div article a{color: #333;}
	.main4-mobile ul.flex > li:nth-child(n+2):nth-child(-n+3) > div article {left: 50%; bottom: 10px; transform:translateX(-50%); width: 100%; text-align: center;}

	.main5{margin-top: 40px;}
	.main5 .time h5, .main5 .map h5{width: 100%;}
	.main5 ul.flex > li:first-child > div{height: 300px;}
	.main5 ul.flex > li:last-child > div{padding: 40px 15px;}
	.main5 .time > ul{margin-left: 5px;}
	.main5 .time > ul > li > ul > li:first-child p{width: 70px;}
	.main5 .time > ul > li > ul > li p span.colon{margin: 0 10px 0 15px;}
	.main5 .time .night{display: inline-block; margin-left: 5px; padding: 1px 10px;}
	.main5 .map p {margin: 20px 0 0 5px;}
}

/* ===================== Mobile size : 366px ======================= */

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