/* ============================ 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: 90px;}
.content:first-of-type {padding-top: 0;}
#footer {border-top: none;}
#header {position: fixed;}

.treatment li > div {height: 400px; color: #222; position: relative; background-size: cover; background-repeat: no-repeat;}
.treatment li:first-child > div {background-image: url(../img/main/treatment_01.jpg); margin-left: 0;} 
.treatment li:nth-child(2) > div {background-image: url(../img/main/treatment_02.jpg);}
.treatment li:nth-child(3) > div {background-image: url(../img/main/treatment_03.jpg);}
.treatment li:last-child > div {background-image: url(../img/main/treatment_04.jpg);}
.treatment li a {display: block; position: absolute; width: 100%; height: 100%; top: 0; display: flex; align-items: center; justify-content: center;}
.treatment li h5 {white-space: pre-line; opacity: 1; transition: all ease 0.3s; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); line-height: 1.2; color: #333; text-align: center; width: 100%; font-family:'NanumSquare',san-serif; font-weight: 400;}
.treatment li b{font-size: 1em; font-weight: 800;}
.treatment li span{font-size: 0.7em; font-weight: 400; margin-bottom: 5px; display: inline-block;}




/* special */
.special {background-color: #ebf4f2 !important;}
.special ul {position: relative; display: flex; justify-content: center;}
.special ul:after {position: absolute; content: ''; display: block; top: 25px; width: calc(100% - 30%); height: 2px; background-color: #b6b6b6; z-index: 0;}
.special ul li:before {position: relative; content: attr(data-number); display: flex; justify-content: center; align-items: center; left: 50%; top: 0; transform: translateX(-50%);
width: 50px; height: 50px; background-color: #244683; color: #fff; border-radius: 50%; font-size: 25px; z-index: 1; font-weight: 500;}

.special h6 {margin: 20px 0 15px; padding: 8px 10px; border-radius: 40px; font-family:'NanumSquare',san-serif; font-weight: 800; transform: skew(-0.1deg); color: #fff; background: #08254f;}
.special p {white-space: pre-line;}
.special .detail-btn {display: inline-block; border: 1px solid #ddd; padding: 5px 30px; border-radius: 20px;}
.special .detail-btn:hover {border-color: #244683; background-color: #244683; color: #fff; transition: all ease 0.3s;}

.special img {width: 100%;}

/* time-table */
.time-table * {text-align: center;}
.time-table ul {display: flex; justify-content: center; align-items: center; max-width: 1000px; width: 100%; margin: 40px auto 0; }
.time-table ul li {width: 100%;}
.time-table ul li:last-child {margin-left: 50px;}
.time-table h6 {padding: 5px 0; font-family:'NanumSquare',san-serif; font-weight: 700; transform: skew(-0.1deg); font-size: 20px;}
.time-table h6:nth-of-type(2n) {padding: 10px 0;}
.time-table h6:nth-of-type(2n-1) {background-color: #f0f0f0; font-weight: 800;}
.time-table h6.night-time {background: linear-gradient(to right, #1f3d74, #7fcef4); color: #fff;}

/* map */
.map {background-color: #1c2748 !important; color: #fff;}
.map ul.flex > li > div {padding: 50px 0; height: 350px; border: 1px solid #fff;}
.map ul.flex h5 {margin-top: 10px; font-family:'NanumSquare',san-serif; font-weight: 800; transform: skew(-0.1deg);}
.map ul.flex p {position: relative; margin-top: 10px; padding-top: 20px; font-weight: 700; white-space: pre-line;}
.map ul.flex p::before {content: ''; display: block; width: 80px; height: 2px; background-color: #ddd; position: absolute; top: 0; left: 50%; transform: translate(-50%, 0);}

.map ul.flex > li:nth-child(2) p span {display: inline-block; margin: 5px 5px 0; padding: 2px 13px; border-radius: 20px; background: #6175f5;}
.map ul.flex > li:nth-child(2) p span:nth-child(2) {background: #47af1b;}
.map ul.flex > li:nth-child(2) p span:nth-child(3) {background: #00afbd;}
.map .root_daum_roughmap {width: calc(100% - 10px) !important; margin: 0 auto;}


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

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

}


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

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

	.special, .map {padding: 100px 0 !important;}
}


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

@media screen and (max-width:1024px){
	.special, .map {padding: 80px 0 !important;}

	.treatment li > div {height: 330px;}

	.special ul.flex > li > div {margin: 10px;}
}

/* ===================== Mobile size : 769px ======================= */

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

	.treatment {display: block; max-width: 600px; margin: 0 auto;}
	.treatment li > div {height: 350px;}

	.time-table ul {display: block; max-width: 500px; margin: 0 auto;}
	.time-table ul li img {width: 70%;}
	.time-table ul li:last-child {margin: 40px auto 0;}
	.time-table h6 {font-size: 18px;}
	
	.special ul:after {display: none;}
	.special, .map {padding: 60px 0 !important;}

	.map ul.flex {flex-wrap: wrap; justify-content: center;}
	.map ul.flex > li {width: 100%;}
	.map ul.flex > li > div {height: auto;}
}

/* ===================== Mobile size : 600px ======================= */

@media screen and (max-width:600px){
	.time-table ul li:last-child {max-width: 320px;}

	.special ul li {width: 100%;}
	.special ul li:before {margin-top: 20px; width: 40px; height: 40px; font-size: 20px;}
	.special .title h3 {margin-bottom: 0;}
	.special ul li h5::before {height: 30px;}
	.special ul li img {max-width: 240px;}
	.special h6 {max-width: 280px; margin: 15px auto 10px; font-size: 18px;}
}



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

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

	.treatment li > div {margin: 5px !important; height: 230px;}
	.treatment li h5 {bottom: 10px;}

	.special h6 {max-width: 235px; font-size: 15px;}

	.time-table ul {width: 100%;}
	.time-table h6 {font-size: 16px;}

	.map ul.flex > li > div {padding: 30px 0;}
	.map ul.flex > li p {margin-top: 5px; padding-top: 15px;}
	.map ul.flex > li img {max-height: 50px;}
}

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

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