@charset "utf-8";

@import url('./reset.css');
@import url('./swiper-bundle.min.css');
@import url('./aos.css');
body{position: relative;}

.inner { max-width:1400px; margin: 0 auto; padding-left:20px; padding-right:20px; }
/* header start */
#header{position: fixed;left: 0;right: 0;top: 0;z-index: 200;width: 100%;background-color: #fff;box-shadow: 0 3px 5px 0 rgb(0 0 0 / 25%);}
#header .h_inner{width:100%;height:80px;margin: 0 auto;padding:0 20px;position:relative;display:flex;justify-content: center;align-items: center;}
#header .h_inner h1{position:absolute;left: 20px;top:50%;transform: translateY(-50%);z-index: 200;}
#header .h_inner h1 a{display: block;width: 200px;line-height: 0;}
#header .h_inner h1 a img{width: 100%;line-height: 0;}
#header .h_inner .nav{display: flex;justify-content: flex-start;align-items: center;}
#header .h_inner .nav li{position:relative;padding: 0 25px;font-size: 20px;font-weight: 500;}
#header .h_inner .ham_menu{position: absolute;right:20px;top:50%;z-index:200;transform: translateY(-50%);line-height:0;}

#sideNav{height: 100vh;padding:100px 20px;position: fixed;right: 0;top: 0; z-index:199;background: #fff;transform: translate(100%,0);transition:transform .5s;border-left:solid 1px #ededed}
#sideNav.active{transform:translate(0,0)}

.sideNav_menu{border-top: solid 1px #ededed;padding-top: 20px;}
.sideNav_menu li{line-height: 30px;text-align: center;padding: 7px 0;}
.sideNav_menu li:first-child{border-top:none}

#header .h_inner .ham_menu .navicon-button {display: inline-block;position: relative;transition: 0.25s;cursor: pointer;user-select: none;opacity: 1;width: 40px;height: 25px;line-height: 0;}
#header .h_inner .ham_menu .navicon-button .navicon.top,
#header .h_inner .ham_menu .navicon-button .navicon.bottom {transition: 0.25s;}
#header .h_inner .ham_menu .navicon-button:hover .navicon.top {top: -2px;}
#header .h_inner .ham_menu .navicon-button:hover .navicon.bottom {bottom: -2px;}
#header .h_inner .ham_menu .navicon {position: absolute;width: 100%;height: 4px;background: #000;border-radius: 5px;}
#header .h_inner .ham_menu .navicon.top{top: 0;}
#header .h_inner .ham_menu .navicon.mid{top: 50%;transform: translateY(-50%);}
#header .h_inner .ham_menu .navicon.bottom{bottom:0;}
#header .h_inner .ham_menu .navicon-button.open .navicon.top,
#header .h_inner .ham_menu .navicon-button.open .navicon.bottom {width:70%;top: 50% !important;transition: 0.5s;bottom:unset}
/* × and + */
#header .h_inner .ham_menu .navicon-button.open.x .navicon.mid {background: transparent;}
#header .h_inner .ham_menu .navicon-button.open.x .navicon.top {transform: translateY(-50%) rotate(-45deg);}
#header .h_inner .ham_menu .navicon-button.open.x .navicon.bottom {transform: translateY(-50%) rotate(45deg);}

@media(max-width:1200px){
    #header .h_inner .nav{display:none;}
}
@media(max-width:768px){
    html.no-scroll{overflow: hidden;}
    #header .h_inner h1 a{width:180px;}
    #header .h_inner{height:70px;}

    #sideNav{width:100%;}
}
@media(max-width:600px){
    #header .h_inner h1 a{width:140px;}
    #header .h_inner{height:60px;}

    #header .h_inner .ham_menu .navicon-button{width:30px;height:20px;}
    #header .h_inner .ham_menu .navicon{height:3px;}
}
/* header fin */


/* footer S */
#footer1 .inner,
#footer2 .inner { max-width:1800px; }
#footer2 .logos .logo {width:237px; opacity: 0.2;}
#footer1 { background: #eeeeee;  border-bottom: 1px solid #d4d4d4;  margin-top:150px;  }
#footer1 .inner { position: relative; padding-top:45px; padding-bottom:32px;}
#footer1 .nav a{ display: inline-block; font-size:17px; color: #777777; margin-right:36px; }
#footer1 .nav a:nth-child(2){font-weight: 500;}
#footer1 .nav a:last-of-type{ margin-right:0; }
#footer1 .nav a:hover{ font-weight: 600; color: #333333; }
#footer2 { background: #eeeeee; padding:30px 0 100px;}
#footer2 .logos { display: flex; justify-content: space-between;align-items:center; margin-bottom: 30px;  }
#footer2 .logos .logo {padding-top:28px; }

#footer2 .logos .sns-fixed { position: static; width:auto; background: none; display: block; line-height:1;}
#footer2 .logos .sns-fixed a { display: inline-block; line-height:1;}
#footer2 .logos .sns-fixed a.btn-kakao { background-image: url('../img/kakao-grey.svg');}
#footer2 .logos .sns-fixed a.btn-blog { background-image: url('../img/blog-grey.svg');}
#footer2 .logos .sns-fixed a.btn-youtube { background-image: url('../img/youtube-grey.svg');}
#footer2 .logos .sns-fixed a + a { margin: 0 0 0 34px; }

.sns-fixed { position: absolute; right:0; top:0; bottom:0; width:100px; background: #fff; z-index:100; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.sns-fixed a { background-position:center center; background-repeat:no-repeat; background-size:contain; width: 28px; height: 29px; text-indent: -9999px; transition: all 0.5s ease; }
.sns-fixed a + a { margin-top:60px;}
.sns-fixed a.btn-kakao:hover { background-image: url('../img/kakao-black.svg') !important;}
.sns-fixed a.btn-blog:hover { background-image: url('../img/blog-black.svg') !important;}
.sns-fixed a.btn-youtube:hover { background-image: url('../img/youtube-black.svg') !important;}

#footer2 .addr { font-size:15px; line-height: 2; color: #777777; }
#footer2 .addr p { display:inline-block; }
#footer2 .addr strong { font-weight: 600; }
#footer2 .addr p { margin-right:10px; }

@media(max-width:1200px){
	#footer1 {
		margin-top: 100px;
	}
    #footer1 .inner {
        padding-top: 25px;
        padding-bottom: 25px;
    }
    #footer1 .nav a {
        font-size: 15px;
        margin-right: 29px;
    }
    #footer2 .logos .logo {
        padding-top: 0;
        width: 185px;
    }
    #footer2 {
        padding: 20px 0 40px;
    }
    #footer2 .addr {
        font-size: 13px;
    }
    #footer2 .logos .sns-fixed a + a {
        margin: 0 0 0 25px;
    }
    .sns-fixed a.btn-kakao:hover { background-image: url('../img/kakao-grey.svg') !important;}
    .sns-fixed a.btn-blog:hover { background-image: url('../img/blog-grey.svg') !important;}
    .sns-fixed a.btn-youtube:hover { background-image: url('../img/youtube-grey.svg') !important;}
}

@media(max-width:768px){
	#footer1 {
		margin-top: 50px;
	}
    #footer1 .nav a {
		font-size: 14px;
		margin-right: 19px;
	}
	#footer2 .logos {
		flex-direction: row;
		margin-bottom: 10px;
	}
	.sns-fixed a {
		width: 20px;
		height: 20px;
	}
	#footer2 .logos .logo {
		width: 130px;
	}
	#footer1 .inner {
		padding-top: 18px;
		padding-bottom: 18px;
	}
	#footer2 .logos .sns-fixed {
		position: static;
		width: auto;
		background: none;
		display: block;
	}
	#footer2 .addr {
		line-height: 1.7;
	}
	#footer2 .addr {
		font-size: 10px;
	}
}
/* footer F */

.fa-light, .fa-regular, .fal, .far,.fa-solid, .fa-thin, .fas, .fat{font: var(--fa-font-solid); }
/*fade in*/
.fade {
    position: relative;
    top: 100px;
    opacity: 0;
    transition-property: opacity, top;
    transition-duration: 1s;
}

.fade.show {
    top: 0;
    opacity: 1;
}

.fade-1 {
    transition-delay: 0s;
}

.fade-2 {
    transition-delay: .2s;
}

.fade-3 {
    transition-delay: .4s;
}

.fade-4 {
    transition-delay: .6s;
}

.fade-5 {
    transition-delay: .8s;
}

.fade-6 {
    transition-delay: 1s;
}

.fade-7 {
    transition-delay: 1.2s;
}

.fade-8 {
    transition-delay: 1.4s;
}

.fade-9 {
    transition-delay: 1.6s;
}

.fade-10 {
    transition-delay: 1.8s;
}

.fade-11 {
    transition-delay: 2s;
}

.fade-12 {
    transition-delay: 2.2s;
}

.fade-13 {
    transition-delay: 2.4s;
}

.fade-14 {
    transition-delay: 2.6s;
}

.fade-15 {
    transition-delay: 2.8s;
}

.fade-16 {
    transition-delay: 3s;
}

.fade-17 {
    transition-delay: 3.2s;
}

.fade-18 {
    transition-delay: 3.4s;
}

.fade-19 {
    transition-delay: 3.6s;
}

.fade-20 {
    transition-delay: 3.8s;
}

.fade-21 {
    transition-delay: 4s;
}

.fade-22 {
    transition-delay: 4.2s;
}

/*공통*/
.container {
    overflow: hidden;
}

.in {
    width: 1440px;
    max-width: 100%;
    padding: 0 20px;
    margin: 0 auto;
    position: relative;
}

.hidden {
    display: block;
    height: 0;
    width: 0;
    font-size: 0;
    line-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.pc-only {
    display: block;
}

.mo-only {
    display: none;
}

.phone-only,
.phone-only02 {
    display: none;
}

.phone-over {
    display: block;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.flex-bt-ct {
    display: flex;
    justify-content: space-between;
    align-items: center;
}



/*스와이퍼 공통*/
.swiper-wrapper.disabled {
    transform: translate3d(0px, 0, 0) !important;
}

.swiper-pagination.disabled,
.swiper-button-prev.disabled,
.swiper-button-next.disabled,
.swiper-button-pause.disabled {
    display: none;
}

.swiper-pagination-bullet-active {
    background: #fbbc52;
}

.swiper-pagination-bullet {
    margin-right: 13px;
}

.swiper-pagination-bullet:last-of-type {
    margin-right: 0;
}

.swiper-button-pause {
    font-size: 2rem;
    margin-left: 9px;
}

.swiper-button-next,
.swiper-button-prev {
    position: static;
    margin: 0;
    color: inherit;
    width: auto;
    height: auto;
}

.swiper-button-prev {
    margin-right: 10px;
}

.swiper-button-next {
    margin-left: 10px;
}

.swiper-button-next span,
.swiper-button-prev span {
    font-size: 1.7rem;
}

.swiper-pagination {
    position: static;
    text-align: left;
}

.slide-util-mg {
    margin: 85px 0 85px;
}

.slide-util {
    display: flex;
    align-items: center;
}

.scroll-cst::-webkit-scrollbar {
    width: 7px;
}

.scroll-cst::-webkit-scrollbar-button {
    display: none;
}

.scroll-cst::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #1c5c6b;
}

.scroll-cst::-webkit-scrollbar-track {
    background-color: transparent;
}

.scroll-cst::-webkit-scrollbar-track-piece {
    background-color: transparent;
}


@media(max-width:1200px) {
    .pc-only {
        display: none !important;
    }

    .mo-only {
        display: block;
    }

    .clinic-box .img.pc-only {
        display: block !important;
    }

    .etc .mo-only {
        display: block !important;
    }

}

@media(max-width:768px) {
    .clinic-box .img.pc-only {
        display: none !important;
    }

    .phone-only {
        display: block;
    }

    .phone-over {
        display: none !important;
    }

    .in {
        padding: 0 15px;
    }

    .in2 {
        padding: 0 15px;
    }


    .mo-phone {
        width: 19px !important;
    }

    .fade {
        position: relative;
        top: 0px;
        opacity: 1;
    }

}