@charset "utf-8"; /*------메인비쥬얼------*/ #section1 {position:relative; height: 1000px; overflow: hidden;} #section1 .mainvisual_img {background: url("../images/main/mainvisual.jpg") no-repeat; background-size: cover; background-position:bottom; height:100%; transform: scale(1.2);transition: all 4s ease-out; } #section1 .mainvisual_img.fade-in {transform: scale(1);} #section1 .mainvisual_txt {position: absolute; top: 47%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; cursor: default;} #section1 .mainvisual_txt .txt1 span {font-family:'BelgianoSerif', serif; font-size: 78px; display: block; margin-top: 16px; color: #12489d;} #section1 .mainvisual_txt .txt1 p {font-family: 'Noto Serif KR'; font-size: 25px; line-height: 28px; color: #12489d;} #section1 .mainvisual_txt .txt1 p strong {font-family: 'Noto Serif KR'; font-size: 38px; line-height: 28px; color: #12489d; vertical-align: baseline;} #section1 .mouse-scroll {position: absolute; left: 0; right: 0; bottom: 12%; text-align: center; z-index: 5; display: block;} #section1 .mouse-scroll .mouse {position: relative; width: 16px; height: 25px; margin: 0 auto; border: 2px solid #232323; border-radius: 2rem;} #section1 .mouse-scroll .mouse::after {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: -0.03rem; margin: auto; background-color: #232323; width: 5px; height: 5px; border-radius: 100%; animation: bounce 5s linear infinite;} #section1 .mouse-scroll .down-arrow-icon {display: block; width: 16px; margin: 0 auto; filter: brightness(0) saturate(100%) invert(11%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(92%) contrast(92%);} #section1 .mouse-scroll .down-arrow-icon > img {width: 100%;} /* 공용 fade-in */ .fade_motion.fade_y {opacity: 0; transform: translateY(100px); transition: all 2s;} .fade_motion.fade_y.fade-in {opacity: 1; transform: translateY(0);} .section_tit.fade_motion .fade_s {letter-spacing: -16px; transition: all 2s;} .section_tit.fade_motion.fade-in .fade_s {letter-spacing: 0;} .section_tit.fade_motion .fade_y {opacity: 0; transform: translateY(100px); transition: all 2s;} .section_tit.fade_motion.fade-in .fade_y {opacity: 1; transform: translateY(0);} .signature_list.fade_motion li {opacity: 0; transform: translateY(100px);} .signature_list.fade_motion li:nth-child(1) {transition: all 2s;} .signature_list.fade_motion li:nth-child(2) {transition: all 2s .3s;} .signature_list.fade_motion li:nth-child(3) {transition: all 2s .6s;} .signature_list.fade_motion li:nth-child(4) {transition: all 2s .9s;} .signature_list.fade_motion.fade-in li {opacity: 1; transform: translateY(0);} .doctor_intro.fade_motion .doctor_left {opacity: 0; transform: translateX(-100px); transition: all 2s;} .doctor_intro.fade_motion .doctor_right {opacity: 0; transform: translateX(100px); transition: all 2s;} .doctor_intro.fade_motion.fade-in .doctor_left, .doctor_intro.fade_motion.fade-in .doctor_right {opacity: 1; transform: translateX(0);} /* 공용 섹션 타이틀 */ .section {padding: 100px 0;} .section .section_tit {text-align: center; padding-bottom: 30px; overflow: hidden;} .section .section_tit.fade-in {text-align: center; padding-bottom: 30px; overflow: hidden;} .section .section_tit h1 {font-family:'BelgianoSerif', serif; font-size: 80px; font-weight: 400; color: #000;} .section .section_tit p {font-family: 'Pretendard', serif; color: #000; font-size: 18px; margin-top: 20px;} /* 대표시술 */ #section2 .signature_list {width: 80%; margin: 0 auto; text-align: center; margin-top: 40px; font-size: 0px;} #section2 .signature_list li {display: inline-block; width: 23%; position: relative; margin-left: 1.4%; background-size: contain; overflow: hidden;} #section2 .signature_list li:nth-child(1) {margin-left: 0;} #section2 .signature_list li .signature_img {position: relative; width: 100%; transition: all 1s} #section2 .signature_list li .signature_img::after {display: block; clear: both; content: ""; position:absolute; top: 0; width: 100%; height: 100%; background: linear-gradient(to top, #00000047 20%, transparent 50%);} #section2 .signature_list li .signature_img:hover {transform: scale(1.05);} #section2 .signature_list li .signature_link {position: absolute; bottom: -1px; left: 0; text-align: left; padding: 27px;} #section2 .signature_list li .signature_link h4 {font-family: 'Noto Serif KR'; font-size: 22px; font-weight: 700; color: #12489d;} #section2 .signature_list li .signature_link p {font-family: 'Pretendard', serif; font-size: 20px; line-height: 1.4; margin-top:10px; color: #ffffff;} /* 연중무휴(컬러박스) */ #section3 {background: url("../images/main/color_box_bg.jpg") no-repeat; background-size: cover;} #section3 .color_box .color_txt {text-align: center; color: #fff;} #section3 .color_box .color_txt p {font-family: 'Noto Serif KR';font-size: 26px; margin-top: 30px;} #section3 .color_box .color_txt h1 {font-family:'BelgianoSerif', serif; font-size: 80px; margin-top: 20px;} #section3 .color_box .color_txt span {font-family: 'Pretendard', serif; border-bottom: 2px solid; font-size: 24px;display: inline-block; margin-top: 50px;} /* 3컷 */ #section4 {display: flex; justify-content: center; position: relative; text-align: center; height: 1460px; overflow: hidden;} #section4 .bg_wrap {clip: rect(0, auto, auto, 0); position: absolute; top: 0; left: 0; width: 100%; height: 100%;} #section4 .bg_wrap .bg {background: url("../images/main/threecut_bg.jpg") no-repeat; background-size: cover; padding: 150px 0 100px; overflow: hidden;position: fixed; display: block; top: 0; left: 0; width: 100%; height: 100vh;} #section4 .threecut_list {width: 980px; margin: 0 auto; height: 1220px;} #section4 .threecut_list li {display: inline-block; width: 450px;} #section4 .threecut_list li:nth-child(1) {transform: translate(-30%, 30%); transition: all 2s ease; opacity: 0;} #section4 .threecut_list li:nth-child(2) {transform: translate(47%, 90%); transition: all 2s ease; opacity: 0;} #section4 .threecut_list li:nth-child(3) {transform: translate(-100%, 35%); transition: all 2s ease; opacity: 0;} #section4 .threecut_list li figure {margin: 0;} #section4 .threecut_list li figcaption {background-color: #fff; padding: 30px; text-align: left;} #section4 .threecut_list li figcaption h4 {font-family: 'Noto Serif KR'; font-size: 23px; font-weight: 600; color: #12489d;} #section4 .threecut_list li figcaption p {font-family: 'Pretendard', serif; font-size:18px; line-height: 1.4; margin-top: 20px;} /* fade-in */ #section4 .threecut_list li.fade-in:nth-child(1) {transform: translate(0,0); opacity: 1;} #section4 .threecut_list li.fade-in:nth-child(2) {transform: translate(17%, 60%); opacity: 1;} #section4 .threecut_list li.fade-in:nth-child(3) {transform: translate(-51%, 15%); opacity: 1;} /*------의료진소개------*/ #section4 .doctor_intro {display: flex; justify-content: center; padding-top:60px;} #section4 .doctor_intro .doctor_left {margin-right: 4vw;} #section4 .doctor_intro .doctor_left .txt1 {margin-top: 30px;} #section4 .doctor_intro .doctor_left .txt1 span {font-size: 22px; font-family: 'Noto Serif KR'; font-weight: 500; color: #12489d;} #section4 .doctor_intro .doctor_left .txt1 h2 {font-size: 38px; font-family: 'Noto Serif KR'; margin-top: 30px;} #section4 .doctor_intro .doctor_left .txt1 p {margin-top: 30px; line-height: 22px; } #section4 .doctor_intro .doctor_left .txt2 {margin-top: 50px;} #section4 .doctor_intro .doctor_left .txt2 h5 {font-size: 19px;} #section4 .doctor_intro .doctor_left .txt2 p {margin-top: 30px; line-height: 25px;} /*------오시는길------*/ #section5 {background-color: #f7f7f7; padding: 150px 0 180px;} #section5 .main_tit {text-align: center;} #section5 .main_tit h1 {font-size: 30px; color: #595757;} #section5 .main_tit p {font-size: 18px; padding-top: 10px; line-height: 1.4; color: #595757;} #section5 .location_inner {text-align: center; padding-top: 120px;} #section5 .location_inner > div {display: inline-block; padding: 0 5vw; vertical-align: top;} #section5 .location_inner .location_info {position: relative;} #section5 .location_inner .location_info::after {display: block; content: ""; clear: both; width: 1px; height: 370px; background-color: #5957572e; position: absolute; top: 20%; right: 0;} #section5 .location_inner .location_info dt, #section5 .location_inner .location_map h3 {font-family: 'Noto Serif KR'; font-weight: 500; text-align: center; font-size: 32px; color: #595757;} #section5 .location_inner .location_info dd {padding-top: 50px;} #section5 .location_inner .location_info dd table tr {height: 76px; position: relative;} #section5 .location_inner .location_info dd table tr::after {display:block; content: ""; clear: both; width: 500px; height: 1px; background-color: #595757; position: absolute; bottom: 0; left: 0;} #section5 .location_inner .location_info dd table tr:nth-last-child(1)::after {display: none;} #section5 .location_inner .location_info dd table th, #section5 .location_inner .location_info dd table td, #section5 .location_inner .location_info dd p {text-align: center; font-size: 19px; color: #595757;} #section5 .location_inner .location_info dd table th {width: 200px; font-weight:500;} #section5 .location_inner .location_info dd table td {width: 300px; letter-spacing: 2px;} #section5 .location_inner .location_info dd table tr:nth-last-child(1) td {letter-spacing: 5.5px;} #section5 .location_inner .location_info dd p {background-color: #12489d; color: #fff; margin-top: 10px; padding: 14px;} #section5 .location_inner .location_map > div {margin-top: 40px;} #daumRoughmapContainer1718342273891 {height: 100%;} #section5 .root_daum_roughmap .wrap_controllers, #section5 .root_daum_roughmap .cont {display: none;} @media all and (max-width: 1260px) { #section5 {padding: 60px 0; height: auto;} #section5 .location_inner {padding-top: 20px; display: flex; flex-direction: column-reverse;} #section5 .location_inner .location_map h3 {display: none;} #section5 .location_inner > div {padding: 0; width: 90%; margin: 0 auto;} #section5 .location_inner .location_map > div {width: 100%; height: auto; margin-top: 0;} #section5 .root_daum_roughmap_landing {width: 100% !important;} #section5 .location_inner .location_info {margin-top: 50px;} #section5 .location_inner .location_info dt, #section5 .location_inner .location_map h3 {font-size: 25px; font-weight: 500;} #section5 .location_inner .location_info dd {padding-top: 30px;} #section5 .location_inner .location_info dd table {width: 100%;} #section5 .location_inner .location_info dd table tr {height: 50px;} #section5 .location_inner .location_info dd table th {width: 36%;} #section5 .location_inner .location_info dd table td {width: 64%;} #section5 .location_inner .location_info dd table th, #section5 .location_inner .location_info dd table td, #section5 .location_inner .location_info dd p {font-size: 17px;} #section5 .location_inner .location_info dd table tr::after {width: 100%;} #section5 .location_inner .location_info::after {display: none;} } /*------ 태블릿 ------*/ @media all and (max-width: 1024px) { .section {padding: 60px 0;} .section .section_tit h1 {font-size: 60px; letter-spacing: -10px;} #section1 {height: 700px;} #section1 .mainvisual_txt .txt1 p {font-size: 22px;} #section1 .mainvisual_txt .txt1 p strong {font-size: 35px;} #section1 .mainvisual_txt .txt1 span {font-size: 68px;} #section1 .mouse-scroll {display: none;} #section2 .signature_list {margin-top: 0;} #section2 .signature_list li {width: 45%; margin-top: 30px; margin-left: 3%;} #section2 .signature_list li:nth-child(1), #section2 .signature_list li:nth-child(2) {margin-top: 0;} #section2 .signature_list li:nth-child(3) {margin-left: 0;} #section2 .signature_list li .signature_img {height: auto;} #section2 .signature_list li .signature_link h4 {font-size: 16px;} #section3 .color_box .color_txt h1 {font-size: 60px;} #section4 {height: 1160px;} #section4 .threecut_list {width: 700px} #section4 .threecut_list li {width: 320px;} #section4 .threecut_list li.fade-in:nth-child(1) {transform: translate(-5%, 0);} #section4 .threecut_list li.fade-in:nth-child(2) {transform: translate(5%, 60%);} #section4 .threecut_list li.fade-in:nth-child(3) {transform: translate(-55%, 8%);} #section4 .threecut_list li figcaption h4 {font-size: 18px;} #section4 .threecut_list li figcaption p {font-size: 16px;} } /*------ 모바일 ------*/ @media all and (max-width: 767px) { .section .section_tit h1 {font-size: 44px;} .section .section_tit p {font-size: 16px;} #section1 .mainvisual_txt .txt1 p {font-size: 16px;} #section1 .mainvisual_txt .txt1 p strong {font-size: 20px;} #section1 .mainvisual_txt .txt1 span {font-size: 40px;} #section2 .signature_list {width: 90%;} #section2 .signature_list li {margin-top: 15px;} #section2 .signature_list li .signature_link {padding: 6px;} #section2 .signature_list li .signature_link p {font-size: 14px;} #section3 .color_box .color_txt p {font-size: 18px;} #section3 .color_box .color_txt h1 {font-size: 39px;} #section3 .color_box .color_txt span {font-size: 18px; margin-top: 34px;} #section4 {height: 1600px;} #section4 .threecut_list {width: 370px;} #section4 .threecut_list li {width: 300px;} #section4 .threecut_list li:nth-child(1) {transform: translate(-10%, 10%);} #section4 .threecut_list li:nth-child(2) {transform: translate(10%, 60px);} #section4 .threecut_list li:nth-child(3) {transform: translate(-10%, 100px);} #section4 .threecut_list li.fade-in:nth-child(1) {transform: translate(0%, 0);} #section4 .threecut_list li.fade-in:nth-child(2) {transform: translate(0%, 30px);} #section4 .threecut_list li.fade-in:nth-child(3) {transform: translate(0%, 55px);} #section5 .location_inner .location_info dd table th, #section5 .location_inner .location_info dd table td, #section5 .location_inner .location_info dd p {font-size: 16px;} }