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

main {position: relative;}
#footer {border-top: none !important;}
.content:first-of-type {padding-top: 0;}
section:last-of-type {padding-bottom: 120px;}

.main-slide .swiper-slide .img {width: 100%; height: calc(var(--vh, 1vh) * 100 - 55px);}
.main-slide .slide1 .zoom {background: url(../img/main/slide_01.jpg) center/cover no-repeat;}
.main-slide .slide2 .zoom {background: url(../img/main/slide_02.jpg) center/cover no-repeat;}
.main-slide .slide3 .zoom {background: url(../img/main/slide_03.jpg) center/cover no-repeat;}
.main-slide .slide4 .zoom {background: url(../img/main/slide_04.jpg) center/cover no-repeat;}
.main-slide .slide5 .zoom {background: url(../img/main/slide_05.jpg) center/cover no-repeat;}
.main-slide .slide6 .zoom {background: url(../img/main/slide_06.jpg) center/cover no-repeat;}
.main-slide .swiper-slide .txt {position: absolute; display: flex; align-items: center; justify-content: center; left: 0; top: 0; width: 100%; height: 100%; color: #fff;}
.main-slide .swiper-slide .txt article {position: relative; top: 40px; text-align: center; opacity: 0; transition: all 1s ease-in-out; filter: drop-shadow(2px 4px 6px black);}
.main-slide .swiper-slide-active .txt article {top: 0; opacity: 1;}
.main-slide .swiper-slide .txt .logo {margin-bottom: 50px;}
.main-slide .swiper-slide .txt .tit {font-weight: 300;}
.main-slide .swiper-slide .txt .bar {margin: 20px 0; width: 100%; height: 4px; background: linear-gradient(to right, transparent, #fff, transparent);}
.main-slide .swiper-slide .txt .sub {white-space: pre-line; letter-spacing: 0.05em;}
.main-slide .swiper-scrollbar.main-slide-scroll {left: 50%; width: 75%; background: rgba(255,255,255,0.4); transform: translateX(-50%); bottom: 80px;}
.main-slide .swiper-scrollbar.main-slide-scroll .swiper-scrollbar-drag {background: #fff;}


.treatment .inner {max-width: 100%; padding: 0;}
.treatment article ul {display: flex; flex-wrap: wrap;}
.treatment article ul > li {position: relative; width: 20%;}
.treatment article ul > li.logo-box {display: none;}
.treatment article ul > li > a {display: block; width: 100%; height: 900px; overflow: hidden;}
.treatment article ul > li .img {width: 100%; height: 100%; background: url(../img/main/treatment_01.jpg) center/cover no-repeat; filter: brightness(0.2); transition: transform 0.5s ease-in-out, 0.3s ease-in-out;}
.treatment article ul > li:nth-child(2) .img {background: url(../img/main/treatment_02.jpg) center/cover no-repeat;}
.treatment article ul > li:nth-child(3) .img {background: url(../img/main/treatment_03.jpg) center/cover no-repeat;}
.treatment article ul > li:nth-child(4) .img {background: url(../img/main/treatment_04.jpg) center/cover no-repeat;}
.treatment article ul > li:nth-child(5) .img {background: url(../img/main/treatment_05.jpg) center/cover no-repeat;}
.treatment article ul > li:hover .img {transform: scale(1.12); filter: brightness(0.5); transition: transform 0.8s ease-in-out, filter 0.6s ease-in-out;} 
.treatment article ul > li .txt {position: absolute; display: flex; flex-direction: column; gap: 35px; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; color: #fff;}
.treatment article ul > li .txt .icon {display: flex; justify-content: center; align-items: flex-end; height: 100px; margin-bottom: 10px;}
.treatment article ul > li .txt p {font-size: 21px; margin-top: 20px; white-space: pre-line;}
.treatment article ul > li .txt h4 {line-height: 1.2; font-family: 'NanumSquare',san-serif; font-weight: 800;}

.main-area1 .txt-box {position: relative; display: flex; justify-content: flex-end;}
.main-area1 .txt-box .main-tit {position: relative; top: -150px; margin: 0; padding: 60px; max-width: 930px; width: 100%; text-align: left; background: #249085; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;}


/* ===================== Mobile size : 1400px ======================= */

@media screen and (max-width:1400px){
.treatment article ul > li {width: 50%;}
.treatment article ul > li.logo-box {display: flex; align-items: center; justify-content: center; padding: 20px; background: #249085;}
.treatment article ul > li > a {height: 500px;}
}


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

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

.main-slide .swiper-slide .img {height: 700px;}
.main-slide .swiper-slide .txt article {padding: 0 20px;}
}



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

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

}

/* ===================== Mobile size : 901px~ ======================= */

@media screen and (min-width:901px){
.main-slide .swiper-button-next {color: #fff; font-size: 65px; right: 30px; width: 50px; height: 100px; border: 3px solid #fff; background: rgba(255,255,255,0.3);}
.main-slide .swiper-button-prev {color: #fff; font-size: 65px; left: 30px; width: 50px; height: 100px; border: 3px solid #fff; background: rgba(255,255,255,0.3);}

}

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

@media screen and (max-width:900px){
.main-slide .swiper-button-next {color: #fff; }
.main-slide .swiper-button-prev {color: #fff; }

.main-slide .slide1 .zoom {background: url(../img/main/slide_01.jpg) 60%/cover no-repeat;}
.main-slide .slide2 .zoom {background: url(../img/main/slide_02.jpg) 30%/cover no-repeat;}
.main-slide .slide3 .zoom {background: url(../img/main/slide_03.jpg) 10%/cover no-repeat;}
.main-slide .slide4 .zoom {background: url(../img/main/slide_04.jpg) left/cover no-repeat;}
.main-slide .slide5 .zoom {background: url(../img/main/slide_05.jpg) 30%/cover no-repeat;}
.main-slide .slide6 .zoom {background: url(../img/main/slide_06.jpg) left/cover no-repeat;}

}

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

@media screen and (max-width:769px){
section:last-of-type {padding-bottom: 80px;}

.main-slide .swiper-scrollbar.main-slide-scroll {bottom: 40px;}


section.treatment {padding-top: 80px !important;}
.treatment article ul > li > a {height: 400px;}
.treatment article ul > li .txt {gap: 20px;}
.treatment article ul > li .txt p {font-size: 18px;}

.main-area1 .txt-box .main-tit {top: auto; padding: 40px;}
}

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

@media screen and (max-width:600px){
.main-slide .swiper-slide .img {height: 550px;}
.main-slide .swiper-slide .txt .logo {max-width: 200px; margin: 0 auto 20px;}
.main-slide .swiper-scrollbar.main-slide-scroll {bottom: 20px;}

.treatment article ul > li .txt p {font-size: 16px;}
}



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

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

.main-slide .slide1 .zoom {background: url(../img/main/slide_01.jpg) 60%/cover no-repeat;}
.main-slide .slide2 .zoom {background: url(../img/main/slide_02.jpg) 30%/cover no-repeat;}
.main-slide .slide3 .zoom {background: url(../img/main/slide_03.jpg) 10%/cover no-repeat;}
.main-slide .slide4 .zoom {background: url(../img/main/slide_04.jpg) left/cover no-repeat;}
.main-slide .slide5 .zoom {background: url(../img/main/slide_05.jpg) 30%/cover no-repeat;}
.main-slide .slide6 .zoom {background: url(../img/main/slide_06.jpg) left/cover no-repeat;}


section:last-of-type {padding-bottom: 60px;}

.treatment article ul > li > a {height: 350px;}
.treatment article ul > li .txt .icon {margin-bottom: 0;}
.treatment article ul > li:nth-child(1) .txt .icon img {max-width: 50px;}
.treatment article ul > li:nth-child(2) .txt .icon img {max-width: 65px;}
.treatment article ul > li:nth-child(3) .txt .icon img {max-width: 75px;}
.treatment article ul > li:nth-child(4) .txt .icon img {max-width: 80px;}
.treatment article ul > li:nth-child(5) .txt .icon img {max-width: 75px;}
.treatment article ul > li .txt p {font-size: 15px; margin-top: 15px;}

.main-area1 .txt-box .main-tit {padding: 40px 20px;}
}

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

@media screen and (max-width:380px){
.main-slide .swiper-slide .img {height: 450px;}
.main-slide .swiper-slide .txt .logo {max-width: 160px;}

.treatment article ul > li .txt p {font-size: 14px;}
}