/* ============================ 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;}

.main-slide .swiper-pagination-bullet {margin: 0 4px; width: 14px; height: 14px; background: #fff; border: 1px solid #01b3cd; opacity: 0.7; transition: all 0.4s ease-in-out;}
.main-slide .swiper-pagination-bullet-active {background: #01b3cd; opacity: 1;}

.treatment ul > li {width: 50%;}
.treatment ul > li > div {position: relative; width: 100%; height: 300px;}
.treatment ul .txt {position: absolute; left: 40px; top: 50px; width: 100%;}
.treatment ul .txt h4 {margin-bottom: 5px; font-family: 'NanumSquare',san-serif; font-weight: 900;}
.treatment ul .txt p {display: inline-block; position: relative;}
.treatment ul .txt p::before {position: absolute; content: ''; right: -25px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: #01b3cd;}
.treatment ul .txt p::after {position: absolute; content: ''; right: -20px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent;}
.treatment ul > li.treat01 > div {background: url(../img/main/treatment_01.jpg) center/cover no-repeat;}
.treatment ul > li.treat02 > div {background: url(../img/main/treatment_02.jpg) center/cover no-repeat;}
.treatment ul > li.treat03 > div {background: url(../img/main/treatment_03.jpg) center/cover no-repeat;}
.treatment ul > li.treat04 > div {background: url(../img/main/treatment_04.jpg) center/cover no-repeat;}
.treatment ul > li.reversal .txt,
.treatment ul > li.reversal .txt a {color: #fff;}
.treatment ul > li.reversal .txt p::before {background: #fff;}
.treatment ul > li.reversal .txt p::after {border-left: 8px solid #01b3cd;}

.special .zoom {background: url(../img/main/special_bg.jpg) center/cover no-repeat;}
.special ul {display: flex; justify-content: center;}
.special ul > li {width: 33.33%;}
.special ul > li > div {text-align: center; color: #fff;}
.special .img {max-width: 350px; margin: 0 auto;}
.special .txt {position: relative;}
.special ul > li:not(:first-child) .txt::before {position: absolute; content: ''; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 150px; background: #bbb;}
.special .txt h5 {margin: 20px 0 15px; font-weight: bold;}
.special .txt p {white-space: pre-line;}

.time-table * {text-align: center;}
.time-table ul {display: flex; justify-content: center; align-items: center; width: 100%; margin: 20px auto 0; gap: 40px;}
.time-table ul li {width: 100%;}
.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, #01b3cd, #0a95dd); color: #fff;}

.map .root_daum_roughmap {width: 100%;}
.map .root_daum_roughmap .wrap_map {height: 500px;}
.map .root_daum_roughmap .wrap_controllers {display: none;}
.map .info {margin: 60px auto 0; font-family: 'NanumSquare',san-serif;}
.map .info .top {border-bottom: 1px solid #ccc; padding-bottom: 30px;}
.map .info .top h3 {white-space: pre-line; line-height: 1.3; font-weight: 300;}
.map .info .mid {padding: 30px 0 60px;}
.map .info .mid h6 {white-space: pre-line;}
.map .info .btm > ul {display: flex;}
.map .info .btm > ul > li {width: 50%;}
.map .info .btm > ul > li:first-child article {border-right: 1px solid #ccc;}
.map .info .btm > ul > li:last-child article {margin-left: 40px;}
.map .info .btm article {display: flex;}
.map .info .btm article > div:first-child {margin-right: 30px;}
.map .info .btm article > div:first-child h4 {font-weight: 700;}
.map .info .btm article > div:last-child {flex: 1;}
.map .info .btm article ul {display: flex; align-items: center; width: 100%; font-weight: 700;}
.map .info .btm article ul > li:last-child {width: 100%;}
.map .info .btm article ul > li:first-child {width: 160px; margin-right: 20px; text-align-last: justify;}
.map .info .btm > ul > li:last-child article > div:last-child {flex: none; display: inline-block; text-align: center;}
.map .info .btm > ul > li:last-child article > div:last-child h4 {display: inline-block; padding: 2px 32px; border-radius: 40px; border: 1px solid #ccc;}
.map .info .btm > ul > li:last-child article > div:last-child p {margin-top: 10px; font-weight: bold;}


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

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

}


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

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

.map .info .btm > ul {flex-direction: column;}
.map .info .btm > ul > li {width: 100%;}
.map .info .btm > ul > li:first-child article {border-right: 0; border-bottom: 1px solid #ccc; padding: 0 0 40px;}
.map .info .btm > ul > li:last-child article {margin: 40px 0 0;}
}


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

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

}

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

@media screen and (max-width:900px){
.special ul {flex-direction: column; gap: 40px;}
.special ul > li {width: 100%;}
.special ul > li > div {max-width: 400px; margin: 0 auto; border: 1px solid #fff;}
.special .img {max-width: 100%; margin: 0 auto;}
.special .txt {padding: 25px 10px 20px; background: rgba(0,0,0,0.6); border-top: 1px solid #fff;}
.special .txt::before {display: none;}
.special .txt h5 {margin: 0 0 15px;}
}

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

@media screen and (max-width:769px){
.treatment ul > li {width: 100%;}

.time-table ul {display: block; max-width: 500px; margin: 0 auto;}
.time-table ul li:last-child {margin: 40px auto 0;}
.time-table h6 {font-size: 18px;}

.map .root_daum_roughmap .wrap_map {height: 400px;}
.map .info {margin: 40px auto 0;}
.map .info .mid {padding: 30px 0 40px;}
.map .info .btm > ul > li:first-child article {padding: 0 0 30px;}
.map .info .btm > ul > li:last-child article {margin: 30px 0 0;}
.map .info .btm article ul > li:first-child {width: 140px;}
}

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

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

}



/* ===================== Mobile size : 480px ======================= */

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

.treatment ul > li > div {height: 220px;}
.treatment ul .txt {left: 20px; top: 30px;}

.time-table ul {width: 100%;}
.time-table ul li:last-child {margin: 20px auto 0;}
.time-table h6 {font-size: 16px;}

.map .root_daum_roughmap .wrap_map {height: 300px;}
.map .info .btm article {flex-direction: column;}
.map .info .btm article > div:first-child {margin: 0 0 10px;}
.map .info .btm > ul > li:last-child article > div:first-child {display: none;}
}

/* ===================== Mobile size : 380px ======================= */

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

}