/*------------PC------------*/ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap'); .mo-only {display: none !important;} .pc-only {display: block !important;} img {width: 100%;} /*------헤더------*/ #header {position: fixed; width: 100%; height: 95px; z-index: 101; box-sizing: border-box; transition: 0.5s; border-bottom: 1px solid rgba(255,255,255,0.2); background: transparent;} #header.scroll_on .header_inner {background-color: transparent; background-image: none;} #header.scroll_on {background: rgb(255 255 255 / 47%); height: 66px; transition: 0.5s; box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); border-top: 0 solid transparent; border-bottom: 1px solid rgba(0, 0, 0, 0.05);} #header h1.logo {position: absolute; left: 15px; top: 30px; z-index: 10; transition: 0.5s; width: 200px; visibility: visible; opacity: 1;} #header h1.logo img {width: 100%; transition: 0.5s;} #header h1.logo img.logo_w {display: none;} #header h1.logo img.logo_b {display: block;} #header .gnb {display: block; position: absolute; right: 0; top: 12px; width: auto; min-width: 760px; text-align: center; z-index: 20; transition: 0.5s;} #header .gnb ul li.depth01 {position: relative; float: left; margin-right: 5%;} #header .gnb ul li.depth01 a {display: block; padding: 1.5em 0; font-size: 1.1em; overflow: hidden;} #header .gnb ul li.depth01 a span {transition: 0.4s; font-family: 'Noto Sans SC', sans-serif;} #header .gnb ul li.depth01 > .sub_menu {position: absolute; top: 100%; right: 0; left: 0; opacity: 0; visibility: hidden; transition: all 0.3s;} #header .gnb ul li.depth01 .sub_menu ul li a {padding: 20px 0 0; font-size: 0.9rem;} #header .gnb ul li.depth01:hover>.sub_menu {opacity: 1; visibility: visible;} #header.scroll_on .gnb {top: 4px;} #header.scroll_on .gnb ul li.depth01 a {padding: 1em 0 1.26em;} #header .gnb>ul>li::after {position: absolute; bottom: -4px; right: 50%; left: 50%; width: 0; height: 3px; content: ""; display: block; background-color: #02c2bf; transition: all 0.3s;} #header .gnb>ul>li:hover::after { right: 0; left: 0; width: 100%;} #header.scroll_on .gnb>ul>li::after {bottom: 5px; height: 4px; background-color: #02c2bf;} #header .linear-progress {position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; opacity: 1; transition: 0.5s;} #header .linear-progress .progress-bar {width: 0%; height: inherit; position: absolute; z-index: 10; background-color: #595757; border-top-right-radius: 2px; border-bottom-right-radius: 2px; transition: width 800ms;} #header.open .linear-progress {opacity: 0;} #header .all_bg {visibility: hidden; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); transition: 0.5s; opacity: 0;} #header .all_bg.on {visibility: visible; opacity: 1;} #header .all_gnb {position: absolute; right: 28px; top: 22px; padding: 14px; cursor: pointer;} #header .hamberger {width: 16px; height: 16px; position: relative;} #header .hamberger span {display: block; position: absolute; width: 16px; height: 2px; background-color: #f1f1f1; border-radius: 30px; opacity: 1; right: 0; transition: 0.25s ease-in-out; transform: rotate(0deg);} #header .hamberger span.berger1 {top: 0;} #header .hamberger span.berger2, #header .hamberger span.berger3 {top: 6px;} #header .hamberger span.berger4 {top: 12px;} #header .hamberger.open span {background-color: #413e3a !important;} #header .hamberger.open span.berger1 {top: 18px; width: 0; left: 50%;} #header .hamberger.open span.berger2 {transform: rotate(45deg);} #header .hamberger.open span.berger3 {transform: rotate(-45deg);} #header .hamberger.open span.berger4 {top: 18px; width: 0; left: 50%;} #header.open {background: transparent; background-image: none; border-bottom: 0; box-shadow: none;} #header.open .gnb {display: none;} #header.scroll_on .all_gnb {top: 10px;} .all_nav {position: fixed !important; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 100; opacity: 0; visibility: hidden; background: none !important;} .all_nav.open {opacity: 1; visibility: visible;} .nav-inner {background: none;} .nav-inner .nav-allmenu-list-wrap {width: 50%; justify-content: center;} .nav-inner .nav-allmenu-list {display: block; position: relative; width: 75%; margin: 0 auto;} .nav-inner .m-nav-allmenu-list {display: none;} .nav-inner .nav-allmenu-list .nav-allmenu-depth01 {position: relative; width: 100%; padding: 0 0 0.5rem 1rem; margin-bottom: 1rem; border-bottom: 2px solid #ededed;} .nav-inner .nav-allmenu-list .nav-allmenu-depth01:last-child {padding: 0 0 1.5rem 1rem; margin-bottom: 0; border-bottom: 2px solid #7f7f7f;} .nav-inner .nav-allmenu-depth01 .nav-menu-txt {position: relative; width: auto; display: inline-block; padding: 0 1rem; margin-bottom: 0.5rem;} .nav-inner .nav-allmenu-depth01 .nav-menu-txt::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #65b3b3; transform-origin: right top; transform: scale(0, 1); transition: transform 0.4s cubic-bezier(1, 0, 0, 1); z-index: 0;} .nav-inner .nav-allmenu-depth01.on .nav-menu-txt::after {transform-origin: left top; transform: scale(1, 1);} .nav-inner .nav-allmenu-depth01 .nav-menu-txt p {position: relative; z-index: 1; line-height: 1.6; font-weight: 400; font-size: 2em; color: #2a3020;} .nav-inner .nav-allmenu-depth01.on .nav-menu-txt p {font-weight: 600; color: #fff;} .nav-inner .nav-allmenu-depth02 {display: flex; padding: 0 0 0 1.2rem;} .nav-inner .nav-allmenu-depth01.on .nav-allmenu-depth02 {opacity: 1; visibility: visible;} .nav-inner .nav-allmenu-depth02 li {margin-right: 2rem;} .nav-inner .nav-allmenu-depth02 li:last-child {margin-right: 0;} .nav-inner .nav-allmenu-depth02 li a {display: block; color: #888;} .nav-inner .nav-allmenu-depth02 li a p {line-height: 1.6; font-weight: 400; font-size: 1.125rem;} .nav-inner .nav-allmenu-depth02 li:hover a p {font-weight: 500; color: #16514b} .nav-inner .nav-allmenu-img {display: block; position: relative; width: 50%; height: 100%; text-align: center; background: url("http://www.damiskin.com/china/images/common/menu-bg.jpg") no-repeat 50% 50%/cover;} .nav-inner .nav-allmenu-img .imgbox {position: relative; width: 100%; height: 100%;} .nav-inner .nav-allmenu-img .imgbox .menu-img {position: absolute; top: 50%; left: 50%; width: 50%; max-width: 60%; transform: translate(-50%,-50%) translateZ(0);} .nav-inner .nav-allmenu-img .imgbox .menu-img p {margin-top: 1.2rem; line-height: 1.6; font-weight: 500; font-size: 1.563rem; color: #2a3020;} .nav-inner .menu-img {opacity: 0; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transition: clip-path 1.1s cubic-bezier(.19, 1, .22, 1), opacity 1.1s ease 167ms;} .nav-inner .nav-allmenu-img .imgbox .img01.on {opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);} .nav-inner .nav-allmenu-img .imgbox .img02.on {opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);} .nav-inner .nav-allmenu-img .imgbox .img03.on {opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);} .nav-inner .nav-allmenu-img .imgbox .img04.on {opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);} .nav-inner .nav-allmenu-img .imgbox .img05.on {opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);} .nav-inner .nav-allmenu-img .imgbox .img06.on {opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);} .nav-inner .nav-allmenu-img .imgbox .img07.on {opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);} .nav-inner .nav-allmenu-img .imgbox img {width: 100%;} .nav-inner .nav-number {display: none;} /* ( 크롬, 사파리, 오페라, 엣지 ) 동작 */ .pg-wrapper::-webkit-scrollbar {display: none;} .pg-wrapper {-ms-overflow-style: none; /* 인터넷 익스플로러 */ scrollbar-width: none; /* 파이어폭스 */} /*------메인비주얼------*/ #page-1 {position:relative; height: 110vh; overflow: hidden;} .main_visual {background: url("http://www.damiskin.com/china/images/main/mainvisual1.jpg") no-repeat; background-size: cover; background-position:bottom; transform: scale(1.2); height:100%;} .main_visual.active {transition: all 4s ease-out; transform: scale(1);} /*------메인 컨텐츠------*/ /* 공통 */ .title {overflow: hidden;} .title h2 {width: 500px; margin: 0 auto; transform: translateY(50px); transition: all 2s ease; opacity: 0;} .title p {font-size: 18px; font-family: 'Noto Sans SC', sans-serif; margin-top: 30px; transform: translateY(50px); transition: all 2s 0.3s ease; opacity: 0;} /* fade-in */ .title.fade-in h2 {transform: translateY(0); opacity: 1;} .title.fade-in p {transform: translateY(0); opacity: 1;} /*------------강점------------*/ #page-2 {background: url("http://www.damiskin.com/china/images/main/background1.jpg") no-repeat; background-size: cover; padding: 150px 0 100px; overflow: hidden;} #page-2 .threecut_list {width: 980px; margin: 0 auto; height: 1120px;} #page-2 .threecut_list li {display: inline-block; width: 450px;} #page-2 .threecut_list li:nth-child(1) {transform: translate(-30%, 30%); transition: all 2s ease; opacity: 0;} #page-2 .threecut_list li:nth-child(2) {transform: translate(47%, 90%); transition: all 2s ease; opacity: 0;} #page-2 .threecut_list li:nth-child(3) {transform: translate(-30%, 45%); transition: all 2s ease; opacity: 0;} #page-2 .entertainer_img {width: 50%; margin: 0 auto; transform: translateY(50px); transition: all 2s 0.3s ease; opacity: 0;} /* fade-in */ #page-2 .threecut_list li.fade-in:nth-child(1) {transform: translate(0,0); opacity: 1;} #page-2 .threecut_list li.fade-in:nth-child(2) {transform: translate(17%, 60%); opacity: 1;} #page-2 .threecut_list li.fade-in:nth-child(3) {transform: translate(0, 15%); opacity: 1;} #page-2 .entertainer_img.fade-in {transform: translateY(0); opacity: 1;} /*------------베스터5------------*/ #page-3 {padding: 150px 0; text-align: center; overflow: hidden;} #page-3 .best_list {width: 80%; margin: 30px auto;} #page-3 .best_list li {display: inline-block; width: 25%; margin-right: 1%; margin-top: 50px; transform: translateY(100px); opacity: 0;} #page-3 .best_list li:nth-child(1) {transition: all 2s 0.5s ease;} #page-3 .best_list li:nth-child(2) {transition: all 2s 0.7s ease;} #page-3 .best_list li:nth-child(3) {transition: all 2s 0.9s ease;} #page-3 .best_list li:nth-child(4) {transition: all 2s 1.1s ease;} #page-3 .best_list li:nth-child(5) {transition: all 2s 1.3s ease;} #page-3 .best_list li:nth-last-child(1) {margin-right: 0;} /* fade-in */ #page-3 .best_list.fade-in li {transform: translateY(0); opacity: 1;} /*------------비포애프터------------*/ #page-4 {padding: 150px 0; text-align: center; overflow: hidden; background-color: #f5ffff;} #page-4 .review_img {width: 800px; margin: 100px auto 0; position: relative;} #page-4 .review_img .hover_area .hover_img span, #page-4 .review_img .hover_area .hover_img p {color: #fff; font-family: 'Noto Sans SC', sans-serif;} #page-4 .review_img .hover_area .hover_img {cursor: pointer;} #page-4 .review_img .hover_area .hover_img::after {display: block; content: "+"; clear: both; color: #fff; line-height: 1.6; background-color: #02c2bf; width: 20px; height: 20px; border-radius: 100%; position: absolute; top: 30px; left: -25px; animation: bounce2 2s ease infinite;} #page-4 .review_img1 .hover_area.a {position: absolute; top: 72px; left: 93px;} #page-4 .review_img1 .hover_area.b {position: absolute; top: 72px; left: 347px;} #page-4 .review_img2 .hover_area.a {position: absolute; top: 135px; left: 110px;} #page-4 .review_img2 .hover_area.b {position: absolute; top: 135px; left: 310px;} #page-4 .review_img3 .hover_area.a {position: absolute; top: 158px; left: 308px;} #page-4 .review_img3 .hover_area.b {position: absolute; top: 58px; left: 329px;} #page-4 .review_img4 .hover_area.a {position: absolute; top: 85px; left: 129px;} #page-4 .review_img4 .hover_area.b {position: absolute; top: 85px; left: 290px;} /* 여기 비포애프터 추가 */ #page-4 .review_img .hover_area .hover_img ~ .img {position: absolute; top: -220px; left: 15%; width: 500px; transform: translateX(-50%); transition: all 0.3s; z-index: 9; opacity: 0; visibility: hidden;} #page-4 .review_img .hover_img:hover ~ .img {opacity: 1; visibility: visible;} @keyframes bounce2 { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-15px); } 60% { transform: translateY(-10px); } } /*------------의료진소개------------*/ #page-5 {background: url("http://www.damiskin.com/china/images/main/line_bg.jpg") no-repeat; background-size: cover; padding: 150px 0; text-align: center; overflow: hidden;} #page-5 .title h2 {width: 780px;} #page-5 .doctor_intro {display: flex; justify-content: center; padding-top: 70px;} #page-5 .doctor_left {transform: translateX(-50px); transition: all 2s ease; opacity: 0;} #page-5 .doctor_right {padding-left: 170px; text-align: left; transform: translateX(50px); transition: all 2s 1s ease; opacity: 0;} #page-5 .doctor_right .doctor_name {border-left: 8px solid #45c6c6; padding-left: 10px;} #page-5 .doctor_right .doctor_name h3 {font-size: 18px; font-weight: 800; letter-spacing: 1px; line-height: 36px;} #page-5 .doctor_right .doctor_name h2 {font-size: 36px; font-weight: 600; line-height: 36px; font-family: 'Noto Sans SC', sans-serif;} #page-5 .doctor_right .doctor_name h2 span {font-size: 18px; vertical-align: baseline; padding-left: 10px;} #page-5 .doctor_right .doctor_list {margin-top: 30px;} #page-5 .doctor_right .doctor_list p {font-family: 'Noto Sans SC', sans-serif; font-size: 16px; font-weight: 400; line-height: 31px; padding-left: 16px;} /* fade-in */ #page-5 .doctor_intro.fade-in .doctor_left {transform: translateY(0); opacity: 1;} #page-5 .doctor_intro.fade-in .doctor_right {transform: translateX(0); opacity: 1;} /*------------인테리어------------*/ #page-6 {background: url("http://www.damiskin.com/china/images/main/line_bg.jpg") no-repeat; background-size: cover; padding: 150px 0; text-align: center; overflow: hidden;} #page-6 .interior_wrap {position: relative; text-align: center; zoom: 0.9;} #page-6 .interior_wrap .swiper-slide {width: 100%; height: auto;} #page-6 .interior_swiper2 {height: 630px;} #page-6 .interior_contain {width: 1330px; margin: 0 auto;} #page-6 .interior_contain .swiper-slide img {width: 100%;} #page-6 .interior_imgBox {display: inline-block; width: 100%; margin-top: 52px; vertical-align: top; text-align: left;} #page-6 .interior_imgBox img {height: inherit;} #page-6 .interior_img {float: left; position: relative; width: 1080px;} #page-6 .interior_thumbs {float: right; position: relative; width: 220px; height: 630px; border: 1px solid #02c2bf; padding: 20px 20px 0; background: #fff;} #page-6 .interior_thumbs .interior_swiper {height: 590px;} #page-6 .interior_thumbs .interior_swiper .swiper-slide {height: 118px;} #page-6 .interior_thumbs .swiper-button-next, .interior_thumbs .swiper-button-prev {left: 50%; width: 44px; height: 44px; margin: -22px; transition: all 0.4s; background: url('../images/common/arrow_btn.png') no-repeat center;} #page-6 .interior_thumbs .swiper-button-prev {top: 0;} #page-6 .interior_thumbs .swiper-button-next {top: 101%; right: auto; transform: rotate(180deg);} #page-6 .interior_thumbs .swiper-button-next::after, .interior_thumbs .swiper-button-prev::after {font-size: 0;} #page-6 .interior_thumbs .swiper-button-next, .interior_thumbs .swiper-button-prev {opacity: 1;} #page-6 .interior_thumbs .swiper-button-disabled {opacity: 0.3 !important;} /*------------오시는길------------*/ #page-7 {background: #f5ffff; padding: 150px 0; text-align: center; overflow: hidden;} #page-7 .location_inner {text-align: center; padding-top: 80px;} #page-7 .location_inner > div {display: inline-block; padding: 0 100px; vertical-align: top;} #page-7 .location_inner .location_info {position: relative; margin-right: 100px;} #page-7 .location_inner .location_info::after {display: block; content: ""; clear: both; width: 1px; height: 420px; background-color: #5957572e; position: absolute; top: 14%; right: -100px;} #page-7 .location_inner .location_info dt, #page-7 .location_inner .location_map h3 {text-align: center; font-size: 2rem; font-family: 'Noto Sans SC', sans-serif; color: #595757;} #page-7 .location_inner .location_info dd {padding-top: 50px;} #page-7 .location_inner .location_info dd table tr {height: 62px; position: relative;} #page-7 .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;} #page-7 .location_inner .location_info dd table tr:nth-last-child(1)::after {display: none;} #page-7 .location_inner .location_info dd table th, #page-7 .location_inner .location_info dd table td, #page-7 .location_inner .location_info dd p {text-align: center; font-family: 'Noto Sans SC', sans-serif; font-size: 1.2rem; color: #595757; letter-spacing: 1.2px;} #page-7 .location_inner .location_info dd table th {width: 200px;} #page-7 .location_inner .location_info dd table td {width: 300px;} #page-7 .location_inner .location_info dd table tr:nth-last-child(1) td {letter-spacing: 3px;} #page-7 .location_inner .location_info dd p {font-family: 'Noto Sans SC', sans-serif; background-color: #02c2bf; color: #fff; margin-top: 30px; padding: 14px;} #page-7 .location_inner .location_info dd p:nth-of-type(2) {margin-top: 10px;} #page-7 .location_inner .location_map iframe {margin-top: 40px;} #daumRoughmapContainer1718342273891 {height: 100%;} /*------푸터------*/ #footer {display: block; position: relative; background-color: #59dbd9;} #footer .footer_inner {width: 100%; max-width: 80%; margin: 0 auto;} #footer .footer_link {padding: 1.2em 0; border-bottom: 1px solid #eee;} #footer .footer_link ul li {display: inline-block; padding-right: 1.5em; color: #f1f1f1; position: relative; text-align: left;} #footer .footer_link ul li a {font-size: 0.85em;} #footer .company {padding: 40px 0;} #footer .company p {color: #fff; line-height: 1.7; font-size: 0.85rem;} #footer .footer_logo {position: absolute; bottom: 45px; right: 194px; width:220px; } #footer .footer_logo img {width: 100%;} .non_benefit_img {position: fixed; top: 50%; left: 50%; transform: translate(-50%,-60%); width: 640px; height: 574px; z-index: 999; display: none;} @media all and (max-width: 1600px){ .band .band_txt {width: 57%;} #page-3 .tit_box {padding-right: 25px;} #page-3 .tit_box p {font-size: 1.6vw;} #page-3 .swiper-pagination-bullet {width: 22%; font-size: 24px;} #page-3 .swiper-pagination-bullet-active {font-size: 3vw;} #page-3 .cont_box {width: 984px; height: 586px;} #example_section .example_area {width: 80%;} #example_section .example_area .example_box .example_list_item {width: 31.3% !important;} #page-4 {height: 98vh;} #page-4 .page4_txt {width: 54%;} #page-5 .doctor_right h2 {font-size: 2.2vw;} #sns_section .sns_inner li a p {font-size: 1.6vw;} #page-7 .location_inner > div {padding: 0px 49px;} } @media all and (max-width: 1199px){ /*------------모바일------------*/ .mo-only {display: block !important;} .pc-only {display: none !important;} /*------헤더------*/ #header {border-bottom: 0;} #header .header_inner {position: relative; width: 100%; height: 100%; margin-left: auto; margin-right: auto; box-shadow: none; background-image: linear-gradient(to top, transparent 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.15) 100%); padding: 1rem 1.5rem; transition: 0.3s ease-in-out;} #header h1.logo {top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0 auto; width: 170px;} #header h1.logo img {width: 100%; transition: 0.5s;} #header.scroll_on .header_inner {background-color: #fff; background-image: none;} #header.scroll_on h1 .logo {width: 54px;} #header.open h1.logo {visibility: visible; opacity: 1;} #header.open .header_inner {background-color: transparent; background-image: none;} #header .gnb {display: none;} #header .all_gnb {right: 0rem; top: 24px; z-index: 100; transition: 0.4s;} #header .hamberger {width: 1.8rem; height: 1.8rem; transition: 0.4s; transform: rotate(0deg);} #header .hamberger span {display: block; position: absolute; width: 100%; height: 2px; background-color: #111; border-radius: 30px; opacity: 1; right: 0; transition: 0.25s ease-in-out; transform: rotate(0deg);} #header .hamberger span.berger1 {top: 0;} #header .hamberger span.berger2, #header .hamberger span.berger3 {top: 8px;} #header .hamberger span.berger4 {top: 16px; width: 60%;} #header .hamberger.open span.berger1 {top: 18px; width: 0; left: 50%;} #header .hamberger.open span.berger2 {transform: rotate(45deg);} #header .hamberger.open span.berger3 {transform: rotate(-45deg);} #header .hamberger.open span.berger4 {top: 18px; width: 0; left: 50%;} #header .call_btn {position: absolute; left: 1.5rem; z-index: 100; width: 21px;} #header .call_btn .call_btn_g {display: none;} #header .call_btn .fa-phone {font-size: 20px; color: #ffffff;} #header.scroll_on .call_btn .call_btn_g {display: block;} #header.scroll_on .call_btn .call_btn_w {display: none;} #header.open .call_btn .call_btn_g {display: block;} #header.open .call_btn .call_btn_w {display: none;} #header .linear-progress .progress-bar {width: 0%; height: inherit; position: absolute; z-index: 10; background-color: #636b52; border-top-right-radius: 2px; border-bottom-right-radius: 2px; transition: width 300ms;} #header.open .linear-progress {opacity: 0;} .all_nav {position: fixed !important; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 100; opacity: 0; visibility: hidden; background: none !important; transition: opacity 0.8s cubic-bezier(0.23,1,0.320,1);} .all_nav.open {opacity: 1; visibility: visible;} .all_nav .nav-inner {position: relative; width: 100%; height: 100%; margin: 0 auto; background-color: #fff; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transform: translateY(-100%) translateZ(0);} .all_nav .nav-allmenu-img {display: none;} .nav-inner .nav-allmenu-list {display: none;} .nav-inner {position: relative; width: 100%; height: 100%; margin: 0 auto; display: flex; background-color: #fff; justify-content: center; align-items: center; opacity: 1; visibility: visible; transition: all 1.2s 0.2s ease; transform: translateY(-100%) translateZ(0); background: #fff url("http://www.damiskin.com/china/images/common/m_gnb_bg.jpg") 50% 50%/cover no-repeat;} .open .nav-inner {opacity: 1; visibility: visible; transition: all 1.2s ease; transform: translateY(0%) translateZ(0);} .nav-inner .nav-allmenu-list-wrap {position: relative; width: 100%; height: 100%; padding: 5rem 0 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; background-color: #fff;} .nav-inner .m-nav-allmenu-list {display: block; width: 100%; height: auto; padding: 3rem 2rem; overflow-x: hidden; overflow-y: overlay;} .nav-inner .m-gnb-allmenu-depth1, .nav-inner .m-gnb-allmenu-depth1-1 {position: relative; width: 100%; height: 55px; margin: 0 auto; border-bottom: none; overflow: hidden; transition: height 600ms;} .nav-inner .m-gnb-allmenu-depth1>a, .nav-inner .m-gnb-allmenu-depth1-1>a {position: relative; display: inline-block; width: auto; color: #595757 !important; font-weight: 500; font-size: 1.5rem; opacity: 0; transform: translateY(50px);} .all_nav.open .nav-inner .m-nav-allmenu-list>li:nth-child(1)>a {opacity: 1; transform: translateY(0px); transition: transform 1s 0.8s ease, opacity 1s 0.8s ease;} .all_nav.open .nav-inner .m-nav-allmenu-list>li:nth-child(2)>a {opacity: 1; transform: translateY(0px); transition: transform 1s 0.9s ease, opacity 1s 0.9s ease;} .all_nav.open .nav-inner .m-nav-allmenu-list>li:nth-child(3)>a {opacity: 1; transform: translateY(0px); transition: transform 1s 1.0s ease, opacity 1s 1.0s ease;} .all_nav.open .nav-inner .m-nav-allmenu-list>li:nth-child(4)>a {opacity: 1; transform: translateY(0px); transition: transform 1s 1.1s ease, opacity 1s 1.1s ease;} .all_nav.open .nav-inner .m-nav-allmenu-list>li:nth-child(5)>a {opacity: 1; transform: translateY(0px); transition: transform 1s 1.2s ease, opacity 1s 1.2s ease;} .all_nav.open .nav-inner .m-nav-allmenu-list>li:nth-child(6)>a {opacity: 1; transform: translateY(0px); transition: transform 1s 1.3s ease, opacity 1s 1.3s ease;} .all_nav.open .nav-inner .m-nav-allmenu-list>li:nth-child(7)>a {opacity: 1; transform: translateY(0px); transition: transform 1s 1.4s ease, opacity 1s 1.4s ease;} /* .nav-inner .m-gnb-allmenu-depth1:nth-child(6).on {height: 200px;} */ .nav-inner .m-gnb-allmenu-depth1-1:nth-child(7).on {height: 280px;} .nav-inner .m-gnb-allmenu-depth2 {height: auto; padding: 0.5rem 0 0;} .nav-inner .m-gnb-allmenu-depth2>li {padding: 0 0 1rem;} .nav-inner .m-gnb-allmenu-depth2>li>a {display: inline-block; width: auto; padding-top: 4px;} .nav-inner .m-gnb-allmenu-depth2>li>a>p {color: #595757 !important; font-size: 1rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.6;} /*------메인비주얼------*/ #page-1 {height: 85vh; background-color: #f0fbfd; } .main_visual {background: url("http://www.damiskin.com/china/images/main/mainvisual1_m.jpg") no-repeat; background-size: contain; background-position: top; transform: scale(1.2);} .main-visual-txt {width: 50%; left: 50%; top: 40%; transform: translate(-50%,-50%);} .main-visual-txt.active {top: 50%;} .main-visual-txt img {width: 100%;} /*------메인 컨텐츠------*/ .section {width: 100%; height: 100%; position: relative;} .m-section-img, .m-section-img img {width: 100%; height: 100%;} .title h2 {width: 350px;} .title p {margin-top: 24px; font-size: 14px;} #page-2 {padding: 60px 0;} #page-2 .threecut_list {width: 100%; height: auto;} #page-2 .threecut_list li {width: 48%;} #page-2 .medical_list li:last-child {margin-right: 10px;} #page-2 .threecut_list li:nth-child(2) {transform: translate(47%, 83%);} #page-2 .threecut_list li:nth-child(3) {transform: translate(-37%, 45%);} #page-2 .threecut_list li.fade-in:nth-child(2) {transform: translate(7%, 53%);} #page-2 .threecut_list li.fade-in:nth-child(3) {transform: translate(0, 9%);} #page-2 .entertainer_img {width: 100%; margin-top: 60px;} #page-3 {padding: 60px 0;} #page-3 .best_list {width: 100%;} #page-3 .best_list li {width: 45%; margin-top: 25px;} #page-3 .best_list li:nth-child(2n) {margin-right: 0;} #page-4 {height: auto; padding: 60px 0;} #page-4 .review_img {width: 100%; margin: 50px auto 0;} #page-4 .review_img .hover_area .hover_img span, #page-4 .review_img .hover_area .hover_img p {font-size: 12px; line-height: 1;} #page-4 .review_img > div::after {line-height: 0.7; width: 15px; height: 15px; top: -10px; left: 40%;} #page-4 .review_img .hover_area .hover_img ~ .img {width: 250px; top: initial; bottom: 40px; left: 170%;} #page-4 .review_img .hover_area .hover_img::after {line-height: 1.4; width: 16px; height: 16px; top: 0; left: -18px;} #page-4 .review_img1 .hover_area.a {top: 42%; left: 10%;} #page-4 .review_img1 .hover_area.b {top: 42%; left: 43%;} #page-4 .review_img2 .hover_area.a {top: 50%; left: 15%;} #page-4 .review_img2 .hover_area.b {top: 50%; left: 40%;} #page-4 .review_img3 .hover_area.a {top: 58%; left: 37%;} #page-4 .review_img3 .hover_area.b {top: 30%; left: 40%;} #page-4 .review_img4 .hover_area.a {top: 43%; left: 18%;} #page-4 .review_img4 .hover_area.b {top: 43%; left: 37%;} #page-5 {padding: 60px 0;} #page-5 .title h2 {width: 90%;} #page-5 .doctor_intro {flex-direction: column;} #page-5 .doctor_left {width: 80%; margin: 0 auto;} #page-5 .doctor_right {padding-left: 0; width: 80%; margin: 0 auto; margin-top: 50px;} #page-6 {padding: 60px 0;} #page-6 .interior_contain {width: auto;} #page-6 .interior_wrap {margin: 0 auto;} #page-6 .interior_img {width: 100%;} #page-6 .interior_swiper2 {height: auto;} #page-6 .interior_wrap .swiper-slide img {width: 100%;} .swiper-pagination-bullet-active {opacity: var(--swiper-pagination-bullet-opacity, 1); background: #02c2bf !important;} #page-7 {padding: 60px 0;} #page-7 .location_inner {display: flex; flex-direction: column-reverse; padding-top: 50px;} #page-7 .location_inner > div {padding: 0 10px;} #page-7 .location_inner .location_map > div {width: 100%;} #page-7 .location_inner .location_map iframe {width: 100%;} #page-7 .location_inner .location_info {margin-right: 0; margin-top: 50px;} #page-7 .location_inner .location_info dd {padding-top: 20px;} #page-7 .location_inner .location_info dd table th {width: 40%;} #page-7 .location_inner .location_info dd table td {width: 60%;} #page-7 .location_inner .location_info dd table th, #page-7 .location_inner .location_info dd table td, #page-7 .location_inner .location_info dd p {font-size: 14px; letter-spacing: 1px;} #page-7 .location_inner .location_info dd table tr::after {width: 100%;} /*------푸터------*/ #footer {display: block; position: relative; width: 100%; z-index: 10;} #footer .footer_inner {width: 100%; max-width: 90%; margin: 0 auto;} #footer .company {width: 100%; position: relative; padding-bottom: 10em;} #footer .company img.footer_txt { width: 85%; margin: 2em 0;} #footer .company img.m_footer_logo {width: 40%; margin: 0 auto; display: block;} #footer .company img.footer_logo {display: none;} #footer .footer_link {padding: 1.2em 0; border-bottom: 1px solid #eee;} #footer .footer_link ul li {display: inline-block; padding-right: 1em; color: #f1f1f1; position: relative; text-align: center;} #footer .footer_link ul li a {font-size: 0.7em;} #footer .footer_link ul li.non_benefit a {color: #828282;} #footer .footer_logo {right: initial; transform: translate(-50%); left: 50%; bottom: 35px;} .non_benefit_img {position: fixed; top: 50%; left: 50%; transform: translate(-50%,-60%); width: 90%; height: auto; z-index: 999; display: none;} .non_benefit_img img {width: 100%; height: 100%;} .non_benefit_img.on {display: block;} }