@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');

#wrapper ul {list-style: disc;}

/*------------PC------------*
/* 탑배너 */
.top_banner_section {height: 950px; overflow: hidden; position: relative;}
.top_banner_section .top_banner_title {position: absolute; top: 70%; left: 50%; transform: translate(-50%,-50%); transition: all 3s; opacity: 0;}
.top_banner_section.fade-in .top_banner_title{top:50%; opacity: 1; text-align: center;}
.top_banner_section .top_banner_title span,
.top_banner_section .top_banner_title h4 {font-family: 'Noto Serif KR';}
.top_banner_section .top_banner_title span {font-size: 2rem; text-transform: uppercase}
.top_banner_section .top_banner_title h4 {font-size: 2.5rem; font-weight: 400; margin-top: 20px;}
.top_banner_section .top_banner_title p {font-size: 1.2rem; margin-top: 20px;}

.mouse-scroll {position: absolute; left: 0; right: 0; bottom: 7%; text-align: center; z-index: 5; display: block;}
.mouse-scroll .mouse {position: relative; width: 16px; height: 25px; margin: 0 auto; border: 2px solid #000; border-radius: 2rem;}
.mouse-scroll .mouse::after {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: -0.03rem; margin: auto; background-color: #000; width: 5px; height: 5px; border-radius: 100%; animation: bounce 5s linear infinite;}
.mouse-scroll span img {filter: brightness(0);}
@keyframes bounce {
    0% {
		opacity: 1;
		transform: scale(1) translateY(-2px);
	}

	6% {
		opacity: 1;
		transform: scale(0.5) translateY(5px);
	}

	14% {
		opacity: 0;
		transform: scale(0.2) translateY(40px);
	}

	15%,
	19% {
		opacity: 0;
		transform: scale(0.2) translateY(-2px);
	}

	28%,
	29.99% {
		opacity: 1;
		transform: scale(1) translateY(-2px);
	}

	30% {
		opacity: 1;
		transform: scale(1) translateY(-2px);
	}

	36% {
		opacity: 1;
		transform: scale(0.5) translateY(5px);
	}

	44% {
		opacity: 0;
		transform: scale(0.2) translateY(40px);
	}

	45%,
	49% {
		opacity: 0;
		transform: scale(0.2) translateY(-2px);
	}

	58%,
	59.99% {
		opacity: 1;
		transform: scale(1) translateY(-2px);
	}

	60% {
		opacity: 1;
		transform: scale(1) translateY(-2px);
	}

	66% {
		opacity: 1;
		transform: scale(0.5) translateY(5px);
	}

	74% {
		opacity: 0;
		transform: scale(0.2) translateY(40px);
	}

	75%,
	79% {
		opacity: 0;
		transform: scale(0.2) translateY(-2px);
	}

	88%,
	100% {
		opacity: 1;
		transform: scale(1) translateY(-2px);
	}
}
.mouse-scroll span {display: inline-block; width: 16px;}

/* 인트로 섹션 */
.intro_section {text-align:center; margin-top: 100px; position: relative; padding: 250px 0;}
.intro_section .intro_tit .intro_logo {width:90px; margin: 0 auto; position: absolute; top: 0; left: 49%; transform: translateX(-50%);filter: invert(18%) sepia(66%) saturate(2144%) hue-rotate(206deg) brightness(104%) contrast(101%);}
.intro_section .intro_tit .intro_logo img {width:0; transition:all 2s; opacity:0;}
.intro_section .intro_tit.fade-in .intro_logo img{width:100%; opacity:1;}
.intro_section .intro_tit .intro_txt {position: absolute; top: 160px; left: 50%; width: 480px; transform: translateX(-50%); transition: 2s all 0.4s; opacity: 0;}
.intro_section .intro_tit.fade-in .intro_txt {opacity:1; top: 120px;}

.intro_box {display:flex; justify-content:center; margin:150px 0 0; position: relative;}
.intro_box .intro_desc h3 {display: block; font-family: "Noto Serif KR", serif; font-size: 30px; font-weight: 300; line-height: 1.3; color: #3b3b3b;}
.intro_box .intro_desc p {width: 530px; font-size: 20px; font-weight: 300; font-family: 'Noto Sans KR'; line-height:30px; color:#8c8c8c; margin-bottom: 0; letter-spacing: -1px; word-break: keep-all;}
.intro_box .intro_img {box-shadow: -3px 3px 8px rgb(0 0 0 / 9%);}
.intro_1 .intro_img {margin-left: 50px;}
.intro_1 .intro_desc {margin-right:80px; text-align:right; display: flex; flex-direction: column; justify-content: center; align-items: end; position: relative; width: 737px;}
.intro_1 .intro_desc h3 {transform: translateX(-30px); transition: all 2s ease; opacity: 0;}
.intro_1 .intro_desc p {margin-top: 30px; transform: translateY(30px); transition: all 2s ease; opacity: 0;}
.intro_1 .intro_desc.fade-in h3{transform: translateX(0); opacity: 1;}
.intro_1 .intro_desc.fade-in p{transform: translateY(0); opacity: 1;}
.intro_2 .intro_desc {margin-left:5%; text-align:left; display: flex; flex-direction: column; justify-content: center;  position: relative;}
.intro_2 .intro_desc h3 {transform: translateX(-30px); transition: all 2s ease; opacity: 0;}
.intro_2 .intro_desc p {margin-top: 30px; transform: translateY(30px); transition: all 2s ease; opacity: 0;}
.intro_2 .intro_desc.fade-in h3{transform: translateX(0); opacity: 1;}
.intro_2 .intro_desc.fade-in p{transform: translateY(0); opacity: 1;}
.intro_2 .intro_img {margin-right: 50px;}
.intro_section2 .intro_box{margin: 0;}


/*------의료진소개------*/
#doctor_section {padding: 180px 0; }
#doctor_section .main_tit {text-align: center; transform: translateY(100px); transition: all 2s; opacity: 0;}
#doctor_section .main_tit.fade-in {transform: translateY(0); opacity: 1;}
#doctor_section .main_tit h1 {font-size: 30px; color: #595757;}
#doctor_section .main_tit p {font-size: 18px; padding-top: 10px; line-height: 1.4; color: #595757;}
#doctor_section .doctor_desc {font-family: "Noto Serif KR", serif; text-align: center; margin-top: 100px; color: #595757; font-size: 26px; font-weight: 400; font-style: italic; line-height: 1.5; padding: 10px; transition: all 2s 1s; opacity: 0;}
#doctor_section .doctor_desc.fade-in {opacity: 1;}
#doctor_section .doctor{padding-top:50px; text-align:center;}
#doctor_section .doctor li {display: inline-block; position: relative; width: 400px; box-shadow: 0px 0px 9px rgb(0 0 0 / 7%); overflow: hidden;}
#doctor_section .doctor li:nth-of-type(1) {margin-right: 10%;}
#doctor_section .doctor img {width: 100%;}
#doctor_section .doctor .doctor_name {width: 90%; position: absolute; bottom: 5%; right: -5%; background-color: #12489d9c; padding: 34px 67px; text-align: left;}
#doctor_section .doctor .doctor_name span, #doctor_section .doctor .doctor_name h1 {line-height: 1.2; font-family: 'Cafe24ClassicType-Regular';} 
#doctor_section .doctor .doctor_name span {display: inline-block; font-size: 28px; font-weight: 400; margin-left: 10px; color: #fff;} 
#doctor_section .doctor .doctor_name h1 {display: inline-block; font-family: "Noto Serif KR", serif; font-size: 38px; color: #fff;} 


/*------오시는길 / 의료진약력------*/
#article-doctor {background-color: #f0f1f7; padding: 150px 0 180px;}
#article-doctor .main_tit {text-align: center;}
#article-doctor .main_tit h1 {font-size: 30px; color: #595757;}
#article-doctor .main_tit p {font-size: 18px; padding-top: 10px; line-height: 1.4; color: #595757;}

#article-doctor .doctor_inner {display: flex; justify-content: center; gap: 0; margin: 50px 0;}
#article-doctor .doctor_info {margin: 0 50px; padding: 0 100px; position: relative; width: 500px;}
#article-doctor .doctor_info::after {content: ''; display: block; position: absolute; top: 50%; right: -50px; width: 1px; height: 60%; background-color: #595757; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
#article-doctor .doctor_info:last-child:after {display: none;}
#article-doctor .doctor_info .doctor_img {border: 2px solid #12489d;}
#article-doctor .doctor_info h3 {font-size: 25px; font-weight: 700; background-color: #12489d; border: 1px solid #12489d; color: #fff; padding: 10px; text-align: center;}
#article-doctor .doctor_info ul {padding: 50px 0;}
#article-doctor .doctor_info ul li {font-size: 18px; line-height: 1.2; margin: 25px 0;}

.tab_buttons {display: flex; gap: 0; padding: 20px 0; justify-content: center; background-color: #f0f1f7; -webkit-transition: background-color 300ms; -ms-transition: background-color 300ms; transition: background-color 300ms;}
.tab_button {padding: 10px 16px; border: 1px solid #ddd; background-color: #fff; cursor: pointer; width: 120px;}
.tab_button.on {border-color: #202020; background-color: #202020; color: #fff; font-weight: 600;}
.is_hidden {display: none;}


/* 스크롤배경섹션 */
.scroll_bg_section {display: flex; justify-content: center; position: relative; text-align: center; height: 460px; overflow: hidden;}
.scroll_bg_section .bg_wrap {clip: rect(0, auto, auto, 0); position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.scroll_bg_section .bg_wrap .bg {background: url("../images/sub/scroll_bg.jpg") no-repeat; background-size: cover; position: fixed; display: block; top: 0; left: 0; width: 100%; height: 100vh;}
.scroll_bg_section .scroll_bg_txt {display: flex; flex-direction: column; justify-content: center; width: 90%; transition: all 2s; transform: translateY(100px); opacity: 0;}
.scroll_bg_section.fade-in .scroll_bg_txt {transform: translateY(0); opacity: 1;}
.scroll_bg_section .scroll_bg_txt .txt1 {padding: 35px 0px;}
.scroll_bg_section .scroll_bg_txt .txt1 span {font-family: "Noto Serif KR", serif; color: #fff; font-size: 20px;}
.scroll_bg_section .scroll_bg_txt .txt1 h4 {font-family: "Noto Serif KR", serif; font-weight: 500; color: #fff; font-size: 32px; margin-top: 6px;}
.scroll_bg_section .scroll_bg_txt .txt2 {position: relative; width: 90%; padding: 35px 0px; margin: 0 auto; word-break: keep-all;}
.scroll_bg_section .scroll_bg_txt .txt2 p {width: 900px; margin: 0 auto; color: #fff; font-family: "Noto Sans KR"; font-size: 18px; font-weight: 400; word-break: keep-all; line-height: 24px;}
.scroll_bg_section .scroll_bg_txt .txt2::after {display: block; content: ""; clear: both; width: 100%; height: 1px; background-color: #fff; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);}

#skin .scroll_bg_section {position: relative; text-align: center; height: 200px; z-index: -1; margin-top: 150px;}
#skin .scroll_bg_section::after {display: none;}
#skin .scroll_bg_section .bg_wrap {clip: rect(0, auto, auto, 0); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}
#skin .scroll_bg_section .txt_wrap {position: absolute; top: 70%; left: 50%; transform: translate(-50%, -50%); transition: all 2s; opacity: 0;}
#skin .scroll_bg_section.fade-in .txt_wrap{top: 50%; opacity: 1;}




/* 메인내용 */

.main_list {text-align:center; overflow: hidden;}
.main_list .main_box {display:flex; justify-content:center; padding: 200px 0; position: relative;}
.main_list .main_box .main_img {box-shadow: 3px 3px 8px rgb(0 0 0 / 9%); margin-right: 50px; opacity: 0; transition: all 2s;}
.main_list .main_box .main_img.fade-in {opacity: 1;}
.main_list .main_box .main_img img {height:-webkit-fill-available;}
.main_list .main_box .main_desc {width: 30%; margin-left:80px; text-align:left; display: flex; flex-direction: column; justify-content: center;  position: relative;}
.main_list .main_box .main_desc .desc1 {transform: translateX(200px); transition: all 2s; opacity: 0; padding-bottom: 30px; border-bottom: 1px solid #d3d3d3;}
.main_list .main_box .main_desc .desc2 p {transform: translateX(200px); transition: all 2s; opacity: 0;}
.main_list .main_box .main_desc.fade-in .desc1 {transform: translateX(0); opacity: 1;}
.main_list .main_box .main_desc .desc2 li:nth-child(1) {transition: all 2s 0.2s;}
.main_list .main_box .main_desc .desc2 li:nth-child(2) {transition: all 2s 0.3s;}
.main_list .main_box .main_desc .desc2 li:nth-child(3) {transition: all 2s 0.4s;}
.main_list .main_box .main_desc .desc2 li:nth-child(4) {transition: all 2s 0.5s;}
.main_list .main_box .main_desc .desc2 li:nth-child(5) {transition: all 2s 0.6s;}
.main_list .main_box .main_desc .desc2 li:nth-child(6) {transition: all 2s 0.7s;}
.main_list .main_box .main_desc.fade-in .desc2 li {transform: translateX(0); opacity: 1;}
.main_list .main_box .main_desc .desc2 a {display: block; transform: translateX(200px); opacity: 0; transition: all 2s 1s;}
.main_list .main_box .main_desc.fade-in .desc2 a {transform: translateX(0); opacity: 1;}
.main_list .main_box .main_desc.fade-in .desc2 p {transform: translateX(0); opacity: 1; margin-top: 0; position: relative; z-index: -99;}
.main_list .main_box::after {display: block; content:""; clear:both; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 70%; height: 1px; background-color: #d3d3d3;}
.main_list .main_box:nth-last-child(1)::after {display: none;}
.main_list .main_box .main_desc h3 {display: block; font-family: "Noto Serif KR", serif; font-size: 32px; font-weight: 500; line-height: 38px; color: #12489d;}
.main_list .main_box .main_desc p {width: 500px; word-break: keep-all; font-size: 19px; font-weight: 400; font-family: 'Noto Sans KR'; line-height:30px; color:#050505; margin-top: 30px; margin-bottom: 0; letter-spacing: -1.2px;}
.main_list .main_box .main_desc span {display: block; padding-top: 20px; letter-spacing: -0.5px;}
.main_list .main_box .main_desc > div {margin-top: 20px;}
.main_list .main_box .main_desc > div li {background-color: #12489d; border-radius: 30px; color: #fff; text-align: center; font-size: 17px; font-weight: 300; padding: 5px 0; margin-bottom: 10px; transform: translateX(200px); opacity: 0;}

/* 목주름 */
.main_list .main_box .main_desc .desc1_sub{width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 30px; }
.main_list .main_box .main_desc .desc1_sub p{margin: 0;}
.main_list .main_box .main_desc .desc1_sub .desc1_text{width: 70%;}
.main_list .main_box .main_desc .desc1_sub .desc1_btn{width: 30%; padding: 5px 10px; display: flex; justify-content: space-between; align-items: center; background-color: #12489d; cursor: pointer; transition: 1s; position: relative;}
.main_list .main_box .main_desc .desc1_sub .desc1_btn .desc1_btn_text{width: 80%;}
.main_list .main_box .main_desc .desc1_sub .desc1_btn .desc1_btn_img{width: 5%;}
.main_list .main_box .main_desc .desc1_sub .desc1_btn .desc1_btn_text p{font-size: 16px; color: #fff;}
.main_list .main_box .main_desc .desc1_sub .desc1_program1{position: absolute; right: 0; width: 100%; opacity: 0; filter: drop-shadow(1px 1px 5px rgb(0,0,0,0.2)); transition: 0.5s; transform: scale(1.5);}
.main_list .main_box .main_desc .desc1_sub .desc1_program2{position: absolute; right: 0; width: 100%; opacity: 0; filter: drop-shadow(1px 1px 5px rgb(0,0,0,0.2)); transition: 0.5s; transform: scale(1.5);}
.main_list .main_box .main_desc .desc1_sub .desc1_program3{position: absolute; right: 0; width: 100%; opacity: 0; filter: drop-shadow(1px 1px 5px rgb(0,0,0,0.2)); transition: 0.5s; transform: scale(1.5); }
.main_list .main_box .main_desc .desc1_sub .desc1_btn1:hover .desc1_program1{opacity: 1; transition: 0.5s;}
.main_list .main_box .main_desc .desc1_sub .desc1_btn2:hover .desc1_program2{opacity: 1; transition: 0.5s;}
.main_list .main_box .main_desc .desc1_sub .desc1_btn3:hover .desc1_program3{opacity: 1; transition: 0.5s;}



/* 전후사진섹션 */
.review_section {padding: 160px 0; text-align: center; background-color: #f5f1ea;}
.review_section .review_tit {transform: translateY(-100px); transition: all 2s; opacity: 0;}
.review_section .review_tit.fade-in {transform: translateY(0); opacity: 1;}
.review_section .review_tit span {color: #85705B; font-family: "Noto Serif KR", serif; letter-spacing: 4px;}
.review_section .review_tit h3 {font-family: "Noto Serif KR", serif; font-size: 28px; font-weight: 400; margin-top: 20px; line-height: 1.5; color: #212529;}
.review_section .review_img {width: 800px; margin: 100px auto 0; position: relative; color: #fff;}

.review_section .review_img .hover_area .hover_img {cursor: pointer;}
.review_section .review_img .hover_area .hover_img::after {display: block; content: "+"; clear: both; color: #fff; line-height: 1.3; background-color: #85705B; width: 20px; height: 20px; border-radius: 100%; position: absolute; top: 14px; left: -25px; animation: bounce2 2s ease infinite;}
.review_section .review_img .hover_area .hover_img .img {position: absolute; bottom: 78px; left: 50%; width: 500px; transform: translateX(-50%); transition: all 0.3s; z-index: 9; opacity: 0; visibility: hidden;}
.review_section .review_img .hover_area .hover_img:hover > .img {opacity: 1; visibility: visible;}
.review_section .review_img .hover_area .hover_img span,
.review_section .review_img .hover_area .hover_img p {color: #fff;}

.review_section .review_img1 .hover_img1 ~ .img {position: absolute; top: -54px; left: 24%; width: 500px; transform: translateX(-50%); transition: all 0.3s; z-index: 9; opacity: 0; visibility: hidden;}
.review_section .review_img1 .hover_img2 ~ .img {position: absolute; top: -185px; left: 30%; width: 500px; transform: translateX(-50%); transition: all 0.3s; z-index: 9; opacity: 0; visibility: hidden;}
.review_section .review_img1 .hover_img1:hover ~ .img,
.review_section .review_img1 .hover_img2:hover ~ .img {opacity: 1; visibility: visible;}

.review_section .review_img > p {margin-top: 50px; cursor: pointer;}
.review_section .review_img > p a {color: #111;}
.review_section .review_img > p::before {display: inline-block; content: "+"; clear: both; color: #fff; line-height: 1.3; background-color: #85705B; width: 20px; height: 20px; border-radius: 100%; animation: bounce2 2s ease infinite; margin-right: 8px;}
.review_section .review_img1 .hover_img1 {position: absolute; top: 178px; left: 175px;}
.review_section .review_img1 .hover_img2 {position: absolute; top: 36px; left: 220px;}
@keyframes bounce2 {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-15px);
    }
    60% {
        transform: translateY(-10px);
    }
}


/* 게시판-공통 */
#container_title {display: none;}




/* 디자인리프팅 탑배너 */
#thermage .top_banner .top_banner_wrap .bg {background: url("../images/sub/thermage/thermage_topbanner.jpg") no-repeat; background-position: center; background-size: cover;}
#ultherapy .top_banner .top_banner_wrap .bg {background: url("../images/sub/ultherapy/ultherapy_topbanner.jpg") no-repeat;background-position: center; background-size: cover;}
#sofwave .top_banner .top_banner_wrap .bg {background: url("../images/sub/sofwave/sofwave_topbanner.jpg") no-repeat;background-position: center; background-size: cover;}
#xerf .top_banner .top_banner_wrap .bg {background: url("../images/sub/xerf/xerf_topbanner.jpg") no-repeat;background-position: center; background-size: cover;}
#volnewmer .top_banner .top_banner_wrap .bg {background: url("../images/sub/volnewmer/volnewmer_topbanner.jpg") no-repeat;background-position: center; background-size: cover;}
#shurink .top_banner .top_banner_wrap .bg {background: url("../images/sub/shurink/shurink_topbanner.jpg") no-repeat;background-position: center; background-size: cover;}
#inmode .top_banner .top_banner_wrap .bg {background: url("../images/sub/inmode/inmode_topbanner.jpg") no-repeat;background-position: center; background-size: cover;}
.lifting .top_banner {display: flex; justify-content: center; position: relative; text-align: center; height: 950px; overflow: hidden;}
.lifting .top_banner .top_banner_wrap {clip: rect(0, auto, auto, 0); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}
.lifting .top_banner .top_banner_wrap .bg {position: fixed; display: block; top: 0; left: 0; width: 100%; height: 100vh;transform: scale(1.2);transition: all 4s ease-out;}
.lifting .top_banner.fade-in .top_banner_wrap .bg {transform: scale(1);}
.lifting .top_banner .top_banner_title {position: absolute; top: 72%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; cursor: default;}
.lifting .top_banner .top_banner_title span {font-family:'BelgianoSerif', serif; font-size: 78px; display: block; color: #4b4b4b; text-transform: initial;}
.lifting .top_banner .top_banner_title p {font-family: 'Noto Serif KR'; font-size: 25px; line-height: 28px; color: #4b4b4b;}

/* 디자인리프팅 인트로 */
.lifting .intro_section {margin-top: 0;}
.lifting .intro_box {margin: 0;}
.lifting .intro_box .intro_video {margin: 0; width: 45vw; height: 25.32vw;}
.lifting .intro_box .intro_video iframe {width: 100%; height: 100%;}
#sofwave.lifting .intro_box .intro_video {height: 23.8vw;}

/* 디자인리프팅 시술정보 */
.lifting .procedure_section {background-color: #f7f7f7;}
.lifting .procedure_section .procedure_box {max-width: 1200px; width: 100%; margin: 0px auto; padding: 120px 0px;display: flex; align-items: center; justify-content: center; gap: 40px; word-break: keep-all;}
.lifting .procedure_section .procedure_box .procedure_tit {max-width: 320px; width: 100%; text-align: left; margin-left: 20px;}
.lifting .procedure_section .procedure_box .procedure_tit h2 {font-family: 'Noto Serif KR'; display: inline-block; font-size: 20px;line-height: 28px; font-weight: 700; color: #12489d;}
.lifting .procedure_section .procedure_box .procedure_tit span {font-family:'BelgianoSerif', serif; display: inline-block; font-size: 40px; line-height: 48px; font-weight: 400; margin-top: 14px;}
.lifting .procedure_section .procedure_box .procedure_desc {width: 100%;}
.lifting .procedure_section .procedure_box .procedure_desc table {width: 100%;}
.lifting .procedure_section .procedure_box .procedure_desc table tr {display: flex; gap: 40px;padding: 20px; border-bottom: 1px solid #ddd;} 
.lifting .procedure_section .procedure_box .procedure_desc table th {font-family: 'Noto Serif KR'; font-size: 22px; color: #12489d;}
.lifting .procedure_section .procedure_box .procedure_desc table td {font-size: 22px;}

/* 디자인리프팅 스크롤배경 */
#thermage .scroll_bg_section .bg_wrap .bg {background: url(../images/sub/thermage/scroll_bg.jpg) no-repeat;background-position: center; background-size: cover;}
#ultherapy .scroll_bg_section .bg_wrap .bg {background: url(../images/sub/ultherapy/scroll_bg.jpg) no-repeat;background-position: center; background-size: cover;}
#sofwave .scroll_bg_section .bg_wrap .bg {background: url(../images/sub/sofwave/scroll_bg.jpg) no-repeat;background-position: center; background-size: cover;}
#xerf .scroll_bg_section .bg_wrap .bg {background: url(../images/sub/xerf/scroll_bg.jpg) no-repeat;background-position: center; background-size: cover;}
#volnewmer .scroll_bg_section .bg_wrap .bg {background: url(../images/sub/volnewmer/scroll_bg.jpg) no-repeat;background-position: center; background-size: cover;}
#shurink .scroll_bg_section .bg_wrap .bg {background: url(../images/sub/shurink/scroll_bg.jpg) no-repeat;background-position: center; background-size: cover;}
#inmode .scroll_bg_section .bg_wrap .bg {background: url(../images/sub/inmode/scroll_bg.jpg) no-repeat;background-position: center; background-size: cover;}
.lifting .scroll_bg_section {flex-direction: column;height: auto; padding: 100px 0;}
.lifting .scroll_bg_section .scroll_bg_tit {color: #fff; margin-top: 200px;}
.lifting .scroll_bg_section .scroll_bg_tit h4 {font-family:'BelgianoSerif', serif; font-size: 86px;}
.lifting .scroll_bg_section .scroll_bg_tit span {display: inline-block; font-size: 25px; margin-top: 25px;}
.lifting .scroll_bg_section .threecut_list {margin-top: 100px;}
.lifting .scroll_bg_section .threecut_list ul {display: grid; grid-template-columns: 1fr 1fr; gap: 50px 0; max-width: 1200px; margin: 0 auto; list-style: none !important;}
.lifting .scroll_bg_section .threecut_list ul li {opacity: 0; transition: all 2s ease;}
.lifting .scroll_bg_section .threecut_list figure {background: #fff;}
.lifting .scroll_bg_section .threecut_list .img_box img {width: 100%; display: block;}
/* ===== 위치 배치 ===== */
/* 1번 */
.lifting .scroll_bg_section .threecut_list li:nth-child(1) {grid-column: 1;grid-row: 1;transform: translate(-80px, 80px);}
/* 2번 */
.lifting .scroll_bg_section .threecut_list li:nth-child(2) {grid-column: 2; grid-row: 1; transform: translate(80px, 430px);}
/* 3번 */
.lifting .scroll_bg_section .threecut_list li:nth-child(3) {grid-column: 1; grid-row: 2; transform: translate(-80px, 80px);}
/* fade-in */
.lifting .scroll_bg_section .threecut_list li.fade-in {opacity: 1; transform: translate(0, 0);}
.lifting .scroll_bg_section .threecut_list li:nth-child(2).fade-in {opacity: 1; transform: translate(0, 350px);}

.lifting .scroll_bg_section .threecut_list li figcaption {background-color: #fff; padding: 30px; text-align: left;}
.lifting .scroll_bg_section .threecut_list li figcaption h4 {font-family: 'Noto Serif KR'; font-size: 23px; font-weight: 600; color: #12489d;}
.lifting .scroll_bg_section .threecut_list li figcaption p {font-family: 'Pretendard', serif; font-size:18px; line-height: 1.4; margin-top: 20px; word-break: keep-all;}


/* 디자인리프팅 시술과정 */
.lifting .step_section .step_box {max-width: 1200px; width: 100%; margin: 0px auto; padding: 120px 0px; text-align: center;}
.lifting .step_section .step_box .step_tit h2 {font-family:'BelgianoSerif', serif; font-size: 40px;}
.lifting .step_section .step_box .step_list li {list-style: none; display: inline-block; width: 140px; height: 110px; vertical-align: top; margin-top: 50px; padding: 20px; border-top: 1px solid #12489d;margin-right: 50px; position: relative;}
.lifting .step_section .step_box .step_list li h3 {font-family: "Pretendard", serif; font-size: 24px; font-weight: 600; color: #12489d;}
.lifting .step_section .step_box .step_list li span {display: inline-block; word-break: keep-all; font-size: 17px; margin-top: 12px;}
.lifting .step_section .step_box .step_list li::after {display: block; content:""; clear: both; color: #ddd; width: 13px; height: 13px; border-top: 2px solid; border-right: 2px solid; transform: rotate(45deg); position: absolute; top: 58px; right: -33px;}
.lifting .step_section .step_box .step_list li:nth-last-child(1):after {display: none;}
/* fade-in */
.lifting .step_section .step_box .step_list li:nth-child(1) {transition: all 1s 0.2s;}
.lifting .step_section .step_box .step_list li:nth-child(2) {transition: all 1s 0.4s;}
.lifting .step_section .step_box .step_list li:nth-child(3) {transition: all 1s 0.6s;}
.lifting .step_section .step_box .step_list li:nth-child(4) {transition: all 1s 0.8s;}
.lifting .step_section .step_box .step_list li:nth-child(5) {transition: all 1s 1s;}
.lifting .step_section .step_box .step_list li:nth-child(6) {transition: all 1s 1.2s;}
.lifting .step_section .step_box .step_list li {transform: translateY(100px); opacity: 0;}
.lifting .step_section .step_box .step_list.fade-in li {transform: translateY(0); opacity: 1;}

/* 디자인리프팅 시술정보 */
.lifting .target_section {background-color: #f7f7f7;}
.lifting .target_section .target_box {max-width: 1200px; width: 100%; margin: 0px auto; padding: 120px 0px; display: flex; align-items: center; justify-content: center; gap: 80px; word-break: keep-all;}
.lifting .target_section .target_box .target_tit {text-align: center;margin-left: 20px;}
.lifting .target_section .target_box .target_tit span {display: inline-block; font-family:'BelgianoSerif', serif; font-size: 22px; font-weight: 600; color: #12489d;}
.lifting .target_section .target_box .target_tit h2 {font-family:'BelgianoSerif', serif; font-size: 40px;}
.lifting .target_section .target_box .target_list {width: 100%; max-width: 570px; padding: 50px; background-color: #fff; border-radius: 30px; transition: all 2s 0.4s; text-align: left;}
.lifting .target_section .target_box .target_list li {list-style: none; color: #444; margin-top: 30px; padding-left: 46px; position: relative;}
.lifting .target_section .target_box .target_list li:nth-child(1) {margin-top: 0;}
.lifting .target_section .target_box .target_list li::before {display: block; content: ""; clear: both; width: 27px; height: 27px; border: 2px solid #12489d; border-radius: 50%; position: absolute; top: 0; left: 0;}
.lifting .target_section .target_box .target_list li::after {display: block; content: ""; clear: both; width: 14px; height: 9px; border-top: 2px solid #12489d; border-right: 2px solid #12489d; transform: rotate(133deg); position: absolute; top: 7px; left: 6px;}

/* 디자인리프팅 주의사항 */
.lifting .caution_section .caution_box {max-width: 1200px; width: 100%; margin: 0px auto; padding: 120px 0px; display: flex; align-items: center; justify-content: center; gap: 60px; word-break: keep-all;}
.lifting .caution_section .caution_box .caution_tit {width: 100%;max-width: 21vw; min-width: 200px; margin-left: 20px;}
.lifting .caution_section .caution_box .caution_tit span {display: inline-block; font-family:'BelgianoSerif', serif; font-size: 22px; font-weight: 600; color: #12489d;}
.lifting .caution_section .caution_box .caution_tit h2 {font-family:'BelgianoSerif', serif; font-size: 40px;}
.lifting .caution_section .caution_box .caution_list {width: 100%; border-radius: 30px; transition: all 2s 0.4s;}
.lifting .caution_section .caution_box .caution_list li {list-style: none; color: #444; margin-top: 10px; padding: 20px; padding-left: 50px; position: relative; background-color: #f7f7f7; border-radius: 8px;}
.lifting .caution_section .caution_box .caution_list li:nth-child(1) {margin-top: 0;}
.lifting .caution_section .caution_box .caution_list li::after {display: block; content: ""; clear: both; width: 14px; height: 9px; border-top: 2px solid #12489d; border-right: 2px solid #12489d; transform: rotate(133deg); position: absolute; top: 26px; left: 18px;}

/* 디자인리프팅 FAQ */
.lifting .faq_section {background-color: #f7f7f7;}
.lifting .faq_section .faq_box {max-width: 1200px; width: 100%; margin: 0px auto; padding: 120px 0px; display: flex; align-items: center; justify-content: center; gap: 60px; word-break: keep-all;}
.lifting .faq_section .faq_box .faq_tit {text-align: center; max-width: 365px; min-width: 257px; margin-left: 20px;}
.lifting .faq_section .faq_box .faq_tit span {display: inline-block; font-family:'BelgianoSerif', serif; font-size: 22px; font-weight: 600; color: #12489d;}
.lifting .faq_section .faq_box .faq_tit h2 {font-family:'BelgianoSerif', serif; font-size: 40px;}
.lifting .faq_section .faq_box .faq_list {width: 100%; max-width: 800px; border-radius: 30px; transition: all 2s 0.4s;}
.lifting .faq_section .faq_box .faq_list li {list-style: none; color: #444; margin-top: 10px; padding: 20px; padding-left: 50px; position: relative; background-color: #f7f7f7; border-radius: 8px;}
.lifting .faq_section .faq_box .faq_list li:nth-child(1) {margin-top: 0;}
.lifting .faq_section .faq_box .faq_list li::after {display: block; content: ""; clear: both; width: 14px; height: 9px; border-top: 2px solid #12489d; border-right: 2px solid #12489d; transform: rotate(133deg); position: absolute; top: 26px; left: 18px;}
.lifting .faq_section .faq_box .faq_list dl {font-family: 'Noto Sans KR'; width: 100%; margin-bottom: 1rem; border: 1px solid #000; border-radius: 10px; background: #fff; transition: all 0.3s ease-in-out;}
.lifting .faq_section .faq_box .faq_list dl:hover {box-shadow: 1px 1px 9px 5px rgba(0, 0, 0, 0.055);}
.lifting .faq_section .faq_box .faq_list dl > dt {width: 100%; height: 68px; display: flex; align-items: center; justify-content: space-between; padding-left: 30px; position: relative; font-size: 18px; font-weight: 500; cursor: pointer;}
.lifting .faq_section .faq_box .faq_list dl > dt::after {display: block; content: ""; clear: both; color: #12489d; width: 13px; height: 13px; border-top: 2px solid; border-right: 2px solid; transform: rotate(135deg); position: absolute; top: 25px; right: 27px;transition: all 0.3s ease;}
.lifting .faq_section .faq_box .faq_list dl > dd {width: 100%; padding: 0px 55px; text-align: left; word-break: keep-all;max-height: 0; overflow: hidden; opacity: 0; transition: all 0.4s ease-in-out; display: block;}
.lifting .faq_section .faq_box .faq_list dl.on > dd {max-height: 500px; padding: 10px 55px 50px 55px; opacity: 1; margin-top: 10px;}
.lifting .faq_section .faq_box .faq_list dl > dt::after {transition: transform 0.4s ease;}
.lifting .faq_section .faq_box .faq_list dl.on > dt::after {transform: rotate(-45deg);}


/*------------태블릿------------*/
@media all and (max-width: 1024px){

	.top_banner_section {height: 500px;}
	.top_banner_section .top_banner_bg img {transform: translateX(-30%); width: 245%;}
	.top_banner_section.fade-in .top_banner_title {width: 100%;}


	.intro_section {margin-top: 60px; padding-bottom: 0;}
	.intro_section .intro_tit .intro_logo {width: 50px;}
	.intro_section .intro_tit.fade-in .intro_txt {top: 100px;}

	.sub_title_img {height: 370px;}
	.intro_box {margin: 0;}
    .intro_1, .intro_3 {flex-direction: column-reverse;}
    .intro_2 {flex-direction: column;}
	.intro_1 .intro_desc {align-items: initial;}
    .intro_box .intro_img {width: 95%; margin: 0 auto;}
    .intro_box .intro_desc {text-align: left; margin: 50px auto; width: 90%;}
    .intro_box .intro_desc h3 {letter-spacing: -1px;}
    .intro_box .intro_desc.fade-in h3 {left: 0; right: initial;}
    .intro_box .intro_desc p {width: auto;}


	/* 공지사항 페이지 */
	#bo_list {width: auto!important;}

	.scroll_bg_section {margin-top: 50px;}
	.scroll_bg_section .scroll_bg_txt .txt2 {width: 100%;}
    .scroll_bg_section .scroll_bg_txt .txt2 p {width: 100%;}
	#skin .scroll_bg_section {margin-top: 60px; }

	.main_list .main_box {flex-direction: column; padding: 60px 0;}
    .main_list .main_box .main_img {width: 90%; margin: 0 auto;}
    .main_list .main_box .main_desc {width: 90%; margin: 30px auto 0;}
	.main_list .main_box .main_desc h3 {font-size: 26px;}
    .main_list .main_box .main_desc p {width: auto; font-size: 16px; letter-spacing: -2px;}
    .main_list .main_box .main_desc > div li {font-size: 15px; letter-spacing: -2px;}
	.main_list .main_box .main_desc span {font-size: 13px;}
    .main_list .main_box::after {width: 80%; bottom: 10px;}
	.main_list .main_box .main_img img {height: initial;}

	/* 디자인리프팅 */
	.lifting .top_banner {height: 800px;}
	.lifting .top_banner .top_banner_wrap .bg {height: 800px;}
	.lifting .intro_section {padding: 100px 0;}
	.lifting .intro_box .intro_video {width: 100%; height: 56.26vw;}
	#sofwave.lifting .intro_box .intro_video {height: 52.8vw;}
	.lifting .scroll_bg_section .scroll_bg_tit {margin-top: 0;}
	.lifting .scroll_bg_section .scroll_bg_tit h4 {font-size: 66px;}


	.lifting .step_section .step_box .step_list {margin-top: 0;}
	.lifting .step_section .step_box .step_list li {margin-top: 50px;}

	.lifting .target_section .target_box {gap: 20px;}
	.lifting .caution_section .caution_box {gap: 20px;}
	.lifting .faq_section .faq_box {gap: 20px;}

}


/*------ 모바일 ------*/
@media all and (max-width: 767px) {
	.top_banner_section .top_banner_title span {font-size: 20px;}
	.top_banner_section .top_banner_title h4 {font-size: 26px;}
	.top_banner_section .top_banner_title p {font-size: 16px; line-height: 23px;}

	.intro_section .intro_tit .intro_txt {width: 90%;}
	.intro_box .intro_desc h3 {font-size: 24px;}
	.intro_box .intro_desc p {font-size: 16px;}

	.scroll_bg_section .scroll_bg_txt .txt1 {padding: 25px 0px;}
    .scroll_bg_section .scroll_bg_txt .txt1 span {font-size: 16px;}
    .scroll_bg_section .scroll_bg_txt .txt1 h4 {font-size: 26px;}
	.scroll_bg_section .scroll_bg_txt .txt2 {padding: 25px 0px;}
    .scroll_bg_section .scroll_bg_txt .txt2 p {font-size: 15px; letter-spacing: -2px;}

	.lifting .top_banner {height: 600px;}
	.lifting .top_banner .top_banner_wrap .bg {height: 600px;}
	.lifting .top_banner .top_banner_title span {font-size: 50px;}
	.lifting .top_banner .top_banner_title p {font-size: 20px;}
	.lifting .intro_section {padding: 60px 0;}
	.lifting .procedure_section .procedure_box {padding: 60px 0; flex-direction: column;}
	.lifting .procedure_section .procedure_box .procedure_tit {margin: 0 auto; text-align: center;}
	.lifting .procedure_section .procedure_box .procedure_tit h2,
	.lifting .scroll_bg_section .scroll_bg_tit span,
	.lifting .target_section .target_box .target_tit span,
	.lifting .caution_section .caution_box .caution_tit span,
	.lifting .faq_section .faq_box .faq_tit span
	 {font-size: 18px;}
	.lifting .procedure_section .procedure_box .procedure_tit span,
	.lifting .scroll_bg_section .scroll_bg_tit h4,
	.lifting .step_section .step_box .step_tit h2,
	.lifting .target_section .target_box .target_tit h2,
	.lifting .caution_section .caution_box .caution_tit h2,
	.lifting .faq_section .faq_box .faq_tit h2
	 {font-size: 32px;}
	.lifting .procedure_section .procedure_box .procedure_desc table th, .lifting .procedure_section .procedure_box .procedure_desc table td {font-size: 18px;}

	.lifting .scroll_bg_section .scroll_bg_tit span {margin-top: 6px;}
	.lifting .scroll_bg_section .threecut_list {margin-top: 50px;}
	.lifting .scroll_bg_section .threecut_list ul {display: block;}
    .lifting .scroll_bg_section .threecut_list li:nth-child(1),
	.lifting .scroll_bg_section .threecut_list li:nth-child(2),
	.lifting .scroll_bg_section .threecut_list li:nth-child(3) {margin-bottom: 30px; transform: translate(0, 60px);}
	.lifting .scroll_bg_section .threecut_list li.fade-in {transform: translate(0, 0);}
	.lifting .scroll_bg_section .threecut_list li.fade-in:nth-child(2) {transform: translate(0, 0);}
	.lifting .scroll_bg_section .threecut_list li figure {margin: 10px;}
	.lifting .scroll_bg_section .threecut_list li figcaption {padding: 20px;}
	.lifting .scroll_bg_section .threecut_list li figcaption h4 {font-size: 20px;}
	.lifting .scroll_bg_section .threecut_list li figcaption p {font-size: 16px;}
	
	.lifting .step_section .step_box {padding: 60px 0;}
	.lifting .step_section .step_box .step_list li {width: 94px; height: auto; padding: 10px; margin: 35px 20px 0 0;}
	.lifting .step_section .step_box .step_list li h3 {font-size: 18px;}
	.lifting .step_section .step_box .step_list li span {font-size: 14px;}
	.lifting .step_section .step_box .step_list li::after {width: 10px; height: 10px; top: 36px; right: -15px;}
	
	.lifting .target_section .target_box {padding: 60px 0; flex-direction: column;}
	.lifting .target_section .target_box .target_list {padding: 25px;}
	.lifting .target_section .target_box .target_list li {margin-top: 22px; padding-left: 40px;}
	.lifting .target_section .target_box .target_list li::before {width: 20px; height: 20px; top: 3px; left: 3px;}
	.lifting .target_section .target_box .target_list li::after {width: 12px; height: 7px; top: 9px; left: 7px;}

	.lifting .caution_section .caution_box {padding: 60px 0; flex-direction: column;}
	.lifting .caution_section .caution_box .caution_tit {margin-left: 0; text-align: center;}
	.lifting .caution_section .caution_box .caution_list li {padding: 15px; padding-left: 45px;}
	.lifting .caution_section .caution_box .caution_list li::after {top: 20px;}

	.lifting .faq_section .faq_box {padding: 60px 0; flex-direction: column;}
	.lifting .faq_section .faq_box .faq_tit {margin-left: 0;}
	.lifting .faq_section .faq_box .faq_list dl > dt {font-size: 16px; padding-left: 15px;padding-right: 36px;}
	.lifting .faq_section .faq_box .faq_list dl > dt::after {right: 15px;}
	.lifting .faq_section .faq_box .faq_list dl.on > dd {padding: 0 30px 30px 30px;}
}