/**** panel ****/
.panel-wrap .panel .panel-title { position:relative; cursor:pointer; }
.panel-wrap .panel .panel-content { display:none; }
.panel-wrap .panel .icon-panel {position:relative; width: 11px; height: 11px; display: block; }
.panel-wrap .panel .icon-panel::before, .panel-wrap .panel .icon-panel::after { content:""; position:absolute; background-color:#786454; transition:transform 0.25s ease-out, opacity 0.25s ease-out; }
.panel-wrap .panel .icon-panel::before { top:0; left:50%; width:2px; height:100%; margin-left:-1px; }
.panel-wrap .panel .icon-panel::after { top:50%; left:0; width:100%; height:2px; margin-top:-1px; }
.panel-wrap .panel .icon-panel.open::before { transform:rotate(-45deg); opacity: 0;  }
.panel-wrap .panel .icon-panel.open::after {  }

.swiper-container { width: 100%; overflow:hidden;}

.main_sect { position:relative; padding: 6rem 0 4rem;}




/**************************************************
* 1 - main-sect-visual
**************************************************/
.main-section {  background: url(../img/main_visual_img01.jpg) 50% 50% / cover no-repeat; transform: scale(1.05);background-position: center 50%;  animation: bgShow 2.5s ease-out 1s forwards;  position:relative; min-height:576px; max-height:1200px; height:100vh; overflow:hidden; background-attachment: fixed;   background-repeat: no-repeat; background-size: cover;}
/* .main-section { position:relative; min-height:576px; max-height:1200px; height:100vh; overflow:hidden;background: url(../img/main_visual_img01.jpg) 50% 50% / cover no-repeat; } */
.main-section .pc-only { display:block; }
.main-section .mo-only { display:none; }

/* .brand-slide { position:relative; width:100%; height:0; padding-bottom: 56.25%; overflow:hidden; } */
.main_vis {  position: relative; width: 100%; height: 0; overflow: hidden;   padding-bottom: 56.25%;}
/* .main_vis > iframe { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; } */
.main_vis video { width: 100%; height: 100vh; object-fit:cover; transform: scale(1.05); animation: bgShow 2.5s ease-out 1s forwards;}
.main-header {  transform: translateY(-100%);opacity: 0;display: inline-block; transform-origin: center;}
@keyframes bgShow {
    0% { 
		transform: scale(1.05); 
    }

    100% { 
		transform: scale(1);
    }
}
 
strong { font-weight:600;}
.main_vis .tits { position:fixed; left:50%; top:40%; color:#fff;  transform:translateX(-50%); text-align:center;}
.main_vis .tits > p { overflow:hidden;}
.main_vis .tit01 { font-size:3.313rem; font-family: 'Noto Serif KR', serif; }
.main_vis .tit03 { font-size: 1.563rem; font-weight:400; padding-top:1.2rem; letter-spacing: 8px; }
.main_vis .tits > p >span {transform: translateY(100%);animation: txtup 2.5s ease-out 1s forwards; display: inline-block; }
.main_vis .tits.active > p >span {   }

@keyframes txtup {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0%)
    }
}

.mouse-wrap { position:absolute; left:0; right:0; bottom: 7rem; text-align:center; z-index:5; opacity: 0; animation: headshow 2.5s ease-out 1s forwards;}
.mouse-wrap .mouse { position:relative; width:16px; height:25px; margin:0 auto; border-radius:2rem; border:2px solid #fff; }
.mouse-wrap .mouse:after { content:""; position:absolute; top:0; right:0; bottom:0; left:-0.03rem; margin:auto; background-color:#fff; width:5px; height:5px; border-radius:100%; -webkit-animation:trackBallSlide 5s linear infinite; animation:trackBallSlide 5s linear infinite; }

.mouse-wrap .arrow { width:0.75rem; height:0.75rem; display:block; border-bottom:2px solid #fff; border-right:2px solid #fff; transform:rotate(45deg); position:relative; margin:0 auto; }

@-webkit-keyframes trackBallSlide {
  0% {
    opacity: 1;
    transform: scale(1) translateY(-2px);
  }
  6% {
    opacity: 1;
    transform: scale(0.5) translateY(5px);
  }
  14% {
    opacity: 0;
    transform: scale(0.2) translateY(40px);
  }
  15%, 19% {
    opacity: 0;
    transform: scale(0.2) translateY(-2px);
  }
  28%, 29.99% {
    opacity: 1;
    transform: scale(1) translateY(-2px);
  }
  30% {
    opacity: 1;
    transform: scale(1) translateY(-2px);
  }
  36% {
    opacity: 1;
    transform: scale(0.5) translateY(5px);
  }
  44% {
    opacity: 0;
    transform: scale(0.2) translateY(40px);
  }
  45%, 49% {
    opacity: 0;
    transform: scale(0.2) translateY(-2px);
  }
  58%, 59.99% {
    opacity: 1;
    transform: scale(1) translateY(-2px);
  }
  60% {
    opacity: 1;
    transform: scale(1) translateY(-2px);
  }
  66% {
    opacity: 1;
    transform: scale(0.5) translateY(5px);
  }
  74% {
    opacity: 0;
    transform: scale(0.2) translateY(40px);
  }
  75%, 79% {
    opacity: 0;
    transform: scale(0.2) translateY(-2px);
  }
  88%, 100% {
    opacity: 1;
    transform: scale(1) translateY(-2px);
  }
}
@keyframes trackBallSlide {
  0% {
    opacity: 1;
    transform: scale(1) translateY(-2px);
  }
  6% {
    opacity: 1;
    transform: scale(0.5) translateY(5px);
  }
  14% {
    opacity: 0;
    transform: scale(0.2) translateY(40px);
  }
  15%, 19% {
    opacity: 0;
    transform: scale(0.2) translateY(-2px);
  }
  28%, 29.99% {
    opacity: 1;
    transform: scale(1) translateY(-2px);
  }
  30% {
    opacity: 1;
    transform: scale(1) translateY(-2px);
  }
  36% {
    opacity: 1;
    transform: scale(0.5) translateY(5px);
  }
  44% {
    opacity: 0;
    transform: scale(0.2) translateY(40px);
  }
  45%, 49% {
    opacity: 0;
    transform: scale(0.2) translateY(-2px);
  }
  58%, 59.99% {
    opacity: 1;
    transform: scale(1) translateY(-2px);
  }
  60% {
    opacity: 1;
    transform: scale(1) translateY(-2px);
  }
  66% {
    opacity: 1;
    transform: scale(0.5) translateY(5px);
  }
  74% {
    opacity: 0;
    transform: scale(0.2) translateY(40px);
  }
  75%, 79% {
    opacity: 0;
    transform: scale(0.2) translateY(-2px);
  }
  88%, 100% {
    opacity: 1;
    transform: scale(1) translateY(-2px);
  }
}



/**************************************************
* 2 - main_iden
**************************************************/

.main_iden { background: url(../img/main_iden_bg.jpg) 50% 100% / cover no-repeat; padding: 12rem 0 0;}
.main_iden .tit01 { font-size: 2.938rem; text-align:center; font-family: 'perpetua'; }
.main_iden .inner { position: relative; display: flex; justify-content: center; gap: 11rem; margin: 4rem auto 0;}
.main_iden .inner::before { display: block; content:""; width: 22.625rem; height: 25.063rem; background: url(../img/main_iden_logo.png) 50% 50% / 100% no-repeat; position: absolute;top: -5rem;right: 2.5rem;}
.main_iden .imgs {position: relative; }
.main_iden .txts { position: relative; font-family: 'Noto Serif KR', serif; padding-top: 4rem;}
.main_iden .txt01 { font-size: 1.063rem; color:#463f45; font-weight: 500; margin-top: 1.5rem;}
.main_iden .txt01:nth-of-type(1) { margin-top: 0;}
.main_iden .txt02 { font-size: 1.5rem; color:#4f2c52;}
.main_iden .txt01 + .txt02 { margin-top: 1.5rem;} 
.main_iden .img02 { position: absolute; right: -8rem; bottom: 6rem; }
.main_iden .iden_more { margin-top: 2.5rem; font-size: 0.875rem; color:#55305a; font-weight: 600; border-radius:23px; border: 2px solid #725075; display: flex; justify-content: center; gap:0.5rem; width: 15.875rem; height: 2.813rem; align-items: center; font-family: 'SUIT Variable';}
.main_iden .iden_more .arrow { background: url(../img/iden_arrow.png) 50% 50% / 100% no-repeat; width: 1.5rem; height: 0.5rem; }

.rotate-bg { position: absolute; z-index: 2; } 
.rotate-bg img {   animation:rotate 10s linear infinite; } 
@keyframes rotate{
	0%{ transform: rotate(0deg);}
	100%{ transform: rotate(360deg);}
}
.main_iden .rotate-bg {  top: -5rem; left: -4rem;  width: 9.688rem; height: 9.688rem;} 
.main_iden .rotate-bg::before { content:" "; display: block;  position: absolute; left: 50%; top:50%; width: 2.625rem; height: 2.625rem; transform: translate(-50%, -50%);background: url(../img/iden_core.png) 50% 50% / 100% no-repeat;   } 


/**************************************************
* 3 - main_anti
**************************************************/ 
.main_anti {padding: 10rem 0 13rem; position: relative; height: 68.875rem;}
.main_anti .tits {text-align:center;}
.main_anti .tit01 { font-family: 'Noto Serif KR', serif;  font-size: 2.125rem; font-weight: 500;}
.main_anti .tit02 {  font-size: 1.063rem; margin-top: 2rem; line-height: 1.6;}
.main_anti ul { position: relative; display: flex; justify-content: center; gap:1rem; margin:4rem auto 0;}
.main_anti ul::before { content:"DONGAN"; color:#c1bbc2; font-family: 'Perpetua';opacity:0.3; font-size: 8.313rem; position: absolute; left: 5%; top: -28%; }
.main_anti ul::after { content:"ANTI-AGING"; color:#c1bbc2; font-family: 'Perpetua'; opacity:0.3; font-size: 8.313rem; position: absolute; right: 5%; bottom: -28%; }
.main_anti ul li { position: relative; display: flex; align-items: flex-end; color:#fff; width: 9.938rem; height: 34.188rem; transition:0.5s; overflow:hidden;}
.main_anti ul li.thermage { background: url(../img/main_anti_li_bg01.jpg) 67% 50% / cover no-repeat; }
.main_anti ul li.ulthera { background: url(../img/main_anti_li_bg02.jpg) 67% 50% / cover no-repeat; }
.main_anti ul li.therma { background: url(../img/main_anti_li_bg03.jpg) 67% 50% / cover no-repeat; }
.main_anti ul li.titanium { background: url(../img/main_anti_li_bg04.jpg) 67% 50% / cover no-repeat; }
.main_anti ul li.shurink { background: url(../img/main_anti_li_bg05.jpg) 67% 50% / cover no-repeat; }
.main_anti ul li.xerf { background: url(../img/main_anti_li_bg06.jpg) 67% 50% / cover no-repeat; }
.main_anti ul li .txts { height: 100%; position: absolute; top: 2.5rem; left: 1.25rem;  transition:0.3s ease-in-out;}
.main_anti ul li .txts .dn { opacity:0; transition-duration: 0.3s;  transition-timing-function: ease-in-out;  }
.main_anti .txt01 { font-size: 1.563rem; font-weight: 500;}
.main_anti .txt01 .en { font-family: 'Perpetua'; font-size: 1.625rem; }
.main_anti .txt02 { font-size: 1.063rem; }
.main_anti .txt03 { font-size: 1.063rem; line-height: 1.5; }
.main_anti .txt01 + .txt02 { margin-top: 1.3rem;}
.main_anti .txt02 + .txt03 { margin-top: 3rem;}
.main_anti ul li .img {display: block; max-width: unset;  width: 18.438rem; height: 26rem; }
.main_anti ul li.on { width: 42.5rem; justify-content: flex-end;} 
.main_anti ul li.on .txts { left:2.5rem; }
.main_anti ul li.on .txts .dn { opacity:1; transition-delay: 0s;}
.main_anti .anti_more {  font-size: 1rem; color:#fff;  border-radius:1.313rem; border: 1px solid #fff; display: flex; justify-content: center; gap:1rem; width: 9.938rem; height: 2.625rem; align-items: center; font-family: 'SUIT Variable'; position: absolute; bottom:6.5rem;}
.main_anti .anti_more .arrow { background: url(../img/anti_arrow.png) 50% 50% / 100% no-repeat; width: 1.688rem; height: 0.563rem; }


/**************************************************
* 4 - main_special
**************************************************/ 
.main_special { position: relative; height: 100vh; background:#432839; color:#fff; padding: 10rem 0 0 ;}
.sp_progress_wrap { width: 1506px; height: 1px; background: rgba(255,255,255,0.3); display: block; position: absolute; top:36.5rem; left: 50%; transform: translate(-50%, 0); z-index: -1;  }
.sp_progress { width: 0%; height: 1px; background: #fff; display: block; position: absolute; top:0; left: 0;  }
.main_special .tits {text-align:center; margin-bottom: 6rem;	}
.main_special .tit01 { font-family: 'Noto Serif KR', serif;  font-size: 2.125rem; font-weight: 500;}
.main_special .tit02 {  font-size: 1.063rem; margin-top: 2rem; line-height: 1.4; font-weight: 300;}
.main_special .num { font-family: 'Perpetua';  font-size: 2.813rem; font-weight: 500; opacity: 0.4; font-style: italic;} 
.main_special .txt01 { font-family: 'Noto Serif KR';  font-size: 2.188rem; font-weight: 500; margin-bottom: 4.8rem;} 
.main_special .txt02 {  font-size: 1.063rem; line-height: 1.5;  } 
.main_special .txt02 + .txt02 { margin-top: 1rem;}
.main_special .rotate-bg {  top: 8rem; left: 8rem;  width: 12.438rem; height: 12.438rem;} 
.main_special .rotate-bg::before { content:" "; display: block;  position: absolute; left: 50%; top:50%; width: 2.625rem; height: 2.625rem; transform: translate(-50%, -50%);background: url(../img/special_core.png) 50% 50% / 100% no-repeat;   } 
/*  .main_special .cards { position: relative;} 
 .main_special .slide0 { width: 436px; height: 475px;  } 
 .main_special .sp_inner {position: relative;} */
 
/**************************************************
* 5 - main_space
**************************************************/ 
.main_space {padding: 4rem 0 0;  background:#432839; color:#fff; height:100vh; overflow: hidden;}
.main_space .inner { position: relative; overflow:hidden; /*max-width:1920px;*/ margin:2rem auto 0; height: 100%;}
.main_space .inner::before { display: block; content:""; width: 100%; height: 935px;background: url(../img/space_blur.png) 50% 50% / cover no-repeat; position: absolute; bottom:-50%; left:0; z-index: 2;}
.main_space .tits { position: absolute; bottom:6rem; left: 10rem; z-index: 2; line-height: 1.4;}
.main_space .tit02 {  font-size: 1.063rem; font-weight: 300; font-weight: 300;}
.main_space .tit01 { font-family: 'Noto Serif KR', serif;  font-size: 2.125rem; font-weight: 500; margin-top: 2rem; }
.main_space_swiper { height: 100%;}
.main_space_swiper .swiper-slide >img { width: 100%;}
.swiper-button-next:after, .swiper-button-prev:after { display: none;}
.main_space .swiper-button-next { width: 5.625rem; height: 5.625rem; background: url(../img/main_space_next.png) 50% 50% / 100% no-repeat; top:auto; bottom: 6rem; right: 12rem; }
.main_space .swiper-button-prev { width: 5.625rem; height: 5.625rem; background: url(../img/main_space_prev.png) 50% 50% / 100% no-repeat; top:auto; left:auto; bottom: 6rem; right: 19rem;  }


/**************************************************
* 6 - main_way
**************************************************/ 
.main_way { background:#f4f0f4; padding: 10rem 0;  }
.main_way .inner { display: flex; align-items: center; justify-content: center; margin:0 auto;}
.main_way .left { width: calc( 100% - 57.625rem); max-width: 40.625rem;  padding-left: 6rem;  	}
.main_way .left .txts > li {position: relative; }
.main_way .left .txts > li + li { padding-top: 3.375rem ;}
.main_way .left .txts > li + li::before { content:"";display: block; width: 100%; height: 1px; background:rgba(101,101,101,0.2); position: absolute; top:1.7rem;}
.main_way .tit01 { font-family: 'Noto Serif KR', serif;  font-size: 2.125rem; font-weight: 500; line-height: 1.5;}
.main_way .tit02 {  font-size: 1.063rem; margin-top: 1.5rem; font-weight: 600; line-height: 1.5;}
.main_way .left .subtit { color:#432839; font-weight: 600; font-size: 1.75rem; display: flex; align-items: center; gap:0.7rem; margin-bottom: 1.5rem; }
.main_way .left .call_line .subtit {margin-bottom: 0;}
.main_way .sp { font-size: 1.125rem;color:#432839; } 
.main_way .left .subtit i { display: block; width: 1.375rem; height: 1.375rem; background: url(../img/main_way_dia.png) 50% 50% / 100% no-repeat; }
.main_way .txt01 { font-size: 1.125rem; font-weight: 600;} 
.main_way .txt01 + .txt01 { margin-top: 1.5rem;}
.main_way .schedule li + li{ margin-top: 1rem;}
.main_way .daily {display: flex; align-items: center; gap:2rem; font-size: 1.25rem; font-weight: 600;  }
.main_way .day {  width: 4.938rem;display: flex; align-items: center;justify-content: space-between; }
.main_way .time span{ font-size: 1rem; font-weight: 400; display: inline-block; margin-left: 0.2rem; }
.main_way .call {font-size: 2.313rem;font-family: 'Perpetua'; }
.main_way .call_line { display: flex; gap:2rem;}
.main_way .right { width: 57.625rem; height: 45.25rem; position: relative; /*border:1px solid #d2ccd2; border-radius: 1.25rem;*/ overflow: hidden;}
.main_way .map_btn { position: absolute; bottom: 4rem; left: 50%; transform: translate(-50%, 0); display: flex; align-items: center; gap:1rem; }
.main_way .map_btn a { display: block; width: 12.5rem; height: 3.313rem; border-radius: 1.688rem; display: flex; align-items: center; justify-content: center; color:#fff; box-shadow: 1px 2px 5px rgba(50, 55, 20, .1);}
.main_way .map_btn a.kko { background:#d9ba3d;}
.main_way .map_btn a.kko .icon { display: block; width: 1.813rem; height: 1.625rem; margin-right: 0.625rem; background: url(../img/main_way_kko.png) 50% 50% / 100% no-repeat; } 
.main_way .map_btn a.nvr { background:#469c55;}
.main_way .map_btn a.nvr .icon { display: block; width: 1.125rem; height: 1.125rem;margin-right: 0.625rem; background: url(../img/main_way_nvr.png) 50% 50% / 100% no-repeat; }