@charset "utf-8";

/* main visual */
.main-visual-wrap {line-height:0;}
.main-visual-item {width:100%;}
.main-visual-item > a {position:relative; display:inline-block; width:100%;}
.main-visual-item .img-area {width:100%; height:100%; background:center / cover no-repeat;}
.main-visual-item .img-area.pc {padding-bottom:48.438%;}
.main-visual-item .img-area.mo {padding-bottom:170.835%;}
.main-visual-item .inner {position:absolute; top:0; left:50%; width:100%; height:100%; transform:translateX(-50%);}

/* [S] 2025-06-05_메인슬라이더, 김승희 : 오른쪽정렬 추가 */
.main-visual-item .txt-area {display:flex; flex-direction:column; justify-content:center; align-items:flex-start; width:50%; height:100%; color:var(--font-color-black); line-height:1.5;}
.main-visual-item .txt-area .tit {font-size:8.2rem; opacity:0; transform:translateY(50px); transition:all 0.5s ease 0.75s;}
.main-visual-item .txt-area .txt {margin-top:10px; font-family:"Noto Serif KR",serif; font-size:3.6rem; font-weight:200; opacity:0; transform:translateY(50px); transition:all 0.5s ease 1s;}
.main-visual-item .txt-area .txt > strong {font-weight:500;}
.main-visual-item .inner.right {text-align:unset!important; transform:translateX(0);}
.main-visual-item .inner.right .txt-area {padding-left:40px;}
/* // [E] 2025-06-05_메인슬라이더, 김승희 : 오른쪽정렬 추가 */

.main-visual-pagination.swiper-pagination-bullets {position:absolute; bottom:40px; left:calc(50% + 20px); width:100%; max-width:1540px; line-height:1; transform:translateX(-50%);}
.main-visual-pagination .swiper-pagination-bullet {width:10px; height:10px; border-radius:50%; background:transparent; border:1px solid var(--border-color-white); opacity:1; transition:all 0.5s ease;}
.main-visual-pagination .swiper-pagination-bullet:not(:last-child) {margin-right:20px;}
.main-visual-pagination .swiper-pagination-bullet-active {background:var(--color-primary); border-color:var(--color-primary); opacity:0.5;}
.on.main-visual-wrap .on.main-visual-item .txt-area .tit,
.on.main-visual-wrap .on.main-visual-item .txt-area .txt {opacity:1; transform:translateY(0);}

/* [S] 2025-06-05_메인슬라이더, 김승희 : 오른쪽정렬 추가 */
@media screen and (max-width: 1023px) {
	.main-visual-item .txt-area .tit {font-size:6.2rem;}
	.main-visual-item .txt-area .txt {font-size:2rem;}
}
/* // [E] 2025-06-05_메인슬라이더, 김승희 : 오른쪽정렬 추가 */

@media screen and (max-width: 767px) {
	.main-visual-item .inner {padding-top:75%;}
	
	/* [S] 2025-06-05_메인슬라이더, 김승희 : 오른쪽정렬 추가 */
	.main-visual-item .txt-area {width:100%; align-items:center; text-align:center;}
	.main-visual-item .txt-area .tit {font-size:5.2rem;}
	.main-visual-item .txt-area .txt {margin-top:5px; font-size:1.8rem;}
	.main-visual-item .inner.right {transform:translateX(-50%);}
	.main-visual-item .inner.right .txt-area {width:100%; padding-left:unset;}
	/* // [E] 2025-06-05_메인슬라이더, 김승희 : 오른쪽정렬 추가 */

	.main-visual-pagination.swiper-pagination-bullets {bottom:10px; left:0; text-align:center; transform:translate(0,-50%);}
	.main-visual-pagination .swiper-pagination-bullet {width:8px; height:8px;}
	.main-visual-pagination .swiper-pagination-bullet:not(:last-child) {margin-right:10px;}
}

/* best treatment */
.best-treatment-wrap .best-treatment-item {position:relative; height:fit-content;}
.best-treatment-wrap .best-treatment-item .img-area {width:100%; height:auto; background:center / 100% auto no-repeat; transition:all 0.5s cubic-bezier(.4,0,.2,1);}
.best-treatment-wrap .best-treatment-item .txt-area {position:absolute; top:0; left:0; display:flex; flex-direction:column; justify-content:flex-end; width:100%; height:100%; padding:60px; text-align:right;}
.best-treatment-wrap .best-treatment-item .txt-area > p {margin-bottom:10px; font-size:3.2rem; font-weight:600;}
.best-treatment-wrap .best-treatment-item .txt-area .btn-ani-full {position:relative; overflow:hidden; z-index:2; transition:all 0.35s cubic-bezier(.4,0,.2,1);} 
.best-treatment-wrap .best-treatment-item .txt-area .btn-ani-full::before {content:""; position:absolute; top:0; left:-100%; z-index:-1; width:100%; height:100%; background:var(--color-primary); transition:all 0.4s cubic-bezier(.4,0,.2,1);} 
.best-treatment-wrap .best-treatment-item:hover .img-area {background-size:120% auto;}
.best-treatment-wrap .best-treatment-item:hover .txt-area .btn-ani-full {color:var(--font-color-white); border-color:var(--border-color-primary);}
.best-treatment-wrap .best-treatment-item:hover .txt-area .btn-ani-full::before {left:0;} 

.pc-best-treatment {position:relative; z-index:3; width:100%;}
.pc-best-treatment::before {content:""; position:absolute; top:0; left:calc(50% + 150px); width:1px; height:100%; background-color:var(--color-gray04);}
.pc-best-treatment::after {content:""; position:absolute; top:50%; left:0; z-index:-1; width:100%; height:1px; background-color:var(--color-gray04);}
.pc-best-treatment .inner {padding-top:180px; padding-bottom:96px;}
.pc-best-treatment .best-treatment-top,
.pc-best-treatment .best-treatment-bottom {display:flex; flex-wrap:nowrap; flex-direction:row; justify-content:space-between; align-items:stretch; gap:60px; width:100%;}
.pc-best-treatment .best-treatment-bottom {margin-top:150px;}
.pc-best-treatment .best-treatment-item.lifting {flex-grow:1; max-width:630px;}
.pc-best-treatment .best-treatment-item.volume {flex-grow:1.25; max-width:810px; margin-top:100px;}
.pc-best-treatment .best-treatment-item.skinbooster {flex-grow:1.25; max-width:810px; margin-top:100px;}
.pc-best-treatment .best-treatment-item.stemcells {flex-grow:1; max-width:630px;}
.pc-best-treatment .best-treatment-item.lifting .img-area {padding-bottom:61.906%;}
.pc-best-treatment .best-treatment-item.volume .img-area {padding-bottom:61.73%;}
.pc-best-treatment .best-treatment-item.skinbooster .img-area {padding-bottom:61.73%;}
.pc-best-treatment .best-treatment-item.stemcells .img-area {padding-bottom:61.906%;}
.pc-best-treatment .best-treatment-item.volume::before {content:"CLASS ONE"; position:absolute; top:calc(100% - 62px); right:calc(100% - 60px); z-index:-1; width:max-content; color:var(--font-color-gray05); font-family:the-seasons,serif; font-size:18rem; opacity:0; transform:translateY(100px); transition:all 0.5s ease 0.25s;}
.pc-best-treatment .best-treatment-item.stemcells::before {content:""; position:absolute; top:calc(50% + 40px); left:calc(50% - 160px); z-index:-1; width:710px; height:710px; background:url("/theme/v1/resources/images/main/bg_treatment.png") center / cover no-repeat; ; opacity:0; transform:translateY(100px); transition:all 0.5s ease 0.25s;}
.pc-best-treatment .on.best-treatment-item.volume::before, 
.pc-best-treatment .on.best-treatment-item.stemcells::before {opacity:1; transform:translateY(0);}

.mo-best-treatment {position:relative; z-index:3; width:100%;}
.mo-best-treatment::before {content:""; position:absolute; top:0; left:calc(50% - 120px); width:1px; height:75%; background-color:var(--color-gray04);}
.mo-best-treatment .inner {padding-top:100px;} 
.mo-best-treatment .best-treatment-cont {position:relative; display:flex; flex-direction:column; width:100%; margin-top:50px;}
.mo-best-treatment .best-treatment-cont > div {position:relative; width:100%; height:min-content; margin-bottom:50px;}
.mo-best-treatment .best-treatment-top::before {content:""; position:absolute; top:calc(100% - 50px); right:0; width:300%; height:1px; background-color:var(--color-gray04);}
.mo-best-treatment .best-treatment-top::after {content:"CLASS"; position:absolute; top:calc(100% - 70px); right:-15px; z-index:-1; width:max-content; color:var(--font-color-gray05); font-family:the-seasons,serif; font-size:9rem;}
.mo-best-treatment .best-treatment-bottom::before {content:""; position:absolute; bottom:-50px; left:calc(50% + 78px); width:1px; height:100%; background-color:var(--color-gray04);}
.mo-best-treatment .best-treatment-bottom::after {content:"ONE"; position:absolute; bottom:-70px; left:-15px; z-index:-1; width:max-content; color:var(--font-color-gray05); font-family:the-seasons,serif; font-size:9rem;}
.mo-best-treatment .best-treatment-left-slider {position:relative; overflow:hidden; width:calc(75% - 20px);}
.mo-best-treatment .best-treatment-right-slider {position:relative; overflow:hidden; width:calc(100% - 40px); margin-left:40px;}
.mo-best-treatment .best-treatment-item .img-area {background-size:auto 100%;}
.mo-best-treatment .best-treatment-item:hover .img-area {background-size:auto 120%;}
.mo-best-treatment .best-treatment-left-slider .img-area {padding-bottom:68%;}
.mo-best-treatment .best-treatment-right-slider .img-area {padding-bottom:84.378%;}
.mo-best-treatment .best-treatment-item .txt-area {padding:20px; text-align:left;}
.mo-best-treatment .best-treatment-item .txt-area > p {margin-bottom:5px; font-size:2.6rem;}
.mo-best-treatment .best-treatment-right-slider .txt-area {text-align:right;}

/* class one, equipment */
.classone-equipment-wrap {margin-bottom:200px;}
.classone-equipment-wrap::before {content:""; position:absolute; top:0; left:calc(50% + 150px); width:1px; height:60%; background-color:var(--color-gray04);}
.classone-equipment-wrap::after {content:""; position:absolute; top:0; right:calc(50% - 150px); width:100%; height:1px; background-color:var(--color-gray04);}
.classone-equipment-wrap .inner {padding-top:80px;}
.classone-equipment-slider {position:relative; padding:0 30px; margin-top:100px; background-color:var(--color-white);}
.equipment-list {position:relative; transition-timing-function:linear!important;}
.equipment-item {width:auto;} 
.equipment-item .img-area {width:100%; padding-top:118.575%; border:1px solid var(--border-color-gray04); background:center / cover no-repeat; transition:border 0.15s ease;}
.equipment-item .txt-area {padding-top:35px;}
.equipment-item .txt-area .txt {font-size:2.4rem; font-weight:600; transition:color 0.15s ease;}
.equipment-item .txt-area .sub {margin-top:5px; color:var(--font-color-gray01); font-size:1.8rem; font-weight:200;}
.equipment-item:hover .img-area {border-color:var(--border-color-secondary);}
.equipment-item:hover .txt-area .txt {color:var(--color-primary);}
@media screen and (max-width: 767px) {
	.classone-equipment-wrap {margin-bottom:100px;}
	.classone-equipment-wrap .inner {padding-top:45px;}
	.classone-equipment-slider {width:50%; min-width:160px; padding:0; margin:45px auto 0;}
	.classone-equipment-wrap::before {left:calc(50% + 78px);}
	.classone-equipment-wrap::after {right:calc(50% - 78px);}
	.equipment-item .txt-area {padding-top:30px;}
	.equipment-item .txt-area .txt {font-size:1.7rem;}
	.equipment-item .txt-area .sub {font-size:1.2rem;}
}

/* youtube */
.youtube-drkol-wrap {background-color:var(--color-gray05);}
.youtube-drkol-wrap .inner {padding-top:200px; padding-bottom:200px;}
.youtube-drkol-visual {display:flex; flex-direction:row; justify-content:space-between; align-items:center; width:100%; margin-bottom:50px;}
.youtube-drkol-visual .txt-area {width:calc(50% - 10px); margin-right:10px; padding:0 60px;}
.youtube-drkol-visual .txt-area .logo-youtube {width:180px; height:40px; margin-bottom:40px; background:center / cover no-repeat;}
.youtube-drkol-visual .txt-area .tit {font-size:8.2rem; line-height:1.2;}
.youtube-drkol-visual .txt-area .tit > em {margin-left:20px; font-family:"Pretendard",sans-serif; font-size:2.4rem; font-weight:600;}
.youtube-drkol-visual .txt-area .txt {font-family:"Noto Serif KR",serif; font-size:3.6rem; font-weight:200; letter-spacing:-2px;}
.youtube-drkol-visual .txt-area .btn-area {margin-top:45px;}
.youtube-drkol-visual .txt-area .btn-area strong {font-weight:600;}
.youtube-drkol-visual .video-area {width:calc(50% - 10px); margin-left:10px; line-height:0; transition-delay:0.25s;}
.youtube-drkol-visual .video-area > video {width:100%; height:100%; padding-top:6.758%; background:url('/theme/v1/resources/images/main/img_youtube_visual01.png') center / cover no-repeat;}
.youtube-drkol-slider {overflow:hidden; padding:20px; margin:-20px; transition-delay:0.25s;}
.youtube-drkol-item {display:flex; flex-direction:column; width:100%; height:unset;}
.youtube-drkol-item > a {position:relative; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; flex-grow:1; width:100%; height:unset;}
.youtube-drkol-item > a::before {content:""; position:absolute; top:50%; left:50%; width:100%; height:100%; border:1px solid transparent; transform:translate(-50%,-50%); transition:all 0.15s ease;}
.youtube-drkol-item > a:hover::before {width:calc(100% + 20px); height:calc(100% + 20px); border-color:var(--border-color-secondary);}
.youtube-drkol-item .img-area {width:100%; padding-top:56.948%; background:center / cover no-repeat;}
.youtube-drkol-item .txt-area {flex-grow:1; width:100%; padding:15px 20px; background-color:var(--color-white);}
.youtube-drkol-item .txt-area .hashtag {display:inline-flex; width:100%; margin-bottom:10px; color:var(--font-color-primary); font-size:2rem;}
.youtube-drkol-item .txt-area .hashtag > p:not(:last-child) {margin-right:4px;}
.youtube-drkol-item .txt-area .txt {overflow:hidden; display:-webkit-box; width:100%; font-size:2.4rem; font-weight:200; text-overflow:ellipsis; -webkit-line-clamp:3; -webkit-box-orient:vertical;}
.youtube-drkol-pagination {margin-top:45px; background-color:var(--color-white);}
@media screen and (max-width: 1100px) {
	.youtube-drkol-visual .txt-area .tit {font-size:6.2rem;}
	.youtube-drkol-visual .txt-area .txt {font-size:2.6rem;}
}
@media screen and (max-width: 900px) {
	.youtube-drkol-visual .txt-area {padding:0 30px;}
	.youtube-drkol-visual .txt-area .tit {font-size:5.2rem;}
	.youtube-drkol-visual .txt-area .tit > em {margin-left:15px; font-size:1.7rem;}
	.youtube-drkol-visual .txt-area .txt {font-size:2.3rem; line-height:1.3; letter-spacing:0;}
}
@media screen and (max-width: 767px) {
	.youtube-drkol-wrap .inner {padding-top:100px; padding-bottom:100px;}
	.youtube-drkol-visual {flex-direction:column; justify-content:center; margin-bottom:30px;}
	.youtube-drkol-visual .txt-area {width:100%; margin-right:0; padding:0;}
	.youtube-drkol-visual .txt-area .logo-youtube {width:112px; height:25px; margin-bottom:15px;}
	.youtube-drkol-visual .txt-area .btn-area {margin-top:25px;}
	.youtube-drkol-visual .txt-area .btn-area strong {font-weight:600;}
	.youtube-drkol-visual .video-area {width:100%; margin-left:0; margin-top:50px;}
	.youtube-drkol-slider {padding:0; margin:0;}
	.youtube-drkol-item > a {border:1px solid transparent; transition:border 0.25s ease;}
	.youtube-drkol-item > a:hover {border-color:var(--border-color-secondary);}
	.youtube-drkol-item > a::before {display:none;}
	.youtube-drkol-item .txt-area {padding:10px 15px;}
	.youtube-drkol-item .txt-area .hashtag {margin-bottom:8px; font-size:1.2rem;}
	.youtube-drkol-item .txt-area .txt {overflow:hidden; display:-webkit-box; font-size:1.4rem; line-height:1.3; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
	.youtube-drkol-pagination {margin-top:28px;}
}

/* 강연 */
.classone-talk-wrap {overflow:hidden; height:auto; max-height:800px;}
.classone-talk-wrap .left-area {color:var(--font-color-white); text-align:center;}
.classone-talk-wrap .left-area .txt-area {display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:100%; background:url("/theme/v1/resources/images/main/bg_talk.png") center / cover no-repeat;}
.classone-talk-wrap .left-area .txt-area .txt {margin-top:45px; font-size:2rem; font-weight:200;}
.classone-talk-wrap .left-area .txt-area .txt > strong {font-weight:500;}
.classone-talk-wrap .right-area {transition-delay:0.25s;}
.classone-talk-slider {position:relative; overflow:hidden; width:100%; height:100%;}
.classone-talk-list {position:relative; transition-timing-function:linear!important;}
.classone-talk-item {position:relative; display:flex; flex-direction:row; justify-content:flex-start; align-items:center; overflow:hidden; width:100%; height:50%; background-color:var(--color-white);}
.classone-talk-item::before {content:""; position:absolute; bottom:0; left:0; width:100%; height:1px; background-color:var(--color-gray04);}
.classone-talk-item .img-area {width:45.722%; max-width:390px; height:100%; background:center / cover no-repeat;}
.classone-talk-item .txt-area {position:relative; display:flex; flex-direction:column; justify-content:center; z-index:2; width:calc(100% - 40.626% - 90px); height:100%; padding-left:60px; margin-right:90px;}
.classone-talk-item .txt-area::before {position:absolute; bottom:0; right:0; z-index:-1; height:68px; color:var(--font-color-gray05); font-family:the-seasons,serif; font-size:8rem; font-weight:300; line-height:1; letter-spacing:-2px; white-space:nowrap;} 
.classone-talk-list > div:nth-child(odd) .txt-area::before {content:"Only One";}
.classone-talk-list > div:nth-child(even) .txt-area::before {content:"Class One";} 
.classone-talk-item .txt-area .logo {width:50%; max-width:200px; height:auto; max-height:50px; margin-bottom:15px; line-height:0;}
.classone-talk-item .txt-area .logo > img {height:100%; object-fit:contain; object-position:left bottom;}
.classone-talk-item .txt-area .txt {font-size:2.4rem; font-weight:600;}
.classone-talk-item .txt-area .sub {margin-top:15px; color:var(--font-color-gray01); font-size:1.8rem; font-weight:200;}
@media screen and (max-width: 1540px) {
	.classone-talk-wrap {max-height:600px;}
	.classone-talk-item .txt-area::before {right:unset; left:calc(50% + -50px);}
}
@media screen and (max-width: 1200px) {
	.classone-talk-wrap {max-height:500px;}
	.classone-talk-item .txt-area .txt {font-size:2rem; line-height:1.4;}
	.classone-talk-item .txt-area .sub {margin-top:10px; font-size:1.6rem;}
}
@media screen and (max-width: 1000px) {
	.classone-talk-item .txt-area {width:calc(100% - 40.626% - 30px); padding-left:30px; margin-right:30px;}
}
@media screen and (max-width: 767px) {
	.classone-talk-wrap {max-height:unset;}
	.classone-talk-wrap .left-area .txt-area {padding:96px 0;}
	.classone-talk-wrap .left-area .txt-area .txt {margin-top:20px; font-size:1.2rem;}
	.classone-talk-slider {height:290px;}
	.classone-talk-item .img-area {width:140px; max-width:unset;}
	.classone-talk-item .txt-area {width:calc(100% - 140px); padding-left:20px; margin-right:0;}
	.classone-talk-item .txt-area::before {left:unset; right:0; height:30px; font-size:3.5rem; letter-spacing:0;} 
	.classone-talk-item .txt-area .logo {width:30%; max-width:100px; max-height:unset; margin-bottom:5px;}
	.classone-talk-item .txt-area .txt {font-size:1.6rem;}
	.classone-talk-item .txt-area .sub {margin-top:5px; font-size:1.2rem;}
}