@import url("common.css");
@import url("sub.css");


body,html{overflow:hidden; background:#000; min-width:320px; color:rgba(255,255,255,0.8) !important;} 
#wrap{position:relative; opacity:0; animation:fadeIn 2s ease-in-out forwards;}


.main_visual {margin: 0 auto; position: relative;  padding: 0; z-index: 1; box-sizing:border-box; height: 100%;}
.main_visual .swiper-wrapper {position: relative; width: 100%; height: 100%;  z-index: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
-webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; 
transition-property: transform, -webkit-transform; -webkit-box-sizing: content-box; box-sizing: content-box; box-sizing:border-box; display: flex; align-items: center;}

.main_visual .swiper-container-android .swiper-slide, .main_visual .swiper-wrapper {-webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0);}
.main_visual .swiper-container, .main_visual .swiper-wrapper {position:relative; width:100%; display: flex; align-items: center; height: 100vh; box-sizing:border-box;}
.main_visual .swiper-slide {position:relative; display:flex; align-items: center; min-width: 100vw; height:100vh; box-sizing:border-box; background:#c5beb6; overflow:hidden;}
.main_visual-pagination {position: absolute; text-align: left; -webkit-transition: 300ms opacity; -o-transition: 300ms opacity; transition: 300ms opacity;-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10;}


.pagination {position:fixed; bottom:60px; left:5%; z-index:90; width:115px;}
.cont_text {font-family:var(--eng); position:fixed; bottom:48px; left:calc(5% + 120px); font-style:normal; line-height:1; color:#fff; z-index:90;}
.main_visual-pagination span {position:relative; display:inline-block; width:6px; height:6px; border:2px solid transparent; margin-right:12px; cursor:pointer; vertical-align:middle; background:rgba(255,255,255,0.4); border-radius:100%; box-sizing:border-box;}
.main_visual-pagination span.swiper-pagination-bullet-active {width:10px; height:10px; background:transparent; border:2px solid #fff;}
.scrollBtn {position:fixed; bottom:50px; right:5%; color:#fff; font-family:var(--eng);  font-size:var(--fs15); z-index:90; text-align: center;}
.scrollBtn span {font-variation-settings:'wght' 100; position:relative; top:8px;}
.scrollBtn span.mouse {font-size:28px; margin-right:3px;}
.scrollBtn span.double_arrow {font-size:26px; opacity:0.5; left:0; animation:scroll_ani 1.3s linear infinite;}

.scrollBtn.none {opacity:0; visibility:hidden;}

@keyframes scroll_ani {
  0%,100% {left:0; opacity:0.5;}
  50% {left:10px; opacity:1;}
}

.ani_effect {opacity:0; transform: translateY(50px);}
.fade_effect {opacity:0;}
.main_visual .swiper-slide.action .ani_effect {animation: ani-up 0.8s linear forwards;}
.main_visual .swiper-slide.action .ani_effect.delay1 {animation-delay:0.3s;}
.main_visual .swiper-slide.action .fade_effect.delay1 {animation: fadeIn 1s linear forwards; animation-delay:1s;}
.main_visual .swiper-slide.action .ani_effect.delay2 {animation-delay:0.6s;}
.main_visual .swiper-slide.action .ani_effect.delay3 {animation-delay:0.9s;}
.main_visual .swiper-slide.action .ani_effect.delay4 {animation-delay:1.2s;}



.video {position:fixed; top:0; left:0; width:100%; height:100vh; opacity:0.9;}
.jarallax {position: relative; width: 100%; height:100vh;  object-fit: cover; }


.title {font-family:var(--eng); font-size:var(--fs100); color:#fff; font-weight:400; line-height:1.2;}
.stxt {line-height:1.8; letter-spacing:-0.5pt;}

.moreBtn {display:block; width:70px; height:70px; border:1px solid #fff; border-radius:100%; box-sizing:border-box; line-height:70px; font-size:25px; text-align:center; transition:all 0.3s linear;}
.moreBtn:hover {background:#fff; color:#c5beb6; transition:all 0.3s linear;}

.textArea p.stxt {margin:30px 0 45px;}



 .has-animation {position: relative;}
.image img {opacity: 0;}
.swiper-slide.action .has-animation img {animation: textHidden 0.1s 0.6s forwards;}
.has-animation:before {content: ''; position: absolute; top: 0; right: 0; z-index: 10;}

 .has-animation:before {background-color:#716a67;}
/*  .has-animation:after {background-color:#000; animation-delay: 0.5s;} */
.swiper-slide.action .has-animation.animation-ltr:before {width:0; height:100%; animation: revealLTR 1.2s ease;}
.swiper-slide.action .has-animation.animation-rtl:before {width:100%; height:0; animation: revealRTL 1.2s ease;}
.swiper-slide.action .has-animation.delay:before {animation-delay:0.4s;}

 @keyframes revealLTR {
	 0% {width: 0; left: 0;}
	 50% {width: 100%; left: 0;}
	 100% { width: 0;left: 100%;}
}
 @keyframes revealRTL {
	 0% {height: 0;	 top: 0;}
	 65% {height: 100%;	 top: 0;}
	 100% {height: 0; top: 100%;}
}
 @keyframes textHidden {
	 0% {opacity: 0;}
	 50% {opacity: 0.5;}
	 100% {opacity: 1;}
}
 



#visual {position:relative; background:transparent; text-align:center;}
#visual .section_in {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}



#about {position:relative; background:transparent;}
#about::after {content:''; width:100%; height:100vh; background:url("../_img/about_bg.jpg")no-repeat center / cover; position:absolute; top:0; left:0; transform:scale(1.3); transition:all 2s; z-index:-1;}
#about.action::after {transform:scale(1); transition:all 2s;}
#about .about_right {position:absolute; top:0; right:0; width:0; height:100vh; transition:all 0.3s linear; /* background:url("../_img/about_img.jpg")no-repeat center / cover;*/ }
#about .about_right::after {content:''; width:100%; height:100%; position:absolute; right:0; top:0; background:#eae6e4;}
#about.action .about_right {animation:about_ani1 1.2s ease forwards;}
#about.action .about_right::after {animation:about_ani2 1.2s ease forwards; animation-delay:0.7s;}

#about .about_left {width:50%; text-align:right; padding-right:6%; box-sizing:border-box;}
#about .about_left > .title {margin:0 0 65px; transform:translateX(50%); position:relative; right:25%; /*right:-14%;*/ z-index:60; display:inline-block;}
#about .about_left > span {display:block; font-family:var(--eng); font-size:var(--fs20); color:#fff; line-height:1;}
#about .about_left > .stxt {margin:17px 0 70px;}

#about .moreBtn {margin:0 0 0 auto;}
#about .moreBtn:hover {color:#a6b9d3;}

@keyframes about_ani1 {
	from{width:0%;}
	to{width:50%;}
}
@keyframes about_ani2 {
	from{width:100%;}
	to{width:0;}
}

#sleep {}
#sleep .section_in {height:100%;}
#sleep .textArea {position:absolute; bottom:20%; left:20%; z-index:10;}
#sleep .textArea p.stxt span {display:block; font-family:var(--eng); font-size:var(--fs20); color:#fff; margin:0 0 5px 0; line-height:160%}
#sleep .textArea p.stxt span.inner_txt{opacity:.6; font-size:var(--fs16); margin:8px 0 0 0;}
#sleep .img_bg {position:absolute; top:0; left:20%; width:45%; height:0; z-index:1; overflow:hidden;}
#sleep.action .img_bg {animation:sleep_ani1 1.2s ease forwards; animation-delay:0.2s;}
#sleep .img_bg .img_bg_in {widtH:805px; height:100%;background:url("../_img/sleep_img01.jpg")no-repeat center / cover;}
#sleep .image {position:absolute; bottom:15%; left:55%; z-index:2; width:26%;}
#sleep .image img {max-width:100%;}
#sleep .image::before {background:#e2dad0 !important;}
#sleep .image::after {content:''; width:45%; height:0; background:#8b837d; position:absolute; right:-10%; top:-15%; z-index:-1;}
#sleep.action .image::after {animation:sleep_ani1 1s ease forwards; animation-delay:1s;}

@keyframes sleep_ani1 {
	from{height:0%;}
	to{height:100%;}
}
@keyframes sleep_ani2 {
	from{width:100%;}
	to{width:0;}
}



#location {position:relative; background:transparent;}
#location::after {content:''; width:100%; height:100%; background:url("../_img/location_bg.jpg") no-repeat center; background-size:cover; position:absolute; top:0; left:0; transform:scale(1.3); transition:all 2s; z-index:-1;}
#location.action::after {transform:scale(1); transition:all 2s;}

#location .tit_wrap {display:flex; flex-wrap:wrap; position:relative; align-items: flex-end; padding:0 0 10px;}
#location .tit_wrap .title {width:415px; line-height:1;}
#location .tit_wrap .title span { line-height:1;}
#location .tit_wrap ul {width:calc(100% - 415px); position:relative; top:-16px; padding-right:50px; box-sizing:border-box;}
#location .tit_wrap ul li {color:#fff; letter-spacing:-0.6pt; line-height:1.5; margin:0 0 5px;}
#location .tit_wrap ul li:last-child {margin:0;}
#location .tit_wrap a {position:absolute; bottom:25px; right:0; padding-left:20px; letter-spacing:-0.5pt; color:#fff;}
#location .tit_wrap a span {  font-variation-settings:'FILL' 1; position:absolute; top:5px; left:0; display:block; width:13px; height:15px; font-size:15px; line-height:15px;}
#location .tit_wrap a::after {content:''; width:100%; height:1px; background:#fff; position:absolute; bottom:5px; left:0;}



#appointment {position:relative; background:transparent;}
#appointment::after {content:''; position:absolute; top:0; left:0; z-index:1;  background:url("../_img/app_bg.jpg")no-repeat center / cover; width:100%; height:100%; transform:scale(1.3); transition:all 2s; z-index:-1;}
#appointment.action::after {transform:scale(1); transition:all 2s;}


.footer {}
.footer::before {content:''; width:50px; height:1px; display:block; position:relative; background:rgba(255,255,255,0.3); margin:25px 0;}
.footer dl {display:flex; flex-wrap:wrap; }
.footer dl dd {margin-right:20px; color:rgba(255,255,255,0.5); letter-spacing:-0.5pt; line-height:1.5; margin-bottom:6px;}
.scrollTop {position:absolute; left:5%; bottom:100px;}
.scrollTop.mo {display:none;}


/*******************************************************************************
	@media ~1400px
*******************************************************************************/
@media all and (max-width:1400px) { 


#about .about_left br {display:none;}
#about .about_left > .title {margin:0 0 80px;}


}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 


#mind .textArea {transform:translateX(100%);}


#location .tit_wrap {width:750px; display:block; margin:0 auto;}
#location .tit_wrap ul {width:100%; margin:25px 0 0;}



}
/*******************************************************************************
	@media ~1100px
*******************************************************************************/
@media all and (max-width:1100px) { 


}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 

/* 스와이퍼 */
.swiper-container {overflow:visible; height:100%; }
.swiper-wrapper {display: block; overflow-y:visible; display: -webkit-inline-box;}

.swiper-container-android .swiper-slide,
.swiper-wrapper {transform:none;}
.swiper-container, .swiper-wrapper {position:relative; display:block;}
.swiper-wrapper {position:relative; display:block;}
.swiper-slide {position:relative; display: block; box-sizing:border-box; height:100%;}

.cont_text {bottom:125px; left:5%; transform:translateX(-35%);}
.pagination {width:10px; height:80px; bottom:30px;}
.swiper-pagination span {display:block; margin:0 auto 5px !important;}

.scrollBtn {bottom:30px;}
.scrollBtn span {display:block; text-align:center;}
.scrollBtn span.mouse {margin-bottom:10px; margin-right:0;}
.scrollBtn span.double_arrow {transform:rotate(90deg);}


.moreBtn {width:60px; height:60px; line-height:60px;}


@keyframes scroll_ani {
  0%,100% {left:0; top:0; opacity:0.5;}
  50% {left:0; top:10px; opacity:1;}
}





#visual {height:100%;}

#about .section_in {height:100%;}
#about .about_left {position:relative; top:50%; transform:translateY(-50%); padding-right:4%; z-index:10;}
#about .about_left > .title {margin:0 0 50px;}
#about .about_left > .stxt {margin:15px 0 45px;}



#sleep {/* height:auto; min-height:100%; */ padding:60px 0;}
#sleep .section_in {height:100%;}
#sleep .img_bg {left:0; width:55%;}
#sleep .image {bottom:auto; top:15%; left:42%; width:48.5%;}


#sleep .textArea {width:60%; left:auto; right:5%; bottom:0;}
#sleep .textArea br {display:none;}
.textArea .title {font-size:42px;}
.textArea p.stxt {margin:20px 0 25px;}


#mind .textArea {width:85%; bottom:auto; right:auto; top:40%; left:0; transform:translate(0,-50%);}
#mind .textArea br {display:none;}
#mind .img_bg {height:100%; width:50%; bottom:0;}
#mind .image {bottom:0; max-width:100%;}


#location {display:flex; flex-wrap:wrap; align-content:center;}
#location .tit_wrap {width:100%; display:block; margin:0 auto; padding:0 0 40px;}
#location .tit_wrap .title {width:100%;}
#location .tit_wrap ul {width:100%; margin:35px 0 0;}
#location .tit_wrap a {bottom:70px;}




#appointment {height:auto !important; padding:100px 0; box-sizing:border-box;}
.scrollTop.mo {display:inline-block; position:relative; bottom:0; left:0;}
.scrollTop.pc {display:none;}



}
/*******************************************************************************
	@media 681 ~ 768px
*******************************************************************************/
@media all and (max-width:768px) { 

}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 


.cont_text {display:none;}
.moreBtn {width:40px; height:40px; line-height:40px; font-size:16px;}

.textArea .title {font-size:28px;}
.dots::after {width:3px; height:3px;}

#about .section_in {}
#about .about_right {height:50%; }
#about .about_left {position:relative; width:90%; left:5%; top:72%; transform:translateY(-50%); padding-right:0; text-align:center;}
#about .about_left > .title {margin:0 0 10px; transform:translateX(0); right:0;}
#about .about_left > .stxt {margin:15px 0 25px;}
#about .moreBtn {margin:0 auto;}

@keyframes about_ani1 {
	from{width:0%;}
	to{width:100%;}
}


#sleep .textArea {width:75%}
#sleep .image {width:65.5%; left:22%;}
#sleep .img_bg .img_bg_in {width:100%}


#location .tit_wrap a span {top:1px;}
#location .tit_wrap a::after {bottom:0;}


#appointment {height:auto !important; padding:60px 0 200px; box-sizing:border-box;}

#sleep .textArea p.stxt span.inner_txt {font-size:12px;}
#mind .textArea p.stxt span.inner_txt {font-size:12px;}


}
/*******************************************************************************
	@media 361~520px
*******************************************************************************/
@media all and (max-width:520px) { 


#location .tit_wrap a {position:relative; bottom:0; right:0;}

}
/*******************************************************************************
	@media ~400px
*******************************************************************************/
@media all and (max-width:400px) { 
}



.about_time {padding: 30px; padding-top: 40px; border-radius: 10px; background: rgba(88,79,66,0.8); position: absolute; bottom: 30px; right: 40px; z-index: 10; box-shadow: 0 0 10px rgba(0,0,0,0.2);}
.about_time dl {padding: 25px 0; border-bottom: 1px solid rgba(255,255,255,0.3);}
.about_time dl:first-of-type {padding-top: 0}
.about_time dl dt {font-size: 16px; color: #fff; font-weight: 600; line-height: 1; margin-bottom: 10px; text-align: center;}
.about_time dl dd {font-size: 27px; font-weight: 700; color: #fff; line-height: 1; text-align: center;}
.about_time dl dd span {font-size: 18px; padding-right: 3px; font-weight: 500 !important;}

.icon__wrap {margin-top: 25px;}
.icon__wrap .box {}
.icon__wrap .box a {font-size: 13px; color: #fff; text-align: center; font-weight: 400; margin-top: -5px;}
.icon__wrap .box a i {display: block; margin: 0 auto 10px auto; font-size: 30px;}
/*.icon__wrap .box a::before {display: block; width: 50px; height: 50px; background-size: 100%; background-repeat: no-repeat; background-position: center; content: ''; margin: 0 auto 10px auto;}
.icon__wrap .box:nth-of-type(1) a::before {background-image: url("/_img/ico_quick1.svg");}
.icon__wrap .box:nth-of-type(2) a::before {background-image: url("/_img/ico_quick3.svg");}
.icon__wrap .box:nth-of-type(3) a::before {background-image: url("/_img/ico_quick4.svg");}

*/

/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 
    .about_time {position: relative; bottom: auto; right: auto; width: 90%; margin: 20px auto; padding: 20px; padding-top: 25px;}
    .about_time dl {padding: 20px 0;}
    .about_time dl dt {font-size: 14px;}
    .about_time dl dd {font-size: 20px;}
    .about_time dl dd span {font-size: 15px; }
    .icon__wrap .box a i {font-size: 25px; margin-bottom: 5px}
}