@charset "utf-8"; /* 시술패키지상세전용 */ /* =========================================================================== */ /* 전용기초값 */ :root{ --proc-side-padding:10%; --proc-inner-padding:var(--padding-4xl); --customProc-side-padding:10%; --customProc-inner-padding:var(--padding-4xl); } @media (min-width:768px) and (max-width:991.98px) { /* 태블릿 only:768px ~ 991.98px 태블릿 전용 스타일 */ :root{ --proc-inner-padding:var(--padding-3xl); --customProc-inner-padding:var(--padding-3xl); } } @media (max-width:767.98px) { :root{ --procs-side-padding:0px; --proc-inner-padding:var(--padding-2xl); --customProc-side-padding:0px; --customProc-inner-padding:var(--padding-2xl); } } /* =========================================================================== */ /* =========================================================================== */ /* =========================================================================== */ /* =========================================================================== */ /* =========================================================================== */ /* 시술상세상단-시술담기영역 */ .detail-form{padding:3rem 0rem;} .detail-form .Inner{} .detail-form fieldset{display:flex; position:relative; flex-direction:column; gap:var(--padding-5xl);} /* 상단 */ .detail-form .section-head{display:flex; position:relative; width:100%; flex-direction:column; gap:var(--padding);} /* 패키지이름정보 */ .packageInfo-title{display:flex; position:relative; flex-direction:column; gap:var(--padding-sm);} .packageInfo-title .subTitle{display:block; font-size:var(--font-size-2xl);} .packageInfo-title .procName{display:block; font-size:var(--font-size-4xl); font-weight:var(--font-weight-bold);} .packageInfo-title .keyword{display:flex; position:relative; flex-wrap:wrap; gap:0px var(--padding); font-size:var(--font-size-lg);} .packageInfo-title .badge{display:inline-block;} /* 컨텐츠 */ .detail-form .section-body{} /* 패키지시술목록 */ .packageTreatment-list{display:flex; position:relative; flex-direction:column; gap:var(--padding-3xl);} .packageTreatment-list li{display:flex; position:relative; flex-direction:column;} .packageTreatment-list .procCard-bar{} /* 시술썸네일-바형태 */ .procCard-bar{display:block; position:relative; width:100%; transform:var(--trasform);} .procCard-bar .inner{display:flex; position:relative; width:100%; flex-direction:row; justify-content:space-between; align-content:center; align-items:center; align-self:center; flex-wrap:wrap; gap:var(--padding); background-color:var(--bg-color); border-radius:var(--border-radius-xl); padding:var(--padding-3xl);transition:var(--transition);} .procCard-bar:hover .inner{box-shadow:var(--box-shadow);} /* 시술정보 */ .procCard-bar .proc-info{display:flex; position:relative; width:100%; flex-direction:row; gap:var(--padding); align-items:flex-start; justify-content:flex-start;} /* 선택영역 word-break:break-all; */ .procCard-bar .label{flex:1; display:flex; position:relative; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:var(--padding); } /* 시술명 */ .procCard-bar .option-info{display:flex; position:relative; flex-direction:column; align-items:flex-start; justify-content:flex-start; align-self:stretch; } .procCard-bar .option-info .title{display:block; position:relative; font-size:var(--font-size-2xl); font-weight:var(--font-weight-bold);} .procCard-bar .option-info .summary{display:block; position:relative; color:var(--font-color-lowlow);} /* 가격 */ .procCard-bar .option-price{display:flex; position:relative; flex-wrap:wrap; flex-direction:row; align-self:flex-start; justify-content:flex-start; gap:var(--padding); font-size:var(--font-size-xl); } .procCard-bar .cost{display:flex; position:relative; flex-direction:row; align-items:center; justify-content:flex-end; padding-top:var(--padding-xs);} .procCard-bar .cost del{position:relative; color:var(--font-color-lowlow); text-align:right; } .procCard-bar .cost span{} .procCard-bar .price{display:flex; position:relative; flex-direction:row; align-items:center; justify-content:flex-end; font-weight:var(--font-weight-bold);} .procCard-bar .price p{position:relative; } .procCard-bar .price span{} .procCard-bar .counsel{display:flex; position:relative; align-items:center; justify-content:flex-end; font-weight:var(--font-weight-semibold);} /* 상담후결정&내원후결정 문구넣을때 */ .procCard-bar .counsel p{} /* 버튼 */ .procCard-bar .option-btn{display:flex; position:relative; flex-direction:column; justify-content:flex-end; align-self:center;} .procCard-bar .option-btn .Btn{} .procCard-bar .option-btn .Btn + .Btn{margin-left:0px;} .procCard-bar .selectBtn{} /* 시술선택(packageBtnCls1) */ .procCard-bar .button-done{} /* doneBtn(packageBtnCls2) */ @media (max-width:767.98px) { /* 시술상세상단-시술담기영역 */ .detail-form{padding:0px;} .detail-form .Inner{padding:0px;} .detail-form fieldset{gap:0px;} /* 상단 */ .detail-form .section-head{padding:var(--padding-xl);} /* 패키지이름정보 */ .packageInfo-title{} .packageInfo-title .subTitle{font-size:var(--font-size-xl);} .packageInfo-title .procName{ont-size:var(--font-size-2xl);} .packageInfo-title .keyword{font-size:var(--font-size);} .packageInfo-title .badge{} /* 컨텐츠 */ .detail-form .section-body{padding:var(--padding-xl); box-shadow:var(--box-shadow-in);} /* 패키지시술목록 */ .packageTreatment-list{ gap:var(--padding-lg);} .packageTreatment-list .procCard-bar{} /* 시술썸네일-바형태 */ .procCard-bar{} .procCard-bar .inner{padding:var(--padding-2xl);} /* 시술정보 */ .procCard-bar .proc-info{} /* 선택영역 */ .procCard-bar .label{} /* 시술명 */ .procCard-bar .option-info{} .procCard-bar .option-info .title{font-size:var(--font-size-xl);} .procCard-bar .option-info .summary{} /* 가격 */ .procCard-bar .option-price{font-size:var(--font-size-lg);} .procCard-bar .cost{} .procCard-bar .cost del{} .procCard-bar .cost span{display:none;} .procCard-bar .price{} .procCard-bar .price p{} .procCard-bar .price span{} .procCard-bar .counsel{} .procCard-bar .counsel p{} /* 버튼 */ .procCard-bar .option-btn{} .procCard-bar .option-btn .Btn{} .procCard-bar .option-btn .Btn + .Btn{} .procCard-bar .selectBtn{} .procCard-bar .button-done{} } /* =========================================================================== */ /* [시술상세] 시술담기 */ .optionsSider{display:block; position:relative; width:100%; z-index:calc( var(--z-index-top) - 1);} .optionsSider.is-close{} .optionsSider.is-open{} .optionsSider .optionsSider-container{display:block; position:relative; width:100%; background-color:var(--bg-color-light); box-shadow:var(--box-shadow); border-radius:var(--border-radius-lg) var(--border-radius-lg) 0px 0px;} .optionsSider .optionsSider-container .Inner{} /* [별도설정]하단고정일때 */ .optionsSider-quick{position:fixed; bottom:0px; z-index:calc( var(--z-index-high) - 5 );} .optionsSider-quick .optionsSider-content .selected-options{} .optionsSider-quick .optionsSider-head .customSelect .select-options{position:relative;} /* 상단 */ .optionsSider .innerSection-top{display:flex; position:relative; flex-direction:column; padding:var(--padding-xl) 0px;} .optionsSider .innerSection-top::after{content:''; position:absolute; left:0%; right:0%; bottom:0%; width:100%; border-bottom:var(--border);} /* 종합값표기 */ .optionsSider-total{display:flex; position:relative; justify-content:space-between; align-items:center; width:100%; flex-direction:row; gap:var(--padding-lg); } .optionsSider-total .Left{flex:1; display:flex; position:relative;} .optionsSider-total .Right{display:flex; position:relative;} /* 선택한시술단순화표기 */ .selected-total-simple{display:flex !important; position:relative; width:100%; flex-direction:row; align-items:center; gap:var(--padding-lg); cursor:pointer;} .selected-total-simple dt{display:flex; position:relative; align-items:center; padding-right:var(--padding);} .selected-total-simple dt .icon{height:var(--icon-size-xl);} .selected-total-simple dt .badge{display:inline-flex; justify-content:center; align-items:center; position:absolute; right:0px; top:0px; aspect-ratio:1; color:var(--font-color-light); font-size:var(--font-size-xs); line-height:1rem; border-radius:var(--border-radius-max); background-color:var(--primary); padding:0px var(--padding);} .selected-total-simple dd{flex:1; display:flex; position:relative; flex-direction:column; font-size:var(--font-size-xl);} .selected-total-simple .infoText{display:block; position:relative; } .selected-total-simple .title{display:block; position:relative;} .selected-total-simple .total{display:block; position:relative; color:var(--primary); font-size:var(--font-size-2xl); font-weight:var(--font-weight-bold);} /* 열림상태에맞춘-별도설정 */ .optionsSider.is-close .innerSection-top{} .optionsSider.is-open .innerSection-top{} /* [별도설정]하단고정일때 */ /* 짧게만들기(퀵과의겹칩으로인한) */ .optionsSider-quick{width:auto; left:50%; transform:translateX(-50%);} .optionsSider-quick .innerSection-top{padding: var(--padding-xl);} @media (max-width: 1440px) and (min-width: 990px) { /* 990px ~ 1440px 범위 = Inner가 길어거 버튼 잘림현상을 위한 설정 */ /* [시술상세] 시술담기 */ .optionsSider{} /* [별도설정]하단고정일때 */ .optionsSider-quick{width:100%;} .optionsSider-quick .Inner{width:100%;} /* 상단 */ .optionsSider .innerSection-top{padding:var(--padding);} } @media (min-width: 768px) and (max-width: 991.98px) { /* [별도설정]하단고정일때 */ .optionsSider-quick{width:100%;} /* 상단 */ .optionsSider-container .innerSection-top{padding:var(--padding);} } @media (max-width:767.98px) { /* [별도설정]하단고정일때 */ .optionsSider-quick{width:100%;} /* 상단 */ .optionsSider-container .innerSection-top{padding:var(--padding) var(--padding-2xl);} /* 종합값표기 */ .optionsSider-total{} .optionsSider-total .Left{} .optionsSider-total .Right{} /* 선택한시술단순화표기 */ .selected-total-simple{} .selected-total-simple dt{} .selected-total-simple .thum{} .selected-total-simple .thum img{} .selected-total-simple dd{font-size:var(--font-size);} .selected-total-simple .infoText{} .selected-total-simple .title{} .selected-total-simple .total{font-size:var(--font-size-lg)} } /* 하단 */ .optionsSider .innerSection-botton{display:flex; position:relative; flex-direction:column; padding:0px;} /* 시술선택(하단고정) - 토글타겟!!! */ .optionsSider-form{display:flex; position:relative; flex-direction:column; display:none;} /* 일단숨김(스크립트에서숨김처리되었으나깜박힘현상방지용입력) */ /* 열고닫기(토글버튼) - 상단토글버튼숨김 */ .optionsSider-top{display:flex; position:relative; justify-content:center; align-items:center; display:none;} .optionsSider-top .button{display:inline-flex; position:relative; color:var(--font-color-light); border-radius:0px 0px var(--border-radius-lg) var(--border-radius-lg); background-color:var(--primary); padding:0px var(--padding-xl); cursor:pointer;} .optionsSider-top .toggleIcon{display:inline-flex; align-items:center; transition:var(--transition-time); overflow:hidden;} .optionsSider-top .toggleIcon .icon{} .optionsSider.is-open .optionsSider-top .toggleIcon{transform:rotate(180deg);} /* 열고닫기 */ /* 컨탠츠 */ .optionsSider-content{display:flex; position:relative; width:100%; flex-direction:row; gap:var(--padding-2xl); padding:var(--padding) var(--padding-lg);} /* 옵션관련 */ .optionsSider-content .Left{flex:1; display:flex; position:relative; flex-direction:column;} /* 옵션선택 - 현재사용하지않으나 추후사용예상되므로 인라인에서 숨김 */ .optionsSider-head{display:block; position:relative;} .optionsSider-head .customSelect{} .optionsSider-head .customSelect .select-header{} .optionsSider-head .customSelect .select-options{} /* 선택된옵션 */ .optionsSider-body{display:flex; position:relative; flex-direction:column;} /* 선택된시술(선택한시술팩) */ .optionsSider .selected-options.procSelectPack{} .optionsSider .procSelectPack{} .optionsSider .procSelectPack dd{max-height:22dvh;} /* 선택된시술목록최대높이 */ .optionsSider .selected-options{flex:1; display:flex; position:relative; flex-direction:column; } .optionsSider .selected-options .List{display:flex; position:relative; flex-direction:column;} .optionsSider .selected-options .List li{display:block; position:relative;} .optionsSider .selected-options .List li + li::before{content:''; display:block; position:absolute; left:0px; right:0px; top:0px; width:100%; border-top:var(--border);} .optionsSider .selected-options .procCard{padding:var(--padding);} .optionsSider .selected-options .procCard .cost{display:none;} /* 원가숨기기 */ /* 금액과버튼 */ .optionsSider-content .Right{flex-basis:40%; display:flex; position:relative; flex-direction:column; justify-content:flex-end; background-color:var(--bg-color);} .optionsSider-bottom{display:flex; position:relative; flex-direction:column; justify-content:center; align-items:center; gap:var(--padding-xl); padding:var(--padding-lg) var(--padding-2xl);} /* 총결제예정금액 */ .optionsSider .bookReport{} .optionsSider .bookReport .inner{background-color:var(--bg-color); } .optionsSider .bookReport::before{content:''; display:block; position:absolute; left:0px; right:0px; top:0px; width:100%; border-top:var(--border); z-index:var(--z-index);} .optionsSider .bookReport .innerBox{} .optionsSider .bookReport .cautionText{} /* 버튼영역 */ .optionsSider .Submit{display:flex; position:relative; width:100%; justify-content:center; gap:var(--padding);} .optionsSider .Submit .Btn{flex:1; display:flex; letter-spacing:-1px;} .optionsSider .Submit .Btn + .Btn{margin-left:0px;} .optionsSider .Submit .Btn.buttonLeft{padding:0px !important;} .optionsSider .Submit .Btn p{ width:100%; height:100%; justify-content:center; align-items:center; padding:var(--padding) var(--padding-lg);} .optionsSider .togglBtn{} .optionsSider .openBtn{display:flex;} .optionsSider .closeBtn{display:none;} /* 일단숨김 */ /* [별도설정]열림상태에맞춘 */ .optionsSider.is-close .innerSection-botton{} .optionsSider.is-open .innerSection-botton{} @media (min-width: 768px) and (max-width: 991.98px) { /* 하단 */ .optionsSider .innerSection-botton{} /* 시술선택(하단고정) - 토글타겟!!! */ .optionsSider-form{} /* 컨탠츠 */ .optionsSider-content{} /* 옵션관련 */ .optionsSider-content .Left{} /* 선택된옵션 */ .optionsSider-body{} /* 선택된시술(선택한시술팩) */ .optionsSider .selected-options.procSelectPack{} .optionsSider .procSelectPack{} .optionsSider .procSelectPack dd{} /* 선택된시술목록최대높이 */ /* 금액과버튼 */ .optionsSider-content .Right{flex-basis: 44%;} /* 총결제예정금액 */ .optionsSider .bookReport{} .optionsSider .bookReport .inner{} } @media (max-width:767.98px) { /* 하단 */ .optionsSider .innerSection-botton{} /* 컨탠츠 */ .optionsSider-content{flex-direction:column; gap:0px;} /* 옵션관련 */ .optionsSider-content .Left{} /* 선택된옵션 */ .optionsSider-body{} /* 선택된시술(선택한시술팩) */ .optionsSider .selected-options.procSelectPack{} .optionsSider .procSelectPack{} .optionsSider .procSelectPack dd{max-height:20dvh;} /* 선택된시술목록최대높이 */ .optionsSider-quick .procSelectPack dt{padding:0px;} /* 금액과버튼 */ .optionsSider-content .Right{background:none; } .optionsSider-bottom{gap:var(--padding-lg); padding:0px;} } /* pc&모바일교차설정 */ @media (min-width:768px) { .optionsSider .bookReport::before{display:none;} } @media (max-width:767.98px) { } /* =========================================================================== */ /* =========================================================================== */ /* =========================================================================== */ /* =========================================================================== */ /* 기본공통시술상세 */ .procedureWrap{} .procedureWrap .Container{padding:0px;} .procedureWrap .contentWrap{} .procedureWrap .quickArea{} .procedureWrap .quickArea-left{} /* 레이아웃 */ .detail-container{display:block; position:relative;} .detail-container .Inner{} .detail-head{display:flex; position:relative; width:100%; flex-direction:column;} .detail-form{display:flex; position:relative; width:100%; flex-direction:column;} .detail-body{display:flex; position:relative; width:100%; flex-direction:column;} /* =========================================================================== */ /* 상딘 */ .detail-head{} /* 상딘정보영역 */ .detail-head .procSHeadSeciton{} .procSHeadSeciton{display:flex; position:relative; flex-direction:column; justify-content:center; align-items:center; background-repeat:no-repeat; background-position:center center; background-size:auto 100%; background:none;} .procSHeadSeciton::after{content:''; display:block; position:absolute; left:0px; right:0px; bottom:0px; width:100%; border-bottom:var(--border);} /* 키비쥬얼 */ .procSHead-keyvisual{display:block; position:relative; width:100%; overflow:hidden;} .procSHead-keyvisual img{display:block; position:relative; width:100%; object-fit:cover; } /* 애니메이션 animation:keyvisualani-scale 22s ease-in-out infinite alternate; */ @keyframes keyvisualani-scale{ 0%{opacity:1; transform:scale(1.2);} 50%{opacity:1; transform:scale(1);} 100%{opacity:1; transform:scale(1.2);} } /* --------------------------------------------------------------------------- */ /* [템플릿] 주요정보tem01-영역 */ .procTem-baseInfo01-list{display:inline-flex; position:absolute; left:0px; top:0px; bottom:0px; max-width:10%; z-index:var(--z-index); flex-direction:column; justify-content:center; align-items:center;} .procTem-baseInfo01-list .List{display:inline-flex; position:relative; flex-direction:column; border-radius:0px var(--border-radius-lg) var(--border-radius-lg) 0px; background-color:var(--bg-color-light);} .procTem-baseInfo01-list .List li{flex:1; display:flex; position:relative; flex-direction:column; padding:var(--padding-2xl) var(--padding-lg);} .procTem-baseInfo01-list .List li + li::before{content:''; display:block; position:absolute; left:30%; right:30%; top:0px; border-top:var(--border);} /* [템플릿] 주요정보tem01 */ .procTem-baseInfo01{display:block; position:relative;} .procTem-baseInfo01 .info{display:flex; position:relative; flex-direction:column; justify-content:center; align-items:center; text-align:center;} .procTem-baseInfo01 p{display:flex; position:relative; flex-direction:row; justify-content:center; align-items:center;} .procTem-baseInfo01 .icon{height:var(--icon-size-lg);} .procTem-baseInfo01 .title{display:flex; position:relative; flex-direction:column;} .procTem-baseInfo01 .entry{display:block; position:relative; color:var(--font-color-lowlow); font-size:var(--font-size-sm);} .procTem-baseInfo01 .field{display:block; position:relative; font-size:var(--font-size-xl); font-weight:var(--font-weight-bold);} @media (max-width:991.98px){ /* [템플릿] 주요정보tem01-영역 */ .procTem-baseInfo01-list{display:flex; position:relative; max-width:100%; width:100%; } .procTem-baseInfo01-list .List{width:100%; flex-direction:row; border-radius:0px; background-color:var(--secondary-10);} .procTem-baseInfo01-list .List li{padding:var(--padding);} .procTem-baseInfo01-list .List li + li::before{left:0%; right:auto; top:30%; bottom:30%; border-top:none; border-right:var(--border);} /* [템플릿] 주요정보tem01 */ .procTem-baseInfo01{} .procTem-baseInfo01 .field{font-size:var(--font-size-sm);} } /* =========================================================================== */ /* [템플릿] 기본세션 */ .procSection{display:flex; position:relative; flex-direction:column; gap:var(--padding-5xl); width:100%; padding:14rem 0rem; overflow:hidden;} .procSection > .Inner{display:flex; position:relative; flex-direction:column; justify-content:center; align-items:center; align-self:stretch; gap:8rem; } .procSection .Inner{padding-left:var(--proc-inner-padding); padding-right:var(--proc-inner-padding);} .procSection-head{display:flex; position:relative; flex-direction:column; width:100%;} .procSection-body{display:flex; position:relative; flex-direction:column; width:100%;} /* 이미지전용영역(각세션에등록된 이미지노출) */ .procSection-image{display:flex; position:relative; flex-direction:column; width:100%;} .procSection-image img{display:block; position:relative; width:100%;} /* --------------------------------------------------------------------------- */ /* [템플릿]타이틀 */ .procTem-headTitle{display:flex; position:relative; flex-direction:column; justify-content:center; align-items:center; align-self:stretch; text-align:center;} .procTem-headTitle .small-title{position:relative; align-self:stretch; color:var(--primary); font-size:var(--font-size-2xl); font-family:var(--font-family-sub3); font-weight:var(--font-weight);} /* text-transform:uppercase; */ .procTem-headTitle .section-title{position:relative; align-self:stretch; font-size:var(--font-size-5xl); line-height:var(--line-height-xs); font-weight:var(--font-weight-bold);} @media (max-width:767.98px) { .procTem-headTitle{} .procTem-headTitle .small-title{font-size:var(--font-size-xl); } .procTem-headTitle .section-title{font-size:var(--font-size-4xl);} } /* --------------------------------------------------------------------------- */ /* [템플릿] 세션의풀이미지 */ .fullimgSeciton{padding:0px;} .fullimgSeciton img{display:block; position:relative; width:100%;} /* --------------------------------------------------------------------------- */ /* [템플릿] 템플릿용배너 */ .procBanner{display:flex; position:relative; flex-direction:column; gap:var(--padding-4xl);} /* 롤링배너이미지 */ .procBanner{} .procBanner.swiper-inactive{} /* 비활성화 */ .procBanner.swiper-active{} /* 활성화 */ .procBanner .swiper{} .procBanner .swiper-wrapper{} .procBanner .swiper-slide{} .procBanner a{display:block; position:relative;} /* 활성화에따른 별도조정 */ /* Swiper(=롤링비활성) */ .procBanner.swiper-inactive{} .procBanner.swiper-inactive .swiper-wrapper{display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--padding-3xl);} .procBanner.swiper-inactive .swiper-pagination-typeA{display:none;} /* Swiper(=롤링활성화) */ .procBanner.swiper-active{} .procBanner.swiper-active .swiper-wrapper{} .procBanner.swiper-active .swiper-pagination-typeA{} @media (max-width:767.98px) { /* [템플릿] 템플릿용배너 */ .procBanner{} /* 롤링배너이미지 */ .procBanner{} /* 활성화에따른 별도조정 */ /* Swiper(=롤링비활성) */ .procBanner.swiper-inactive{} .procBanner.swiper-inactive .swiper-wrapper{grid-template-columns:repeat(2, 1fr); gap:var(--padding-xl);} .procBanner.swiper-inactive .swiper-pagination-typeA{} /* Swiper(=롤링활성화) */ .procBanner.swiper-active{} .procBanner.swiper-active .swiper-wrapper{} .procBanner.swiper-active .swiper-pagination-typeA{} } /* --------------------------------------------------------------------------- */ /* 기본설명 */ .detail-body .procbasicSection{} .procbasicSection{padding:0px;} .procbasicSection .Inner{padding:0px;} .procbasicSection pre{} .procbasicSection pre img{width:100% !important;} /* 영상삽입 */ .detail-body .procMovieSection{} .procMovieSection{padding:0px;} .procMovieSection .Inner{padding:0px;} /* --------------------------------------------------------------------------- */ /* 의료진소개 */ .drSection{} .drSection .Inner{} .drSection .procSection-body{} .drSection .List{display:grid; position:relative; width:100%; grid-template-columns:repeat(4, 1fr); gap:var(--padding-4xl) var(--padding-2xl) ; } .drSection .List li{display:block; position:relative; } .drSection .List .procTem-process01{} @media (min-width: 768px) and (max-width: 991.98px) { /* 의료진소개 */ .drSection{} .drSection .Inner{} .drSection .procSection-body{} .drSection .List{grid-template-columns:repeat(3, 1fr);} .drSection .List li{} .drSection .List .procTem-process01{} } @media (max-width:767.98px) { /* 의료진소개 */ .drSection{} .drSection .Inner{} .drSection .procSection-body{} .drSection .List{grid-template-columns:repeat(2, 1fr); gap:var(--padding-2xl) var(--padding-xl) ; } .drSection .List li{} .drSection .List .procTem-process01{} } /* grid-template-columns: repeat(auto-fill, minmax(23%, 1fr)); justify-content: space-between; row-gap: 30px; */ /* --------------------------------------------------------------------------- */ /* 시술과정 */ .processSection{} .processSection .Inner{} .processSection .procSection-body{} .processSection .List{display:grid; position:relative; width:100%; grid-template-columns:repeat(3, 1fr); gap:var(--padding-4xl); } .processSection .List li{display:block; position:relative; } .processSection .List .procTem-process01{} /* [템플릿]시술과정tem01 */ .procTem-process01{display:block; position:relative; width:100%;} .procTem-process01 .inner{display:flex; position:relative; flex:1; flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:var(--padding-lg); padding:var(--padding) var(--padding-3xl);} .procTem-process01 .inner::before{content:''; display:block; position:absolute; left:0px; top:0px; bottom:0px; height:100%; border-left:var(--border);} .procTem-process01 .num{position:relative; font-size:var(--font-size-4xl);} .procTem-process01 .cont{display:flex; position:relative; flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:var(--padding); align-self:stretch;} .procTem-process01 .title{position:relative; font-size:var(--font-size-2xl); font-weight:var(--font-weight-semibold);} .procTem-process01 .summary{position:relative; color:var(--font-color-low); font-size:var(--font-size-lg);} @media (max-width:767.98px) { /* [템플릿]시술과정 */ .processSection{} .processSection .Inner{} .processSection .procSection-body{} .processSection .List{grid-template-columns:repeat(2, 1fr); gap:var(--padding-lg); } } /* --------------------------------------------------------------------------- */ /* 추천대상 */ .targetSeciton{background-color:var(--secondary-10);} .targetSeciton .Inner{} .targetSeciton .procSection-body{} .targetSeciton .List{display:grid; position:relative; width:100%; grid-template-columns:repeat(3, 1fr); gap:var(--padding-4xl); } .targetSeciton .List li{display:block; position:relative;} .targetSeciton .List .procTem-process01{} .targetSeciton::after{content:''; display:block; position:absolute; left:50%; margin-left:28%; bottom:0%; height:70%; aspect-ratio:0.85625; background:url('/assets/images/sub/targetSeciton_bg01.png') center bottom / cover no-repeat; display:none;} /* 숨김처리20250929 */ @media (max-width:767.98px) { /* 추천대상 */ .targetSeciton{} .targetSeciton .List{grid-template-columns:repeat(2, 1fr); gap:var(--padding-xl); } .targetSeciton::after{left:50%; margin-left:18%; bottom:0%; height:20%;} } /* [템플릿]추천대상tem01 */ .procTem-target01{display:block; position:relative; width:100%; height:100%;} .procTem-target01 .inner{display:flex; position:relative; width:100%; height:100%; flex-direction:column; justify-content:center; align-items:center; gap:var(--padding-lg); text-align:center; border-radius:var(--border-radius-xl); background-color:var(--bg-color-light); padding:var(--padding-3xl); box-shadow:var(--box-shadow);} .procTem-target01 .deco{display:inline-flex; position:relative; flex-direction:row; justify-content:flex-start; align-items:center; aspect-ratio:1; border-radius:var(--border-radius-lg); background:var(--primary); padding:var(--padding);} .procTem-target01 .iconBox{display:inline-flex; position:relative; height:var(--icon-size-sm); aspect-ratio:1; overflow:hidden; background-image:url("data:image/svg+xml;utf8,"); background-size:contain; background-repeat:no-repeat; background-position:center;} .procTem-target01 .summary{display:block; position:relative; font-size:var(--font-size-xl); font-weight:var(--font-weight-semibold);} .procTem-linkBtn .arrow{display:inline-block; width:var(--icon-size-lg); aspect-ratio:35 /20; background-color:#a96b7c; transition:background-color 0.4s ease;} .procTem-linkBtn p::before{content:""; position:absolute; top:0px; left:0px; bottom:0px; width:0%; height:100%; background-color:#a96b7c; border-radius:var(--border-radius-2xl); transition:width 0.5s ease ; z-index:0;} @media (max-width:767.98px) { /* [템플릿]추천대상tem01 */ .procTem-target01{} .procTem-target01 .inner{padding:var(--padding-xl);} } /* --------------------------------------------------------------------------- */ /* 시술전후사진 */ .bnfimgSeciton{} .bnfimgSeciton .Inner{} .bnfimgSeciton .procSection-body{} /* 시술전후사진롤링배너 */ .bnfimgSeciton .bnfBanner{display:flex; position:relative; width:1000px; flex-direction:column; gap:var(--padding-lg); margin:auto;} .bnfimgSeciton .bnfBanner .mainSwiper{} .bnfimgSeciton .bnfBanner .thumbsSwiper{} .bnfimgSeciton .bnfBanner .swiper-pagination-typeA{} /* 롤링배너 */ .bnfimgSeciton .bnfBanner{} /* Swiper(=롤링비활성) */ .bnfimgSeciton .procBanner.swiper-inactive{} /* Swiper(=롤링활성화) */ .bnfimgSeciton .procBanner.swiper-active{} @media (max-width:767.98px) { /* 시술전후사진롤링배너 */ .bnfimgSeciton .bnfBanner{width:100%;} } /* [템플릿]시술전후tem01 */ .procTem-bnf01{display:block; position:relative; width:100%; margin:auto;} .procTem-bnf01 .inner{display:flex; position:relative; flex-direction:column; justify-content:flex-start; align-items:center; gap:var(--padding-3xl);} /* 전후이미지 */ .procTem-bnf01 .img-cont{display:flex; position:relative; width:100%; flex-direction:row; justify-content:flex-start; align-items:center; gap:var(--padding-xl); align-self:stretch;} .procTem-bnf01 .cont{display:flex; position:relative; flex-direction:column; justify-content:flex-start; align-items:flex-start; flex:1;} .procTem-bnf01 .thum{display:flex; position:relative; flex-direction:row; justify-content:flex-start; align-items:center; align-self:stretch; border-radius:var(--border-radius-xl); aspect-ratio:var(--image-ratio-bnf); overflow:hidden;} .procTem-bnf01 .thum img{display:block; position:relative; width:100%;} .procTem-bnf01 .textbox{display:flex; position:absolute; left:0px; right:0%; bottom:0%; width:100%; flex-direction:row; justify-content:flex-start; align-items:center; gap:var(--padding); padding:var(--padding-lg) var(--padding-2xl);} .procTem-bnf01 .label{position:relative; color:var(--bg-color-light); font-size:var(--font-size-2xl); font-weight:var(--font-weight-bold);} .procTem-bnf01 .date{position:relative; color:var(--bg-color-light); font-size:var(--font-size-2xl); font-weight:var(--font-weight-bold); display:none;} .procTem-bnf01 .deco{display:flex; position:absolute; left:50%; top:50%; translate:-50% -50%; flex-direction:row; justify-content:center; align-items:center; } .procTem-bnf01 .deco span{display:flex; position:relative; align-items:center; aspect-ratio:1; color:var(--font-color-light); background-color:var(--primary); border-radius:var(--border-radius-max); padding:var(--padding-sm);} .procTem-bnf01 .deco .icon{height:var(--icon-size-lg);} /* 각도탭 */ .procTem-bnf01 .tabMenuList{display:flex; position:relative; width:100%; flex-direction:row; justify-content:center; align-items:center; background-color:var(--secondary-30); border-radius:var(--border-radius-lg); padding:var(--padding-3xl);} /* 시술정보 */ .procTem-bnf01 .subject{display:flex; position:relative; flex-direction:row; justify-content:center; align-items:center; gap:var(--padding-xl); font-size:var(--font-size-xl);} .procTem-bnf01 .subject .branch{position:relative; font-weight:var(--font-weight-bold); padding-right:var(--padding-xl);} .procTem-bnf01 .subject .branch::after{content:''; display:block; position:absolute; right:0px; top:50%; margin-top:-10%; height:50%; border-right:var(--border);} .procTem-bnf01 .subject .category{position:relative; color:var(--font-color-low);} /* 썸네일용 */ .procTem-bnf01thum{cursor:pointer;} .procTem-bnf01thum .img-cont{border:4px solid transparent; border-radius:var(--border-radius-lg);} .procTem-bnf01thum .textbox{display:none;} .procTem-bnf01thum .subject{display:none;} .swiper-slide-thumb-active .procTem-bnf01thum .img-cont{border-color:var(--primary)} .bnfimgSeciton .bnfBanner .swiper-slide-thumb-active{} /* --------------------------------------------------------------------------- */ /* 시술효과권장주기 */ .effectSeciton{background-color:var(--secondary-20);} .effectSeciton .Inner{} .effectSeciton .Inner:last-child{} .effectSeciton .procSection-body{} .effectSeciton .List{display:grid; position:relative; width:100%; grid-template-columns:repeat(3, 1fr); gap:var(--padding-4xl); } .effectSeciton .List li{display:block; position:relative;} .effectSeciton .procTem-effect01{width:100%;} /* 레이아웃 */ .effectCont{display:flex; position:relative; width:100%; flex-direction:row; align-items:flex-end; gap:var(--padding-4xl);} .effectCont .Left{flex-basis:30%; width:30%; display:block; position:relative;} /* 배너때문에 정확한 width줘야함 */ .effectCont .Left::after{content:''; display:block; position:absolute; right:calc(-1 * var(--padding-4xl) / 2); top:0px; bottom:0px; height:100%; border-right:var(--border);} .effectCont .Right{flex-basis:70%; width:70%; display:block; position:relative;} .effectBanner{} .effectBanner .swiper-slide{} /* 롤링배너 */ .effectSeciton .effectBanner{} .effectSeciton .swiper-pagination-typeA{} @media (max-width:767.98px) { /* 시술효과권장주기 */ .effectSeciton{} /* 레이아웃 */ .effectCont{flex-direction:column; } .effectCont .Left{width:100%;} .effectCont .Left::after{display:none;} .effectCont .Right{width:100%;} } /* [템플릿]시술효과tem01 */ .procTem-effect01{display:block; position:relative; width:100%;} .procTem-effect01 .inner{display:flex; position:relative; height:36rem; flex-direction:column; justify-content:space-between; gap:var(--padding-lg); border-radius:var(--border-radius-xl); background-color:var(--bg-color-light); padding:var(--padding-3xl);} .procTem-effect01 .inner > *{flex:1;} .procTem-effect01 .title-box{display:flex; position:relative; flex-direction:row; justify-content:flex-start; align-items:flex-start; align-self:stretch; gap:var(--padding-sm); color:var(--primary); font-size:var(--font-size-4xl);} .procTem-effect01 .title{} .procTem-effect01 .num{display:none;} .procTem-effect01 .summary{display:flex; position:relative; align-items:flex-end; font-size:var(--font-size-xl); align-self:stretch;} /* 권장주기 */ .procTem-effect01.cycle{} .procTem-effect01.cycle .inner{color:var(--font-color-light); background-color:var(--primary);} .procTem-effect01.cycle .title-box{color:inherit;} @media (max-width:767.98px) { /* [템플릿]시술효과tem01 */ .procTem-effect01{} .procTem-effect01 .inner{height:30rem; padding:var(--padding-xl);} /* 권장주기 */ .procTem-effect01.cycle{} .procTem-effect01.cycle .inner{height:auto; gap:var(--padding-4xl); } } /* --------------------------------------------------------------------------- */ /* 질문답변 */ .qnaSeciton{background-color:var(--secondary-5);} .qnaSeciton .procSection-body{} .qnaSeciton .accordion-list{display:flex; position:relative; width:100%; flex-direction:column; gap:var(--padding-3xl); } .qnaSeciton .accordion-list li.accordion-item{display:block; position:relative;} .qnaSeciton .accordion-list .is-open .procTem-qna01 dl{border-color:var(--primary);} /* [템플릿]질문답변qna01 */ .procTem-qna01{display:block; position:relative; width:100%;} .procTem-qna01 dl{display:flex; position:relative; flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:var(--padding); border:2px solid var(--border-color); border-radius:var(--border-radius-xl); background-color:var(--bg-color-light); padding:var(--padding-3xl);} .procTem-qna01 dt{display:flex; position:relative; flex-direction:row; justify-content:flex-start; align-items:center; gap:var(--padding-lg); align-self:stretch;} .procTem-qna01 .question{flex:1; display:flex; position:relative; flex-direction:row; justify-content:flex-start; align-items:center; gap:var(--padding);} .procTem-qna01 .title{display:flex; position:relative; align-items:center; font-size:var(--font-size-xl); font-weight:var(--font-weight-semibold);} .procTem-qna01 .title span{color:var(--primary); font-size:var(--font-size-3xl); font-weight:var(--font-weight-semibold);} .procTem-qna01 .button{display:flex; position:relative; flex-direction:row; justify-content:flex-start; align-items:center; } .procTem-qna01 .button span{display:inline-block; position:relative; border-radius:var(--border-radius-max); background-color:var(--primary); padding:var(--padding-sm); overflow:hidden;} .procTem-qna01 .icon{color:var(--font-color-light); width:var(--icon-size);} .procTem-qna01 dd{display:flex; position:relative; flex-direction:row; justify-content:flex-start; align-items:flex-start; align-self:stretch;} .procTem-qna01 .answer{position:relative; font-size:var(--font-size-lg); flex:1;} /* --------------------------------------------------------------------------- */ /* 주의사항 */ .cautionSeciton{background-color:var(--secondary-20);} .cautionSeciton .Inner{} .cautionSeciton .procSection-body{gap:var(--padding-3xl);} .cautionSeciton .List{display:grid; position:relative; width:100%; grid-template-columns:repeat(3, 1fr); gap:var(--padding-4xl);} .cautionSeciton .List li{display:block; position:relative;} .cautionSeciton .List .procTem-caution01{height:100%;} .cautionSeciton .List ~ .caution-list{} @media (max-width:767.98px) { /* 주의사항 */ .cautionSeciton{} .cautionSeciton .Inner{} .cautionSeciton .procSection-body{gap:var(--padding-xl);} .cautionSeciton .List{grid-template-columns:repeat(1, 1fr); gap:var(--padding-xl);} .cautionSeciton .List li{} .cautionSeciton .List .procTem-caution01{} .cautionSeciton .List ~ .caution-list{} } /* [템플릿]주의사항tem01 (이미지아이콘사용중단) */ .procTem-caution01{display:flex; position:relative; flex-direction:column; justify-content:flex-start; align-items:center;} .procTem-caution01 dl{display:flex; position:relative; flex-direction:column; justify-content:center; align-items:center; align-self:stretch; gap:var(--padding-3xl); height:100%; border-radius:var(--border-radius-xl); background-color:var(--bg-color-light); padding:var(--padding-3xl);} .procTem-caution01 dt{display:flex; position:relative; flex-direction:row; justify-content:center; align-items:center; align-self:stretch; display:none;} .procTem-caution01 .deco{display:flex; position:relative; width:15rem; aspect-ratio:1; flex-direction:column; justify-content:center; align-items:center; border-radius:var(--border-radius-max); background:var(--bg-color); overflow:hidden;} .procTem-caution01 .deco img{width:70%; aspect-ratio:1;} .procTem-caution01 dd{display:flex; position:relative; flex-direction:column; justify-content:flex-start; align-items:center; align-self:stretch;} .procTem-caution01 .summary{position:relative; font-size:var(--font-size-xl); font-weight:var(--font-weight-semibold); text-align:center; align-self:stretch;} .procTem-caution01 .summary strong{font-weight:var(--font-weight-bold); } /* 주의사항목록 */ .caution-list{list-style-type:disc !important;} .caution-list li{display:list-item; position:relative;} @media (max-width:767.98px) { /* [템플릿]주의사항tem01 */ .procTem-caution01{} .procTem-caution01 dl{padding:var(--padding-xl);} .procTem-caution01 dt{} .procTem-caution01 .deco{width:10rem;} } /* --------------------------------------------------------------------------- */ /* [공통][템플릿] 썸네일형tem01 */ .procTem-thum01{display:block; position:relative; width:100%;} .procTem-thum01 a{display:block; position:relative; width:100%;} .procTem-thum01 dl{display:flex; position:relative; width:100%; flex-direction:column; justify-content:flex-start; align-items:center; align-self:stretch; gap:var(--padding-2xl); text-align:center;} .procTem-thum01 dt{display:flex; position:relative; width:100%; flex-direction:column; justify-content:center; align-items:center; } .procTem-thum01 .thum{display:flex; position:relative; width:100%; aspect-ratio:11/10; flex-direction:row; justify-content:center; align-items:center; border-radius:var(--border-radius-xl); background-color:var(--bg-color-light); overflow:hidden; object-fit:cover;} .procTem-thum01 .thum img{width:100%;} .procTem-thum01 dd{display:flex; position:relative; flex-direction:column; justify-content:center; align-items:center; align-self:stretch;} .procTem-thum01 .title{display:block; position:relative; font-size:var(--font-size-2xl); font-weight:var(--font-weight-bold); word-break:break-all;} /* --------------------------------------------------------------------------- */ /* 추천시술 */ .treatmentRecSeciton{background-color:var(--secondary-5);} .treatmentRecSeciton .Inner{} .treatmentRecSeciton .List{display:grid; position:relative; width:100%; grid-template-columns:repeat(4, 1fr); gap:var(--padding-4xl);} .treatmentRecSeciton .List li{display:block; position:relative;} .treatmentRecSeciton .List a{display:block; position:relative;} .treatmentRecSeciton .procTem-thum01{} .treatmentRecSeciton .procTem-thum01 .thum{aspect-ratio:var(--image-ratio-event);} @media (max-width:767.98px) { /* 추천시술 */ .treatmentRecSeciton{} .treatmentRecSeciton .List{grid-template-columns:repeat(2, 1fr); gap:var(--padding-lg);} } /* --------------------------------------------------------------------------- */ /* 추천장비 */ .deviceRecSeciton{background-color:var(--secondary-20);} .deviceRecSeciton .Inner{} .deviceRecSeciton .procSection-body{} .deviceRecSeciton .List{display:flex; position:relative; flex-wrap:wrap; gap:var(--padding-4xl); justify-content:center; align-items:center;} .deviceRecSeciton .List > *, .deviceRecSeciton .List li{flex-basis:28%; display:block; position:relative;} .deviceRecSeciton .procTem-thum01 .thum{aspect-ratio:var(--image-ratio-device);} @media (max-width:767.98px) { /* 추천시술 */ .deviceRecSeciton{} .deviceRecSeciton .Inner{} .deviceRecSeciton .List{width:100%; gap:var(--padding-lg);} .deviceRecSeciton .List > *, .deviceRecSeciton .List li{flex-basis:46%;} .deviceRecSeciton .procTem-thum01 .thum{} } /* --------------------------------------------------------------------------- */ /* 추천제품 */ .productRecSeciton{background-color:var(--secondary-5);} .productRecSeciton .Inner{} .productRecSeciton .List{display:flex; position:relative; flex-wrap:wrap; gap:var(--padding-4xl); justify-content:center; align-items:center;} .productRecSeciton .List > *, .productRecSeciton .List li{flex-basis:28%; display:block; position:relative;} .productRecSeciton .List .procTem-thum01{} .productRecSeciton .List .procTem-thum01 .thum{aspect-ratio:var(--image-ratio-device);} @media (max-width:767.98px) { /* 추천제품 */ .productRecSeciton{} .productRecSeciton .List{width:100%; gap:var(--padding-lg)} .productRecSeciton .List > *, .productRecSeciton .List li{flex-basis:46%;} } /* =========================================================================== */ /* =========================================================================== */ /* =========================================================================== */ /* =========================================================================== */ /* 스폐결상세 커스텀상세 */ /* --------------------------------------------------------------------------- */ /* 랜딩영역(키비쥬얼을제외한 시술목록+상세) 990px=20251020 */ .detail-inner{display:flex; position:relative; flex-direction:column; width:var(--cont-width-proc); margin:auto; justify-content:center; overflow:hidden;} .detail-inner .Inner{width:100%;} .customProceSection .Inner{padding:0px var(--customProc-inner-padding);} @media (min-width: 768px) and (max-width: 991.98px) { /* 랜딩영역(키비쥬얼을제외한 시술목록+상세) */ .detail-inner{} .detail-inner .Inner{} .customProceSection .Inner{} } @media (max-width: 767.98px) { /* 랜딩영역(키비쥬얼을제외한 시술목록+상세) */ .detail-inner{width:100%;} .detail-inner .Inner{} .customProceSection .Inner{} } /* --------------------------------------------------------------------------- */ /* 공통세팅 */ .customProceSection{} /* 기본세션구성 */ .customProceSection{display:flex; position:relative; flex-direction:column; background-repeat:no-repeat; background-position:top center; background-size:auto 100%; font-size:var(--font-size-xl); padding:8rem 0px; overflow:hidden;} .customProceSection .Inner{display:flex; position:relative; flex-direction:column; } .customProce-head{display:flex; position:relative; flex-direction:column;} .customProce-body{display:flex; position:relative; flex-direction:column; gap:var(--padding-4xl); background-repeat:no-repeat; background-position:top center; background-size:auto 100%; } .customProceSection .Left{display:flex; position:relative; flex-direction:column;} .customProceSection .Center{display:flex; position:relative; flex-direction:column;} .customProceSection .Right{display:flex; position:relative; flex-direction:column;} .customProceSection .section-summary{display:flex; position:relative; flex-direction:column; gap:var(--padding-3xl);} .customProceSection .section-summary p{display:block; position:relative;} .customProceSection .section-summary em{display:block; position:relative; font-size:var(--font-size-4xl); font-weight:var(--font-weight-bold); line-height:1.4em;} .customProceSection .section-summary strong{font-weight:var(--font-weight-bold);} .customProceSection .section-summary cite{display:block; position:relative; letter-spacing:-1px; opacity:0.5;} @media (max-width:767.98px) { /* 기본세션구성 */ .customProceSection{} .customProce-body{gap:var(--padding-xl); } } /* 타이틀 */ .customProce-proceTitle{display:flex; position:relative; flex-direction:column;} .customProce-proceTitle .small-title{display:block; position:relative; font-size:var(--font-size-4xl); font-weight:var(--font-weight-semibold); font-family:var(--font-family-sub4);} .customProce-proceTitle .section-title{display:block; position:relative; font-size:var(--font-size-5xl); line-height:var(--line-height-xs); font-weight:var(--font-weight-bold);} .customProce-proceTitle .section-title small{display:block; font-size:var(--font-size-3xl); font-weight:var(--font-weight-semibold);} .customProce-proceTitle .section-title em{font-size:inherit; font-weight:inherit; line-height: inherit;} @media (max-width:767.98px) { /* 타이틀 */ .customProce-proceTitle{} .customProce-proceTitle .small-title{font-size:var(--font-size-3xl);} .customProce-proceTitle .section-title{font-size:var(--font-size-4xl);} .customProce-proceTitle .section-title small{font-size:var(--font-size-xl);} } /* 뷰포인트체크 - 모션가동용도 */ .viewpoint-on{} /* 더보기링크 */ .procTem-linkBtn{display:flex; position:relative;} .procTem-linkBtn p{display:flex; position:relative; align-items:center; gap:var(--padding); color:#a96b7c; font-size:var(--font-size-xl); box-shadow:inset 0 0 0 2px #a8687a; border-radius:var(--border-radius-2xl); background-color:#f5f3ec; padding:var(--padding) var(--padding-3xl); transition:color 0.4s ease; overflow:hidden;} .procTem-linkBtn span{display:inline-block; position:relative; z-index:var(--z-index);} .procTem-linkBtn .arrow{display:inline-block; width:var(--icon-size-lg); aspect-ratio:35 /20; background-color:#a96b7c; -webkit-mask:url('/assets/images/icon-linkArrow.svg') no-repeat center/contain; mask:url('/assets/images/icon-linkArrow.svg') no-repeat center/contain; transition:background-color 0.4s ease;} .procTem-linkBtn p::before{content:""; position:absolute; top:0px; left:0px; bottom:0px; width:0%; height:100%; background-color:#a96b7c; border-radius:var(--border-radius-2xl); transition:width 0.5s ease ; z-index:0;} .procTem-linkBtn:hover p::before{width:100%;} .procTem-linkBtn:hover p{color:#f5f3ec; animation:procTemlinkBtnain-changeBg 3s forwards;} .procTem-linkBtn:hover .arrow{background-color:#f5f3ec;} @keyframes procTemlinkBtnain-changeBg{ 30% { background-color:#a96b7c; } 100% { background-color:#a96b7c; } } /* =========================================================================== */ /* =========================================================================== */ /* =========================================================================== */ /* =========================================================================== */ /* [공통하단01] 정직한기록 */ .customProce-commonBottom-01{background-size:100% auto; background-image:url('/assets/images/sub/customProce_bottom01_bg.jpg');} .customProce-commonBottom-01 .Inner{gap:var(--padding-5xl);} /* 상단 */ .customProce-commonBottom-01 .customProce-head{text-align:center;} .customProce-commonBottom-01 .customProce-proceTitle{} .customProce-commonBottom-01 .small-title{} .customProce-commonBottom-01 .section-title{font-size:var(--font-size-6xl);} /* 컨텐츠 */ .customProce-commonBottom-01 .customProce-body{flex-direction:row; justify-content:center; } .customProce-commonBottom-01 .Left{flex:1; align-items:flex-end;} .customProce-commonBottom-01 .Left .imgBox{display:block; position:relative;} .customProce-commonBottom-01 .Left img{width:auto;} .customProce-commonBottom-01 .Right{flex:1; justify-content:flex-end;} .customProce-commonBottom-01 .deco{width:6rem; aspect-ratio:1; background-color:var(--secondary-10); -webkit-mask:url('/assets/images/logo_symbol.svg') no-repeat center / contain; mask:url('/assets/images/logo_symbol.svg') no-repeat center / contain;} .customProce-commonBottom-01 .Right em{color:var(--primary);} @media (max-width: 767.98px) { /* [공통하단01] 정직한기록 */ .customProce-commonBottom-01{} .customProce-commonBottom-01 .Inner{} /* 상단 */ .customProce-commonBottom-01 .customProce-head{} .customProce-commonBottom-01 .customProce-proceTitle{} .customProce-commonBottom-01 .small-title{} .customProce-commonBottom-01 .section-title{} /* 컨텐츠 */ .customProce-commonBottom-01 .customProce-body{flex-direction:column; } .customProce-commonBottom-01 .Left{} .customProce-commonBottom-01 .Left .imgBox{width:100%;} .customProce-commonBottom-01 .Left img{width:100%;} .customProce-commonBottom-01 .Right{} .customProce-commonBottom-01 .deco{} .customProce-commonBottom-01 .Right em{} } /* --------------------------------------------------------------------------- */ /* [공통하단02]책임시술 */ .customProce-commonBottom-02{background-color:#f3f1ea; background-size:100% 100%; background-image:url('/assets/images/sub/customProce_bottom02_bg.jpg');} .customProce-commonBottom-02::before{content:'Promise'; display:block; position:absolute; top:0%; right:0%; color:#f1eee2; font-size:20rem; line-height:0.8em; font-weight:var(--font-weight-bold); font-family:var(--font-family-sub4);} .customProce-commonBottom-02 .Inner{gap:9rem;} /* 상단 */ .customProce-commonBottom-02 .customProce-head{} .customProce-commonBottom-02 .customProce-proceTitle{text-align:right;} .customProce-commonBottom-02 .small-title{} .customProce-commonBottom-02 .section-title{} /* 컨텐츠 */ .customProce-commonBottom-02 .customProce-body{} /* 템플릿 */ .procTem-commB02tem-list{display:flex; position:relative; flex-direction:row;} .procTem-commB02tem-list li{flex:1; display:block; position:relative;} .procTem-commB02tem-list li:nth-child(odd){background-color:#dcd6c6;} .procTem-commB02tem-list li:nth-child(even){background-color:#ede9e0;} .procTem-commB02tem{display:block; position:relative;} .procTem-commB02tem dl{display:flex; position:relative; flex-direction:column; gap:var(--padding-3xl); text-align:center; padding:var(--padding-4xl) var(--padding-3xl); background-repeat:no-repeat; background-position:top center; background-size:100% auto;} .procTem-commB02tem dt{display:block; position:relative;} .procTem-commB02tem .thum{display:block; position:relative; text-align:center;} .procTem-commB02tem .thum img{display:block; margin:auto;} .procTem-commB02tem dd{display:flex; position:relative; flex-direction:column; gap:var(--padding-lg);} .procTem-commB02tem em{display:block; font-size:var(--font-size-4xl); font-weight:var(--font-weight-bold);} .procTem-commB02tem p{display:block;} @media (max-width:767.98px) { /* [공통하단02] 책임시술 */ .customProce-commonBottom-02{} .customProce-commonBottom-02::before{font-size:10rem; line-height:0.8em;} .customProce-commonBottom-02 .Inner{padding:var(--customProc-inner-padding); padding-top:8rem;} /* 상단 */ .customProce-commonBottom-02 .customProce-head{} /* 컨텐츠 */ .customProce-commonBottom-02 .customProce-body{} /* 템플릿 */ .procTem-commB02tem-list{flex-direction:column;} .procTem-commB02tem-list li{} } /* --------------------------------------------------------------------------- */ /* [공통하단03]효과만족도 */ .customProce-commonBottom-03{background-color:#f8f8f8; background-size:100% 100%; background-image:url('/assets/images/sub/customProce_bottom03_bg.jpg'); gap:8rem;} .customProce-commonBottom-03 .Inner{gap:8rem;} .customProce-commonBottom-03::before{content:'Synergy Plan'; display:block; position:absolute; bottom:0.5%; right:0%; color:#dbdbdb; font-size:8rem; line-height:1em; font-weight:var(--font-weight-bold); font-family:var(--font-family-sub4); opacity:0.5;} /* 기본내용 */ .customProce-commonBottom-03 .Inner-cont01{} /* 상단 */ .customProce-commonBottom-03 .customProce-head{} .customProce-commonBottom-03 .customProce-proceTitle{} .customProce-commonBottom-03 .small-title{} .customProce-commonBottom-03 .section-title{} .customProce-commonBottom-03 .section-title span{color:var(--primary);} /* 컨텐츠 */ .customProce-commonBottom-03 .customProce-body{flex-direction:row; justify-content:flex-end;} .customProce-commonBottom-03 .Left{justify-content:flex-end; text-align:right; padding-bottom:var(--padding-3xl);} .customProce-commonBottom-03 .Right{} .customProce-commonBottom-03 .Right .imgBox{display:block; position:relative;} .customProce-commonBottom-03 .Right img{} /* 그래프영역 */ .customProce-commonBottom-03 .Inner-cont02{} .customProce-commonBottom-03 .Inner-cont02 .section-summary{text-align:center;} .customProce-commonBottom-03 .graphArea{display:block; position:relative;} .customProce-commonBottom-03 .thermagB03graph{width:80%;} /* 템플릿 */ .thermagB03graph{display:block; position:relative; width:100%; margin:auto; text-align:center;} .thermagB03graph svg{display:block; width:100%; height:100%;} .thermagB03graph svg line{mix-blend-mode: multiply;} .thermagB03graph .grid-line{fill:none; stroke:rgba(229, 229, 229, 0.6); stroke-width:1;} .thermagB03graph .axis-line{fill:none; stroke:rgba(229, 229, 229, 0.6); stroke-width:1;} .thermagB03graph .axis-text{fill:#666; font-size:var(--font-size-xs); } .thermagB03graph .axis-text.th{fill:#fff; font-size:var(--font-size);} .thermagB03graph .axis-text.bold{font-weight:var(--font-weight-bold);} .thermagB03graph .area-gray{fill:#a1968f;} .thermagB03graph .area-green{fill:#354e40;} .thermagB03graph .data-point{transition:r 0.2s,opacity 0.5s; cursor:pointer; fill:#90b76c; stroke:#fff; stroke-width:2; opacity:0; } .thermagB03graph .data-point.show{opacity:1; animation:thermagB03graph-blink 1s infinite alternate ease-in-out;} .thermagB03graph .data-point2{opacity:0; fill:none; stroke:#90b76c; stroke-width:2;} .thermagB03graph .data-point.show ~ .data-point2{opacity:1;} .thermagB03graph .infoBox{display:inline-flex; position:relative; flex-direction:row; gap:var(--padding-lg); width:80%; z-index:var(--z-index); margin:auto; margin-top:var(--padding-3xl);} .thermagB03graph .infoBox .Btn{flex:1; font-size:var(--font-size-3xl); white-space: nowrap; background-color:#344c3e; margin-left:0px; cursor:default; } /* 애니메이션 */ @keyframes thermagB03graph-blink{ 0%{fill:rgba(255, 255, 255, 1);} 100%{ffill:rgba(144, 183, 108, 1);} } @media (max-width: 767.98px) { /* [공통하단03] 효과만족도 */ .customProce-commonBottom-03{} .customProce-commonBottom-03 .Inner{} .customProce-commonBottom-03::before{font-size:6rem;} /* 상단 */ .customProce-commonBottom-03 .customProce-head{padding-left:0px;} .customProce-commonBottom-03 .customProce-proceTitle{} .customProce-commonBottom-03 .small-title{} .customProce-commonBottom-03 .section-title{} .customProce-commonBottom-03 .section-title span{} /* 컨텐츠 */ .customProce-commonBottom-03 .customProce-body{flex-direction:column; padding-right:0px;} .customProce-commonBottom-03 .Left{padding-bottom:0px;} .customProce-commonBottom-03 .Right{} .customProce-commonBottom-03 .Right .imgBox{width:100%} .customProce-commonBottom-03 .Right img{width:100%} .customProce-commonBottom-03 .graphArea .thermagB03graph{width:100%;} .customProce-commonBottom-03 .Inner-cont02 .section-summary p {letter-spacing:-1.5px;} /* 템플릿 */ .thermagB03graph{} .thermagB03graph .axis-text{font-size:var(--font-size-2xl);} .thermagB03graph .infoBox{position:relative; flex-direction:row; width:100%;} .thermagB03graph .infoBox .Btn{font-size:var(--font-size-sm);} } /* --------------------------------------------------------------------------- */ /* [공통하단04]샷수혜택 background-color:var(--bg-color-low); */ .customProce-commonBottom-04{} .customProce-commonBottom-04 .Inner{gap:8rem;} /* 상단 */ .customProce-commonBottom-04 .customProce-head{} .customProce-commonBottom-04 .customProce-proceTitle{} .customProce-commonBottom-04 .small-title{} .customProce-commonBottom-04 .section-title{} /* 컨텐츠 */ .customProce-commonBottom-04 .customProce-body{flex-direction:row; justify-content:flex-end;} .customProce-commonBottom-04 .Left{justify-content:flex-end; text-align:right;} .customProce-commonBottom-04 .section-summary{} .customProce-commonBottom-04 .Right{} .customProce-commonBottom-04 .imgBox{display:block; position:relative;} .customProce-commonBottom-04 .imgBox img{} @media (max-width: 767.98px) { /* [공통하단04] 샷수혜택 */ .customProce-commonBottom-04{} .customProce-commonBottom-04 .Inner{} /* 상단 */ .customProce-commonBottom-04 .customProce-head{} /* 컨텐츠 */ .customProce-commonBottom-04 .customProce-body{flex-direction:column;} .customProce-commonBottom-04 .Left{} .customProce-commonBottom-04 .section-summary{} .customProce-commonBottom-04 .Right{} .customProce-commonBottom-04 .imgBox{width:100%;} .customProce-commonBottom-04 .imgBox img{width:100%;} } /* --------------------------------------------------------------------------- */ /* [공통하단05] 전문적디자인 */ .customProce-commonBottom-05{padding:0px; background-color:#f1eee8; background-size:100% 100%; background-image:url('/assets/images/sub/customProce_bottom05_bg.jpg');} .customProce-commonBottom-05 .Inner{} /* 컨텐츠 */ .customProce-commonBottom-05 .customProce-body{flex-direction:row; gap:0px;} /* 롤링배너 */ .commB05Banner{display:flex; position:relative; flex-direction:row; width:100%; height:1080px;} /* 반드시높이를지정해줘야함 */ .customProce-commonBottom-05 .customProce-proceTitle{text-align:right;} .customProce-commonBottom-05 .small-title{color:#9a8f86;} .customProce-commonBottom-05 .section-title{} .commB05Banner .major-wrapper{flex-basis:50%; width:50%; display:flex; position:relative; justify-content:flex-end; } .commB05Banner .major-wrapper .swiper{} .commB05Banner .major-wrapper .swiper .swiper-wrapper{} .commB05Banner .major-wrapper .swiper .swiper-slide{} .commB05Banner .major-wrapper .swiper .swiper-slide a{display:block; position:relative;} .commB05Banner .major-wrapper .swiper .swiper-slide .thum{display:flex; position:relative; width:100%; height:100%; background-color:#f1eee8; overflow:hidden;} /* aspect-ratio:715/1080; */ .commB05Banner .major-wrapper .swiper .swiper-slide img{display:block; width:100%; height:100%; object-fit:cover; transition:var(--transition);} .commB05Banner .thumb-wrapper{flex-basis:50%; width:50%; display:flex; position:relative; text-align:right; flex-direction:column; gap:var(--padding-6xl); padding:var(--padding-5xl) var(--padding-3xl);} .commB05Banner .thumb-wrapper .swiper-slide.swiper-slide-active{} .commB05Banner .thumb-wrapper .swiper{overflow:revert; } .commB05Banner .thumb-wrapper .swiper .swiper-wrapper{flex-direction: column;} .commB05Banner .thumb-wrapper .swiper .swiper-slide{flex:1; padding-right:var(--padding-4xl); cursor:pointer;} .commB05Banner .thumb-wrapper .swiper .swiper-slide::before{content:''; display:block; position:absolute; right:0%; top:0%; height:105%; border-right:2px solid #a9a098;} .commB05Banner .thumb-wrapper .swiper .swiper-slide:last-child::before{display:none;} .commB05Banner .thumb-wrapper .swiper-slide.swiper-slide-thumb-active{} /* 템플릿 */ .procTem-commB05tem{display:block; position:relative;} .procTem-commB05tem dl{display:block; position:relative; text-align:right;} .procTem-commB05tem dt{display:block; position:relative;} .procTem-commB05tem i{display:inline-flex; position:absolute; right:0%; top:0%; margin-right:-7rem; justify-content:center; align-items:center; width:4rem; aspect-ratio:1; color:var(--font-color-light); font-weight:var(--font-weight-bold); line-height:1em; background-color:#8f847d; border-radius:var(--border-radius-max); overflow:hidden; z-index:var(--z-index); transition:var(--transition);} .procTem-commB05tem em{font-size:var(--font-size-xl); line-height:1.4em; transition:var(--transition);} .procTem-commB05tem dd{display:block; position:relative; font-size:var(--font-size); letter-spacing:-1px; transition:var(--transition); opacity:0;} /* 일단숨김 */ .swiper-slide-thumb-active .procTem-commB05tem i{color:var(--font-color-light); background-color:#33302e;} .swiper-slide-thumb-active .procTem-commB05tem em{font-size:var(--font-size-2xl); font-weight:var(--font-weight-bold); } .swiper-slide-thumb-active .procTem-commB05tem dd{opacity:1;} @media (max-width: 767.98px) { /* [공통하단05] 전문적디자인 */ .customProce-commonBottom-05{} .customProce-commonBottom-05 .Inner{} /* 롤링배너 */ .commB05Banner{flex-direction:column; height:auto; gap:var(--padding-3xl);} .commB05Banner .major-wrapper{flex-basis:100%; width:100%; } .commB05Banner .major-wrapper .swiper{} .commB05Banner .thumb-wrapper{flex-basis:100%; width:100%; padding:0px;} .commB05Banner .thumb-wrapper .swiper{} .customProce-commonBottom-05 .Inner{padding:0px;} .commB05Banner .major-wrapper .swiper .swiper-slide a{height:100%; overflow:hidden;} .commB05Banner .major-wrapper{ position:absolute; inset:0px 0px 0px 0px; } .commB05Banner .major-wrapper .swiper .swiper-slide img{height:100%; aspect-ratio:715 / 1080; object-fit:cover; opacity:0.1;} .commB05Banner .thumb-wrapper{padding:var(--padding-6xl) var(--padding-4xl) var(--padding-6xl) var(--padding-2xl); z-index:2;} } /* --------------------------------------------------------------------------- */ /* [공통하단06]통증컨트롤 */ .customProce-commonBottom-06{padding:6em 0px; padding-bottom:0px; gap:var(--padding-6xl); background-color:#f5f3ec;} /* 상단 */ .customProce-commonBottom-06 .customProce-head{text-align:center;} .customProce-commonBottom-06 .customProce-proceTitle{} .customProce-commonBottom-06 .small-title{} .customProce-commonBottom-06 .section-title{} .customProce-commonBottom-06 .section-title p{color:#948882; font-size:var(--font-size-xl); margin-top:var(--padding-lg);} /* 컨텐츠 */ .customProce-commonBottom-06 .customProce-body{} .customProce-commonBottom-06 .Left{} .customProce-commonBottom-06 .Left img{} .customProce-commonBottom-06 .Right{} /* 템플릿 */ .procTem-commB06tem-list{display:grid; position:relative; grid-template-columns:repeat(2, 1fr);} .procTem-commB06tem-list li{display:block; position:relative;} .procTem-commB06tem-list li:nth-child(odd){} .procTem-commB06tem-list li:nth-child(odd) .procTem-commB06tem dl dd{text-align:right;} .procTem-commB06tem-list li:nth-child(even){} .procTem-commB06tem-list li:nth-child(even) .procTem-commB06tem dl dd{text-align:left;} .procTem-commB06tem-list li:nth-child(1){color:var(--font-color-light);} .procTem-commB06tem-list li:nth-child(1) .deco span{} .procTem-commB06tem-list li:nth-child(2){color:var(--font-color-light);} .procTem-commB06tem-list li:nth-child(3){} .procTem-commB06tem-list li:nth-child(4){} .procTem-commB06tem{display:block; position:relative; background-color:var(--bg-color-dark);} .procTem-commB06tem dl{display:flex; position:relative; flex-direction:column; transition:var(--transition); opacity:0.7;} .procTem-commB06tem dt{display:flex; position:relative; flex-direction:column; } .procTem-commB06tem .thum{display:flex; position:relative; align-items:center; justify-content:center; width:100%; aspect-ratio:960/800; overflow:hidden;} /* aspect-ratio:960/600; */ .procTem-commB06tem .thum img{display:block; width:100%; height:100%; object-fit:cover; transition:var(--transition);} .procTem-commB06tem dd{display:flex; position:absolute; flex-direction:column; justify-content:flex-end; gap:var(--padding-lg); width:100%; height:100%; padding:var(--padding-3xl);} .procTem-commB06tem dd em{font-size:var(--font-size-4xl); font-weight:var(--font-weight-bold); line-height:1.2em;} .procTem-commB06tem dd em span{display:block; font-size:var(--font-size);} .procTem-commB06tem dd p{letter-spacing:-1px;} .procTem-commB06tem .deco{display:inline-block; position:relative; gap:var(--padding);} .procTem-commB06tem .deco span{display:inline-block; position:relative; width:9rem; aspect-ratio:1; border-radius:var(--border-radius-max); object-fit:cover; box-shadow:var(--box-shadow); overflow:hidden;} .procTem-commB06tem .deco span img{display:block; width:100%;} .procTem-commB06tem .deco span::after{content:""; position:absolute; top:0; left:-75%; width:50%; height:100%; background:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 50%,rgba(255,255,255,0) 100%); transform:skewX(-25deg); animation:commonBottom06ani-shine 2s infinite;} .procTem-commB06tem .deco img{} .procTem-commB06tem:hover dl{opacity:1;} .procTem-commB06tem.viewpoint{} .procTem-commB06tem.viewpoint-on dl{} .procTem-commB06tem.viewpoint-on dl img{} /* 애니메이션 빛지나가는효과 */ @keyframes commonBottom06ani-shine{ 0%{left:-75%;} 100%{left:125%;} } @media (min-width:768px) and (max-width:991.98px) { /* [공통하단06]통증컨트롤  */ .customProce-commonBottom-06{} /* 상단 */ .customProce-commonBottom-06 .customProce-head{} /* 컨텐츠 */ .customProce-commonBottom-06 .customProce-body{} .procTem-commB06tem .thum{} .procTem-commB06tem .thum img{height:100%;} } @media (max-width:767.98px) { /* [공통하단06]통증컨트롤  */ .customProce-commonBottom-06{} /* 상단 */ .customProce-commonBottom-06 .customProce-head{} /* 컨텐츠 */ .customProce-commonBottom-06 .customProce-body{} /* 템플릿 */ .procTem-commB06tem-list{grid-template-columns:repeat(1, 1fr);} .procTem-commB06tem-list li{} .procTem-commB06tem{} .procTem-commB06tem dl{} .procTem-commB06tem dt{} .procTem-commB06tem .thum{} .procTem-commB06tem .thum img{height:100%;} .procTem-commB06tem dd{padding:var(--padding-3xl);} .procTem-commB06tem dd em{font-size:var(--font-size-3xl);} .procTem-commB06tem dd p{} .procTem-commB06tem .deco span{width:6rem;} .procTem-commB06tem.viewpoint{} .procTem-commB06tem.viewpoint-on dl{opacity:1;} .procTem-commB06tem.viewpoint-on dl img{transform:scale(1.05);} } /* --------------------------------------------------------------------------- */ /* [공통하단07]병행솔루션 */ .customProce-commonBottom-07{padding:20rem 0px; } /* 상단 */ .customProce-commonBottom-07 .Inner{gap:20rem;} /* 상단 */ .customProce-commonBottom-07 .customProce-head{text-align:center;} .customProce-commonBottom-07 .customProce-proceTitle{} .customProce-commonBottom-07 .small-title{} .customProce-commonBottom-07 .section-title{} /* 컨텐츠 */ .customProce-commonBottom-07 .customProce-body{justify-content:center;} .customProce-commonBottom-07 .customProce-body::before{content:'Solution'; display:block; position:absolute; bottom:100%; left:0%; color:#9a8f86; font-size:20rem; line-height:0.8em; font-weight:var(--font-weight-bold); font-family:var(--font-family-sub4); opacity:0.1;} .customProce-commonBottom-07 .Center{gap:var(--padding-4xl);} .customProce-commonBottom-07 .caption{display:block; position:relative; font-size:var(--font-size-lg); text-align:center;} /* 템플릿 */ .customProce-commonBottom-07 .Center .procTem-commB07tem-list{width:100%;} .procTem-commB07tem-list{display:flex; position:relative; gap:var(--padding-xl); margin:auto;} .procTem-commB07tem-list li{flex:1; display:flex; position:relative;} .procTem-commB07tem{display:block; position:relative; width:100%;} .procTem-commB07tem a{display:block; position:relative; width:100%;} .procTem-commB07tem dl{display:flex; position:relative; justify-content:flex-end; width:100%; text-align:center; background-color:#e6e6e6; overflow:hidden;} .procTem-commB07tem dl::after{content:'+'; display:inline-block; position:absolute; right:2%; top:2%; font-size:var(--font-size-5xl); line-height:var(--line-height-xs);} .procTem-commB07tem dt{display:block; position:relative; width:100%; } .procTem-commB07tem dd{display:flex; position:absolute; width:100%; inset:0% 0% 0% 0%; flex-direction:column; padding:var(--padding-3xl);} .procTem-commB07tem em{display:block; position:relative; font-size:var(--font-size-3xl); font-weight:var(--font-weight-bold); line-height:1.3em;} .procTem-commB07tem span{display:block; position:relative; font-size:var(--font-size-lg); letter-spacing:-1px; opacity:0.8;} .procTem-commB07tem-list li:nth-child(even) .procTem-commB07tem dd{justify-content:flex-end;} /* 모션 */ .procTem-commB07tem .thum{display:block; position:relative; overflow:hidden;} .procTem-commB07tem .thum img{display:block; width:100%;} .procTem-commB07tem .thum .standard{opacity:0; z-index:var(--z-index); object-fit:cover; transition:var(--transition);} .procTem-commB07tem .thum .side{position:absolute; inset:0; opacity:0;} .procTem-commB07tem .thum .side.left{transform:translateX(-100%);} .procTem-commB07tem .thum .side.right{transform:translateX(100%);} .procTem-commB07tem .thum .side.top{transform:translateY(-100%);} .procTem-commB07tem .thum .side.bottom{transform:translateY(100%);} .procTem-commB07tem:hover .side.left{animation:commB07ani-sideLeftIn 4s ease-in-out infinite;} .procTem-commB07tem:hover .side.right{animation:commB07ani-sideRightIn 4s ease-in-out infinite; animation-delay:0.4s;} .procTem-commB07tem:hover .side.top{animation:commB07ani-sideTopIn 5s ease-in-out infinite;} .procTem-commB07tem:hover .side.bottom{animation:commB07ani-sideBottomIn 5s ease-in-out infinite; animation-delay:0.4s;} .procTem-commB07tem.viewpoint{} .procTem-commB07tem.viewpoint-on{} /* 애니메이션 */ @keyframes commB07ani-sideLeftIn{ /* 왼쪽에서 등장 후 잠시 멈춤 */ 0%{transform:translateX(-100%); opacity:0;} 20%{transform:translateX(0); opacity:1;} 40%{transform:translateX(0); opacity:1;} /* 잠시 멈춤 */ 100%{transform:translateX(-100%); opacity:0;} } @keyframes commB07ani-sideRightIn{ /* 오른쪽에서 등장 후 잠시 멈춤 */ 0%{transform:translateX(100%); opacity:0;} 20%{transform:translateX(0); opacity:1;} 40%{transform:translateX(0); opacity:1;} 100%{transform:translateX(100%); opacity:0;} } @keyframes commB07ani-sideTopIn{ /* 위에서 등장 후 잠시 멈춤 */ 0%{transform:translateY(-100%); opacity:0;} 20%{transform:translateY(0); opacity:1;} 40%{transform:translateY(0); opacity:1;} 100%{transform:translateY(-100%); opacity:0;} } @keyframes commB07ani-sideBottomIn{ /* 아래에서 등장 후 잠시 멈춤 */ 0%{transform:translateY(100%); opacity:0;} 20%{transform:translateY(0); opacity:1;} 40%{transform:translateY(0); opacity:1;} 100%{transform:translateY(100%); opacity:0;} } /* 2번은 등장후 멈충용 animation:none; animation:commB07ani-sideLeftIn2 4s ease-in-out forwards; */ @keyframes commB07ani-sideLeftIn2{ /* 왼쪽에서 등장 끝 */ 0%{transform:translateX(-100%); opacity:0;} 20%{transform:translateX(0); opacity:1;} 100%{transform:translateX(0); opacity:1;} } @keyframes commB07ani-sideRightIn2{ /* 오른쪽에서 등장 끝 */ 0%{transform:translateX(100%); opacity:0;} 20%{transform:translateX(0); opacity:1;} 100%{transform:translateX(0); opacity:1;} } @keyframes commB07ani-sideTopIn2{ /* 위에서 등장 끝 */ 0%{transform:translateY(-100%); opacity:0;} 20%{transform:translateY(0); opacity:1;} 100%{transform:translateY(0); opacity:1;} } @keyframes commB07ani-sideBottomIn2{ /* 아래에서 등장 끝 */ 0%{transform:translateY(100%); opacity:0;} 20%{transform:translateY(0); opacity:1;} 100%{transform:translateY(0); opacity:1;} } @media (max-width:767.98px) { /* [공통하단07]병행솔루션 */ .customProce-commonBottom-07{} .customProce-commonBottom-07 .Inner{gap:10rem;} /* 상단 */ .customProce-commonBottom-07 .customProce-head{} /* 컨텐츠 */ .customProce-commonBottom-07 .customProce-body{} .customProce-commonBottom-07 .customProce-body::before{font-size:10rem;} .customProce-commonBottom-07 .Center{} .customProce-commonBottom-07 .Center .procTem-commB07tem-list{} /* 템플릿 */ .procTem-commB07tem-list{flex-direction:column; } .procTem-commB07tem-list li{} .procTem-commB07tem{} .procTem-commB07tem dd{padding:var(--padding-4xl) var(--padding-xl);} /* 모션 */ .procTem-commB07tem .thum{} .procTem-commB07tem .thum img{} .procTem-commB07tem.viewpoint-on .side.left{animation:commB07ani-sideLeftIn2 4s ease-in-out forwards;} .procTem-commB07tem.viewpoint-on .side.right{animation:commB07ani-sideRightIn2 4s ease-in-out forwards; animation-delay:0.4s;} .procTem-commB07tem.viewpoint-on .side.top{animation:commB07ani-sideTopIn2 5s ease-in-out forwards;} .procTem-commB07tem.viewpoint-on .side.bottom{animation:commB07ani-sideBottomIn2 5s ease-in-out forwards; animation-delay:0.4s;} } /* --------------------------------------------------------------------------- */ /* [공통하단08]통증조절시스템 */ .customProce-commonBottom-08{padding:16rem 0px; background-size:100% 100%; background-image:url('/assets/images/sub/customProce_bottom08_bg.jpg');} .customProce-commonBottom-08::before{content:'Painless'; display:inline-block; position:absolute; top:0%; left:0%; color:#33302e; font-size:20rem; line-height:0.8em; font-weight:var(--font-weight-bold); font-family:var(--font-family-sub4); writing-mode:vertical-rl; text-orientation:mixed; opacity:0.08;} .customProce-commonBottom-08 .Inner{gap:var(--padding-4xl);} /* 상단 */ .customProce-commonBottom-08 .customProce-head{} .customProce-commonBottom-08 .customProce-proceTitle{} .customProce-commonBottom-08.section-title{} /* 컨텐츠 */ .customProce-commonBottom-08 .customProce-body{flex-direction:row;} .customProce-commonBottom-08 .Left{flex:1; justify-content:flex-end;} .customProce-commonBottom-08 .section-summary{} .customProce-commonBottom-08 .section-summary em span{color:var(--primary);} .customProce-commonBottom-08 .Right{flex:1;} /* 템플릿(그래프) */ .procTem-commB08tem{display:flex; position:relative; flex-direction:column; gap:var(--padding-2xl); width:100%; border-radius:var(--border-radius-xl); background-color:var(--bg-color-light); padding:var(--padding-3xl);} .procTem-commB08tem .graphBox{display:block; position:relative; padding-bottom:var(--padding-2xl); padding-left:var(--padding-6xl);} .procTem-commB08tem legend{display:block; position:relative; font-size:var(--font-size-2xl); font-weight:var(--font-weight-bold);} .procTem-commB08tem cite{display:block; position:relative; font-size:var(--font-size-sm); text-align:right; } .procTem-commB08tem table{position:relative; width:100%; color:#655f5a; z-index:var(--z-index);} .procTem-commB08tem table tr{position:relative;} .procTem-commB08tem table th{width:0px; text-align:right; border-right:1px solid #c3b5ac; vertical-align:middle;} .procTem-commB08tem table em{ display:inline-block; position:absolute; right:100%; font-weight:var(--font-weight-semibold); padding-right:var(--padding);} .procTem-commB08tem table td{border-right:1px solid #c3b5ac;} .procTem-commB08tem table tbody tr:not(:last-child) td{height:5rem;} .procTem-commB08tem table .bar{display:inline-block; position:absolute; left:0%; top:50%; transform:translateY(-50%); background-color:#a29790; padding-right:var(--padding-lg); z-index:-1;} .procTem-commB08tem table .bar span{color:var(--font-color-light); z-index:var(--z-index);} .procTem-commB08tem table .opint{} .procTem-commB08tem table .opint th{} .procTem-commB08tem table .opint em{color:var(--font-color); font-weight:var(--font-weight-bold);} .procTem-commB08tem table .opint .bar{width:75%; font-size:var(--font-size-2xl); font-weight:var(--font-weight-bold); background-color:#295c40;} .procTem-commB08tem table .viewpoint-on .bar{clip-path:inset(0 100% 0 0); overflow:hidden; animation:commB08ani-reveal 2s ease forwards;} .procTem-commB08tem table tr:nth-child(2) .bar{width:25%;} .procTem-commB08tem table tr:nth-child(3) .bar{width:18%;} .procTem-commB08tem table tr:nth-child(4) .bar{width:8%;} .procTem-commB08tem table .last td{height:1rem; text-align:right; border-top:1px solid #c3b5ac;} .procTem-commB08tem table .last span{position:absolute; transform:translateX(-50%); } /* [애니메이션]reveal */ @keyframes commB08ani-reveal { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } } @media (max-width:767.98px) { /* [공통하단08]통증조절시스템 */ .customProce-commonBottom-08{background-size:auto 100% ; } .customProce-commonBottom-08 .Inner{padding:var(--customProc-inner-padding);} /* 상단 */ .customProce-commonBottom-08 .customProce-head{} /* 컨텐츠 */ .customProce-commonBottom-08 .customProce-body{flex-direction:column;} /* 템플릿(그래프) */ .procTem-commB08tem{padding:var(--padding-xl); font-size:var(--font-size);} .procTem-commB08tem .graphBox{padding-left:var(--padding-5xl);} } /* --------------------------------------------------------------------------- */ /* [공통하단09]협력병원연구와교육 */ .customProce-commonBottom-09{padding:0px;} .customProce-commonBottom-09 .Inner{width:100%; gap:var(--padding-5xl);} /* 컨텐츠 */ .customProce-commonBottom-09 .customProce-body{text-align:center;} /* 롤링배너 */ .commB09Banner{display:flex; position:relative; flex-direction:column; gap:var(--padding-6xl); padding:18rem 0px;} .customProce-commonBottom-09 .customProce-proceTitle{} .customProce-commonBottom-09 .section-title{} .customProce-commonBottom-09 .section-title p{font-size:var(--font-size-xl); font-weight:var(--font-weight);} .commB09Banner .swiper{} /* 엑티브시 크기변경되기때문에 hidden 초기화 */ .commB09Banner .swiper-wrapper{display:flex; position:relative; align-items:center;} .commB09Banner .swiper-slide{flex-shrink:0; width:auto; box-sizing:border-box; transition:var(--transition); padding:var(--padding-3xl);} .commB09Banner .swiper-slide img{} .commB09Banner .swiper-pagination{bottom:10% !important;} .commB09Banner::before{content:""; position:absolute; top:0; left:0; right:0%; bottom:0%; width:100%; height:100%; background-size:cover; background-position:center; opacity:0.1; z-index:-1; transition:var(--transition);} .commB09Banner.activeSlide-1::before{background-image:url('/assets/images/sub/customProce_bottom09_thum01.jpg');} .commB09Banner.activeSlide-2::before{background-image:url('/assets/images/sub/customProce_bottom09_thum02.jpg');} .commB09Banner.activeSlide-3::before{background-image:url('/assets/images/sub/customProce_bottom09_thum03.jpg');} .commB09Banner.activeSlide-4::before{background-image:url('/assets/images/sub/customProce_bottom09_thum04.jpg');} .commB09Banner.activeSlide-5::before{background-image:url('/assets/images/sub/customProce_bottom09_thum05.jpg');} .commB09Banner.activeSlide-6::before{background-image:url('/assets/images/sub/customProce_bottom09_thum06.jpg');} .commB09Banner.activeSlide-7::before{background-image:url('/assets/images/sub/customProce_bottom09_thum07.jpg');} .commB09Banner.activeSlide-8::before{background-image:url('/assets/images/sub/customProce_bottom09_thum08.jpg');} .commB09Banner.activeSlide-9::before{background-image:url('/assets/images/sub/customProce_bottom09_thum09.jpg');} .commB09Banner.activeSlide-10::before{background-image:url('/assets/images/sub/customProce_bottom09_thum10.jpg');} .commB09Banner .swiper-button-prev, .commB09Banner .swiper-button-next{top:40%; color:#b5b5b5; border:none; background:none; display:none;} /* pc에서는숨김 */ .commB09Banner .swiper-button-prev:after, .commB09Banner .swiper-button-next:after{font-size:var(--font-size-4xl);} .commB09Banner .swiper-button-next{margin-right:0%;} .commB09Banner .swiper-button-prev{margin-left:0%;} /* 템플릿 */ .commB09Banner .procTem-commB09tem dd{opacity:0;} /* 일단숨김 */ .commB09Banner .swiper-slide.swiper-slide-active{padding:0px;} .commB09Banner .swiper-slide.swiper-slide-active .procTem-commB09tem dd{opacity:1;} .procTem-commB09tem{display:block; position:relative; width:100%; } .procTem-commB09tem dl{display:flex; position:relative; flex-direction:column; justify-content:center; align-items:center; gap:var(--padding-5xl);text-align:center; } .procTem-commB09tem dt{display:flex; position:relative; justify-content:center; align-items:center; } .procTem-commB09tem .thum{display:flex; position:relative; justify-content:center; align-items:center; aspect-ratio:1; border-radius:var(--border-radius-max); overflow:hidden;} .procTem-commB09tem .thum img{display:block; width:100%; height:100%; object-fit:cover;} .procTem-commB09tem dd{display:flex; position:relative; transition:var(--transition);} .procTem-commB09tem em{display:block; position:relative; color:#153423; font-size:var(--padding-xl); font-weight:var(--font-weight-semibold);} @media (max-width:767.98px) { /* [공통하단09]협력병원연구와교육 */ .customProce-commonBottom-09{} .customProce-commonBottom-09 .Inner{} /* 컨텐츠 */ .customProce-commonBottom-09 .customProce-body{} /* 롤링배너 */ .commB09Banner{} .commB09Banner .swiper-wrapper{} .commB09Banner .swiper-slide{padding:var(--padding-5xl);} .commB09Banner .swiper-slide.swiper-slide-active{padding:var(--padding-5xl);} .commB09Banner .swiper-button-prev, .commB09Banner .swiper-button-next{display:block;} /* pc에서는숨김 */ } /* --------------------------------------------------------------------------- */ /* [공통]시술전용아코디언영역 - (아코디언실행전 .slide01의높이를 procTem-accordion에부여 / 높이를정해놓으면 반응형 대응력하락) */ .procTem-accordionArea{display:block; position:relative;} .procTem-accordion{display:flex; position:relative; flex-direction:row; align-items:stretch; gap:var(--padding-2xl);} /* 배너 */ .procTem-accordion-slide{flex:0 0 10%; display:flex; position:relative; width:100%; height:auto; border-radius:var(--border-radius-xl); background-color:var(--bg-color-light); transition:flex 0.6s cubic-bezier(0.4, 0, 0.2, 1); box-shadow:var(--box-shadow); overflow:hidden; cursor:pointer;} /* 닫힌상태banner */ .procTem-accordion .slide-collapsed{display:flex; position:relative; flex-direction:row; align-items:stretch; justify-content:center; background-color:var(--bg-color-light); background-repeat:no-repeat; background-position:top center; background-size:100% 100%; height:auto;} .procTem-accordion .slide-collapsed .inner{display:flex; position:relative; flex-direction:row; align-items:center; gap:var(--padding-lg); width:100%; writing-mode:vertical-rl; text-orientation:sideways; transform:rotate(180deg); overflow:hidden; padding:var(--padding-lg);} .procTem-accordion .slide-collapsed .slide-title{flex:1; display:block; position:relative; font-size:var(--font-size-lg); font-weight:var(--font-weight-semibold);} .procTem-accordion .slide-collapsed .slide-num{display:block; position:relative; font-weight:var(--font-weight-semibold);} /* 열린상태banner */ .procTem-accordion .slide-expanded{display:flex; position:relative; flex-direction:row; justify-content:space-between; width:100%;} .procTem-accordion .slide-expanded .inner{display:flex; position:relative; flex-direction:row; width:100%; } .procTem-accordion .slide-expanded .slide-num{display:block; position:relative; font-weight:var(--font-weight-semibold);} /* 상태에따른숨김과보임 */ .procTem-accordion-slide{} .procTem-accordion-slide .slide-collapsed{transform:scaleX(1); transform-origin:left; transition:transform 0.5s; flex:1;} .procTem-accordion-slide .slide-expanded{transform:scaleX(0); transform-origin:left; transition:transform 0.5s; flex:0;} .procTem-accordion-slide .slide-expanded img{transform:scaleX(0); transform:scaleY(1); transform-origin:left; transition:transform 0.5s; } .procTem-accordion-slide.active{flex:1;} .procTem-accordion-slide.active .slide-collapsed{transform:scaleX(0); position:absolute; height:100%;} .procTem-accordion-slide.active .slide-expanded{transform:scaleX(1); flex:1;} .procTem-accordion-slide .slide-expanded img{transform:scaleX(1);} @media (max-width:991.98px) { /* [공통]시술전용아코디언영역 */ .procTem-accordionArea{} .procTem-accordion{gap:var(--padding);} /* 배너 */ .procTem-accordion-slide{flex:0 0 12%;} } @media (max-width:767.98px) { /* [공통]시술전용아코디언영역 */ .procTem-accordionArea{} .procTem-accordion{gap:var(--padding);} /* 배너 */ .procTem-accordion-slide{flex:0 0 10%; } /* min-height:50rem; */ /* 닫힌상태banner */ .procTem-accordion .slide-collapsed{} .procTem-accordion .slide-collapsed .inner{padding:var(--padding) var(--padding-xs); } .procTem-accordion .slide-collapsed .slide-title{} .procTem-accordion .slide-collapsed .slide-num{} /* 열린상태banner */ .procTem-accordion .slide-expanded{} .procTem-accordion .slide-expanded .inner{flex-direction:column;} .procTem-accordion .slide-expanded .slide-num{} } /* .procTem-accordion-slide .slide-collapsed{opacity:1; visibility:visible; transition:opacity 0.4s ease, visibility 0.4s ease;} .procTem-accordion-slide .slide-expanded{opacity:0; visibility:hidden; transition:opacity 0.6s ease 0.2s, visibility 0.6s ease 0.2s;} .procTem-accordion-slide.active{flex:1;} .procTem-accordion-slide.active .slide-collapsed{opacity:0; visibility:hidden; display:none; } .procTem-accordion-slide.active .slide-expanded{opacity:1; visibility:visible; display:flex;} */ /* [공통]시술전용아코디언영역 */ .procTem-accordionArea{} .procTem-accordion{} /* 배너 */ .procTem-accordion-slide{} /* 닫힌상태banner */ .procTem-accordion .slide-collapsed{} /* 열린상태banner */ .procTem-accordion .slide-expanded{} /* 배너 개별설정 */ .procTem-accordion .slide01{} .procTem-accordion .slide02{} .procTem-accordion .slide03{} .procTem-accordion .slide04{} /* --------------------------------------------------------------------------- */ /* [공통]강조테이블 */ .procTem-ulTable{display:flex; position:relative; flex-direction:column; justify-content:center; align-items:center; gap:var(--padding-3xl);} .procTem-ulTable ul.table{display:flex; position:relative; flex-direction:row; text-align:center;} .procTem-ulTable .table li{display:flex; position:relative; flex-direction:column; border-radius:var(--border-radius-lg);padding:var(--padding-2xl) 0px; overflow:hidden; } .procTem-ulTable .table .item{display:flex; position:relative; justify-content:center; align-items:center; height:9rem; padding:var(--padding) var(--padding-2xl);} .procTem-ulTable .table .thead .item{font-size:var(--font-size-xl); line-height:1.18em; font-weight:var(--font-weight-bold); background-color:var(--gray-10);} .procTem-ulTable .table .tbody .item{font-size:var(--font-size-2xl); line-height:1.18em; letter-spacing:-1px; background-color:var(--bg-color-light);} .procTem-ulTable .table .tbody .th{font-weight:var(--font-weight-bold);} .procTem-ulTable .table .point{background-image:linear-gradient(to right, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 50%); background-color:#ac4349; z-index:var(--z-index); animation:ulTable-shadowFade 2s ease-in-out infinite;} .procTem-ulTable .table .point .item{color:var(--font-color-light); font-size:var(--font-size-3xl); font-weight:var(--font-weight-semibold); background:none;} .procTem-ulTable .table :not(.point){} .procTem-ulTable .table p{display:block;} .procTem-ulTable .table strong{display:inline-block; font-weight:var(--font-weight-bold);} .procTem-ulTable .table .item:first-child{border-top-left-radius:var(--border-radius-lg); border-top-right-radius:var(--border-radius-lg);} .procTem-ulTable .table .item:last-child{border-bottom-left-radius:var(--border-radius-lg); border-bottom-right-radius:var(--border-radius-lg);} .procTem-ulTable .table .item:not(:first-child){border-top:var(--border)} .procTem-ulTable .caption{display:block; position:relative; font-size:var(--font-size); opacity:0.5;} /* 애니메여선 */ @keyframes ulTable-shadowFade{ 0%{box-shadow:0 0 0 rgba(0,0,0,0);} 50%{box-shadow:0 10px 30px rgba(0,0,0,0.35);} 100%{box-shadow:0 0 0 rgba(0,0,0,0);} } @media (min-width: 768px) and (max-width: 991.98px) { /* [공통]강조테이블 */ .procTem-ulTable{} .procTem-ulTable ul.table{width:100%;} .procTem-ulTable .table li{flex:1 1 0;} .procTem-ulTable .table .thead .item{font-size:var(--font-size-lg);} .procTem-ulTable .table .tbody .item{font-size:var(--font-size-xl);} .procTem-ulTable .table .point .item{font-size:var(--font-size-xl);} } @media (max-width:767.98px) { /* [공통]강조테이블 */ .procTem-ulTable{} .procTem-ulTable ul.table{width:100%;} .procTem-ulTable .table li{flex:1 1 0;} .procTem-ulTable .table .item{padding:var(--padding) var(--padding-sm);} .procTem-ulTable .table .thead .item{font-size:var(--font-size); } .procTem-ulTable .table .tbody .item{font-size:var(--font-size-lg); } .procTem-ulTable .table .tbody .th{} .procTem-ulTable .table .point{} .procTem-ulTable .table .point .item{font-size:var(--font-size-xl);} .procTem-ulTable .table :not(.point){} .procTem-ulTable .table .item:first-child{} .procTem-ulTable .table .item:last-child{} .procTem-ulTable .table .item:not(:first-child){} .procTem-ulTable .caption{} } /* --------------------------------------------------------------------------- */ /* [공통]테이블 */ .procTem-table{display:block; position:relative;} .procTem-table .table{position:relative; width:100%; text-align:center; background-color:var(--bg-color-light);} .procTem-table .table tbody{position:relative;} .procTem-table .table tr{position:relative; border-top:var(--border);} .procTem-table .table th, .procTem-table .table td{padding:var(--padding-xl) var(--padding-2xl);} .procTem-table .table th{background-color:var(--gray-10);} .procTem-table .table td{border-left:var(--border);} .procTem-table .table tbody tr:first-child{} .procTem-table .table tbody tr:first-child th, .procTem-table .table tbody tr:first-child td{padding:var(--padding-4xl) var(--padding-2xl);} .procTem-table .table .head{color:var(--font-color-light); font-size:var(--font-size-3xl); background-image: linear-gradient(to right, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 50%); background-color:var(--primary); background-blend-mode: overlay;} @media (max-width: 767.98px) { /* [공통]테이블 */ .procTem-table{} .procTem-table .table{} } /* =========================================================================== */ /* =========================================================================== */ /* [시술상세별도작업] 써마지(Thermage) */ .specialPcoc.thermageProc{} .thermageProc{} /* --------------------------------------------------------------------------- */ /* [써마지-상단01]고객만족도 */ .thermageSection-top-01{padding:12rem 0px; background-color:#f5f3ec;} .thermageSection-top-01 .Inner{gap:14rem;} /* 상단 */ .thermageSection-top-01 .customProce-head{} .thermageSection-top-01 .customProce-proceTitle{gap:var(--padding-xl);} .thermageSection-top-01 .small-title{color:#cccab9; font-size:8.4rem; line-height:1.1em;} .thermageSection-top-01 .section-title{} .thermageSection-top-01 .section-title small:first-child{margin-bottom:var(--padding-lg);} /* 컨텐츠 */ .thermageSection-top-01 .customProce-body{flex-direction:row; gap:var(--padding-6xl);} .thermageSection-top-01 .Left{justify-content:flex-end;} .thermageSection-top-01 .Left .section-summary{} .thermageSection-top-01 .Right{flex:1;} @media (max-width:767.98px) { /* [써마지-상단01] */ .thermageSection-top-01{} .thermageSection-top-01 .Inner{padding:var(--customProc-inner-padding);} /* 상단 */ .thermageSection-top-01 .customProce-head{} .thermageSection-top-01 .customProce-proceTitle{} .thermageSection-top-01 .small-title{font-size:6rem;} /* 컨텐츠 */ .thermageSection-top-01 .customProce-body{flex-direction:column; gap:var(--padding-xl);} } /* --------------------------------------------------------------------------- */ /* [써마지-상단02]에너지전달 */ .thermageSection-top-02{padding:22rem 0px; background-size:100% 100% ; background-color:var(--bg-color-dark); background-image:url('/assets/images/sub/customProce_thermage_top02_bg.jpg');} .thermageSection-top-02 .Inner{width:100%; justify-content:flex-start; gap:8rem; padding:0px;} /* 상단 */ .thermageSection-top-02 .customProce-head{} .thermageSection-top-02 .customProce-proceTitle{gap:var(--padding-3xl); color:var(--font-color-light); text-align:center; } .thermageSection-top-02 .small-title{letter-spacing:0.4em; animation:thermageTop02ani-blur 1.2s infinite alternate;} .thermageSection-top-02 .section-title{} /* 컨텐츠 */ .thermageSection-top-02 .customProce-body{} .thermageSection-top-02 .Center{} /* 템플릿 */ .procTem-thermagT02tem{display:block; position:relative;} .procTem-thermagT02tem dl{display:flex; position:relative; flex-direction:row; align-items:center; width:100%; -webkit-mask-image:radial-gradient(circle, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%); -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:cover; mask-image:radial-gradient(circle, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%); mask-repeat:no-repeat; mask-position:center; mask-size:cover; } .procTem-thermagT02tem dt{flex-basis:25%; display:block; position:relative; z-index:calc( var(--z-index) + 1);} .procTem-thermagT02tem .thum{display:flex; position:relative; width:100%; justify-content:flex-end; align-items:center; aspect-ratio:520/300; overflow:hidden;} .procTem-thermagT02tem .thum img{display:block; width:100%; height:100%; object-fit:cover; object-position:right;} .procTem-thermagT02tem dd{flex:1; display:flex; position:relative; justify-content:center; align-items:center; color:var(--font-color-light); font-weight:var(--font-weight-bold); margin-left:-50%; } .procTem-thermagT02tem dd.viewpoint-on{clip-path:inset(0 100% 0 0); animation:thermageTop02ani-reveal 2s ease forwards;} .procTem-thermagT02tem dd *{font-weight:inherit;} .procTem-thermagT02tem .bar{display:flex; position:relative; width:100%; justify-content:flex-start; gap:var(--padding); text-align:center; padding:var(--padding-lg); background-size:0% 100%; background-repeat:no-repeat; animation:thermageTop02ani-wave 3s linear infinite;} .procTem-thermagT02tem .Box{display:inline-flex; position:relative; flex-direction:column; gap:var(--padding); width:60vh; z-index:2;} .procTem-thermagT02tem .point{display:flex; position:relative; flex-direction:row; gap:var(--padding); justify-content:center; align-items:center;} .procTem-thermagT02tem .point .itnm{display:inline-block; position:relative; font-size:var(--font-size-2xl); border:2px solid var(--border-color-light); border-radius:var(--border-radius-2xl); background-color:#dec4d7; padding:var(--padding-sm) var(--padding-2xl); text-shadow:0 0 3px #b352e5,0 0 3px #5c5763,0 0 3px #5c5763,0 0 3px #5c5763;} .procTem-thermagT02tem .point .itnm:before{content:'+'; display:inline-block; position:absolute; left:-0.2rem; top:-1rem; font-size:1.2em;} .procTem-thermagT02tem em{display:block; font-size:var(--font-size-5xl); line-height:var(--line-height-xs); text-shadow:0 0 5px #5c5763,0 0 5px #5c5763,0 0 10px #5c5763,0 0 10px #5c5763;} .procTem-thermagT02tem .name{display:inline-block;} /* 별도지정-일반써마지 */ .procTem-thermagT02tem.tem01{transform:scale(0.8); transform-origin:center left; opacity:0.55;} .procTem-thermagT02tem.tem01 .bar{padding:3em var(--padding-lg); padding-left:52%; border-color:#45717c; box-shadow:0 0 15px #45717c; box-shadow:0 0 15px #45717c; background-color:#899298; background-image:linear-gradient(to right, #45717c 0%, #45717c 90%, rgba(103,55,118,0) 100%); } .procTem-thermagT02tem.tem01 em{font-size:var(--font-size-3xl);} .procTem-thermagT02tem.tem01 .name{} /* 별도지정-헤리티지써마지 */ .procTem-thermagT02tem.tem02{z-index:var(--z-index);} .procTem-thermagT02tem.tem02 .name{color:#8f4492; text-shadow:0 0 5px #bfa7bf,0 0 10px #bfa7bf,0 0 15px #bfa7bf,0 0 20px #bfa7bf;} .procTem-thermagT02tem.tem02 .bar{padding-left:42%; border-top:2px solid #b352e5; border-bottom:2px solid #b352e5; box-shadow:0 0 15px #9857b1; background-color:#c1a9c0; background-image:linear-gradient(to right, #7c4883 0%, #7c4883 90%, rgba(103,55,118,0) 100%); } /* [애니메이션]blur 제목용 */ @keyframes thermageTop02ani-blur { 0% {text-shadow:0 0 5px #b352e5,0 0 10px #b352e5,0 0 15px #b352e5,0 0 20px #b352e5;} 100% {text-shadow:0 0 30px #b352e5,0 0 40px #b352e5,0 0 60px #b352e5,0 0 80px #b352e5;} } /* [애니메이션]waveMove */ @keyframes thermageTop02ani-wave { from {background-size:0% 100%;} /* 왼쪽에서 시작 */ to {background-size:100% 100%;} /* 오른쪽 끝까지 채움 */ } /* [애니메이션]reveal */ @keyframes thermageTop02ani-reveal { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } } @media (max-width:991.98px) { /* [써마지-상단02]에너지전달 */ .thermageSection-top-02{padding:12rem 0px; } .thermageSection-top-02 .Inner{gap:4rem; padding:0px;} /* 상단 */ .thermageSection-top-02 .customProce-head{padding:var(--customProc-inner-padding);} /* 컨텐츠 */ .thermageSection-top-02 .customProce-body{} /* 템플릿 */ .procTem-thermagT02tem{} .procTem-thermagT02tem dl{} .procTem-thermagT02tem dt{flex-basis:20%;} .procTem-thermagT02tem .thum{aspect-ratio:320 / 400;} .procTem-thermagT02tem dd{padding:4rem 0px; margin-left:-30%; } .procTem-thermagT02tem .bar{} .procTem-thermagT02tem .Box{} .procTem-thermagT02tem .point{} .procTem-thermagT02tem .point .itnm{font-size:var(--font-size-xl);} .procTem-thermagT02tem .point .itnm:before{font-size:var(--font-size-3xl);} .procTem-thermagT02tem em{font-size:var(--font-size-3xl); } /* 별도지정-일반써마지 */ .procTem-thermagT02tem.tem01{transform:scale(1);} .procTem-thermagT02tem.tem01 em{font-size:var(--font-size-xl);} .procTem-thermagT02tem.tem01 .bar{padding-left:26%;} /* 별도지정-헤리티지써마지 */ .procTem-thermagT02tem.tem02{} .procTem-thermagT02tem.tem02 .bar{padding-left:20%;} } @media (min-width:768px) and (max-width:991.98px) { /* 별도지정-헤리티지써마지 */ .procTem-thermagT02tem.tem02{} .procTem-thermagT02tem.tem02 .bar{padding-left:22%;} } /* --------------------------------------------------------------------------- */ /* [써마지-상단03]체크사항 */ .thermageSection-top-03{padding:0px; background-size:100% 100%;} /* 상단 */ .thermageSection-top-03 .customProce-head{color:var(--font-color-light); text-align:center; background-color:#473828; padding:13rem 0px;} .thermageSection-top-03 .customProce-head .Inner{} .thermageSection-top-03 .customProce-proceTitle{} .thermageSection-top-03 .small-title{} .thermageSection-top-03 .section-title{} /* 컨텐츠 */ .thermageSection-top-03 .customProce-body{padding:13rem 0px;} .thermageSection-top-03 .customProce-body .Inner{gap:var(--padding-6xl);} .thermageSection-top-03 .Left{} .thermageSection-top-03 .customProce-body .customProce-proceTitle{text-align:center;} .thermageSection-top-03 .customProce-body .small-title{font-size:8rem; line-height:1em; opacity:0.4;} .thermageSection-top-03 .customProce-body .section-title{} .thermageSection-top-03 .Right{justify-content:center; } .thermageSection-top-03 .Right .procTem-thermagT03tem-list{} /* 템플릿 */ .procTem-thermagT03tem-list{display:inline-flex; position:relative; flex-direction:column; gap:var(--padding-3xl);} .procTem-thermagT03tem-list li{display:block; position:relative;} .procTem-thermagT03tem{display:block; position:relative;} .procTem-thermagT03tem dl{display:flex; position:relative; flex-direction:row; align-items:center; gap:var(--padding-lg); border-radius:var(--border-radius-3xl); background-color:#f5f3ec; padding:var(--padding-xl) var(--padding-4xl); transition:var(--transition);} .procTem-thermagT03tem dt{} .procTem-thermagT03tem .deco{display:flex; position:relative; width:var(--icon-size-sm); aspect-ratio:1; flex-direction:row; justify-content:flex-start; align-items:center; border:2px solid var(--font-color);} .procTem-thermagT03tem .deco::after{content:""; display:block; position:absolute; left:30%; bottom:30%; width:1rem; height:1.8rem; border:solid var(--font-color); border-width:0 4px 4px 0; transform:rotate(45deg); transition:var(--transition); display:none;} /* 일단숨김. */ .procTem-thermagT03tem dd{flex:1;} .procTem-thermagT03tem .summary{display:block; position:relative; font-size:var(--font-size-3xl); font-weight:var(--font-weight-semibold);} .procTem-thermagT03tem:hover dl{color:var(--font-color-light); background-color:#34302e; } .procTem-thermagT03tem:hover .deco{border-color:var(--border-color-light);} .procTem-thermagT03tem:hover .deco::after{display:block; border-color:var(--border-color-light);} /* active가 hover처럼 작동 */ .procTem-thermagT03tem.active dl{color:var(--font-color-light); background-color:#34302e;} .procTem-thermagT03tem.active .deco{border-color:var(--border-color-light);} .procTem-thermagT03tem.active .deco::after{display:block; border-color:var(--border-color-light);} @media (max-width:991.98px) { /* [써마지-상단03]체크사항 */ .thermageSection-top-03{} /* 상단 */ .thermageSection-top-03 .customProce-head{padding:var(--padding-5xl) 0px;} /* 컨텐츠 */ .thermageSection-top-03 .customProce-body{padding:var(--padding-6xl) 0px;} .thermageSection-top-03 .customProce-body .Inner{gap:var(--customProc-inner-padding);} .thermageSection-top-03 .Left{} .thermageSection-top-03 .customProce-body .customProce-proceTitle{} .thermageSection-top-03 .customProce-body .small-title{font-size:5rem;} .thermageSection-top-03 .Right{} .thermageSection-top-03 .Right .procTem-thermagT03tem-list{} /* 템플릿 */ .procTem-thermagT03tem-list{} .procTem-thermagT03tem-list li{} .procTem-thermagT03tem{} .procTem-thermagT03tem dl{ gap:var(--padding); padding:var(--padding-xl) var(--padding-lg);} .procTem-thermagT03tem dt{} .procTem-thermagT03tem dd{} .procTem-thermagT03tem .summary{font-size:var(--font-size-lg); letter-spacing:-2px;} } /* --------------------------------------------------------------------------- */ /* [써마지-상단04]아시아최초 */ .thermageSection-top-04{padding:0px; color:var(--font-color-light); background-color:#2f2720;} /* 컨텐츠 */ .thermageSection-top-04 .customProce-body{} /* 오른쪽 */ .thermageSection-top-04 .Left{background-repeat:no-repeat; background-position:top center; background-size:100% auto; background-image:url('/assets/images/sub/customProce_thermage_top04_motion00.jpg');} .thermageSection-top-04 .Left .imgBox{display:block; width:100%;} .thermageSection-top-04 .Left img{display:block; width:100%; object-fit:cover;} .thermageSection-top-04 .Left .imgBox.viewpoint-on{opacity:0; animation:thermageTop04ani-fadeIn 4s ease forwards;} /* 왼쪽 */ .thermageSection-top-04 .Right{position:absolute; width:100%; height:100%; text-shadow:0 0 5px #2f2720, 0 0 5px #2f2720, 0 0 10px #2f2720, 0 0 10px #2f2720; padding:3rem 0px 17rem 0px; } .thermageSection-top-04 .Inner{height:84%; justify-content:space-between; padding:0px var(--customProc-side-padding); } .thermageSection-top-04 .customProce-proceTitle{text-align:center;} .thermageSection-top-04 .section-title{} .thermageSection-top-04 .section-summary{gap:var(--padding-lg); text-align:right; } .thermageSection-top-04 .section-summary p{font-size:var(--font-size-2xl); font-weight:var(--font-weight-semibold);} .thermageSection-top-04 .section-summary p small{display:block; font-size:var(--font-size-lg);} .thermageSection-top-04 .section-summary em{} .thermageSection-top-04 .section-summary em strong{font-size:10rem; line-height:1.2em;} .thermageSection-top-04 .section-summary cite{font-size:var(--font-size-lg); opacity:0; transition:opacity 1s ease 0.8s; } .thermageSection-top-04 .section-summary.aos-animate cite{opacity:0.8;} /* 애니메이션 */ @keyframes thermageTop04ani-fadeIn{ from{opacity:0;} to{opacity:1;} } @media (min-width:768px) and (max-width:991.98px) { /* [써마지-상단04] 아시아최초 */ .thermageSection-top-04{} /* 왼쪽 */ .thermageSection-top-04 .Right{padding:6rem var(--padding-xl);} .thermageSection-top-04 .Inner {height:100%; padding:0px var(--padding-xl);} } @media (max-width:767.98px) { /* [써마지-상단04] 아시아최초 */ .thermageSection-top-04{} /* 컨텐츠 */ .thermageSection-top-04 .customProce-body{} /* 오른쪽 */ .thermageSection-top-04 .Left{height:100dvh; background-size:auto 100%;} .thermageSection-top-04 .Left .imgBox{height:100%;} .thermageSection-top-04 .Left img{width:auto; height:100%;} /* 왼쪽 */ .thermageSection-top-04 .Right{padding:6rem var(--customProc-inner-padding);} .thermageSection-top-04 .Inner{height:100%;} .thermageSection-top-04 .section-summary em strong{font-size:6rem;} } /* --------------------------------------------------------------------------- */ /* [써마지-상단05]사용량증가 */ .thermageSection-top-05{padding:0px; padding-top:24rem;} /* 상단 */ .thermageSection-top-05 .customProce-head{text-align:center;} .thermageSection-top-05 .customProce-head .Inner{} .thermageSection-top-05 .customProce-proceTitle{} .thermageSection-top-05 .customProce-proceTitle::before{content:''; display:block; position:absolute; width:38rem; aspect-ratio:1; left:50%; top:50%; margin-left:calc( -38rem / 2); margin-top:calc( -38rem / 2); marginbackground-repeat:no-repeat; background-position:center center; background-size:auto 100%; background-image:url('/assets/images/sub/customProce_thermage_top05_deco01.png'); animation:thermageTop05ani-spin 15s linear infinite;} .thermageSection-top-05 .small-title{} .thermageSection-top-05 .section-title{} /* 컨텐츠 */ .thermageSection-top-05 .customProce-body{justify-content:flex-end;} .thermageSection-top-05 .graphArea{display:block; position:relative; width:100%;} .thermageSection-top-05 .graphArea .imgBox{display:block; position:relative; width:100%; aspect-ratio: 1920 / 1162; overflow:hidden;} .thermageSection-top-05 .graphArea .imgBox img{display:block; position:relative; width:100%; } .thermageSection-top-05 .graphArea.viewpoint-on .imgBox img{ clip-path:inset(0 100% 0 0); animation:thermageTop05ani-reveal 2s ease forwards;} .thermageSection-top-05 .graphArea .point{display:block; position:absolute; top:20%; right:28.2%; width:2em; aspect-ratio:1; border-radius:var(--border-radius-max); animation:thermageTop05ani-twink 0.7s 0s infinite ease-in-out alternate; z-index:var(--z-index);} .thermageSection-top-05 .Right{position:absolute; right:0%; bottom:10%; width:100%; text-align:right; z-index:var(--z-index);} .thermageSection-top-05 .Right .Inner{} .thermageSection-top-05 .section-summary{gap:0px;} .thermageSection-top-05 .section-summary em strong{display:inline-block; color:#572986; animation:thermageTop05ani-pumping 1.5s ease infinite; padding:0px var(--padding-sm);} .thermageSection-top-05 .section-summary em strong span{font-size:var(--font-size-5xl); line-height:var(--line-height-xs);} /* 애니메이션 */ @keyframes thermageTop05ani-pumping{ 0%{transform:scale(1); } 50%{transform:scale(1.2); } 100%{transform:scale(1); } } @keyframes thermageTop05ani-twink { 0%{background-color:#e1d7f4;} 100%{background-color:#b176ed;} } @keyframes thermageTop05ani-reveal { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } } @keyframes thermageTop05ani-spin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} } @media (min-width:768px) and (max-width:991.98px) { /* 태블릿 only:768px ~ 991.98px 태블릿 전용 스타일 */ /* [써마지-상단05]사용량증가 */ .thermageSection-top-05{} .thermageSection-top-05 .graphArea .point{top:22%; right:28.2%; width:1em; } } @media (min-width:992px) { /* PC only:992px 이상 노트북, 데스크탑 등 PC 전용 스타일 */ /* [써마지-상단05]사용량증가 */ .thermageSection-top-05{} .thermageSection-top-05 .graphArea .point{} } @media (max-width:767.98px) { /* [써마지-상단05]사용량증가 */ .thermageSection-top-05{padding:0px; padding-top:12rem; gap:var(--padding-4xl);} /* 상단 */ .thermageSection-top-05 .customProce-head{} .thermageSection-top-05 .customProce-proceTitle{} .thermageSection-top-05 .customProce-proceTitle::before{width:28rem; margin-left:calc( -28rem / 2); margin-top:calc( -28rem / 2); } /* 컨텐츠 */ .thermageSection-top-05 .customProce-body{} .thermageSection-top-05 .graphArea{} .thermageSection-top-05 .graphArea .imgBox{} .thermageSection-top-05 .graphArea .point{top:20%; right:28.2%; width:1em;} .thermageSection-top-05 .Right{bottom:0%; width:100%;} .thermageSection-top-05 .Right .Inner{padding:var(--customProc-inner-padding);} .thermageSection-top-05 .section-summary{} .thermageSection-top-05 .section-summary em{font-size:var(--font-size-2xl);} .thermageSection-top-05 .section-summary em strong{} .thermageSection-top-05 .section-summary em strong span{} } /* --------------------------------------------------------------------------- */ /* [써마지-상단06]진짜피부과전문의 */ .thermageSection-top-06{padding:13rem 0px; background-image:url('/assets/images/sub/customProce_thermage_top06_bg.jpg');} .thermageSection-top-06 .Inner{gap:var(--padding-6xl);} /* 상단 */ .thermageSection-top-06 .customProce-head{} .thermageSection-top-06 .customProce-proceTitle{} .thermageSection-top-06 .small-title{} .thermageSection-top-06 .section-title{} /* 컨텐츠 */ .thermageSection-top-06 .customProce-body{} .thermageSection-top-06 .Left{display:inline-flex; width:auto; margin:auto;} .thermageSection-top-06 .graphArea{display:inline-flex; position:relative; flex-direction:column; gap:var(--padding); text-align:center; } .thermageSection-top-06 .graphArea .imgBox{display:inline-block; position:relative; aspect-ratio:824/450; margin:auto; overflow:hidden;} .thermageSection-top-06 .graphArea .imgBox img{} .thermageSection-top-06 .point{display:inline-flex; position:absolute; top:17.6%; right:1.5%; width:2.8rem; aspect-ratio:1; border-radius:var(--border-radius-max); background:#34302e; box-shadow:0 3px 6px rgba(0,0,0,0.1); z-index:2; animation:thermageTop06ani-corePulse 0.9s ease-in-out infinite;} .thermageSection-top-06 .point::before, .thermageSection-top-06 .point::after{content:""; position:absolute; left:50%; top:50%; width:100%; height:100%; transform:translate(-50%,-50%) scale(1); border-radius:50%; border:2px solid #34302e; background:transparent; opacity:0.6; animation:thermageTop06ani-wave 1.8s cubic-bezier(.22,.85,.36,1) infinite;} .thermageSection-top-06 .point::after{animation-delay:0.9s; opacity:0.35;} .thermageSection-top-06 .graphArea .legend{display:block; position:relative; text-align:right;} .thermageSection-top-06 .Right{justify-content:center; text-align:center;} .thermageSection-top-06 .Right .imgBox{} .thermageSection-top-06 .Right .customProce-proceTitle{margin-top:-8%;} .thermageSection-top-06 .Right .small-title{} .thermageSection-top-06 .Right .section-title{} /* 애니메이션 */ @keyframes thermageTop06ani-wave{ 0%{transform:translate(-50%,-50%) scale(1); opacity:0.6;} 100%{transform:translate(-50%,-50%) scale(1.5); opacity:0;} } @keyframes thermageTop06ani-corePulse{ 0%{transform:scale(1);} 50%{transform:scale(0.94);} 100%{transform:scale(1);} } @media (max-width:767.98px) { /* [써마지-상단06]진짜피부과전문의 */ .thermageSection-top-06{} /* 컨텐츠 */ .thermageSection-top-06 .customProce-body{} .thermageSection-top-06 .point{top:18%; right:1.5%; width:1.6rem; } .thermageSection-top-06 .point::before, .thermageSection-top-06 .point::after{} } /* --------------------------------------------------------------------------- */ /* [써마지-상단07]고주파 */ .thermageSection-top-07{padding:6em 0px; padding-bottom:0px; background-color:#2e2b2a; background-image:url('/assets/images/sub/customProce_thermage_top07_bg.jpg'); color:var(--font-color-light); } .thermageSection-top-07 .Inner{gap:11rem;} /* 상단 */ .thermageSection-top-07 .customProce-head{text-align:center;} .thermageSection-top-07 .customProce-proceTitle{} .thermageSection-top-07 .small-title{color:#cccab9; font-family:var(--font-family-sub5); font-size:8rem; font-weight:var(--font-weight);} .thermageSection-top-07 .small-title span{font-size:inherit;} .thermageSection-top-07 .section-title{} .thermageSection-top-07 .customProce-proceTitle small{display:inline-block;} .thermageSection-top-07 .typing-text{display:inline-flex; white-space:nowrap; overflow:hidden;} /* 컨텐츠 */ .thermageSection-top-07 .customProce-body{flex-direction:row; } .thermageSection-top-07 .Left{flex:1; align-items:end;} .thermageSection-top-07 .Left .imgBox{} .thermageSection-top-07 .Right{flex:1; justify-content:flex-end; padding-bottom:var(--padding-4xl);} .thermageSection-top-07 .section-summary{} .thermageSection-top-07 .section-summary p em{display:inline-block;} @media (min-width:768px) and (max-width:991.98px) { /* [써마지-상단07]고주파 */ .thermageSection-top-07{} .thermageSection-top-07 .Inner{padding-bottom:0px;} } @media (max-width:767.98px) { /* [써마지-상단07]고주파 */ .thermageSection-top-07{} .thermageSection-top-07 .Inner{gap:var(--padding-5xl); padding-bottom:0px;} /* 상단 */ .thermageSection-top-07 .customProce-head{} .thermageSection-top-07 .customProce-proceTitle{} .thermageSection-top-07 .small-title{font-size:var(--font-size-6xl);} .thermageSection-top-07 .section-title{} /* 컨텐츠 */ .thermageSection-top-07 .customProce-body{flex-direction:column;} .thermageSection-top-07 .Left{order:2;} .thermageSection-top-07 .Right{order:1; text-align:center;} .thermageSection-top-07 .Right .section-summary{} .thermageSection-top-07 .Right .section-summary p:last-child br{display:none;} .thermageSection-top-07 .section-summary p em{font-size:var(--font-size-3xl);} } /* --------------------------------------------------------------------------- */ /* [써마지-상단08]누적사용량 */ .thermageSection-top-08{padding:7em 0px; background-color:#f5f3ec;} .thermageSection-top-08 .Inner{gap:var(--padding-5xl);} /* 상단 */ .thermageSection-top-08 .customProce-head{text-align:center;} .thermageSection-top-08 .customProce-proceTitle{} .thermageSection-top-08 .section-title{} /* 컨텐츠 */ .thermageSection-top-08 .customProce-body{text-align:center;} .thermageSection-top-08 .Center{display:inline-flex; margin:auto; gap:var(--padding-xl);} .thermageSection-top-08 .section-summary em{font-weight:var(--font-weight);} .thermageSection-top-08 .section-summary em strong{font-weight:var(--font-weight-bold);} .thermageSection-top-08 .graphArea{display:inline-flex; position:relative; flex-direction:column; gap:var(--padding); text-align:center;} .thermageSection-top-08 .graphArea .imgBox{display:inline-block; position:relative; margin:auto;} .thermageSection-top-08 .graphArea .imgBox img{} .thermageSection-top-08 .graphArea .legend{display:flex; position:relative; justify-content:flex-end; gap:var(--padding-lg);} .thermageSection-top-08 .graphArea .legend span{} .thermageSection-top-08 .graphArea .legend span:nth-child(1){color:#34302e;} .thermageSection-top-08 .graphArea .legend span:nth-child(2){color:#b9b9b5;} /* 템플릿 */ .procTem-thermagT08tem-list{display:inline-flex; position:relative; flex-direction:row; gap:var(--padding-2xl); width:100%; margin:auto;} .procTem-thermagT08tem-list li{flex:1; display:inline-flex; position:relative; align-items:flex-end;} .procTem-thermagT08tem{display:inline-flex; position:relative; flex-direction:column; width:100%; background-color:var(--bg-color-light); border-radius:20rem 20rem 0px 0px; padding:var(--padding-lg); padding-top:var(--padding-5xl);} .procTem-thermagT08tem dl{display:flex; position:relative; flex-direction:column; gap:var(--padding-lg); text-align:center;} .procTem-thermagT08tem dt{display:flex; position:relative; align-items:flex-end; justify-content:center;} .procTem-thermagT08tem .graphBox{display:flex; position:relative; justify-content:center; align-items:flex-end; gap:var(--padding-lg); width:70%;} .procTem-thermagT08tem .graphBox > *{flex:1; display:flex; position:relative; flex-direction:column; align-items:center; justify-content:flex-end; height:33rem;} .procTem-thermagT08tem .graphBox .bar{display:flex; position:relative; align-items:flex-end; width:100%;} .procTem-thermagT08tem .graphBox p{display:block; font-weight:var(--font-weight-semibold); white-space:nowrap;} .procTem-thermagT08tem .graphBox .leftBox{} .procTem-thermagT08tem .graphBox .leftBox p{font-size:var(--padding-3xl); animation:thermageTop05ani-pumping 1.5s ease infinite;} .procTem-thermagT08tem .graphBox .leftBox p strong{font-size:1.3em;} .procTem-thermagT08tem .graphBox .leftBox .bar{height:100%; max-width:7rem; background-color:#34302e;transform-origin:bottom;} .procTem-thermagT08tem .graphBox .rightBox{flex:1; display:flex; position:relative; flex-direction:column; color:#b9b9b5;} .procTem-thermagT08tem .graphBox .rightBox p{letter-spacing:-1px;} .procTem-thermagT08tem .graphBox .rightBox .bar{height:42%; max-width:4rem; background-color:#b9b9b5;} .procTem-thermagT08tem cite{display:block; font-size:var(--font-size);} .procTem-thermagT08tem dd{display:flex; position:relative; flex-direction:column; gap:var(--padding);} .procTem-thermagT08tem dd em{display:block; font-size:var(--font-size-3xl); font-weight:var(--font-weight-semibold);} .procTem-thermagT08tem-list li:nth-child(2) .leftBox{height:40rem;} .procTem-thermagT08tem-list li:nth-child(1) .leftBox .bar{} .procTem-thermagT08tem-list li:nth-child(2) .leftBox .bar{} .procTem-thermagT08tem-list li:nth-child(3) .leftBox .bar{} .procTem-thermagT08tem.viewpoint .leftBox .bar{transform:scaleY(0.3);} .procTem-thermagT08tem.viewpoint-on .leftBox .bar{animation:thermageTop08ani-growY 2s ease-in-out forwards;} .procTem-thermagT08tem-list li:nth-child(1) .rightBox .bar{height:36%;} .procTem-thermagT08tem-list li:nth-child(2) .rightBox .bar{height:44%;} .procTem-thermagT08tem-list li:nth-child(3) .rightBox .bar{height:15%;} /* 애니메이션 */ @keyframes thermageTop08ani-pumping{ 0%{transform:scale(1); } 50%{transform:scale(1.2); } 100%{transform:scale(1); } } /* 애니메이션 주요막대그래프모션 */ @keyframes thermageTop08ani-growY { 0%{transform:scaleY(0.3);} 100%{transform:scaleY(1);} } @media (max-width:767.98px) { /* [써마지-상단08]누적사용량 */ .thermageSection-top-08{} /* 컨텐츠 */ .thermageSection-top-08 .customProce-body{} .thermageSection-top-08 .Center{} /* 템플릿 */ .procTem-thermagT08tem-list{flex-direction:column; justify-content:center;} .procTem-thermagT08tem-list li{justify-content:center;} .procTem-thermagT08tem-list li:nth-child(1){} .procTem-thermagT08tem-list li:nth-child(2){} .procTem-thermagT08tem-list li:nth-child(3){} .procTem-thermagT08tem{width:auto;} .procTem-thermagT08tem .graphBox > *{} .procTem-thermagT08tem .graphBox .leftBox p{font-size:var(--padding-xl); } .procTem-thermagT08tem dd em{font-size:var(--font-size-lg);} .procTem-thermagT08tem-list li:nth-child(2) .procTem-thermagT08tem .graphBox .leftBox{} } /* --------------------------------------------------------------------------- */ /* [써마지-상단09]부작용다운 */ .thermageSection-top-09{padding:6em 0px;} .thermageSection-top-09 .Inner{ gap:var(--padding-5xl);} /* 상단 */ .thermageSection-top-09 .customProce-head{text-align:center;} .thermageSection-top-09 .customProce-proceTitle{} .thermageSection-top-09 .small-title{} .thermageSection-top-09 .section-title{} .thermageSection-top-09 .section-title i{font-family:var(--font-family-sub4); font-style:italic; font-weight:var(--font-weight-bold);} /* 컨텐츠 */ .thermageSection-top-09 .customProce-body{flex-direction:row;} .thermageSection-top-09 .Left{flex:1; justify-content:flex-end; text-align:right;} .thermageSection-top-09 .Left .procTem-thermagT09tem dt{justify-content:flex-end;} .thermageSection-top-09 .Right{flex:1; justify-content:flex-end;} .thermageSection-top-09 .Right .procTem-thermagT09tem dt{order:2;} .thermageSection-top-09 .Right .procTem-thermagT09tem dd{order:1;} /* 템플릿 */ .procTem-thermagT09tem{display:block; position:relative; height:100%;} .procTem-thermagT09tem dl{display:flex; position:relative; flex-direction:column; justify-content:space-between; gap:5em; height:100%;} .procTem-thermagT09tem dt{display:flex; position:relative;} .procTem-thermagT09tem .thum img{display:inline-block;} .procTem-thermagT09tem dd{display:flex; position:relative; flex-direction:column;} .procTem-thermagT09tem em{font-size:var(--font-size-4xl); font-weight:var(--font-weight-bold); line-height:1.2em;} @media (max-width:767.98px) { /* [써마지-상단09]부작용다운 */ .thermageSection-top-09{} /* 상단 */ .thermageSection-top-09 .customProce-head{} /* 컨텐츠 */ .thermageSection-top-09 .customProce-body{} /* 템플릿 */ .procTem-thermagT09tem{} .procTem-thermagT09tem dl{gap:var(--padding-3xl);} .procTem-thermagT09tem dd{} .procTem-thermagT09tem em{font-size:var(--font-size-2xl); letter-spacing:-2px;} } /* --------------------------------------------------------------------------- */ /* [써마지-상단10]통증컨트롤(공통하단05) */ .customProce-commonBottom-06.thermageSection-top-10{} .thermageSection-top-10{} /* --------------------------------------------------------------------------- */ /* [써마지-상단11]전세계 */ .thermageSection-top-11{padding:12em 0px; padding-bottom:0px; background-image:url('/assets/images/sub/customProce_thermage_top11_bg.jpg');} .thermageSection-top-11 .Inner{} /* 컨텐츠 */ .thermageSection-top-11 .customProce-body{flex-direction:row;} .thermageSection-top-11 .Left{flex:1; justify-content:space-between; gap:var(--padding-4xl); padding-bottom:var(--padding-6xl);} .thermageSection-top-11 .customProce-proceTitle{} .thermageSection-top-11 .Left .procTem-thermagT11tem-list{} .thermageSection-top-11 .Right{flex:1; align-items:center;} .thermageSection-top-11 .Right .imgBox{display:inline-block; } /* 템플릿 */ .procTem-thermagT11tem-list{display:inline-flex; position:relative; flex-direction:column; gap:var(--padding-xl); } .procTem-thermagT11tem-list li{display:block; position:relative;} .procTem-thermagT11tem{display:block; position:relative; transform-origin:center center; letter-spacing:-0.5px;} .procTem-thermagT11tem dl{display:flex; position:relative; flex-direction:row; align-items:center; gap:var(--padding-lg); text-align:center; border:1px solid #473828; border-radius:var(--border-radius-3xl); background-color:rgba(255,255,255,0.4); padding:var(--padding-lg) var(--padding-xl); transition:var(--transition); } .procTem-thermagT11tem dd{flex:1;} .procTem-thermagT11tem .summary{display:block; position:relative; font-size:var(--font-size-xl); font-weight:var(--font-weight-semibold);} .procTem-thermagT11tem:hover dl{color:var(--font-color-light); background-color:#473828; animation:thermageTop11ani-scale 1s ease 0.2s;} /* active가 hover처럼 작동 */ .procTem-thermagT11tem.active dl{color:var(--font-color-light); background-color:#473828; animation:thermageTop11ani-scale 1s ease 0.2s;} /* 애니메이션 */ @keyframes thermageTop11ani-scale { 0% {transform:scale(1);} 50% {transform:scale(1.1);} /* 가운데 기준으로 1.1배 */ 100% {transform:scale(1);} } @media (min-width:768px) and (max-width:991.98px) { /* [써마지-상단11]전세계 */ .thermageSection-top-11{} .thermageSection-top-11 .Inner{padding-bottom:0px;} /* 컨텐츠 */ .thermageSection-top-11 .customProce-body{} } @media (max-width:767.98px) { /* [써마지-상단11]전세계 */ .thermageSection-top-11{padding-top:var(--padding-6xl); } .thermageSection-top-11 .Inner{ padding-bottom:0px;} /* 컨텐츠 */ .thermageSection-top-11 .customProce-body{flex-direction:column;} .thermageSection-top-11 .Left{} .thermageSection-top-11 .Left .procTem-thermagT11tem-list{} .thermageSection-top-11 .Right{text-align:center;} .thermageSection-top-11 .Right .imgBox{margin:auto; overflow:hidden; height:48dvh;} .thermageSection-top-11 .Right img{width:80%; } } /* --------------------------------------------------------------------------- */ /* [써마지-상단12]퍼스트써마지 */ .thermageSection-top-12{gap:13rem; padding-bottom:0px;} /* 상단 */ .thermageSection-top-12 .customProce-head{text-align:center;} .thermageSection-top-12 .customProce-proceTitle{} .thermageSection-top-12 .small-title{} .thermageSection-top-12 .section-title{} /* 컨텐츠 */ .thermageSection-top-12 .customProce-body{} /* 롤링배너 */ .thermagT12Banner{display:block; position:relative;} .thermagT12Banner .Inner{display:flex; position:relative; flex-direction:row; gap:var(--padding-4xl); width:100%; height:80dvh;} /* 반드시높이를지정해줘야함 */ .thermagT12Banner .major-wrapper{flex-basis:50%; width:50%; display:flex; position:relative; justify-content:flex-end; } .thermagT12Banner .major-wrapper .swiper{} .thermagT12Banner .major-wrapper .swiper .swiper-wrapper{} .thermagT12Banner .major-wrapper .swiper .swiper-slide{border-radius:var(--border-radius-xl); overflow:hidden;} .thermagT12Banner .major-wrapper .swiper .swiper-slide a{display:block; position:relative; background-color:var(--bg-color-light); } .thermagT12Banner .major-wrapper .swiper .swiper-slide .thum{display:flex; position:relative; width:100%; height:100%; background-color:#f1eee8; overflow:hidden;} /* aspect-ratio:546/792; */ .thermagT12Banner .major-wrapper .swiper .swiper-slide img{display:block; width:100%; height:100%; object-fit:cover; transition:var(--transition);} .thermagT12Banner .thumb-wrapper{flex-basis:50%; width:50%; display:flex; position:relative;} .thermagT12Banner .thumb-wrapper .swiper{overflow:revert; } .thermagT12Banner .thumb-wrapper .swiper .swiper-wrapper{display:flex; flex-direction: column; justify-content: space-between; gap: var(--padding);} .thermagT12Banner .thumb-wrapper .swiper .swiper-slide{flex:1; padding-left:var(--padding-3xl); cursor:pointer; height:auto !important;} .thermagT12Banner .thumb-wrapper .swiper .swiper-slide::before{content:''; display:block; position:absolute; left:0%; top:0%; height:120%; border-left:2px solid var(--border-color);} .thermagT12Banner .thumb-wrapper .swiper .swiper-slide::after{content:''; display:block; position:absolute; left:-1rem;; top:5%; width:2rem; aspect-ratio:1; border-radius:var(--border-radius-max); background-color:var(--border-color); transition:var(--transition);} .thermagT12Banner .thumb-wrapper .swiper .swiper-slide:first-child::before{top:5%;} .thermagT12Banner .thumb-wrapper .swiper .swiper-slide:last-child::before{display:none;} .thermagT12Banner .thumb-wrapper .swiper-slide.swiper-slide-thumb-active{} .thermagT12Banner .thumb-wrapper .swiper-slide.swiper-slide-thumb-active::after{background-color:var(--bg-color-dark);} /* 템플릿 */ .procTem-thermagT12tem{display:flex; position:relative;} .procTem-thermagT12tem dl{display:block; position:relative;} .procTem-thermagT12tem dt{display:block; position:relative;} .procTem-thermagT12tem dt em{font-size:var(--font-size-xl);} .procTem-thermagT12tem dd{display:block; position:relative;} .procTem-thermagT12tem dd p{display:block;} .swiper-slide.swiper-slide-thumb-active .procTem-thermagT12tem dt em{font-weight:var(--font-weight-bold);} /* 롤링배너2 */ .thermagT12Banner2{display:block; position:relative; width:100%;} .thermagT12Banner2 .swiper{width:100%; height:110dvh;} .thermagT12Banner2 .swiper-wrapper{width:100%; height:100%;} .thermagT12Banner2 .swiper .swiper-slide{width:100%; height:100%;} .thermagT12Banner2 .swiper .swiper-slide img{display:block; width:100%; height:100%; object-fit:cover;} .thermagT12Banner2 .swiper{} .thermagT12Banner2 .swiper-wrapper{} .thermagT12Banner2 .swiper-slide{} .thermagT12Banner2 .swiper-slide img{} .thermagT12Banner2 .swiper-button-prev, .thermagT12Banner2 .swiper-button-next{ color:var(--font-color-light); border:none; background:none;} .thermagT12Banner2 .swiper-button-prev:after, .thermagT12Banner2 .swiper-button-next:after {font-size:var(--font-size-4xl);} .thermagT12Banner2 .swiper-button-next{margin-right:15%;} .thermagT12Banner2 .swiper-button-prev{margin-left:15%;} /* 템플릿 */ .thermagT12Banner2 .swiper-slide .Inner{position:absolute; left:50%; transform:translateX(-50%); top:0px; padding:8rem 15%;} .procTem-thermagT12tem2{display:inline-flex; color:var(--font-color-light);} .procTem-thermagT12tem2 dl{display:block; position:relative; text-align:left;} .procTem-thermagT12tem2 em{font-size:16rem; line-height:1.2em; font-weight:var(--font-weight-bold); font-family:var(--font-family-sub4);} .procTem-thermagT12tem2 dd{display:block; position:relative;} .thermagT12Banner2 .procTem-thermagT12tem2 dl{width:80%;} @media (min-width:768px) and (max-width:991.98px) { /* [써마지-상단12]퍼스트써마지 */ .thermageSection-top-12{} .thermageSection-top-12 .Inner{} /* 상단 */ .thermageSection-top-12 .customProce-head{} /* 컨텐츠 */ .thermageSection-top-12 .customProce-body{} /* 롤링배너 */ .thermagT12Banner{} .thermagT12Banner .Inner{height:100%;} .thermagT12Banner .major-wrapper{} .thermagT12Banner .major-wrapper .swiper{} .thermagT12Banner .thumb-wrapper .swiper .swiper-slide::before{height:110%;} /* 롤링배너2 */ .thermagT12Banner2{} .thermagT12Banner2 .swiper-button-next{margin-right:5%;} .thermagT12Banner2 .swiper-button-prev{margin-left:5%;} } @media (max-width:767.98px) { /* [써마지-상단12]퍼스트써마지 */ .thermageSection-top-12{gap:var(--padding-3xl);} .thermageSection-top-12 .Inner{} /* 상단 */ .thermageSection-top-12 .customProce-head{} /* 컨텐츠 */ .thermageSection-top-12 .customProce-body{gap:0px;} /* 롤링배너 */ .thermagT12Banner{} .thermagT12Banner .Inner{flex-direction:column; height:auto; gap:var(--padding-3xl);} .thermagT12Banner .major-wrapper{flex-basis:100%; width:100%;} .thermagT12Banner .major-wrapper .swiper{} .thermagT12Banner .major-wrapper .swiper .swiper-slide{border-radius:0px;} .thermagT12Banner .major-wrapper .swiper .swiper-slide img{border-radius:0px;} .thermagT12Banner .thumb-wrapper{flex-basis:100%; width:100%;} .thermagT12Banner .thumb-wrapper .swiper{} .thermagT12Banner .major-wrapper .swiper .swiper-slide a{height:100%; overflow:hidden;} .thermagT12Banner .major-wrapper{position:absolute; inset:0px 0px 0px 0px; } .thermagT12Banner .major-wrapper .swiper .swiper-slide img{height:100%; aspect-ratio:546 / 790; object-fit:cover; opacity:0.1;} .thermagT12Banner .thumb-wrapper{padding:var(--padding-5xl) 0px; z-index:2;} /* 템플릿 */ .procTem-thermagT12tem{} .procTem-thermagT12tem dd p{font-size: var(--font-size-lg);} /* 롤링배너2 */ .thermagT12Banner2{} .thermagT12Banner2 .swiper{height:100dvh;} .thermagT12Banner2 .swiper-button-next{margin-right:0%;} .thermagT12Banner2 .swiper-button-prev{margin-left:0%;} /* 템플릿 */ .procTem-thermagT12tem2{} .procTem-thermagT12tem2 .Inner{ } .procTem-thermagT12tem2 dl{} .procTem-thermagT12tem2 em{font-size:8rem;} .procTem-thermagT12tem2 p{letter-spacing:-1px;} } /* --------------------------------------------------------------------------- */ /* [써마지-상단13]수만시간써마지가치 */ .thermageSection-top-13{padding:16rem 0px; color:var(--bg-color-light); background-size:100% 100%; background-image:url('/assets/images/sub/customProce_thermage_top13_bg.jpg');} .thermageSection-top-13::before{content:''; display:block; position:absolute; width:34rem; aspect-ratio:1; left:0%; bottom:0%; margin-left:-5%; margin-bottom:-3%; transform:translate(-50%, -50%);background-repeat:no-repeat; background-position:center center; background-size:auto 100%; background-image:url('/assets/images/sub/customProce_thermage_top13_deco.png'); animation:thermageTop13ani-spin 12s linear infinite;} .thermageSection-top-13 .Inner{height:100%; justify-content:space-between; padding:0px var(--customProc-side-padding);} /* 상단 */ .thermageSection-top-13 .customProce-head{} .thermageSection-top-13 .customProce-proceTitle{text-shadow:0 0 5px #101f16, 0 0 10px #101f16, 0 0 15px #101f16, 0 0 20px #101f16, 0 0 30px #101f16, 0 0 40px #101f16;} .thermageSection-top-13 .customProce-proceTitle::before{content:''; display:block; position:absolute; width:24rem; aspect-ratio:1; left:0%; top:0%; margin-top:-10%; margin-left:-10%; transform:translate(-50%, -50%); background-repeat:no-repeat; background-position:center center; background-size:auto 100%; background-image:url('/assets/images/sub/customProce_thermage_top13_deco.png'); animation:thermageTop13ani-spin 15s linear infinite;} .thermageSection-top-13 .section-title{display:flex; flex-direction:column; gap:var(--padding-2xl);} .thermageSection-top-13 .section-title em{} .thermageSection-top-13 .section-title p{font-size:var(--padding-xl); font-weight:var(--font-weight);} /* 컨텐츠 */ .thermageSection-top-13 .customProce-body{} .thermageSection-top-13 .Center{justify-content:flex-end;} .thermageSection-top-13 .Center .procTem-thermagT13tem{} /* 템플릿 */ .procTem-thermagT13tem-list{display:flex; position:relative; flex-direction:column; gap:var(--padding-3xl); } .procTem-thermagT13tem-list li{display:flex; position:relative; flex-direction:column; justify-content:flex-end; align-items:flex-end;} .procTem-thermagT13tem{display:inline-block; position:relative; width:60%; } .procTem-thermagT13tem dl{display:flex; position:relative; justify-content:flex-end; color:#cedab9; text-align:right; } .procTem-thermagT13tem dl::after{content:'+'; display:inline-flex; position:absolute; width:3.8rem; aspect-ratio:1; right:0%; top:0%; justify-content:center; align-items:center; color:#1e3d29; font-size:var(--font-size-4xl); line-height:1em; font-weight:var(--font-weight-bold); border-radius:var(--border-radius-max); background-color:#cedab9;} .procTem-thermagT13tem dd{display:flex; position:relative; flex-direction:row; width:100%; padding-right:var(--padding-2xl);} .procTem-thermagT13tem p{flex:1; font-weight:var(--font-weight-semibold);} .procTem-thermagT13tem .Num{flex:1; display:flex; position:relative; justify-content:flex-end; } .procTem-thermagT13tem em{font-size:var(--font-size-3xl); line-height:1em;} .procTem-thermagT13tem em strong{color:var(--font-color-light); font-size:9rem; line-height:1em; font-family:var(--font-family-sub4);} .procTem-thermagT13tem i{display:block; position:relative;} .procTem-thermagT13tem i span{display:inline-flex; position:relative; justify-content:center; align-items:center; width:3.8rem; aspect-ratio:1; color:#1e3d29; font-size:var(--font-size-4xl); line-height:1em; font-weight:var(--font-weight-bold); border-radius:var(--border-radius-max); background-color:#cedab9;} /* 애니메이션 */ @keyframes thermageTop13ani-spin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} } @media (max-width:767.98px) { /* [써마지-상단13]써마지가치 */ .thermageSection-top-13{height:auto; background-size:auto 100%;} .thermageSection-top-13::before{width:24rem; margin-left:-30%; margin-bottom:-30%;} .thermageSection-top-13 .Inner{gap:var(--padding-6xl); padding:var(--customProc-inner-padding);} /* 상단 */ .thermageSection-top-13 .customProce-head{} .thermageSection-top-13 .customProce-proceTitle::before{width:16rem; left:0%; top:0%; margin-top:-10%; margin-left:0%;;} .thermageSection-top-13 .section-title{letter-spacing:-3px;} .thermageSection-top-13 .section-title p{letter-spacing:-2px; font-size:1.8rem;} /* 컨텐츠 */ .thermageSection-top-13 .customProce-body{} /* 템플릿 */ .procTem-thermagT13tem-list{} .procTem-thermagT13tem-list li{} .procTem-thermagT13tem{width:100%;} .procTem-thermagT13tem dl{width:100%;} .procTem-thermagT13tem dl::after{width:2.4rem; font-size:var(--font-size-xl);} .procTem-thermagT13tem .Num{flex:0; flex-basis:35%;} .procTem-thermagT13tem em strong{font-size:5rem;} .procTem-thermagT13tem i span{width:2.4rem; font-size:var(--font-size-xl);} } /* --------------------------------------------------------------------------- */ /* [써마지-상단14]협력병원연구와교육(공통하단09) */ .customProce-commonBottom-08.thermageSection-top-14{} .thermageSection-top-14{padding:0px;} .thermageSection-top-14 .Inner{width:100%; gap:var(--padding-5xl);} /* 컨텐츠 */ .thermageSection-top-14 .customProce-body{text-align:center;} /* 롤링배너 */ .thermageSection-top-14 .commB09Banner.activeSlide-1::before{background-image:url('/assets/images/sub/customProce_thermage_top14_thum01.jpg');} .thermageSection-top-14 .commB09Banner.activeSlide-2::before{background-image:url('/assets/images/sub/customProce_thermage_top14_thum02.jpg');} .thermageSection-top-14 .commB09Banner.activeSlide-3::before{background-image:url('/assets/images/sub/customProce_thermage_top14_thum03.jpg');} .thermageSection-top-14 .commB09Banner.activeSlide-4::before{background-image:url('/assets/images/sub/customProce_thermage_top14_thum04.jpg');} .thermageSection-top-14 .commB09Banner.activeSlide-5::before{background-image:url('/assets/images/sub/customProce_thermage_top14_thum05.jpg');} .thermageSection-top-14 .commB09Banner.activeSlide-6::before{background-image:url('/assets/images/sub/customProce_thermage_top14_thum06.jpg');} .thermageSection-top-14 .commB09Banner.activeSlide-7::before{background-image:url('/assets/images/sub/customProce_thermage_top14_thum07.jpg');} .thermageSection-top-14 .commB09Banner.activeSlide-8::before{background-image:url('/assets/images/sub/customProce_thermage_top14_thum08.jpg');} .thermageSection-top-14 .commB09Banner.activeSlide-9::before{background-image:url('/assets/images/sub/customProce_thermage_top14_thum09.jpg');} .thermageSection-top-14 .commB09Banner.activeSlide-10::before{background-image:url('/assets/images/sub/customProce_thermage_top14_thum10.jpg');} /* --------------------------------------------------------------------------- */ /* [써마지-상단15]병행솔루션(공통하단07) */ .thermageSection-top-15.customProce-commonBottom-07{background-color:#f6f5f1; background-image:url('/assets/images/sub/customProce_thermage_top15_bg.jpg');} .thermageSection-top-15{} /* 템플릿 */ .thermageSection-top-15 .procTem-commB07tem{} .thermageSection-top-15 .procTem-commB07tem-list li:nth-child(odd){color:var(--font-color-light);} .thermageSection-top-15 .procTem-commB07tem-list li:nth-child(odd) .procTem-commB07tem dl{background-color:#34302f;} .thermageSection-top-15 .procTem-commB07tem-list li:nth-child(even){color:var(--font-color);} .thermageSection-top-15 .procTem-commB07tem-list li:nth-child(even) .procTem-commB07tem dl{background-color:#faf9f5;} /* =========================================================================== */ /* --------------------------------------------------------------------------- */ /* [써마지하단01][공통하단01]정직한기록 */ .customProce-commonBottom-01.thermageSection-bottom-01{} /* --------------------------------------------------------------------------- */ /* [써마지하단02][공통하단02]책임시술 */ .customProce-commonBottom-02.thermageSection-bottom-02{} /* --------------------------------------------------------------------------- */ /* [써마지하단03][공통하단03]효과만족도 */ .customProce-commonBottom-03.thermageSection-bottom-03{} /* --------------------------------------------------------------------------- */ /* [써마지하단04][공통하단04]샷수혜택 */ .customProce-commonBottom-04.thermageSection-bottom-04{} /* --------------------------------------------------------------------------- */ /* [써마지하단05][공통하단05]전문적디자인 */ .customProce-commonBottom-05.thermageSection-bottom-05{} /* =========================================================================== */ /* =========================================================================== */ /* =========================================================================== */ /* =========================================================================== */ /* 울쎄라 */ .ultheraSection{} /* --------------------------------------------------------------------------- */ /* [울쎄라-상단01]리프팅은닥터스 */ .ultheraSection-top-01{padding-top:12rem; padding-bottom:0px; color:var(--font-color-light); background-size:100% 100%; background-color:var(--bg-color-dark); background-image:url('/assets/images/sub/customProce_ulthera_top01_bg01.jpg');} .ultheraSection-top-01::before{content:''; display:block; position:absolute; inset:0% 0% 0% 0%; width:100%; height:100%; background-repeat:no-repeat; background-position:top center; background-size:100% auto; background-image:url('/assets/images/sub/customProce_ulthera_top01_bg02.png'); mix-blend-mode:screen; animation:ultherTop01ani-scale 22s ease-in-out infinite alternate;} .ultheraSection-top-01 .Inner{gap:14rem;} /* 상단 */ .ultheraSection-top-01 .customProce-head{text-align:center;} .ultheraSection-top-01 .customProce-proceTitle{} .ultheraSection-top-01 .section-title{} /* 컨텐츠 */ .ultheraSection-top-01 .customProce-body{gap:12rem;} .ultheraSection-top-01 .Left{align-items:center;} .ultheraSection-top-01 .List{display:inline-flex; position:relative; flex-direction:row; gap:var(--padding);} .ultheraSection-top-01 .List li{display:block; position:relative;} .ultheraSection-top-01 .List img{mix-blend-mode:screen;} .ultheraSection-top-01 .List p{} .ultheraSection-top-01 .List .deco{display:block; position:absolute; width:10rem; mix-blend-mode:screen; opacity:0.8;} .ultheraSection-top-01 .List li:first-child{} .ultheraSection-top-01 .List li:first-child img{display:block;} .ultheraSection-top-01 .List li:first-child .deco{top:5%; left:40%; animation:ultherTop01ani-curveMove 10s ease-in-out infinite;} .ultheraSection-top-01 .section-summary{display:inline-flex; gap:var(--padding); text-align:center;} .ultheraSection-top-01 .List li:last-child{} .ultheraSection-top-01 .List li:last-child img{display:block; transform:scaleX(-1);} .ultheraSection-top-01 .List li:last-child .deco{top:50%; left:50%; animation:ultherTop01ani-orbit 8s linear infinite;} .ultheraSection-top-01 .Right{align-items:center;} .ultheraSection-top-01 .imbBox{display:inline-block; margin:auto;} /* 애니메이션 animation:ultherTop01ani-scale 14s ease-in-out infinite alternate; */ @keyframes ultherTop01ani-scale{ 0%{opacity:1; transform:scale(1.2);} 50%{opacity:0.4; transform:scale(1);} 100%{opacity:1; transform:scale(1.2);} } @keyframes ultherTop01ani-curveMove{ 0%{transform:translate(-50%, -50%) translateX(-30px) translateY(0); opacity:0;} 25%{transform:translate(-50%, -50%) translateX(0) translateY(30px); opacity:1;} 50%{transform:translate(-50%, -50%) translateX(30px) translateY(0); opacity:0;} 75%{transform:translate(-50%, -50%) translateX(0) translateY(-30px); opacity:1;} 100%{transform:translate(-50%, -50%) translateX(-30px) translateY(0); opacity:0;} } @keyframes ultherTop01ani-orbit{ 0%{transform:translate(-50%, -50%) translateX(0) translateY(20px); opacity:0;} 25%{transform:translate(-50%, -50%) translateX(15px) translateY(0); opacity:1;} 50%{transform:translate(-50%, -50%) translateX(0) translateY(-20px); opacity:0;} 75%{transform:translate(-50%, -50%) translateX(-15px) translateY(0); opacity:1;} 100%{transform:translate(-50%, -50%) translateX(0) translateY(20px); opacity:0;} } @media (max-width:767.98px) { /* [울쎄라-상단01]리프팅은닥터스 */ .ultheraSection-top-01{} .ultheraSection-top-01::before{content:''; display:block; position:absolute; inset:0% 0% 0% 0%; width:200%; height:100%;} .ultheraSection-top-01 .Inner{padding-bottom:0px; gap:var(--padding-6xl);} /* 상단 */ .ultheraSection-top-01 .customProce-head{} /* 컨텐츠 */ .ultheraSection-top-01 .customProce-body{gap:var(--padding-6xl);} } /* --------------------------------------------------------------------------- */ /* [울쎄라-상단02]누가시술 */ .ultheraSection-top-02{padding:0px; color:var(--font-color-light);} /* 컨텐츠 */ .ultheraSection-top-02 .customProce-body{} .ultheraSection-top-02 .customProce-proceTitle{text-align:center;} .ultheraSection-top-02 .small-title{font-size:var(--padding-5xl);} .ultheraSection-top-02 .section-title{} .ultheraSection-top-02 .Left{} .ultheraSection-top-02 .Left .imgBox{display:block; position:relative;} .ultheraSection-top-02 .Left .imgBox img{display:block; width:100%;} .ultheraSection-top-02 .Right{position:absolute; width:100%; height:100%; padding:16rem 0px;} .ultheraSection-top-02 .Inner{height:100%;} @media (max-width:767.98px) { /* [울쎄라-상단02]누가시술 */ .ultheraSection-top-02{} /* 컨텐츠 */ .ultheraSection-top-02 .customProce-body{} .ultheraSection-top-02 .customProce-proceTitle{} .ultheraSection-top-02 .small-title{font-size:var(--padding-2xl);} .ultheraSection-top-02 .section-title{} .ultheraSection-top-02 .Left{} .ultheraSection-top-02 .Left .imgBox{} .ultheraSection-top-02 .Right{padding:0px;} .ultheraSection-top-02 .Inner{height:auto;} } /* --------------------------------------------------------------------------- */ /* [울쎄라-상단03]장비와경험 */ .ultheraSection-top-03{padding:12rem 0px; padding-bottom:0px;} .ultheraSection-top-03::before{content:'Experience'; display:block; position:absolute; top:50%; left:0%; right:0%; width:100%; color:#cedab9; font-size:28rem; line-height:0.8em; font-weight:var(--font-weight-bold); font-family:var(--font-family-sub4); text-align:center; opacity:0.3;} .ultheraSection-top-03 .Inner{gap:var(--padding-6xl); z-index:var(--z-index);} /* 상단 */ .ultheraSection-top-03 .customProce-head{} .ultheraSection-top-03 .customProce-proceTitle{} .ultheraSection-top-03 .section-title{} /* 컨텐츠 */ .ultheraSection-top-03 .customProce-body{} /* 롤링배너-연동배너예제(반드시 두배너의 부모 높이를지정해줘야함,두배너의 가로는 width로 기입해야함) */ .ultheraT03Banner{display:flex; position:relative; flex-direction:column; width:100%; gap:var(--padding-6xl);} .ultheraT03Banner cite{ display:inline-flex; position:absolute; bottom:2rem; right:0%; z-index:3;} .ultheraT03Banner .major-wrapper{display:flex; position:relative; justify-content:flex-end; } .ultheraT03Banner .major-wrapper .swiper{} .ultheraT03Banner .major-wrapper .swiper-wrapper{} .ultheraT03Banner .major-wrapper .swiper-slide{opacity:0 !important;} .ultheraT03Banner .major-wrapper .swiper-slide img{display:block; width:100%;} .ultheraT03Banner .major-wrapper .swiper-slide.swiper-slide-active{opacity:1 !important;} .ultheraT03Banner .imgBox{display:block; position:relative; width:100%; margin:auto; overflow:hidden;} .ultheraT03Banner .imgBox img{display:block;} .ultheraT03Banner .imgBox .standard{opacity:0;} /* */ .ultheraT03Banner .imgBox .side{position:absolute; inset:0% 0% 0% 0%;} .ultheraT03Banner .thumb-wrapper{display:flex; position:relative; justify-content:flex-end;} .ultheraT03Banner .thumb-wrapper .swiper{overflow:visible; width:44%; margin:0px;} .ultheraT03Banner .thumb-wrapper .swiper-wrapper{height:28rem;} .ultheraT03Banner .thumb-wrapper .swiper-slide{cursor:pointer; } .ultheraT03Banner .thumb-wrapper .swiper-slide a{display:block; position:relative;} .ultheraT03Banner .thumb-wrapper .swiper-slide img{display:block; position:relative; width:100%; height:100%; object-fit:contain;} .ultheraT03Banner .thumb-wrapper .swiper-slide.swiper-slide-thumb-active{} .ultheraT03Banner .thumb-wrapper .swiper-slide.swiper-slide-thumb-active dl::before{color:var(--primary); background-color:var(--bg-color-light); border-style:dashed;} /* 슬라이더가 활성화될때 모션 */ .ultheraT03Banner .major-wrapper .imgBox img.side{opacity:0; transform:translateY(40px); transition:opacity 0.6s ease-out, transform 0.6s ease-out;} .ultheraT03Banner .major-wrapper .swiper-slide-active .imgBox img.side{opacity:1; transform:translateY(0);} .ultheraT03Banner .major-wrapper .swiper-slide-active .imgBox img:nth-child(2){transition-delay:0.2s; } /* 200ms */ .ultheraT03Banner .major-wrapper .swiper-slide-active .imgBox img:nth-child(3){transition-delay:0.15s; } /* 150ms */ .ultheraT03Banner .major-wrapper .swiper-slide-active .imgBox img:nth-child(4){transition-delay:0.0s; } /* delay 없으면 0 */ /* 템플릿 */ .procTem-ultheraT03tem{display:inline-block; position:relative;} .procTem-ultheraT03tem dl{display:inline-flex; position:relative; justify-content:flex-end;} .procTem-ultheraT03tem dl::before{content:'+'; display:inline-flex; position:absolute; left:0%; top:0%; margin-top:-1rem; justify-content:center; align-items:center; width:3rem; aspect-ratio:1; color:var(--font-color-light); font-size:var(--font-size-2xl); line-height:1em; font-weight:var(--font-weight-bold); border:1px solid var(--primary); border-radius:var(--border-radius-max); background-color:var(--primary); transition:var(--transition);} .procTem-ultheraT03tem dd{display:flex; position:relative; flex-direction:row; width:100%; gap:var(--padding-lg); padding-left:var(--padding-4xl); } .procTem-ultheraT03tem p{font-weight:var(--font-weight-semibold);} .procTem-ultheraT03tem .Num{flex:1; display:flex; position:relative;} .procTem-ultheraT03tem em{font-size:var(--font-size-3xl); line-height:1em;} .procTem-ultheraT03tem em strong{font-size:8rem; line-height:1em; font-family:var(--font-family-sub4);} .procTem-ultheraT03tem i{display:block; position:relative;} .procTem-ultheraT03tem i span{display:inline-flex; position:relative; justify-content:center; align-items:center; width:3.8rem; aspect-ratio:1; color:var(--font-color-light); font-size:var(--font-size-4xl); line-height:1em; font-weight:var(--font-weight-bold); border:1px solid var(--primary); border-radius:var(--border-radius-max); background-color:var(--primary);} /* .procTem-ultheraT03tem:hover dl::before{color:var(--primary); background-color:var(--bg-color-light); border-style:dashed;} */ @media (max-width:767.98px) { /* [울쎄라-상단03]장비와경험 */ .ultheraSection-top-03{} .ultheraSection-top-03::before{top:40%; font-size:7rem; } .ultheraSection-top-03 .Inner{gap:var(--padding-6xl); z-index:var(--z-index); padding-bottom:0px;} /* 컨텐츠 */ .ultheraSection-top-03 .customProce-body{} /* 롤링배너 */ .ultheraT03Banner{gap:var(--padding-4xl);} .ultheraT03Banner cite{bottom:1rem;} .ultheraT03Banner .major-wrapper{} .ultheraT03Banner .thumb-wrapper{} .ultheraT03Banner .thumb-wrapper .swiper{width:100%;} .ultheraT03Banner .thumb-wrapper .swiper-wrapper{height:auto;} /* 템플릿 */ .procTem-ultheraT03tem{width:100%;} .procTem-ultheraT03tem dl{} .procTem-ultheraT03tem dd{flex-direction:column; padding-left:0px; padding-top:var(--padding-2xl);} .procTem-ultheraT03tem .Num{} .procTem-ultheraT03tem em strong{font-size:4rem;} .procTem-ultheraT03tem i span{width:2.4rem; font-size:var(--font-size-xl);} } /* --------------------------------------------------------------------------- */ /* [울쎄라-상단04]80일24시간 */ .ultheraSection-top-04{height:110dvh; color:var(--font-color-light); background-color:var(--bg-color-dark);} .ultheraSection-top-04 .Inner{} /* 컨텐츠 */ .ultheraSection-top-04 .customProce-body{flex-direction:column; gap:var(--padding-6xl);} .ultheraSection-top-04 .Left{} .ultheraSection-top-04 .customProce-proceTitle{height:100%; justify-content:space-between;} .ultheraSection-top-04 .customProce-proceTitle .section-title{} .ultheraSection-top-04 .customProce-proceTitle .section-title em{display:inline-block; font-size:var(--font-size-5xl); line-height:var(--line-height-xs); font-weight:var(--font-weight-bold);} .ultheraSection-top-04 .customProce-proceTitle .section-title small{display:inline-block; font-weight:var(--font-weight);} .ultheraSection-top-04 .customProce-proceTitle > p{font-size:var(--font-size-3xl); font-weight:var(--font-weight-bold);} .ultheraSection-top-04 .Right{flex:1;} .ultheraSection-top-04 .Right .iframeMovie{} @media (max-width:767.98px) { /* [울쎄라-상단04]80일24시간 */ .ultheraSection-top-04{height:110dvh;} .ultheraSection-top-04 .Inner{} /* 컨텐츠 */ .ultheraSection-top-04 .customProce-body{} .ultheraSection-top-04 .Left{text-align:center;} .ultheraSection-top-04 .customProce-proceTitle{gap:var(--padding-4xl);} .ultheraSection-top-04 .customProce-proceTitle .section-title{} .ultheraSection-top-04 .customProce-proceTitle .section-title em{} .ultheraSection-top-04 .customProce-proceTitle .section-title small{} .ultheraSection-top-04 .customProce-proceTitle > p{font-size:var(--font-size-xl);} } /* --------------------------------------------------------------------------- */ /* [울쎄라-상단05]15억재투자 */ .ultheraSection-top-05{padding:13rem 0px; text-align:center; background-size:100% 100%; background-image:url('/assets/images/sub/customProce_ulthera_top05_bg.jpg');} .ultheraSection-top-05 .Inner{gap:17rem;} /* 상단 */ .ultheraSection-top-05 .customProce-head{} .ultheraSection-top-05 .customProce-proceTitle{} .ultheraSection-top-05 .small-title{} .ultheraSection-top-05 .section-title{} .ultheraSection-top-05 .section-title small{} /* 컨텐츠 */ .ultheraSection-top-05 .customProce-body{gap:var(--padding-3xl);} .ultheraSection-top-05 .Left{gap:var(--padding-4xl); align-items:center; } .ultheraSection-top-05 .inner{display:block; position:relative; } .ultheraSection-top-05 .Left .section-summary{gap:0px;} .ultheraSection-top-05 .Left .section-summary p{color:var(--secondary-80); font-weight:var(--font-weight-semibold); line-height:2.6em;} .ultheraSection-top-05 .Left .imgBox{display:block; position:relative; width:80%; margin:auto; } .ultheraSection-top-05 .Left .imgBox img{display:block;} .ultheraSection-top-05 .Left .imgBox .standard{opacity:0;} .ultheraSection-top-05 .Left .imgBox .side{position:absolute; inset:0% 0% 0% 0%;} .ultheraSection-top-05 .Left .deco{display:inline-block; position:absolute; right:0%; top:85%; transform:translateY(-50%); z-index:var(--z-index);} .ultheraSection-top-05 .Left .deco img{display:inline-block; width:66%;} .ultheraSection-top-05 .Right{} .ultheraSection-top-05 .Right .section-summary{} @media (max-width:767.98px) { /* [울쎄라-상단05]15억재투자 */ .ultheraSection-top-05{padding:10rem 0px; } .ultheraSection-top-05 .Inner{gap:var(--padding-5xl);} /* 상단 */ .ultheraSection-top-05 .customProce-head{} .ultheraSection-top-05 .section-title small{} /* 컨텐츠 */ .ultheraSection-top-05 .customProce-body{gap:var(--padding-4xl);} .ultheraSection-top-05 .Left{} .ultheraSection-top-05 .Left .section-summary p{line-height:2em;} .ultheraSection-top-05 .Left .imgBox{width:100%;} .ultheraSection-top-05 .Left .deco{width:44%; top:76%;} .ultheraSection-top-05 .Right{} } /* --------------------------------------------------------------------------- */ /* [울쎄라-상단06]국내최다전문의 */ .ultheraSection-top-06{padding-top:23rem; padding-bottom:0px; color:var(--font-color-light); background-color:#463c39; background-size:100% 100%; background-image:url('/assets/images/sub/customProce_ulthera_top06_bg.jpg'); overflow:hidden;} .ultheraSection-top-06 .Inner{} /* 컨텐츠 */ .ultheraSection-top-06 .customProce-body{gap:11rem;} .ultheraSection-top-06 .Left{flex-direction:row; gap:var(--padding-3xl); width:100%;} .ultheraSection-top-06 .Left::before{content:''; display:block; position:absolute; aspect-ratio:1; width:34rem; margin-left:calc( -34rem / 2 ); left:50%; top:-15%; background-repeat:no-repeat; background-position:center center; background-size:auto 100%; background-image:url('/assets/images/sub/customProce_ulthera_top06_deco.png'); animation:ulther06ani-spin 20s linear infinite;} .ultheraSection-top-06 .customProce-proceTitle{flex:1; text-align:right;} .ultheraSection-top-06 .section-title{} .ultheraSection-top-06 .section-summary{flex:1; padding-top:15rem;} .ultheraSection-top-06 .section-summary p{font-size:var(--font-size-2xl);} .ultheraSection-top-06 .Right{} .ultheraSection-top-06 .Right .imgBox{margin:auto;} /* 애니메이션 */ @keyframes ulther06ani-spin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} } @media (max-width:767.98px) { /* [울쎄라-상단06]국내최다전문의 */ .ultheraSection-top-06{padding-top:10rem; background-size:auto 100%; background-position:top right;} .ultheraSection-top-06 .Inner{padding-bottom:0px;} /* 컨텐츠 */ .ultheraSection-top-06 .customProce-body{gap:var(--padding-6xl);} .ultheraSection-top-06 .Left{flex-direction:column; text-align:center;} .ultheraSection-top-06 .Left::before{width:24rem; margin-left:calc( -24rem / 2 );} .ultheraSection-top-06 .customProce-proceTitle{text-align:center;} .ultheraSection-top-06 .section-title{} .ultheraSection-top-06 .section-summary{padding-top:0px;} .ultheraSection-top-06 .section-summary p{font-size:var(--font-size-xl);} .ultheraSection-top-06 .Right{} .ultheraSection-top-06 .Right .imgBox{margin:auto;} } /* --------------------------------------------------------------------------- */ /* [울쎄라-상단07]시술의차이 */ .ultheraSection-top-07{padding:0px;} /* 컨텐츠 */ .ultheraSection-top-07 .customProce-body{} /* 롤링배너 */ .ultheraT07Banner{display:flex; position:relative; width:100%; flex-direction:column; padding:20rem 0px;} .ultheraT07Banner::before{content:''; display:block; position:absolute; inset:0% 0% 0% 0%; left:-5%; background-size:120% auto; background-position:bottom center; background-repeat:no-repeat; background-image:url('/assets/images/sub/customProce_ulthera_top07_bg.jpg'); } .ultheraT07Banner .Inner{gap:18rem;} .ultheraT07Banner .customProce-proceTitle{text-align:center;} .ultheraT07Banner .swiper-pagination-typeC{} .swiper-pagination-typeC .swiper-pagination-bullet{width:8rem;} .swiper-pagination-typeC .swiper-pagination-bullet-active{} .ultheraT07Banner .swiper{} .ultheraT07Banner .swiper-wrapper{} .ultheraT07Banner .swiper-slide{opacity:0 !important;} .ultheraT07Banner .swiper-slide.swiper-slide-active{opacity:1 !important;} .ultheraT07Banner.activeSlide-1{} .ultheraT07Banner.activeSlide-1::before{animation:ultherTop07ani-wave1 9s ease-in-out infinite alternate;} .ultheraT07Banner.activeSlide-2{} .ultheraT07Banner.activeSlide-2::before{animation:ultherTop07ani-wave1 9s ease-in-out infinite alternate;} /* 템플릿 */ .procTem-ultherT06tem{display:block; position:relative; text-align:center;} .procTem-ultherT06tem dl{display:flex; position:relative; flex-direction:column; gap:var(--padding-3xl);} .procTem-ultherT06tem dt{display:flex; position:relative; flex-direction:column;} .procTem-ultherT06tem dt p{display:block; font-size:var(--font-size-4xl); font-weight:var(--font-weight-semibold);} .procTem-ultherT06tem dt em{display:block;} .procTem-ultherT06tem dt em strong{font-size:11rem; line-height:1em; font-family:var(--font-family-sub4); font-weight:var(--font-weight-bold);} .procTem-ultherT06tem dt em span{color:var(--font-color-lowlow); font-size:var(--font-size-3xl); font-weight:var(--font-weight-semibold);} .procTem-ultherT06tem dd{display:block; position:relative; color:var(--primary-70); font-size:var(--font-size-xl); font-weight:var(--font-weight-semibold);} /* 애니메이션 */ /* wave1:원래 방향 */ @keyframes ultherTop07ani-wave1 { 0% { transform:translateX(0) translateY(0) rotate(0deg); opacity:0.4; } 25% { transform:translateX(5px) translateY(3px) rotate(-1deg); opacity:1; } 50% { transform:translateX(0) translateY(6px) rotate(1deg); opacity:0.4; } 75% { transform:translateX(-5px) translateY(3px) rotate(-1deg); opacity:1; } 100% { transform:translateX(0) translateY(0) rotate(0deg); opacity:0.4; } } /* wave2:반대 방향 */ @keyframes ultherTop07ani-wave2 { 0% { transform:translateX(0) translateY(0) rotate(0deg); opacity:0.4; } 25% { transform:translateX(5px) translateY(3px) rotate(1deg); opacity:1; } 50% { transform:translateX(0) translateY(6px) rotate(-1deg); opacity:0.4; } 75% { transform:translateX(-5px) translateY(3px) rotate(1deg); opacity:1; } 100% { transform:translateX(0) translateY(0) rotate(0deg); opacity:0.4; } } @media (max-width:767.98px) { /* [울쎄라-상단07]시술의차이 */ .ultheraSection-top-07{} /* 컨텐츠 */ .ultheraSection-top-07 .customProce-body{} /* 롤링배너 */ .ultheraT07Banner{padding:var(--padding-6xl) 0px;} .ultheraT07Banner::before{ background-position:left bottom; background-size:200% auto;} .ultheraT07Banner .Inner{gap:var(--padding-5xl);} /* 템플릿 */ .procTem-ultherT06tem{} .procTem-ultherT06tem dt em strong{font-size:8rem;} .procTem-ultherT06tem dt em span{font-size:var(--font-size-xl);} } /* --------------------------------------------------------------------------- */ /* [울쎄라-상단08]울쎄라프라임 */ .ultheraSection-top-08{padding:0px; background-color:var(--bg-color-dark);} /* 컨텐츠 */ .ultheraSection-top-08 .customProce-body{} /* 롤링배너-연동배너예제(반드시 두배너의 부모 높이를지정해줘야함,두 배너의 가로는 width로 기입해야함) height:1160px; */ .ultheraT08Banner{display:block; position:relative; color:var(--font-color-light); padding:10% 5%; } .ultheraT08Banner .Inner{display:flex; position:relative; width:100%; flex-direction:row; height:100%; margin:auto; z-index:4;} .ultheraT08Banner .major-wrapper{flex-basis:45%; width:45%; display:flex; position:relative; justify-content:flex-end; align-items:flex-end; text-align:right;} .ultheraT08Banner .major-wrapper .swiper{} .ultheraT08Banner .major-wrapper .swiper-wrapper{} .ultheraT08Banner .major-wrapper .swiper-slide{display:flex; justify-content:flex-end; align-items:flex-end; opacity:0 !important;} .ultheraT08Banner .major-wrapper .swiper-slide a{display:block; position:relative;} .ultheraT08Banner .major-wrapper .swiper-slide img{display:block; width:100%;} .ultheraT08Banner .major-wrapper .swiper-slide.swiper-slide-active{opacity:1 !important;} .ultheraT08Banner .thumb-wrapper{flex-basis:55%; width:55%; display:flex; position:relative;} .ultheraT08Banner .thumb-wrapper .swiper{} .ultheraT08Banner .thumb-wrapper .swiper-wrapper{display:flex; flex-direction:column; justify-content:space-between; gap:var(--padding);} .ultheraT08Banner .thumb-wrapper .swiper-slide{flex:1; cursor:pointer; height:auto !important; padding-left:5rem; padding-bottom:var(--padding-xl);} .ultheraT08Banner .thumb-wrapper .swiper-slide::before{content:''; display:inline-block; position:absolute; height:100%; left:calc( var(--icon-size) / 2); top:calc( var(--icon-size) + 2px); border-left:2px solid var(--border-color-light);} .ultheraT08Banner .thumb-wrapper .swiper-slide::after{content:''; display:inline-block; position:absolute; left:0px; top:0px; width:var(--icon-size); aspect-ratio:1; border:2px solid var(--border-color-light); border-radius:var(--border-radius-max); background-color:var(--gray-40);} .ultheraT08Banner .thumb-wrapper .swiper-slide.swiper-slide-thumb-active{} .ultheraT08Banner .thumb-wrapper .swiper-slide.swiper-slide-thumb-active::after{background-color:var(--gray-0);} .ultheraT08Banner .thumb-wrapper .swiper-slide:last-child::before{display:none;} .ultheraT08Banner .thumb-wrapper .swiper-slide a{display:block; position:relative;} .ultheraT08Banner .thumb-wrapper .swiper-slide img{display:block; position:relative; width:100%; height:100%; object-fit:contain;} .ultheraT08Banner::before, .ultheraT08Banner::after{content:''; display:inline-block; position:absolute; inset:0% 0% 0% 0%; width:100%; height:100%; background-repeat:no-repeat; background-position:top center; background-size:cover; background-size:auto 100%;} .ultheraT08Banner::before{z-index:1; background-image:url('/assets/images/sub/customProce_ulthera_top08_thum0101.jpg');} .ultheraT08Banner::after{z-index:2; background-image:url('/assets/images/sub/customProce_ulthera_top08_thum0102.jpg'); display:none;} .ultheraT08Banner.activeSlide-1::before{background-image:url('/assets/images/sub/customProce_ulthera_top08_thum0101.jpg');} .ultheraT08Banner.activeSlide-1::after{background-image:url('/assets/images/sub/customProce_ulthera_top08_thum0102.jpg');} .ultheraT08Banner.activeSlide-1::after{} .ultheraT08Banner.activeSlide-2{} .ultheraT08Banner.activeSlide-2::before{background-image:url('/assets/images/sub/customProce_ulthera_top08_thum0201.jpg');} .ultheraT08Banner.activeSlide-2::after{background-image:url('/assets/images/sub/customProce_ulthera_top08_thum0202.jpg');} .ultheraT08Banner.activeSlide-2::after{} .ultheraT08Banner.activeSlide-3{} .ultheraT08Banner.activeSlide-3::before{background-image:url('/assets/images/sub/customProce_ulthera_top08_thum0301.jpg');} .ultheraT08Banner.activeSlide-3::after{background-image:url('/assets/images/sub/customProce_ulthera_top08_thum0302.jpg');} .ultheraT08Banner.activeSlide-3::after{ } .ultheraT08Banner.activeSlide-4{} .ultheraT08Banner.activeSlide-4::before{background-image:url('/assets/images/sub/customProce_ulthera_top08_thum0401.jpg');} .ultheraT08Banner.activeSlide-4::after{background-image:url('/assets/images/sub/customProce_ulthera_top08_thum0402.jpg');} .ultheraT08Banner.activeSlide-4::after{ } /* 애니메이션(js와 시간맞춤 =4초) animation:ultheraT08ani-swapShow 4s infinite steps(1); */ @keyframes ultheraT08ani-swapShow { 0% {opacity:0; transform:scale(0.98);} 50% {opacity:0; transform:scale(0.98);} 100% {opacity:1; transform:scale(1);} } /* 템플릿 */ .procTem-ultherT08tem01{display:flex; position:relative; width:100%;} .procTem-ultherT08tem01 dl{display:flex; position:relative; flex-direction:column; width:100%;} .procTem-ultherT08tem01 dt{display:flex; position:relative; flex-direction:column;} .procTem-ultherT08tem01 em{display:block; font-size:var(--font-size-3xl); font-weight:var(--font-weight-bold); line-height:1.2em; letter-spacing:-1px;} .procTem-ultherT08tem01 dd{display:flex; position:relative; flex-direction:column;} .procTem-ultherT08tem01 strong{display:block; font-size:var(--font-size-xl); font-weight:var(--font-weight-semibold); opacity:0.5;} .procTem-ultherT08tem01 p{display:block;} /* 템플릿 */ .procTem-ultherT08tem02{display:flex; position:relative; width:100%;} .procTem-ultherT08tem02 dl{display:flex; position:relative; flex-direction:column; width:100%;} .procTem-ultherT08tem02 dt{display:flex; position:relative; flex-direction:column;} .procTem-ultherT08tem02 em{display:block; font-size:var(--font-size-4xl); font-weight:var(--font-weight-bold); line-height:1.2em;} .procTem-ultherT08tem02 dd{display:flex; position:relative; flex-direction:column;} .procTem-ultherT08tem02 strong{display:block;} .procTem-ultherT08tem02 p{display:block;} @media (max-width:767.98px) { /* [울쎄라-상단08]울쎄라프라임 */ .ultheraSection-top-08{} /* 컨텐츠 */ .ultheraSection-top-08 .customProce-body{} /* 롤링배너-연동배너 */ .ultheraT08Banner{height:auto;} .ultheraT08Banner .Inner{flex-direction:column; padding:var(--padding-5xl) 0px;} .ultheraT08Banner .thumb-wrapper{flex-basis:100%; width:100%;} .ultheraT08Banner .thumb-wrapper .swiper{} .ultheraT08Banner .major-wrapper{flex-basis:100%; width:100%;} .ultheraT08Banner .major-wrapper .swiper{} } /* =========================================================================== */ /* --------------------------------------------------------------------------- */ /* [울세라-하단01]통증조절시스템(공통하단08) */ .customProce-commonBottom-08.ultheraSection-bottom-01{} .ultheraSection-bottom-01{} .ultheraSection-bottom-01 .procTem-commB08tem{letter-spacing:-1px;} /* --------------------------------------------------------------------------- */ /* [울세라-하단02]통증컨트롤(공통하단06) */ .customProce-commonBottom-06.ultheraSection-bottom-02{} .ultheraSection-bottom-02{} /* --------------------------------------------------------------------------- */ /* [울세라-하단03]정직한기록(공통하단01) */ .customProce-commonBottom-01.ultheraSection-bottom-03{} .ultheraSection-bottom-03{} /* --------------------------------------------------------------------------- */ /* [울세라-하단04]책임시술(공통하단02) */ .customProce-commonBottom-02.ultheraSection-bottom-04{} .ultheraSection-bottom-04{} /* 템플릿 */ .ultheraSection-bottom-04 .procTem-commB02tem-list li:nth-child(1) .procTem-commB02tem dl{background-image:url('/assets/images/sub/customProce_ulthera_bottom04_thum01.jpg');} .ultheraSection-bottom-04 .procTem-commB02tem-list li:nth-child(1) .procTem-commB02tem img{opacity:0;} /* --------------------------------------------------------------------------- */ /* [울세라-하단05]효과만족도(공통하단03) */ .customProce-commonBottom-03.ultheraSection-bottom-05{} .ultheraSection-bottom-05{} /* --------------------------------------------------------------------------- */ /* [울세라-하단06]샷수혜택(공통하단04) */ .customProce-commonBottom-04.ultheraSection-bottom-06{} .ultheraSection-bottom-06{} /* --------------------------------------------------------------------------- */ /* [울세라-하단07]병행솔루션(공통하단07) */ .customProce-commonBottom-01.ultheraSection-bottom-07{} .ultheraSection-bottom-07{background-image:url('/assets/images/sub/customProce_ulthera_bottom07_bg.jpg');} /* 템플릿 */ .ultheraSection-bottom-07 .procTem-commB07tem{color:var(--font-color-light);} .ultheraSection-bottom-07 .procTem-commB07tem span{color:#cedab9;} .ultheraSection-bottom-07 .procTem-commB07tem-list li:nth-child(odd){} .ultheraSection-bottom-07 .procTem-commB07tem-list li:nth-child(odd) .procTem-commB07tem dl{background-color:#34302f;} .ultheraSection-bottom-07 .procTem-commB07tem-list li:nth-child(even){} .ultheraSection-bottom-07 .procTem-commB07tem-list li:nth-child(even) .procTem-commB07tem dl{background-color:#c9c8cd;} .ultheraSection-bottom-07 .procTem-commB07tem-list li:nth-child(2) dd{background:linear-gradient(to top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%);} /* --------------------------------------------------------------------------- */ /* [울세라-하단08]전문적디자인(공통하단05) */ .customProce-commonBottom-05.ultheraSection-bottom-08{} .ultheraSection-bottom-08{} /* =========================================================================== */ /* =========================================================================== */ /* =========================================================================== */ /* =========================================================================== */ /* 쎄르프 상세 */ .xerfSection{} /* --------------------------------------------------------------------------- */ /* [세르프-상단01]기본소개 */ .xerfSection-top-01{padding:0px; background-color:#f3d4ce;} /* 컨텐츠 */ .xerfSection-top-01 .customProce-body{gap:0px;} /* 첫번째영역 */ .xerfSection-top-01 .innerSection01{display:flex; position:relative;} /* (오른쪽)배경용 */ .xerfSection-top-01 .innerSection01 .Left{} .xerfSection-top-01 .innerSection01 .Left .imgBox{display:flex; position:relative; overflow:hidden;} .xerfSection-top-01 .innerSection01 .Left .imgBox img{display:block; width:100%; object-fit:cover; animation:xerfTop01ani-scale 22s ease-in-out infinite alternate;} /* (왼쪽)컨텐츠용 */ .xerfSection-top-01 .innerSection01 .Right{position:absolute; width:100%; height:100%; padding:0px; } .xerfSection-top-01 .innerSection01 .Inner{height:100%; justify-content:center;} .xerfSection-top-01 .innerSection01 .customProce-proceTitle{} .xerfSection-top-01 .innerSection01 .small-title{color:#ac4349; text-transform: uppercase;} .xerfSection-top-01 .innerSection01 .section-title{} /* 애니메이션 */ @keyframes xerfTop01ani-scale{ 0%{opacity:1; transform:scale(1.2);} 50%{opacity:1; transform:scale(1);} 100%{opacity:1; transform:scale(1.2);} } /* 두번째 */ .xerfSection-top-01 .innerSection02{display:flex; position:relative; background-color:#423633;} .xerfSection-top-01 .innerSection02 .Inner{flex-direction:row; padding:0px;} /* (오른쪽)배경용 */ .xerfSection-top-01 .innerSection02 .Left{} /* (왼쪽)컨텐츠용 */ .xerfSection-top-01 .innerSection02 .Right{position:absolute; justify-content:center; align-items:center; width:100%; height:100%; padding:0px; } /* 템플릿 */ .procTem-xerfT01tem{display:flex; position:relative; justify-content:center; align-items:center; color:var(--font-color-light); font-family:var(--font-family-sub6);} .procTem-xerfT01tem em{display:flex; position:relative;} .procTem-xerfT01tem em img{display:inline-block; height:8rem;} .procTem-xerfT01tem p{display:block; position:relative; font-size:var(--font-size-2xl);} .procTem-xerfT01tem strong{display:inline-block; color:#f19797; font-size:var(--font-size-4xl); line-height:var(--line-height-xs); font-weight:var(--font-weight-bold);} .procTem-xerfT01tem span{display:inline-block;} @media (max-width:767.98px) { /* [세르프-상단01]기본소개 */ .xerfSection-top-01{} /* 컨텐츠 */ .xerfSection-top-01 .customProce-body{} /* 첫번째영역 */ .xerfSection-top-01 .innerSection01{display:flex; position:relative;} /* (오른쪽)배경용 */ .xerfSection-top-01 .innerSection01 .Left{} .xerfSection-top-01 .innerSection01 .Left .imgBox{height:80dvh;} .xerfSection-top-01 .innerSection01 .Left .imgBox img{object-position:80% center;} /* (왼쪽)컨텐츠용 */ .xerfSection-top-01 .innerSection01 .Right{padding:3rem 0px;} .xerfSection-top-01 .innerSection01 .Inner{justify-content:flex-end;} .xerfSection-top-01 .innerSection01 .customProce-proceTitle{} .xerfSection-top-01 .innerSection01 .small-title{} .xerfSection-top-01 .innerSection01 .section-title{} /* 두번째 */ .xerfSection-top-01 .innerSection02{} .xerfSection-top-01 .innerSection02 .Inner{padding:0px;} /* (오른쪽)배경용 */ .xerfSection-top-01 .innerSection02 .Left{} /* (왼쪽)컨텐츠용 */ .xerfSection-top-01 .innerSection02 .Right{} /* 템플릿 */ .procTem-xerfT01tem{} .procTem-xerfT01tem em{} .procTem-xerfT01tem em img{height:4rem;} .procTem-xerfT01tem p{font-size:var(--font-size);} .procTem-xerfT01tem strong{font-size:var(--font-size-lg);} .procTem-xerfT01tem span{} } /* --------------------------------------------------------------------------- */ /* [세르프-상단02] */ .xerfSection-top-02{padding-bottom:0px; background-color:#f1ede8; background-position:top center; background-size:auto 100%; background-image:url('/assets/images/sub/customProce_xerf_top02_bg.jpg');} .xerfSection-top-02 .Inner{ gap: var(--padding-3xl);;} /* 상단 */ .xerfSection-top-02 .customProce-head{} .xerfSection-top-02 .customProce-proceTitle{flex-direction:row; justify-content:space-between; gap:var(--padding-xl);} .xerfSection-top-02 .customProce-proceTitle .section-title{} .xerfSection-top-02 .customProce-proceTitle .logo{display:flex; position:relative;} .xerfSection-top-02 .customProce-proceTitle .logo img{display:inline-block; height:6rem; mix-blend-mode:multiply;} /* 컨텐츠 */ .xerfSection-top-02 .customProce-body{flex-direction:column;} .xerfSection-top-02 .innerBox{display:flex; position:relative;} .xerfSection-top-02 .Left{flex-basis:55%; justify-content:flex-end;;} .xerfSection-top-02 .Left .imgBox{display:block;} .xerfSection-top-02 .Left .imgBox img{display:block; width:100%; margin-left:-11%;} .xerfSection-top-02 .Right{flex:1; gap:var(--padding-4xl); justify-content:flex-end; padding-bottom:var(--padding-3xl);} .xerfSection-top-02 .section-summary{gap:0px;} .xerfSection-top-02 .section-summary i{display:block; color:#cbc5b7; font-size:var(--font-size-4xl); line-height:0.9em; font-weight:var(--font-weight-semibold); font-style:italic; font-family:var(--font-family-sub6); text-transform:uppercase; opacity:0.5; background: linear-gradient(to bottom, #cbc5b7 0%, #cbc5b7 80%, rgba(203, 197, 183, 0) 100%);-webkit-background-clip: text; color: transparent;} .xerfSection-top-02 .section-summary em{} .xerfSection-top-02 .section-summary p{} /* 템플릿 */ .procTem-xerfT02tem-list{display:inline-flex; position:relative; flex-direction:column; gap:var(--padding-xl);} .procTem-xerfT02tem-list li{display:block; position:relative;} .procTem-xerfT02tem{display:block; position:relative; transform-origin:center center;} .procTem-xerfT02tem dl{display:flex; position:relative; flex-direction:row; align-items:center; gap:var(--padding-lg); border:1px solid #a19473; border-radius:var(--border-radius-3xl); background-color:rgba(255, 255, 255, 0.5); padding:var(--padding-lg) var(--padding-xl); transition:all 1s ease 0.5s;} .procTem-xerfT02tem dd{flex:1;} .procTem-xerfT02tem .summary{display:block; position:relative; font-size:var(--font-size); letter-spacing: -1px; font-weight:var(--font-weight-semibold);} @media (max-width:767.98px) { /* [세르프-상단02] */ .xerfSection-top-02{} .xerfSection-top-02 .Inner{padding-bottom:0px;} /* 상단 */ .xerfSection-top-02 .customProce-head{} .xerfSection-top-02 .innerBox{flex-direction: column;} .xerfSection-top-02 .customProce-proceTitle{flex-direction: column; gap:var(--padding);} .xerfSection-top-02 .customProce-proceTitle .section-title{order: 2;} .xerfSection-top-02 .customProce-proceTitle .logo{order: 1; justify-content: flex-end;} .xerfSection-top-02 .customProce-proceTitle .logo img{height:4rem;} /* 컨텐츠 */ .xerfSection-top-02 .customProce-body{flex-direction:column; gap:var(--padding-5xl);} .xerfSection-top-02 .Left{order:2;} .xerfSection-top-02 .Left .imgBox img{margin-left:-5%;} .xerfSection-top-02 .Right{order:1; padding-bottom:0px;} .procTem-xerfT02tem .summary{font-size:var(--font-size);} } /* --------------------------------------------------------------------------- */ /* [세르프-상단03]팁사용량 */ .xerfSection-top-03{padding:10rem 0px; background-image:url('/assets/images/sub/customProce_xerf_top03_bg.jpg'); overflow: visible;} .xerfSection-top-03 .deco{display:block; position:absolute; right:-10%; top:0%; margin-top:-4rem; } .xerfSection-top-03 .deco img{width:80%;} .xerfSection-top-03 .Inner{} /* 컨텐츠 */ .xerfSection-top-03 .customProce-body{flex-direction:row; justify-content:center; gap:10rem} .xerfSection-top-03 .Left{flex:1;} .xerfSection-top-03 .Left .imgBox{display:block; position:relative;} .xerfSection-top-03 .Left .imgBox img{display:block; position:relative; border-radius:var(--border-radius-xl); overflow:hidden;} .xerfSection-top-03 .Right{flex:1; justify-content:flex-end; gap:var(--padding-6xl); text-align:right; padding-bottom:var(--padding-6xl);z-index:var(--z-index);} .xerfSection-top-03 .customProce-proceTitle{} .xerfSection-top-03 .section-title{} .xerfSection-top-03 .section-title small{opacity:0.7;} .xerfSection-top-03 .section-title em{} .xerfSection-top-03 .section-title em strong{color:#ac4349;} /* 템플릿 */ .procTem-xerfT03tem{display:block; position:relative;} .procTem-xerfT03tem dl{display:flex; position:relative; justify-content:flex-end;} .procTem-xerfT03tem dd{display:flex; position:relative; flex-direction:column; gap:var(--padding-xl);} .procTem-xerfT03tem p{display:flex; position:relative; justify-content:flex-end; align-self:flex-end; gap:var(--padding); font-size:5rem; line-height:1em; font-weight:var(--font-weight-bold);} .procTem-xerfT03tem em{display:inline-block; font-size:8rem; line-height:0.4em; font-weight:inherit; color:#ac4349;} .procTem-xerfT03tem strong{display:inline-block; line-height:inherit;} .procTem-xerfT03tem cite{display:block; position:relative; color:#9a8f86;} @media (max-width:767.98px) { /* [세르프-상단03]팁사용량 */ .xerfSection-top-03{} .xerfSection-top-03 .deco{width:80%; right:-30%;} .xerfSection-top-03 .Inner{} /* 컨텐츠 */ .xerfSection-top-03 .customProce-body{flex-direction:column; gap:var(--padding-4xl);} .xerfSection-top-03 .Left{order:2;} .xerfSection-top-03 .Right{order:1; padding-bottom:0px;} /* 템플릿 */ .procTem-xerfT03tem{} .procTem-xerfT03tem p{font-size:var(--padding-3xl);} .procTem-xerfT03tem em{font-size:5rem;} } /* --------------------------------------------------------------------------- */ /* [세르프-상단04]세르프2대보유 */ .xerfSection-top-04{background-image:url('/assets/images/sub/customProce_xerf_top04_bg.jpg'); background-size:100% 100%;} .xerfSection-top-04 .Inner{gap:var(--padding-5xl);} /* 상단 */ .xerfSection-top-04 .customProce-head{text-align:center;} .xerfSection-top-04 .customProce-proceTitle{} .xerfSection-top-04 .section-title{} .xerfSection-top-04 .section-title em strong{color:#ac4349;} .xerfSection-top-04 .section-title small{font-weight:var(--font-weight);} .xerfSection-top-04 .section-title small strong{ font-weight:var(--font-weight-bold);} /* 컨텐츠 */ .xerfSection-top-04 .customProce-body{} .xerfSection-top-04 .Center{justify-content:center; align-self:center;} .xerfSection-top-04 .Center .imgBox{display:block; position:relative; display:inline-block; aspect-ratio: 810/1040; overflow: hidden;} .xerfSection-top-04 .Center .imgBox img{display:inline-block;} .xerfSection-top-04 .Center .imgBox .standard{opacity:0;} .xerfSection-top-04 .Center .imgBox .side{position:absolute; inset:0% 0% 0% 0%;} .xerfSection-top-04 .Center .deco{display:inline-block; position:absolute; width:70%; top:-18%; right:-14%; mix-blend-mode:screen; z-index:var(--z-index);} @media (max-width:767.98px) { /* [세르프-상단04]세르프2대보유 */ .xerfSection-top-04{} .xerfSection-top-04 .Inner{} /* 상단 */ .xerfSection-top-04 .customProce-head{} /* 컨텐츠 */ .xerfSection-top-04 .customProce-body{} .xerfSection-top-04 .Center{} .xerfSection-top-04 .Center .imgBox{} .xerfSection-top-04 .Center .deco{} } /* --------------------------------------------------------------------------- */ /* [세르프-상단05]고주파 */ .xerfSection-top-05{background-color:#f4e7e0; background-image:url('/assets/images/sub/customProce_xerf_top05_bg.jpg');} .xerfSection-top-05 .Inner{gap:10rem;} /* 상단 */ .xerfSection-top-05 .customProce-head{text-align:center;} .xerfSection-top-05 .customProce-proceTitle{} .xerfSection-top-05 .section-title{} .xerfSection-top-05 .section-title small{font-weight:var(--font-weight); margin-top:var(--padding-2xl);} .xerfSection-top-05 .section-title small strong{font-weight:var(--font-weight-bold);} /* 컨텐츠 */ .xerfSection-top-05 .customProce-body{} .xerfSection-top-05 .Center{} /* 템플릿 [공통]시술전용아코디언영역 */ .xerf-customProceSection.procTem-accordionArea{} .xerf-customProceSection .procTem-accordion{} /* 배너 */ .xerf-customProceSection .procTem-accordion-slide{background-color:#f8c1bc;} /* 닫힌상태banner */ .xerf-customProceSection .procTem-accordion .slide-collapsed{} .xerf-customProceSection .procTem-accordion .slide-expanded .inner{} /* 열린상태banner */ .xerf-customProceSection .procTem-accordion .slide-expanded{} .xerf-customProceSection .procTem-accordion .slide-expanded .inner{width:100%; flex-direction:row; flex-wrap: nowrap;} .xerf-customProceSection .procTem-accordion .slide-expanded .inner span{flex:1; flex-basis:50%;} .xerf-customProceSection .procTem-accordion .slide-expanded .inner img{} /* 배너 개별설정 */ .xerf-customProceSection .slide01 .slide-collapsed{background-image:url('/assets/images/sub/customProce_xerf_top05_thum01_bar.jpg');} .xerf-customProceSection .slide02 .slide-collapsed{background-image:url('/assets/images/sub/customProce_xerf_top05_thum02_bar.jpg');} .xerf-customProceSection .slide03 .slide-collapsed{background-image:url('/assets/images/sub/customProce_xerf_top05_thum03_bar.jpg');} .xerf-customProceSection .slide04 .slide-collapsed{background-image:url('/assets/images/sub/customProce_xerf_top05_thum04_bar.jpg');} @media (max-width:991.98px) { /* [세르프-상단05]고주파 */ .xerfSection-top-05{} /* 컨텐츠 */ .xerfSection-top-05 .customProce-body{} .xerfSection-top-05 .Center{} /* 템플릿 [공통]시술전용아코디언영역 */ .xerf-customProceSection .procTem-accordion .slide-expanded .inner{} .xerf-customProceSection .procTem-accordion .slide-expanded .inner span{flex-basis:50%; width:50%;} } @media (max-width:767.98px) { /* [세르프-상단05]고주파 */ .xerfSection-top-05{} /* 컨텐츠 */ .xerfSection-top-05 .customProce-body{} .xerfSection-top-05 .Center{} /* 템플릿 [공통]시술전용아코디언영역 */ .xerf-customProceSection.procTem-accordionArea{} .xerf-customProceSection .procTem-accordion{gap:var(--padding-sm);} /* 배너 */ .xerf-customProceSection .procTem-accordion-slide{} /* 닫힌상태banner */ .xerf-customProceSection .procTem-accordion .slide-collapsed{} .xerf-customProceSection .procTem-accordion .slide-expanded .inner{} /* 열린상태banner */ .xerf-customProceSection .procTem-accordion .slide-expanded{} .xerf-customProceSection .procTem-accordion .slide-expanded .inner{flex-direction:column;} .xerf-customProceSection .procTem-accordion .slide-expanded .inner span{flex-basis:100%; width:100%;} } /* --------------------------------------------------------------------------- */ /* [세르프-상단06]멀티세르프 */ .xerfSection-top-06{background-color:#c8c8c8; background-image:url('/assets/images/sub/customProce_xerf_top06_bg.jpg');} .xerfSection-top-06 .Inner{ gap:var(--padding-6xl);} /* 상단 */ .xerfSection-top-06 .customProce-head{} .xerfSection-top-06 .customProce-proceTitle{} .xerfSection-top-06 .section-title small{font-weight:var(--font-weight); margin-top:var(--padding-2xl);} .xerfSection-top-06 .section-title small strong{color:#ac4349; font-weight:var(--font-weight-bold);} /* 컨텐츠 */ .xerfSection-top-06 .customProce-body{align-items:center;} .xerfSection-top-06 .Center{} /* 템플릿 */ .xerfSection-top-06 .procTem-ulTable{} .xerfSection-top-06 .procTem-ulTable ul.table{} .xerfSection-top-06 .procTem-ulTable .point{flex:0; flex-basis: 33%;} @media (max-width:767.98px) { /* [세르프-상단06]멀티세르프 */ .xerfSection-top-06{} .xerfSection-top-06 .Inner{padding:var(--padding-xl);} } /* --------------------------------------------------------------------------- */ /* [세르프-상단07]올라운더행보 */ .xerfSection-top-07{padding:10rem 0px; background-color:#faf8f1; background-size:100% 100% ; background-image:url('/assets/images/sub/customProce_xerf_top07_bg.jpg');} .xerfSection-top-07 .Inner{gap:var(--padding-5xl);} /* 상단 */ .xerfSection-top-07 .customProce-head{text-align:center;} .xerfSection-top-07 .customProce-proceTitle{} .xerfSection-top-07 .small-title{} .xerfSection-top-07 .section-title{} /* 컨텐츠 */ .xerfSection-top-07 .customProce-body{} .xerfSection-top-07 .Center{} .xerfSection-top-07 .Center::before{content:''; display:block; position:absolute; width:26rem; aspect-ratio:1; right:0%; margin-right:-7%; top:0%; margin-top:-7%; transform:translate(-50%, -50%);background-repeat:no-repeat; background-position:center center; background-size:auto 100%; background-image:url('/assets/images/sub/customProce_xerf_top07_deco.png'); animation:xerfTop07ani-spin 15s linear infinite;} /* 템플릿 */ .procTem-xerfT07tem-list{display:flex; position:relative; flex-direction:row;} .procTem-xerfT07tem-list li{flex:1; display:flex; position:relative;} .procTem-xerfT07tem-list li:nth-child(odd) .procTem-xerfT07tem{background-color:#e4e1d8;} .procTem-xerfT07tem-list li:nth-child(even) .procTem-xerfT07tem{background-color:#f2f0eb;} .procTem-xerfT07tem{display:flex; position:relative; width:100%; height:100%; text-align:center;} .procTem-xerfT07tem dl{display:flex; position:relative; flex-direction:column; width:100%; height:100%;} .procTem-xerfT07tem dt{display:flex; position:relative; flex-direction:column;} .procTem-xerfT07tem .thum{display:flex; position:relative; width:100%; aspect-ratio:480/500; overflow:hidden;} .procTem-xerfT07tem .thum img{display:block; width:100%; height:100%; object-fit:cover; transition:var(--transition);} .procTem-xerfT07tem:hover img{transform:scale(1.05); } .procTem-xerfT07tem dd{display:flex; position:relative; flex-direction:column; justify-content:center; height:100%; padding:var(--padding-2xl);} .procTem-xerfT07tem p{display:block; font-size:var(--font-size-lg)} /* 애니메이션 */ @keyframes xerfTop07ani-spin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} } @media (max-width:767.98px) { /* [세르프-상단07]올라운더행보 */ .xerfSection-top-07{} .xerfSection-top-07 .Inner{} /* 상단 */ .xerfSection-top-07 .customProce-head{} /* 컨텐츠 */ .xerfSection-top-07 .customProce-body{} .xerfSection-top-07 .Center::before{width:20rem; margin-right:-20%; margin-top:-18%;} /* 템플릿 */ .procTem-xerfT07tem-list{flex-direction:column;} } /* --------------------------------------------------------------------------- */ /* [세르프-상단08]병행솔루션 */ .xerfSection-top-08{} .xerfSection-top-08 .Inner{} /* 상단 */ .xerfSection-top-08 .customProce-head{} .xerfSection-top-08 .customProce-proceTitle{} .xerfSection-top-08 .section-title{} /* 컨텐츠 */ .xerfSection-top-08 .customProce-body{} /* 템플릿 */ .xerfSection-top-08 .procTem-commB07tem{} .xerfSection-top-08 .procTem-commB07tem span{color:#993b40;} .xerfSection-top-08 .procTem-commB07tem-list li:nth-child(odd) .procTem-commB07tem dd{justify-content:flex-end;} .xerfSection-top-08 .procTem-commB07tem-list li:nth-child(even) .procTem-commB07tem dd{justify-content:flex-start;} .xerfSection-top-08 .procTem-commB07tem-list li:nth-child(1) dl{background-color:#f0cbc2;} .xerfSection-top-08 .procTem-commB07tem:hover .side.left{animation:none; animation:commB07ani-sideLeftIn2 4s ease-in-out forwards;} .xerfSection-top-08 .procTem-commB07tem:hover .side.right{animation:none; animation:commB07ani-sideRightIn2 4s ease-in-out forwards; animation-delay:0.4s;} /* =========================================================================== */ /* --------------------------------------------------------------------------- */ /* [세르프하단06][공통하단01]통증컨트롤 */ .customProce-commonBottom-06.xerfSection-bottom-01{} /* --------------------------------------------------------------------------- */ /* [세르프하단01][공통하단02]정직한기록 */ .customProce-commonBottom-01.xerfSection-bottom-02{} /* --------------------------------------------------------------------------- */ /* [세르프하단02][공통하단03]책임시술 */ .customProce-commonBottom-02.xerfSection-bottom-03{} /* 템플릿 */ .xerfSection-bottom-03 .procTem-commB02tem-list li:nth-child(1) .procTem-commB02tem dl{background-image:url('/assets/images/sub/customProce_xerf_bottom03_thum01.png');} .xerfSection-bottom-03 .procTem-commB02tem-list li:nth-child(1) .procTem-commB02tem img{opacity:0;} /* --------------------------------------------------------------------------- */ /* [세르프하단03][공통하단04]효과만족도 */ .customProce-commonBottom-03.xerfSection-bottom-04{} /* --------------------------------------------------------------------------- */ /* [세르프하단05][공통하단05]전문적디자인 */ .customProce-commonBottom-05.xerfSection-bottom-05{} /* =========================================================================== */ /* =========================================================================== */ /* =========================================================================== */ /* =========================================================================== */ /* 스컬트라 */ .sculptraSection{} /* --------------------------------------------------------------------------- */ /* [스컬트라-상단01] */ .sculptraSection-top-01{padding:10rem 0px; background-color:#f5f3ec;} .sculptraSection-top-01 .Inner{gap:var(--padding-4xl);} /* 상단 */ .sculptraSection-top-01 .customProce-head{text-align:center; } .sculptraSection-top-01 .customProce-proceTitle{gap:var(--padding-3xl);} .sculptraSection-top-01 .small-title{color:#be3c61; font-size:7.2rem;} .sculptraSection-top-01 .section-title{display:flex; flex-direction:column; gap:var(--padding);} .sculptraSection-top-01 .section-title small{line-height:1.2em;} /* 컨텐츠 */ .sculptraSection-top-01 .customProce-body{} .sculptraSection-top-01 .Center{width:100%; margin:auto;} .sculptraSection-top-01 .iframeMovie{} @media (min-width: 768px) and (max-width: 991.98px) { /* [스컬트라-상단01] */ .sculptraSection-top-01{} .sculptraSection-top-01 .Inner{} /* 상단 */ .sculptraSection-top-01 .customProce-head{} .sculptraSection-top-01 .customProce-proceTitle{} .sculptraSection-top-01 .small-title{font-size:6rem; letter-spacing:-1px;} /* 컨텐츠 */ .sculptraSection-top-01 .customProce-body{} .sculptraSection-top-01 .Center{} } @media (max-width:767.98px) { /* [스컬트라-상단01] */ .sculptraSection-top-01{} .sculptraSection-top-01 .Inner{} /* 상단 */ .sculptraSection-top-01 .customProce-head{} .sculptraSection-top-01 .customProce-proceTitle{} .sculptraSection-top-01 .small-title{font-size:3rem; letter-spacing:-1px;} .sculptraSection-top-01 .section-title{} .sculptraSection-top-01 .section-title small{} /* 컨텐츠 */ .sculptraSection-top-01 .customProce-body{} .sculptraSection-top-01 .Center{} .sculptraSection-top-01 .iframeMovie{} } /* --------------------------------------------------------------------------- */ /* [스컬트라-상단02]재생촉진제 background-image:url('/assets/images/sub/customProce_sculptra_top02_bg.jpg'); */ .sculptraSection-top-02{padding:18rem 0px 6rem 0px; background-color:#ccc2b9;} .sculptraSection-top-02 .Inner{gap:7rem;} /* 상단 */ .sculptraSection-top-02 .customProce-head{text-align:center;} .sculptraSection-top-02 .customProce-proceTitle{} .sculptraSection-top-02 .section-title small{color:#746d68;} /* 컨텐츠 */ .sculptraSection-top-02 .customProce-body{flex-direction:column;} /* 스팟표기 */ .sculptraSection-top-02 .Left{flex:1;} .sculptraSection-top-02 .pointmapArea{display:block; position:relative; width:100%; border-radius:var(--border-radius-2xl); overflow:hidden; background-repeat:no-repeat; background-image:url('/assets/images/sub/customProce_sculptra_top02_bg.png'); background-position:0% 69%; background-size:auto 120%; } .sculptraSection-top-02 .pointmap{display:block; position:relative; width:80%; aspect-ratio:1;} .sculptraSection-top-02 .spot{display:inline-block; position:absolute; color:var(--font-color-light); font-size:var(--font-size-xl); font-weight:var(--font-weight-semibold); line-height:1em;} .sculptraSection-top-02 .spot span{display:inline-block; position:relative;} .sculptraSection-top-02 .spot span::before{content:''; display:inline-block; width:1.4rem; aspect-ratio:1; border-radius:var(--border-radius-max); background-color:var(--bg-color-light); box-shadow:0 0 0 rgba(255,255,255,0); margin-right:var(--padding-sm); animation:sculptraTop02ani-spotGlow 4s ease-in-out infinite;} /* 각 spot의 순차적인 delay */ .sculptraSection-top-02 .spot01{left:41%; top:23%;} /* 관자놀이 */ .sculptraSection-top-02 .spot01 span::before{animation-delay:0s;} .sculptraSection-top-02 .spot02{left:58%; top:44%;} /* 앞광대 */ .sculptraSection-top-02 .spot02 span::before{animation-delay:1s;} .sculptraSection-top-02 .spot03{left:33%; bottom:39%;} /* 옆볼 */ .sculptraSection-top-02 .spot03 span::before{animation-delay:2s;} .sculptraSection-top-02 .spot04{left:52%; bottom:29%;} /* 팔자주름 */ .sculptraSection-top-02 .spot04 span::before{animation-delay:3s;} /* 애니메이션 */ @keyframes sculptraTop02ani-spotGlow{ 0%{box-shadow:0 0 0 rgba(255,255,255,0);} 10%{box-shadow:0 0 15px 5px rgba(255,255,255,1);} 25%{box-shadow:0 0 25px 10px rgba(255,255,255,0.85);} 40%{box-shadow:0 0 15px 5px rgba(255,255,255,0.5);} 60%{box-shadow:0 0 0 rgba(255,255,255,0);} 100%{box-shadow:0 0 0 rgba(255,255,255,0);} } /* 비교표 */ .sculptraSection-top-02 .Right{padding-top:var(--padding-4xl);} /* 템플릿 */ .sculptraSection-top-02 .procTem-ulTable{} .sculptraSection-top-02 .procTem-ulTable .table .item{height:11rem;} .sculptraSection-top-02 .procTem-ulTable .td.item{font-size:var(--font-size);} .sculptraSection-top-02 .procTem-ulTable .tbody:not(.point){} .sculptraSection-top-02 .procTem-ulTable .point{background-color:#bb365c;} .sculptraSection-top-02 .procTem-ulTable .point::after{content:'Sculptra'; display:inline-block; position:absolute; left:-10%; top:0%; bottom:0%; height:auto; color:var(--font-color-light); font-size:16rem; line-height:1em; font-family:var(--font-family-sub4); writing-mode:vertical-rl; text-orientation:sideways; opacity:0.15;} .sculptraSection-top-02 .procTem-ulTable .point .th.item{font-size:4rem; line-height:var(--line-height-xs);} .sculptraSection-top-02 .procTem-ulTable .point .td.item{font-size:var(--font-size-lg); line-height: 1.5em;} @media (max-width: 991.98px) { /* [스컬트라-상단02]재생촉진제 */ .sculptraSection-top-02{background-image:none;} .sculptraSection-top-02 .Inner{} /* 상단 */ .sculptraSection-top-02 .customProce-head{} .sculptraSection-top-02 .customProce-proceTitle{} .sculptraSection-top-02 .section-title small{} /* 컨텐츠 */ .sculptraSection-top-02 .customProce-body{} /* 스팟표기 */ .sculptraSection-top-02 .Left{flex:1;} .sculptraSection-top-02 .pointmapArea{} .sculptraSection-top-02 .pointmap{} .sculptraSection-top-02 .spot{font-size:var(--font-size-lg);} .sculptraSection-top-02 .spot span{} .sculptraSection-top-02 .spot span::before{width:1rem;} /* 비교표 */ .sculptraSection-top-02 .Right{padding-top:var(--padding-4xl);} /* 템플릿 */ .sculptraSection-top-02 .procTem-ulTable{} .sculptraSection-top-02 .procTem-ulTable .table .item{} .sculptraSection-top-02 .procTem-ulTable .td.item{height:13rem;} .sculptraSection-top-02 .procTem-ulTable .tbody:not(.point){} .sculptraSection-top-02 .procTem-ulTable .point{flex:0; flex-basis:36%;} .sculptraSection-top-02 .procTem-ulTable .point .th.item{font-size:var(--font-size-2xl);} .sculptraSection-top-02 .procTem-ulTable .point .td.item{font-size:var(--font-size-lg);} .sculptraSection-top-02 .procTem-ulTable .point .td.item *{line-height:1.22em;} .sculptraSection-top-02 .procTem-ulTable .td.item:last-child{height:15rem;} } @media (min-width: 768px) and (max-width: 991.98px) { /* [스컬트라-상단02]재생촉진제 */ .sculptraSection-top-02{} /* 비교표 */ .sculptraSection-top-02 .Right{} /* 템플릿 */ .sculptraSection-top-02 .procTem-ulTable{} .sculptraSection-top-02 .procTem-ulTable .table .item{} .sculptraSection-top-02 .procTem-ulTable .table td .item{} } /* --------------------------------------------------------------------------- */ /* [스컬트라-상단03]시술돌파 */ .sculptraSection-top-03{padding:0px; padding-top:24rem;} /* 상단 */ .sculptraSection-top-03 .customProce-head{text-align:center;} .sculptraSection-top-03 .customProce-head .Inner{} .sculptraSection-top-03 .customProce-proceTitle{color:#b9345a;} .sculptraSection-top-03 .customProce-proceTitle::before{content:''; display:block; position:absolute; width:38rem; aspect-ratio:1; left:50%; top:50%; margin-left:calc( -38rem / 2); margin-top:calc( -38rem / 2); marginbackground-repeat:no-repeat; background-position:center center; background-size:auto 100%; background-image:url('/assets/images/sub/customProce_sculptra_top03_deco.png'); animation:sculptraTop03ani-spin 22s linear infinite;} .sculptraSection-top-03 .small-title{} .sculptraSection-top-03 .section-title{} /* 컨텐츠 */ .sculptraSection-top-03 .customProce-body{justify-content:flex-end; margin-top:-7%;} .sculptraSection-top-03 .graphArea{display:block; position:relative; width:100%;} .sculptraSection-top-03 .graphArea .imgBox{display:block; position:relative; width:100%; overflow:hidden;} .sculptraSection-top-03 .graphArea .imgBox img{display:block; position:relative; width:100%; } .sculptraSection-top-03 .graphArea.viewpoint-on .imgBox img{ clip-path:inset(0 100% 0 0); animation:sculptraTop03ani-reveal 2s ease forwards;} .sculptraSection-top-03 .Right{position:absolute; right:0%; bottom:10%; width:100%; text-align:right; z-index:var(--z-index);} .sculptraSection-top-03 .Right .Inner{} /* 템플릿 */ .procTem-sculptraT03tem{display:block; position:relative;} .procTem-sculptraT03tem p{display:block; position:relative;} .procTem-sculptraT03tem p small{letter-spacing:-1.4px;} .procTem-sculptraT03tem p strong{display:block; font-size:var(--font-size-3xl); font-weight:var(--font-weight-semibold);} .procTem-sculptraT03tem em{display:block; position:relative; font-size:var(--border-radius-2xl);} .procTem-sculptraT03tem em strong{display:inline-block; } .procTem-sculptraT03tem em .Num{color:#b9345a; font-size:11rem; font-family:var(--font-family-sub4); line-height:1.2em; } .procTem-sculptraT03tem cite{display:block; position:relative; font-size:var(--font-size); letter-spacing:-1.2px;} /* 애니메이션 animation:sculptraTop03ani-pumping 1.5s ease infinite; */ @keyframes sculptraTop03ani-pumping{ 0%{transform:scale(1); } 50%{transform:scale(1.2); } 100%{transform:scale(1); } } @keyframes sculptraTop03ani-reveal { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } } @keyframes sculptraTop03ani-spin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} } @media (max-width:767.98px) { /* [스컬트라-상단03]시술돌파 */ .sculptraSection-top-03{padding:0px; padding-top:12rem; gap:var(--padding-6xl);} /* 상단 */ .sculptraSection-top-03 .customProce-head{} .sculptraSection-top-03 .customProce-proceTitle{} .sculptraSection-top-03 .customProce-proceTitle::before{width:22rem; margin-left:calc( -22rem / 2); margin-top:calc( -22rem / 2); } /* 컨텐츠 */ .sculptraSection-top-03 .customProce-body{margin-top:-20%;} .sculptraSection-top-03 .graphArea{height:50dvh;} .sculptraSection-top-03 .graphArea .imgBox{height:100%;} .sculptraSection-top-03 .graphArea .imgBox img{height:100%;} .sculptraSection-top-03 .Right{bottom:0%;} .sculptraSection-top-03 .Right .Inner{padding:var(--customProc-inner-padding);} /* 템플릿 */ .procTem-sculptraT03tem{} .procTem-sculptraT03tem p{} .procTem-sculptraT03tem p small{} .procTem-sculptraT03tem p strong{font-size:var(--font-size-3xl);} .procTem-sculptraT03tem em{font-size:var(--border-radius-2xl);} .procTem-sculptraT03tem em strong{} .procTem-sculptraT03tem em .Num{font-size:6rem;} .procTem-sculptraT03tem cite{} } /* --------------------------------------------------------------------------- */ /* [스컬트라-상단04]국내넘버원 */ .sculptraSection-top-04{height:130dvh; padding:0px; background-color:#a1908a; background-size:100% 100%; background-image:url('/assets/images/sub/customProce_sculptra_top04_bg.jpg');} /* 컨텐츠 */ .sculptraSection-top-04 .customProce-body{height:100%; text-align:center; justify-content: center;} .sculptraSection-top-04 .Left{position:absolute; inset:0% 0% 0% 0%; width:100%; height:100%; } .sculptraSection-top-04 .Left .Inner{height:100%;} /* 무한마퀴롤링 */ .sculptraT03banner{display:flex; position:relative; width:100%; height:100%; gap:var(--padding-6xl);} .sculptraT03banner .banner-column{flex:1; display:block; position:relative; width:100%; height:100%; overflow:hidden;} .sculptraT03banner .banner-track{display:flex; position:absolute; flex-direction:column; gap:var(--padding-4xl); top:0; left:0; width:100%;} /* 무한위한 absolute */ .sculptraT03banner .image-card{display:block; position:relative; width:auto; height:auto; overflow:hidden;} .sculptraT03banner .item{display:block; position:relative; width:100%;} .sculptraT03banner .item img{display:inline-block; max-width:70%;} .sculptraT03banner .banner-track li:nth-child(odd) .item{text-align:left;} .sculptraT03banner .banner-track li:nth-child(even) .item{text-align:right;} .sculptraT03banner .banner-column-left{} .sculptraT03banner .banner-column-right{} /* .sculptraT03banner .banner-track li:nth-child(1) .item{background:linear-gradient(135deg, #667eea 0%, #764ba2 100%)} .sculptraT03banner .banner-track li:nth-child(2) .item{background:linear-gradient(135deg, #f093fb 0%, #f5576c 100%)} .sculptraT03banner .banner-track li:nth-child(3) .item{background:linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)} .sculptraT03banner .banner-track li:nth-child(4) .item{background:linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)} .sculptraT03banner .banner-track li:nth-child(5) .item{background:linear-gradient(135deg, #fa709a 0%, #fee140 100%)} .sculptraT03banner .banner-track li:nth-child(6) .item{background:linear-gradient(135deg, #30cfd0 0%, #330867 100%)} .sculptraT03banner .banner-track li:nth-child(7) .item{background:linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)} .sculptraT03banner .banner-track li:nth-child(8) .item{background:linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)} */ .sculptraSection-top-04 .Right{height:100%;} .sculptraSection-top-04 .Left .Inner{} /* 템플릿(mark에 문구 교체스크립트) */ .procTem-sculptraT04tem{display:flex; position:relative; color:var(--font-color-light); text-align:center; margin:auto;} .procTem-sculptraT04tem dl{display:flex; position:relative; flex-direction:column; } .procTem-sculptraT04tem dd{display:block; position:relative; flex-direction:column;} .procTem-sculptraT04tem p{display:block; position:relative;} .procTem-sculptraT04tem p span{display:block; font-size:var(--font-size-3xl);} .procTem-sculptraT04tem p em{display:block; font-size:var(--font-size-5xl); line-height:var(--line-height-xs); font-weight:var(--font-weight-bold);} .procTem-sculptraT04tem mark{display:inline-block; position:relative; text-align: center; color:var(--font-color-light); font-size:var(--font-size-3xl); font-weight:var(--font-weight-semibold); background-color:#b65b74; padding:var(--padding) var(--padding-xl); transition: width 0.4s cubic-bezier(.4, 0, .2, 1), transform 0.3s ease-in-out;} .procTem-sculptraT04tem mark .text{display:none; opacity:0; transition:opacity .5s ease;} .procTem-sculptraT04tem mark .text.active{display:block; opacity:1;} @media (max-width:767.98px) { /* [스컬트라-상단04]국내넘버원 */ .sculptraSection-top-04{height:100dvh;} /* 컨텐츠 */ .sculptraSection-top-04 .customProce-body{} .sculptraSection-top-04 .Left{} .sculptraSection-top-04 .Left .Inner{padding-top:0px; padding-bottom:0px;} /* 무한마퀴롤링 */ .sculptraT03banner{} .sculptraT03banner .banner-column{} .sculptraT03banner .banner-track{gap:var(--padding-xl);} } /* --------------------------------------------------------------------------- */ /* [스컬트라-상단05]네트워크히스토리 */ .sculptraSection-top-05{padding-top:0px; padding-bottom:0px; } .sculptraSection-top-05 .Inner{} /* 상단 */ .sculptraSection-top-05 .customProce-head{} .sculptraSection-top-05 .customProce-proceTitle{} .sculptraSection-top-05 .small-title{} .sculptraSection-top-05 .section-title{} /* 컨텐츠 */ .sculptraSection-top-05 .customProce-body{} .sculptraSection-top-05 .Center{} /* 템플릿1 */ .procTem-sculptraT05tem{display:flex; position:relative; flex-direction:column;} .procTem-sculptraT05tem b{display:block; position:relative; font-size:var(--font-size-4xl); font-weight:var(--font-weight-semibold); font-family:var(--font-family-sub4);} .procTem-sculptraT05tem .title{display:block; position:relative; font-size:var(--font-size-5xl); line-height:var(--line-height-xs); font-weight:var(--font-weight-bold);} .procTem-sculptraT05tem small{display:block; font-size:var(--font-size-3xl); font-weight:var(--font-weight-semibold);} .procTem-sculptraT05tem em{font-size:inherit; font-weight:inherit;} .procTem-sculptraT05tem cite{font-size:var(--font-size);} .procTem-sculptraT05tem p{display:block; min-height:10rem; margin-top:var(--padding-4xl);} /* 템플릿2 */ .procTem-sculptraT05tem2{display:flex; position:relative; height:100%;} .procTem-sculptraT05tem2 dl{display:flex; position:relative; flex-direction:row; align-items:flex-end; height:100%;} .procTem-sculptraT05tem2 dt{display:flex; position:relative; height:100%;} .procTem-sculptraT05tem2 .thum{display:flex; position:relative; height:100%; aspect-ratio: 403 / 452; overflow:hidden;} .procTem-sculptraT05tem2 .thum img{display:inline-block; width:auto; height:100%; object-fit:cover;} .procTem-sculptraT05tem2 dd{display:flex; position:relative;} .procTem-sculptraT05tem2 em{display:block; color:#b9345a; font-size:var(--font-size-5xl); line-height:1em; font-weight:var(--font-weight-bold); font-family:var(--font-family-sub4); writing-mode:vertical-rl; text-orientation:sideways;} /* 롤링배너-연동배너예제(반드시 두배너의 부모 높이를지정해줘야함,두배너의 가로는 width로 기입해야함) */ .sculptraT05Banner{display:block; position:relative;} .sculptraT05Banner .inner{display:flex; position:relative; flex-direction:row; width:100%; height:100dvh; gap:var(--padding-lg);} .sculptraT05Banner .major-wrapper{flex-basis:50%; width:50%; display:flex; position:relative; justify-content:flex-start; gap:var(--padding-2xl); } .sculptraT05Banner .major-wrapper .swiper{background-color:#f9f4f4; width:auto; margin:0px;} .sculptraT05Banner .major-wrapper .swiper-wrapper{} .sculptraT05Banner .major-wrapper .swiper-slide{padding:0px var(--padding-2xl); overflow:hidden;} .sculptraT05Banner .major-wrapper .swiper-slide a{display:block; position:relative;} .sculptraT05Banner .major-wrapper .swiper-slide img{} .sculptraT05Banner .swiper-pagination{display:inline-flex; position:relative; flex-direction:column; gap:var(--padding-3xl);} .sculptraT05Banner .swiper-pagination .swiper-pagination-bullet{ position:relative; width:2rem; height:2rem; border:4px solid #faf0f0; background-color:transparent; opacity:1;} .sculptraT05Banner .swiper-pagination .swiper-pagination-bullet::before{content:''; display:block; position:absolute; top:calc( 100% + 4px); left:calc(50% - 2px); height:var(--padding-3xl); border-left:3px solid #faf0f0; } .sculptraT05Banner .swiper-pagination .swiper-pagination-bullet:last-child::before{display:none;} .sculptraT05Banner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width:2rem; height:2rem; background-color:#b9345a;} .sculptraT05Banner .thumb-wrapper{flex-basis:50%; width:50%; display:flex; position:relative;} .sculptraT05Banner .thumb-wrapper .swiper{} .sculptraT05Banner .thumb-wrapper .swiper-wrapper{} .sculptraT05Banner .thumb-wrapper .swiper-slide{display:inline-flex; align-items:center; background-color:var(--bg-color-light); } .sculptraT05Banner .thumb-wrapper .swiper-slide a{display:block; position:relative;} .sculptraT05Banner .thumb-wrapper .swiper-slide img{} .sculptraT05Banner .thumb-wrapper .swiper-slide.swiper-slide-thumb-active{} @media (max-width: 991.98px) { /* [스컬트라-상단05]네트워크히스토리 */ .sculptraSection-top-05{} /* 롤링배너-연동배너예제(반드시 두배너의 부모 높이를지정해줘야함,두배너의 가로는 width로 기입해야함) */ .sculptraT05Banner{} .sculptraT05Banner .inner{height:60dvh;} .sculptraT05Banner .major-wrapper{padding-left:0%; } } @media (max-width:767.98px) { /* [스컬트라-상단05]네트워크히스토리 */ .sculptraSection-top-05{} .sculptraSection-top-05 .Inner{height:auto;} /* 템플릿 */ .procTem-sculptraT05tem{} .procTem-sculptraT05tem .b{font-size:var(--font-size-3xl);} .procTem-sculptraT05tem .title{font-size:var(--font-size-4xl);} .procTem-sculptraT05tem small{font-size:var(--font-size-xl);} /* 템플릿2 */ .procTem-sculptraT05tem2{} .procTem-sculptraT05tem2 dl{} .procTem-sculptraT05tem2 dt{} .procTem-sculptraT05tem2 .thum{} .procTem-sculptraT05tem2 .thum img{width:100%; height:auto;} /* 롤링배너-연동배너예제(반드시 두배너의 부모 높이를지정해줘야함,두배너의 가로는 width로 기입해야함) */ .sculptraT05Banner{} .sculptraT05Banner .inner{flex-direction:column; gap:var(--padding-lg); height:auto; gap:var(--padding-2xl);} .sculptraT05Banner .major-wrapper{flex-basis:100%; width:100%; flex-direction:column; gap:var(--padding-4xl); padding-left:0%; height:auto; overflow:hidden;} .sculptraT05Banner .major-wrapper .swiper{height:auto;} .sculptraT05Banner .swiper-pagination{flex-direction:row;} .sculptraT05Banner .swiper-pagination .swiper-pagination-bullet{} .sculptraT05Banner .swiper-pagination .swiper-pagination-bullet::before{top:calc(50% - 2px); left:100%; width:3.5rem; height:0px; border-left:none; border-top:3px solid #faf0f0; } .sculptraT05Banner .thumb-wrapper{flex-basis:100%; width:100%;} .sculptraT05Banner .thumb-wrapper .swiper{height:auto;} .sculptraT05Banner .thumb-wrapper .swiper-slide{align-items:stretch;} } /* --------------------------------------------------------------------------- */ /* [스컬트라-상단06]4가지약속(아코디언) */ .sculptraSection-top-06{padding:15rem 0px; background-color:#d3c5c2; background-image:url('/assets/images/sub/customProce_sculptra_top06_bg.jpg');} .sculptraSection-top-06 .Inner{gap:var(--padding-6xl);} /* 상단 */ .sculptraSection-top-06 .customProce-head{text-align:center;} .sculptraSection-top-06 .customProce-proceTitle{} .sculptraSection-top-06 .section-title{} /* 컨텐츠 */ .sculptraSection-top-06 .customProce-body{} .sculptraSection-top-06 .Center{gap:var(--padding-3xl);} /* [공통]시술전용아코디언영역 */ .sculptraSection-top-06 .procTem-accordionArea{display:flex; flex-direction:column; align-items:flex-end; gap:var(--padding-3xl);} .sculptraSection-top-06 .procTem-linkBtn{} .sculptraSection-top-06 .procTem-accordion{} /* 배너 */ .sculptraSection-top-06 .procTem-accordion-slide{flex-basis:11%;} /* 닫힌상태banner */ .sculptraSection-top-06 .procTem-accordion .slide-collapsed{background-color:#a96b7c;} /* 열린상태banner */ .sculptraSection-top-06 .procTem-accordion .slide-expanded{} /* 배너 개별설정 */ .sculptraSection-top-06 .slide01 .slide-collapsed{background-image:url('/assets/images/sub/customProce_sculptra_top06_thume01_bar.jpg');} .sculptraSection-top-06 .slide02 .slide-collapsed{background-image:url('/assets/images/sub/customProce_sculptra_top06_thume02_bar.jpg');} .sculptraSection-top-06 .slide03 .slide-collapsed{background-image:url('/assets/images/sub/customProce_sculptra_top06_thume03_bar.jpg');} .sculptraSection-top-06 .slide04 .slide-collapsed{background-image:url('/assets/images/sub/customProce_sculptra_top06_thume04_bar.jpg');} @media (max-width:767.98px) { /* [스컬트라-상단06]4가지약속(아코디언) */ .sculptraSection-top-06{} .sculptraSection-top-06 .Inner{} /* 컨텐츠 */ .sculptraSection-top-06 .customProce-body{} .sculptraSection-top-06 .Center{} /* [공통]시술전용아코디언영역 */ .sculptraSection-top-06 .procTem-accordionArea{} .sculptraSection-top-06 .procTem-accordion{} /* 배너 */ .sculptraSection-top-06 .procTem-accordion-slide{flex-basis:8%;} } /* --------------------------------------------------------------------------- */ /* [스컬트라-상단07]협력병원연구와교육(공통하단09) */ .customProce-commonBottom-08.sculptraSection-top-07{} .sculptraSection-top-07{padding:0px;} .sculptraSection-top-07 .Inner{width:100%; gap:var(--padding-5xl);} /* 컨텐츠 */ .sculptraSection-top-07 .customProce-body{text-align:center;} /* 롤링배너 */ .sculptraSection-top-07 .commB09Banner.activeSlide-1::before{background-image:url('/assets/images/sub/customProce_sculptra_top07_thum01.jpg');} .sculptraSection-top-07 .commB09Banner.activeSlide-2::before{background-image:url('/assets/images/sub/customProce_sculptra_top07_thum02.jpg');} .sculptraSection-top-07 .commB09Banner.activeSlide-3::before{background-image:url('/assets/images/sub/customProce_sculptra_top07_thum03.jpg');} .sculptraSection-top-07 .commB09Banner.activeSlide-4::before{background-image:url('/assets/images/sub/customProce_sculptra_top07_thum04.jpg');} .sculptraSection-top-07 .commB09Banner.activeSlide-5::before{background-image:url('/assets/images/sub/customProce_sculptra_top07_thum05.jpg');} .sculptraSection-top-07 .commB09Banner.activeSlide-6::before{background-image:url('/assets/images/sub/customProce_sculptra_top07_thum06.jpg');} .sculptraSection-top-07 .commB09Banner.activeSlide-7::before{background-image:url('/assets/images/sub/customProce_sculptra_top07_thum07.jpg');} .sculptraSection-top-07 .commB09Banner.activeSlide-8::before{background-image:url('/assets/images/sub/customProce_sculptra_top07_thum08.jpg');} .sculptraSection-top-07 .commB09Banner.activeSlide-9::before{background-image:url('/assets/images/sub/customProce_sculptra_top07_thum09.jpg');} .sculptraSection-top-07 .commB09Banner.activeSlide-10::before{background-image:url('/assets/images/sub/customProce_sculptra_top07_thum10.jpg');} /* --------------------------------------------------------------------------- */ /* [스컬트라-상단08]병행솔루션(공통하단07) */ .customProce-commonBottom-01.sculptraSection-top-08{} .sculptraSection-top-08{} /* 템플릿 */ .sculptraSection-top-08 .procTem-commB07tem{} .sculptraSection-top-08 .procTem-commB07tem span{color:#b9345a;} .sculptraSection-top-08 .procTem-commB07tem-list li:nth-child(1) .procTem-commB07tem dl{background-color:#a8687a;} .sculptraSection-top-08 .procTem-commB07tem-list li:nth-child(1) .procTem-commB07tem span{color:var(--font-color-light);} .sculptraSection-top-08 .procTem-commB07tem-list li:nth-child(odd) .procTem-commB07tem dd{justify-content:flex-end;} .sculptraSection-top-08 .procTem-commB07tem-list li:nth-child(even) .procTem-commB07tem dd{justify-content:flex-start;} /* =========================================================================== */ /* 스컬트라-하단 */ /* [스컬트라-하단03]정직한기록(공통하단01) */ .customProce-commonBottom-01.sculptraSection-bottom-01{} .sculptraSection-bottom-01{} /* [스컬트라-하단04]책임시술(공통하단02) */ .customProce-commonBottom-02.sculptraSection-bottom-02{} .sculptraSection-bottom-02{} /* 템플릿 */ .sculptraSection-bottom-04 .procTem-commB02tem-list li:nth-child(1) .procTem-commB02tem dl{background-image:url('/assets/images/sub/customProce_sculptra_bottom04_thum01.jpg');} .sculptraSection-bottom-04 .procTem-commB02tem-list li:nth-child(1) .procTem-commB02tem img{opacity:0;} /* [스컬트라-하단05]효과만족도(공통하단03) */ .customProce-commonBottom-03.sculptraSection-bottom-03{} .sculptraSection-bottom-03{} /* [스컬트라-하단08]전문적디자인(공통하단05) */ .customProce-commonBottom-05.sculptraSection-bottom-04{} .sculptraSection-bottom-04{} /* =========================================================================== */ /* =========================================================================== */ /* =========================================================================== */ /* =========================================================================== */ /* 줄기세포 */ .stemcellSection{} /* =========================================================================== */ /* 줄기세포-상단 */ /* --------------------------------------------------------------------------- */ /* [줄기세포-상단01]기본소개 */ .stemcellSection-top-01{padding:0px; background-color:var(--bg-color-dark);} /* 컨텐츠 */ .stemcellSection-top-01 .customProce-body{} /* (오른쪽)배경용 */ .stemcellSection-top-01 .Left{} .stemcellSection-top-01 .Left .imgBox{display:flex; position:relative; overflow:hidden;} .stemcellSection-top-01 .Left .imgBox img{display:block; width:100%; object-fit:cover; animation:stemcellTop01ani-scale 22s ease-in-out infinite alternate;} /* (왼쪽)컨텐츠용 */ .stemcellSection-top-01 .Right{position:absolute; width:100%; height:100%; padding:18rem 0px;} .stemcellSection-top-01 .Inner{height:100%;} .stemcellSection-top-01 .customProce-proceTitle{gap:var(--padding-lg); color:var(--font-color-light);} .stemcellSection-top-01 .small-title{color:#c9611c; font-size: var(--font-size-3xl); text-transform:uppercase;} .stemcellSection-top-01 .section-title{} /* 애니메이션 */ @keyframes stemcellTop01ani-scale{ 0%{opacity:1; transform:scale(1.2);} 50%{opacity:1; transform:scale(1);} 100%{opacity:1; transform:scale(1.2);} } @media (max-width:767.98px) { /* [세르프-상단01]기본소개 */ .stemcellSection-top-01{} /* 컨텐츠 */ .stemcellSection-top-01 .customProce-body{} /* (오른쪽)배경용 */ .stemcellSection-top-01 .Left{} .stemcellSection-top-01 .Left .imgBox{height:80dvh;} .stemcellSection-top-01 .Left .imgBox img{object-position:80% center;} /* (왼쪽)컨텐츠용 */ .stemcellSection-top-01 .Right{padding:10rem 0px;} .stemcellSection-top-01 .Inner{justify-content:flex-end;} .stemcellSection-top-01 .customProce-proceTitle{} .stemcellSection-top-01 .small-title{} .stemcellSection-top-01 .section-title{} } /* --------------------------------------------------------------------------- */ /* [줄기세포-상단02]풀패키지 */ .stemcellSection-top-02{padding:17rem 0px; background-color:#f0f0f0; background-image:url('/assets/images/sub/customProce_stemcell_top02_bg.jpg');} .stemcellSection-top-02::before{content:'Why Doctors?'; display:block; position:absolute; left:0%; top:0%; width:100%; color:var(--font-color-light); font-size:12rem; line-height:1em; font-weight: var(--font-weight-semibold); font-family: var(--font-family-sub4); font-style:italic; opacity:0.8;} .stemcellSection-top-02 .Inner{gap:var(--padding-6xl) ;} /* 상단 */ .stemcellSection-top-02 .customProce-head{} .stemcellSection-top-02 .customProce-proceTitle{gap:var(--padding-3xl); width:80%; margin:auto;} .stemcellSection-top-02 .small-title{font-style:italic;} .stemcellSection-top-02 .section-title{} /* 컨텐츠 */ .stemcellSection-top-02 .customProce-body{} .stemcellSection-top-02 .Center{} /* 템플릿 */ .stemcellSection-top-02 .procTem-stemcellT02tem-list{} .procTem-stemcellT02tem-list{display:grid; position:relative; grid-template-columns:repeat(2, 1fr); gap:var(--padding-6xl) var(--padding-4xl); margin:auto; text-align:center;} .procTem-stemcellT02tem-list li{display:flex; position:relative;} .procTem-stemcellT02tem{display:flex; position:relative;} .procTem-stemcellT02tem dl{display:flex; position:relative; flex-direction:column; gap:var(--padding-xl);} .procTem-stemcellT02tem dt{display:flex; position:relative; flex-direction:column;} .procTem-stemcellT02tem .thum{display:flex; position:relative; border-radius: var(--border-radius-xl); overflow:hidden;} .procTem-stemcellT02tem .thum img{display:block; width:100%; transition:var(--transition);} .procTem-stemcellT02tem dd{display:flex; position:relative; flex-direction:column;} .procTem-stemcellT02tem em{display:block; font-size:var(--font-size-4xl); font-weight:var(--font-weight-bold);} .procTem-stemcellT02tem p{display:block;} .procTem-stemcellT02tem:hover .thum img{transform:scale(1.05); } @media (min-width: 768px) and (max-width: 991.98px) { /* [줄기세포-상단02]풀패키지 */ .stemcellSection-top-02{background-size:auto 100%;} .stemcellSection-top-02::before{} .stemcellSection-top-02 .Inner{} /* 상단 */ .stemcellSection-top-02 .customProce-head{} .stemcellSection-top-02 .customProce-proceTitle{width:100%;} .stemcellSection-top-02 .small-title{} .stemcellSection-top-02 .section-title{} /* 컨텐츠 */ .stemcellSection-top-02 .customProce-body{} .stemcellSection-top-02 .Center{} /* 템플릿 */ .stemcellSection-top-02 .procTem-stemcellT02tem-list{} .procTem-stemcellT02tem-list{} .procTem-stemcellT02tem-list li{} .procTem-stemcellT02tem{} } @media (max-width: 767.98px) { /* [줄기세포-상단02]풀패키지 */ .stemcellSection-top-02{background-size:auto 100%;} .stemcellSection-top-02::before{font-size:10rem;} .stemcellSection-top-02 .Inner{} /* 상단 */ .stemcellSection-top-02 .customProce-head{} .stemcellSection-top-02 .customProce-proceTitle{width:100%;} .stemcellSection-top-02 .small-title{} .stemcellSection-top-02 .section-title{} /* 컨텐츠 */ .stemcellSection-top-02 .customProce-body{} .stemcellSection-top-02 .Center{} /* 템플릿 */ .stemcellSection-top-02 .procTem-stemcellT02tem-list{grid-template-columns:repeat(1, 1fr);} .procTem-stemcellT02tem-list{} .procTem-stemcellT02tem-list li{} .procTem-stemcellT02tem{} } /* --------------------------------------------------------------------------- */ /* [줄기세포-상단03]전용공간 */ .stemcellSection-top-03{padding:22rem 0px 10rem 0px; background-color:#e2dfd5; background-image:url('/assets/images/sub/customProce_stemcell_top03_bg.jpg');} .stemcellSection-top-03::before{content:'Rejuvenation Center'; display:block; position:absolute; left:0%; bottom:0%; width:100%; color:var(--font-color-light); font-size:8rem; line-height:0.8em; font-weight:var(--font-weight-semibold); font-family:var(--font-family-sub4); text-transform:uppercase; text-align:right; opacity:0.4;} .stemcellSection-top-03 .Inner{} /* 컨텐츠 */ .stemcellSection-top-03 .customProce-body{gap:var(--padding-6xl);} .stemcellSection-top-03 .Left{flex-direction:row; gap:var(--padding-4xl);} .stemcellSection-top-03 .customProce-proceTitle{flex:1; padding-left:var(--padding-5xl);} .stemcellSection-top-03 .small-title{} .stemcellSection-top-03 .section-title{} .stemcellSection-top-03 .Left .imgBox{flex:1; display:block; position:relative; text-align:right;} .stemcellSection-top-03 .Left .imgBox img{display:inline-block; } .stemcellSection-top-03 .Right{flex-direction:row; gap:var(--padding-4xl); justify-content:flex-end; align-items:center;} .stemcellSection-top-03 .Right .imgBox{flex:1; display:flex; position:relative;} .stemcellSection-top-03 .Right .imgBox img{display:block; border-top-right-radius:var(--border-radius-4xl);} .stemcellSection-top-03 .Right .section-summary{flex:1; text-align:right;} @media (min-width: 768px) and (max-width: 991.98px) { /* [줄기세포-상단03]전용공간 */ .stemcellSection-top-03{background-size:auto 100%; background-position:left top;} .stemcellSection-top-03::before{font-size:7rem;} .stemcellSection-top-03 .Inner{} /* 컨텐츠 */ .stemcellSection-top-03 .customProce-body{} .stemcellSection-top-03 .Left{} .stemcellSection-top-03 .customProce-proceTitle{padding-left:0;} } @media (max-width: 767.98px) { /* [줄기세포-상단03]전용공간 */ .stemcellSection-top-03{background-size:auto 100%; background-position:left top;} .stemcellSection-top-03::before{font-size:6rem;} .stemcellSection-top-03 .Inner{} /* 컨텐츠 */ .stemcellSection-top-03 .customProce-body{} .stemcellSection-top-03 .Left{flex-direction:column;} .stemcellSection-top-03 .customProce-proceTitle{padding-left:0;} .stemcellSection-top-03 .small-title{} .stemcellSection-top-03 .section-title{} .stemcellSection-top-03 .Left .imgBox{} .stemcellSection-top-03 .Left .imgBox img{} .stemcellSection-top-03 .Right{flex-direction:column;} .stemcellSection-top-03 .Right .imgBox{} .stemcellSection-top-03 .Right .imgBox img{} .stemcellSection-top-03 .Right .section-summary{} } /* --------------------------------------------------------------------------- */ /* [줄기세포-상단04]전문과목별협진 */ .stemcellSection-top-04{padding:13rem 0px; color:var(--font-color-light); background-color:#0c0c0c; background-size:100% auto; background-image:url('/assets/images/sub/customProce_stemcell_top04_bg.jpg');} .stemcellSection-top-04 .Inner{gap:var(--padding-5xl);} /* 상단 */ .stemcellSection-top-04 .customProce-head{} .stemcellSection-top-04 .customProce-proceTitle{gap:var(--padding-3xl);} .stemcellSection-top-04 .small-title{} .stemcellSection-top-04 .section-title{} /* 컨텐츠 */ .stemcellSection-top-04 .customProce-body{gap:var(--padding-6xl);} /* 삼각형영역 */ .stemcellSection-top-04 .Left{justify-content:center; align-items:center;} .stemcellSection-top-04 .Left .inner{display:flex; position:relative; justify-content:center; align-items:center; width:80%;} /* 삼각형 */ .stemcellSection-top-04 .imgBox{display:inline-block; position:relative; width:83rem; aspect-ratio:830 / 680;} .stemcellSection-top-04 .imgBox img{display:inline-block; position:relative; mix-blend-mode:screen;} .stemcellSection-top-04 .imgBox .standard{opacity:0;} .stemcellSection-top-04 .imgBox .side{position:absolute; inset:0% 0% 0% 0%;} .stemcellSection-top-04 .imgBox .side.bg{} .stemcellSection-top-04 .imgBox .side.logo{mix-blend-mode: overlay;} .stemcellSection-top-04 .imgBox .side.line{} .stemcellSection-top-04 .spot{display:inline-block; position:absolute; opacity:0; transition:opacity 1s ease;} .stemcellSection-top-04 .viewpoint{} .stemcellSection-top-04 .viewpoint-on.spot{opacity:1;} /* 별도위치지정 */ .stemcellSection-top-04 .spot01{top:0%; left:50%; transform:translateX(-50%);} .stemcellSection-top-04 .spot02{left:0%; bottom:0%;} .stemcellSection-top-04 .spot03{right:0%; bottom:0%;} .stemcellSection-top-04 .imgBox .side.line{opacity:0;} .stemcellSection-top-04 .imgBox .line01 {animation:stemcellTop01ani-fadeIn1 6s linear infinite; } .stemcellSection-top-04 .imgBox .line02 {animation:stemcellTop01ani-fadeIn2 6s linear infinite; } .stemcellSection-top-04 .imgBox .line03 {animation:stemcellTop01ani-fadeIn3 6s linear infinite; } /* 애니메이션 */ @keyframes stemcellTop01ani-fadeIn1 { 0% { opacity:0; } 20% { opacity:1; } 100% { opacity:1; } } @keyframes stemcellTop01ani-fadeIn2 { 0%, 20% { opacity:0; } 40% { opacity:1; } 100% { opacity:1; } } @keyframes stemcellTop01ani-fadeIn3 { 0%, 40% { opacity:0; } 60% { opacity:1; } 100% { opacity:1; } } /* 애니메이션 */ @keyframes stemcellTop01ani-fadeIntext{ from{opacity:0;} to{opacity:1;} } /* 문구 */ .stemcellSection-top-04 .Right{padding-right:var(--padding-4xl);} .stemcellSection-top-04 .section-summary{text-align:right; padding-top:11rem; padding-right:5rem;;} .stemcellSection-top-04 .section-summary p{padding-right: var(--padding-5xl);} .stemcellSection-top-04 .deco{display:inline-block; position:absolute; top:0%; right:0%;} @media (max-width: 767.98px) { /* [줄기세포-상단04]전문과목별협진 */ .stemcellSection-top-04{} .stemcellSection-top-04 .Inner{} /* 상단 */ .stemcellSection-top-04 .customProce-head{} /* 컨텐츠 */ .stemcellSection-top-04 .customProce-body{} /* 삼각형영역 */ .stemcellSection-top-04 .Left{} .stemcellSection-top-04 .Left .inner{width:100%;} /* 삼각형 */ .stemcellSection-top-04 .imgBox{ width:100%; aspect-ratio:830 / 720; } /* 문구 */ .stemcellSection-top-04 .Right{padding-right:0px;} .stemcellSection-top-04 .section-summary{padding-top:7rem; padding-right:1rem;} .stemcellSection-top-04 .section-summary p{} .stemcellSection-top-04 .deco{width:40%;} } /* --------------------------------------------------------------------------- */ /* [줄기세포-상단05]진화한리턴셀부스터 */ .stemcellSection-top-05{padding:9rem 0px; text-align:center; background-color:#f1f1f1; background-image:url('/assets/images/sub/customProce_stemcell_top05_bg.jpg');} .stemcellSection-top-05 .Inner{gap:var(--padding-6xl);} /* 상단 */ .stemcellSection-top-05 .customProce-head{} .stemcellSection-top-05 .customProce-proceTitle{} .stemcellSection-top-05 .small-title{} .stemcellSection-top-05 .section-title{} /* 컨텐츠 */ .stemcellSection-top-05 .customProce-body{} .stemcellSection-top-05 .Center{gap:var(--padding-5xl);} /* 템플릿 */ .stemcellSection-top-05 .procTem-ulTable{align-items:center;} .stemcellSection-top-05 .procTem-ulTable .table{width:100%; align-items:center; justify-content: center;} .stemcellSection-top-05 .procTem-ulTable .table .item{} .stemcellSection-top-05 .procTem-ulTable .table .thead{flex:0; flex-basis:20%;} .stemcellSection-top-05 .procTem-ulTable .table .point{flex:0; flex-basis:36%; background-color:#6c6550;} @media (max-width: 767.98px) { /* [줄기세포-상단05]진화한리턴셀부스터 */ .stemcellSection-top-05{background-size:auto 100% ;} /* 상단 */ .stemcellSection-top-05 .customProce-head{} /* 컨텐츠 */ .stemcellSection-top-05 .customProce-body{} .stemcellSection-top-05 .Center{} /* 템플릿 */ .stemcellSection-top-05 .procTem-ulTable{} .stemcellSection-top-05 .procTem-ulTable .table{} .stemcellSection-top-05 .procTem-ulTable .table .item{height:14rem;} .stemcellSection-top-05 .procTem-ulTable .table .thead{flex:0; flex-basis:14%;} .stemcellSection-top-05 .procTem-ulTable .table .point{} } /* --------------------------------------------------------------------------- */ /* [줄기세포-상단06]회복하는힘 */ .stemcellSection-top-06{padding:10rem 0px 18rem 0px; color:var(--font-color-light); text-align:center; background-color:#15130e; background-size:100% auto; background-image:url('/assets/images/sub/customProce_stemcell_top06_bg.jpg');} .stemcellSection-top-06::before{content:'From Within, For You'; display:block; position:absolute; left:0%; bottom:0%; width:100%; color:#683520; font-size:12rem; line-height:0.8em; font-weight:var(--font-weight-semibold); font-family:var(--font-family-sub4); text-align:center; opacity:0.5;} .stemcellSection-top-06 .Inner{gap:11rem; } /* 상단 */ .stemcellSection-top-06 .customProce-head{} .stemcellSection-top-06 .customProce-proceTitle{} .stemcellSection-top-06 .small-title{} .stemcellSection-top-06 .section-title{} /* 컨텐츠 */ .stemcellSection-top-06 .customProce-body{gap:var(--padding-6xl);} /* 오각형영역 */ .stemcellSection-top-06 .Left{align-items: center;} .stemcellSection-top-06 .Left .inner{display:flex; position:relative; justify-content:center; align-items:center; width:100%; aspect-ratio:1000/900;} /* 오각형구성 */ .stemcellSection-top-06 .imgBox{display:inline-block; position:relative; width:auto; aspect-ratio:560/534;} .stemcellSection-top-06 .imgBox img{display:inline-block; position:relative; mix-blend-mode:screen;} .stemcellSection-top-06 .imgBox .standard{opacity:0;} .stemcellSection-top-06 .imgBox .side{position:absolute; inset:0% 0% 0% 0%;} .stemcellSection-top-06 .imgBox .side.bg{} .stemcellSection-top-06 .imgBox .side.line{} .stemcellSection-top-06 .spot{display:inline-block; position:absolute; width:var(--icon-size); aspect-ratio:1; border-radius:var(--border-radius-max); background-color: #97430b; box-shadow:0 0 0 rgba(151,67,11,0); margin-right:var(--padding-sm); animation:sculptraTop06ani-spotGlow 5s ease-in-out infinite;} /* 애니메이션 */ @keyframes sculptraTop06ani-spotGlow{ 0%{box-shadow:0 0 0 rgba(151,67,11,0);} 10%{box-shadow:0 0 15px 10px rgba(151,67,11,1);} 25%{box-shadow:0 0 25px 15px rgba(151,67,11,0.85);} 40%{box-shadow:0 0 15px 10px rgba(151,67,11,0.5);} 100%{box-shadow:0 0 0 rgba(151,67,11,0);} } /* 템플릿 */ .procTem-stemcellT06tem{display:flex; position:absolute;} .procTem-stemcellT06tem dl{display:flex; position:relative; flex-direction:column;} .procTem-stemcellT06tem dd{display:flex; position:relative; flex-direction:column; gap:var(--padding);} .procTem-stemcellT06tem em{display:block; font-size:var(--font-size-4xl); line-height: 1em; font-weight:var(--font-weight-semibold);} .procTem-stemcellT06tem p{display:block;} /* 별도위치지정 */ .stemcellSection-top-06 .spot01{animation-delay:0s; top:0%; left:50%; transform:translateX(-50%);} .stemcellSection-top-06 .spot02{animation-delay:1s; right:0%; top:50%; margin-top:-14%;} .stemcellSection-top-06 .spot03{animation-delay:2s; bottom:1.5%; right:18%;} .stemcellSection-top-06 .spot04{animation-delay:3s; bottom:1.5%; left:18%;} .stemcellSection-top-06 .spot05{animation-delay:4s; left:0%; top:50%; margin-top:-14%; } .stemcellSection-top-06 .spot01{} .stemcellSection-top-06 .item01{top:0%; left:50%; transform:translateX(-50%);} /* 줄기세포 */ .stemcellSection-top-06 .item02{right:0%; top:46%; text-align:left;} /* 성장인자 */ .stemcellSection-top-06 .item03{bottom:0%; right:20%;} /* 백혈구 */ .stemcellSection-top-06 .item04{bottom:0%; left:20%;} /* 혈소판 */ .stemcellSection-top-06 .item05{left:0%; top:46%; text-align:right;} /* SDF-1α */ /* 문구영역 */ .stemcellSection-top-06 .Right{} .stemcellSection-top-06 .Right .section-summary{} .stemcellSection-top-06 .Right .section-summary::before{content:''; display:block; position:relative; left:50%; height:20rem; border-left:2px solid var(--border-color-light); opacity:0.5;} @media (min-width: 768px) and (max-width: 991.98px) { /* [줄기세포-상단06]회복하는힘 */ .stemcellSection-top-06{} /* 상단 */ .stemcellSection-top-06 .customProce-head{} /* 컨텐츠 */ .stemcellSection-top-06 .customProce-body{} /* 오각형영역 */ .stemcellSection-top-06 .Left{} .stemcellSection-top-06 .Left .inner{aspect-ratio:1000/1050;} /* 오각형구성 */ .stemcellSection-top-06 .imgBox{} } @media (max-width: 767.98px) { /* [줄기세포-상단06]회복하는힘 */ .stemcellSection-top-06{} .stemcellSection-top-06::before{font-size:8rem;} .stemcellSection-top-06 .Inner{} /* 상단 */ .stemcellSection-top-06 .customProce-head{} .stemcellSection-top-06 .customProce-proceTitle{} .stemcellSection-top-06 .small-title{} .stemcellSection-top-06 .section-title{} /* 컨텐츠 */ .stemcellSection-top-06 .customProce-body{} /* 오각형영역 */ .stemcellSection-top-06 .Left{} .stemcellSection-top-06 .Left .inner{width:100%; aspect-ratio:1000/1300;} /* 오각형구성 */ .stemcellSection-top-06 .imgBox{width:80%;} /* 템플릿 */ .procTem-stemcellT06tem{} .procTem-stemcellT06tem dl{} .procTem-stemcellT06tem dd{gap: 0px;} .procTem-stemcellT06tem em{font-size:var(--font-size-2xl);} .procTem-stemcellT06tem p{font-size: var(--font-size); line-height:var(--line-height-xs);} /* 별도위치지정 */ .stemcellSection-top-06 .spot01{} .stemcellSection-top-06 .spot02{} .stemcellSection-top-06 .spot03{bottom:0%; right:17%;} .stemcellSection-top-06 .spot04{bottom:0%; left:17%;} .stemcellSection-top-06 .spot05{ } .stemcellSection-top-06 .spot01{} .stemcellSection-top-06 .item01{} /* 줄기세포 */ .stemcellSection-top-06 .item02{text-align:right; top:50%;} /* 성장인자 */ .stemcellSection-top-06 .item03{right:0%;} /* 백혈구 */ .stemcellSection-top-06 .item04{left:0%; } /* 혈소판 */ .stemcellSection-top-06 .item05{text-align:left; top:50%;} /* SDF-1α */ /* 문구영역 */ .stemcellSection-top-06 .Right{} .stemcellSection-top-06 .Right .section-summary{} .stemcellSection-top-06 .Right .section-summary::before{height:10rem;} } /* --------------------------------------------------------------------------- */ /* [줄기세포-상단07]나에게맞는줄기세포 */ .stemcellSection-top-07{padding:10rem 0px; background-color:#f0f0f0;} .stemcellSection-top-07 .Inner{gap:var(--padding-5xl); text-align:center;} /* 상단 */ .stemcellSection-top-07 .customProce-head{} .stemcellSection-top-07 .customProce-proceTitle{} .stemcellSection-top-07 .small-title{} .stemcellSection-top-07 .section-title{} .stemcellSection-top-07 .section-title small{display:block; font-size: var(--font-size-xl); margin-top:var(--padding-4xl);} /* 컨텐츠 */ .stemcellSection-top-07 .customProce-body{} .stemcellSection-top-07 .Center{} /* [공통]테이블 */ .stemcellSection-top-07 .procTem-table{} .stemcellSection-top-07 .procTem-table .table{} .stemcellSection-top-07 .procTem-table .table tbody{} .stemcellSection-top-07 .procTem-table .table th{background-color:#e8e8e8;} .stemcellSection-top-07 .procTem-table .table tbody tr:first-child{} .stemcellSection-top-07 .procTem-table .table .head:nth-child(2){background-color:#6c6550;} .stemcellSection-top-07 .procTem-table .table .head:nth-child(3){background-color:#6c5750;} @media (max-width: 991.98px) { /* [줄기세포-상단07]나에게맞는줄기세포 */ .stemcellSection-top-07{} /* 상단 */ .stemcellSection-top-07 .customProce-head{} /* 컨텐츠 */ .stemcellSection-top-07 .customProce-body{} /* [공통]테이블 */ .stemcellSection-top-07 .procTem-table{} } /* =========================================================================== */ /* 줄기세포-하단 */ /* [줄기세포-하단01]효과만족도(공통하단03) */ .customProce-commonBottom-03.stemcellSection-bottom-01{gap: var(--padding-6xl);} .stemcellSection-bottom-01{} /* [줄기세포-하단02]정직한기록(공통하단01) */ .customProce-commonBottom-01.stemcellSection-bottom-02{} .stemcellSection-bottom-02{} /* [줄기세포-하단03]통증컨트롤(공통하단06) */ .customProce-commonBottom-06.stemcellSection-bottom-03{} .stemcellSection-bottom-03{} /* [줄기세포-하단04]전문적디자인(공통하단05) */ .customProce-commonBottom-05.stemcellSection-bottom-04{} .stemcellSection-bottom-04{} /* =========================================================================== */ /* =========================================================================== */ /* =========================================================================== */ /* =========================================================================== */