@charset "utf-8"; /* ====================================================================================================================================================== */ /* ====================================================================================================================================================== */ /* 공통영역 S. { */ :root { --primary-color: #d96073; --basic-color: #262628; } /* Header */ #sHead {position:fixed;top:0;left:0;display:flex;flex-direction:column;width:100%;height:15.2rem;background-color:rgba(255,255,255,1.0);padding:3.8rem 2rem 0;z-index:5;} #sHead:before {content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background-color:var(--basic-color);z-index:3;} /* SOCIAL */ #sHead .social {max-width:178rem;width:100%;margin:0 auto;} #sHead .social ul {display:flex;gap:1rem;justify-content:end;} #sHead .social ul a {display:flex;} /* GNB */ #sHead .inner {max-width:144rem;width:100%;margin:0 auto;display:flex;justify-content:space-between;align-items:start;} #sHead .logo a {display:flex;} #sHead #gnb {display:flex;align-items:start;padding-top:1.5rem;} #sHead #gnb ul.oneDepth {} #sHead #gnb ul.oneDepth > li {position:relative;display:inline-block;margin: 0 1.8rem;padding-bottom:2.9rem;} #sHead #gnb ul.oneDepth > li:first-child:before {content:none;} #sHead #gnb ul.oneDepth > li > a { position: relative; display: inline-block; font-size: 1.5rem; color: var(--basic-color); line-height: 3.8rem; letter-spacing: -.025em; font-weight: 600; padding: 0 1.8rem; } #sHead #gnb ul.oneDepth > li.active > a, #sHead #gnb ul.oneDepth > li.selected > a { color: var(--primary-color); } #sHead #gnb ul.oneDepth > li > ul.twoDepth { position: absolute; top: 100%; left:0; /*left: 50%; transform: translate(-50%,0);*/ /*border-radius: .5rem;*/ border-top:1px solid var(--basic-color); width: 0; height: 0; overflow: hidden; z-index: 3; } #sHead #gnb ul.oneDepth > li > ul.twoDepth.loaded { display: none; width: auto; height: auto; overflow: visible; } #sHead #gnb ul.oneDepth > li > ul.twoDepth:after { content: none; position:absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; /*border-radius: .5rem;*/ /*box-shadow: .7rem .7rem 2.4rem 0 rgba(0,0,0,0.16);*/ } #sHead #gnb ul.oneDepth > li > ul.twoDepth > li {position:relative;} #sHead #gnb ul.oneDepth > li > ul.twoDepth > li > a { position: relative; display: block; font-size: 1.3rem; line-height: 1.2em; letter-spacing: -0.025em; padding: 1.2rem 2rem 1rem 1rem; width: 20rem; background-color: #fff; border: 1px solid #e4e4e4; border-top:0; border-bottom:0; /*border-top: 0;*/ overflow: hidden; z-index: 2; } #sHead #gnb ul.oneDepth > li:first-child > ul.twoDepth > li > a { width: 22.6rem; } #sHead #gnb ul.oneDepth > li > ul.twoDepth > li:first-child > a {/*border-top: 1px solid #999;*//*border-radius:.5rem .5rem 0 0;*/} #sHead #gnb ul.oneDepth > li > ul.twoDepth > li:last-child > a {white-space:nowrap;border-bottom:1px solid #e4e4e4;/*border-radius:0 0 .5rem .5rem;*/} #sHead #gnb ul.oneDepth > li > ul.twoDepth > li.first.last > a {/*border-radius:.5rem;*/} #sHead #gnb ul.oneDepth > li > ul.twoDepth > li.sub > a:before { content: ""; position: absolute; top: 1.4rem; right: .6rem; width: 0; height: 0; border-width: .4rem .5rem; border-style:solid; border-color:transparent transparent transparent #0d0d0d; } #sHead #gnb ul.oneDepth > li > ul.twoDepth > li > ul.threeDepth { position: absolute; top: -1px; left: 19rem; transform: translate(-19rem,0); width: 0px; height: 0px; overflow: hidden; /*border-radius: .5rem;*/ border:1px solid #e4e4e4; -o-transition: all .15s .0s ease-in-out; -ms-transition: all .15s .0s ease-in-out; -moz-transition: all .15s .0s ease-in-out; -webkit-transition: all .15s .0s ease-in-out; transition: all .15s .0s ease-in-out; /*box-shadow: .7rem .7rem 1.2rem 0 rgba(0,0,0,0.08);*/ } #sHead #gnb ul.oneDepth > li > ul.twoDepth > li:first-child > ul.threeDepth {top:0;} #sHead #gnb ul.oneDepth > li > ul.twoDepth > li > ul.threeDepth > li > a { position: relative; display: block; font-size: 1.2rem; line-height: 1.2rem; letter-spacing: -0.025em; padding: 1.2rem 1rem 1rem 1.5rem; width: 20rem; background-color: #fff; /*border: 1px solid #999;*/ /*border-top: 0;*/ overflow: hidden; z-index: 0; } #sHead #gnb ul.oneDepth > li > ul.twoDepth > li > ul.threeDepth > li:first-child > a {/*border-top: 1px solid #999;*//*border-radius:.5rem .5rem 0 0;*/} #sHead #gnb ul.oneDepth > li > ul.twoDepth > li > ul.threeDepth > li:last-child > a {/*border-radius:0 0 .5rem .5rem;*/} #sHead #gnb ul.oneDepth > li > ul.twoDepth > li > ul.threeDepth > li.first.last > a {/*border-radius:.5rem;*/} #sHead #gnb ul.oneDepth > li > ul.twoDepth > li.active > ul.threeDepth {width:auto;height:auto;transform:translate(0,0);} #sHead #gnb ul.oneDepth > li > ul.twoDepth > li.selected > a, #sHead #gnb ul.oneDepth > li > ul.twoDepth > li > ul.threeDepth > li.selected > a {background-color:#f2c2c9;} #sHead #gnb ul.oneDepth > li > ul.twoDepth > li > a, #sHead #gnb ul.oneDepth > li > ul.twoDepth > li > ul.threeDepth > li > a {color:#0d0d0d;} #sHead #gnb ul.oneDepth > li > ul.twoDepth > li.active > a:before, #sHead #gnb ul.oneDepth > li > ul.twoDepth > li.sub > a:hover:before { border-color:transparent transparent transparent #fff; } #sHead #gnb ul.oneDepth > li > ul.twoDepth > li.active > a, #sHead #gnb ul.oneDepth > li > ul.twoDepth > li > ul.threeDepth > li.active > a, #sHead #gnb ul.oneDepth > li > ul.twoDepth > li > a:hover, #sHead #gnb ul.oneDepth > li > ul.twoDepth > li > ul.threeDepth > li > a:hover {color:#fff;background-color:var(--primary-color);} #sHead .mypage {position:relative;padding-bottom:1rem;} #sHead .mypage .infor {display:block;width:3.8rem;height:3.8rem;background:url('../images/common/mypage.png') no-repeat center center/cover;text-indent:-999rem;} #sHead .mypage ul {display:none;position:absolute;top:calc(100% + .5rem);left:50%;transform:translate(-50%,0);border:1px solid #666;border-radius:.5rem;background-color:#fff;z-index:3;} #sHead .mypage ul li a {display:block;font-size:1.2rem;line-height:1.6rem;text-align:center;padding:1rem 1rem;white-space:nowrap;} #sHead .mypage ul li+li {border-top:1px solid #666;} #sHead a.booknow {display:inline-flex;color:#fff;font-size:1.5rem;font-weight:600;line-height:3.8rem;white-space:nowrap;padding:0 4rem;margin:0 0 1rem 3.6rem;border-radius:3.8rem;background-color:var(--primary-color);} /* mobile : MENU BUTTON */ #sHead .btn-menu { position: absolute; top: 50%; right: 1rem; transform: translate(0, -50%); display: none; width: 3.7rem; height: 3.7rem; border-radius: 0; vertical-align:top; -o-transition: all .4s .0s ease-in-out; -ms-transition: all .4s .0s ease-in-out; -moz-transition: all .4s .0s ease-in-out; -webkit-transition: all .4s .0s ease-in-out; transition: all .4s .0s ease-in-out; z-index: 3; } #sHead .btn-menu > span { display: block; position: absolute; top: 50%; left: 50%; -o-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; margin-left: -1.25rem; width: 2.5rem; height: 2px; background-color: #0d0d0d; -o-transition: margin-top .3s .4s ease-in-out,-o-transform .3s .0s ease-in-out,opacity .0s .4s ease-in-out; -ms-transition: margin-top .3s .4s ease-in-out,-ms-transform .3s .0s ease-in-out,opacity .0s .4s ease-in-out; -moz-transition: margin-top .3s .4s ease-in-out,-moz-transform .3s .0s ease-in-out,opacity .0s .4s ease-in-out; -webkit-transition: margin-top .3s .4s ease-in-out,-webkit-transform .3s .0s ease-in-out,opacity .0s .4s ease-in-out; transition: margin-top .3s .4s ease-in-out,transform .3s .0s ease-in-out,opacity .0s .4s ease-in-out; } #sHead .btn-menu .l1 {margin-top: -9px;} #sHead .btn-menu .l2 {margin-top: -1px;} #sHead .btn-menu .l3 {margin-top: 7px;} #sHead.mainActive .btn-menu > span {background-color:#fff;} /* mobile : MENU BUTTON -> selected */ #sHead.moActive .btn-menu > span { background-color:#fff; -o-transition: margin-top .3s .0s ease-in-out,-o-transform .3s .4s ease-in-out,opacity .0s .4s ease-in-out; -ms-transition: margin-top .3s .0s ease-in-out,-ms-transform .3s .4s ease-in-out,opacity .0s .4s ease-in-out; -moz-transition: margin-top .3s .0s ease-in-out,-moz-transform .3s .4s ease-in-out,opacity .0s .4s ease-in-out; -webkit-transition: margin-top .3s .0s ease-in-out,-webkit-transform .3s .4s ease-in-out,opacity .0s .4s ease-in-out; transition: margin-top .3s .0s ease-in-out,transform .3s .4s ease-in-out,opacity .0s .4s ease-in-out; } #sHead.moActive .btn-menu .l1 { margin-top: -1px; -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #sHead.moActive .btn-menu .l2 { opacity: 0; } #sHead.moActive .btn-menu .l3 { margin-top: -1px; -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } /* FOOTER */ #sFoot {padding:8rem 2rem 10rem;background-color:#292a2f;} #sFoot .inner {display:grid;grid-template-columns: 22rem 1fr;gap:2.5rem 4rem;align-items:start;grid-auto-flow:dense;max-width:96rem;width:100%;margin:0 auto;} #sFoot .inner > div.logo {text-align:center;} #sFoot .inner > div.address {grid-area: 1 / 2 / span 2 / span 3;} #sFoot .inner > div.address p {color:#fff;font-size:1rem;line-height:1.8rem;} #sFoot .inner > div.address p.copy {margin-top:2.4rem;} #sFoot .inner > div.social ul {display:flex;justify-content:center;gap:1rem;} /* floting-area / QUICK */ #quick {position:fixed;bottom:50%;right:4rem;transform:translate(0,50%);display:flex;flex-direction:column;align-items:center;gap:1rem;z-index:3;} #quick ul {width:11.2rem;border-radius:11.2rem;background-color:var(--basic-color);padding:2rem;} #quick ul li {padding:1.5rem 0;} #quick ul li+li {border-top:1px solid rgb(150,150,150);} #quick ul li a {display:flex;flex-direction:column;align-items:center;color:#fff;font-size:1.2rem;text-align:center;} #quick ul li:nth-child(1) a:before {content:"";width:5rem;height:5rem;background:url('../images/common/quick-ico-btn1.png') no-repeat center center/cover;} #quick ul li:nth-child(2) a:before {content:"";width:5rem;height:5rem;background:url('../images/common/quick-ico-btn2.png') no-repeat center center/cover;} #quick ul li:nth-child(3) a:before {content:"";width:5rem;height:5rem;background:url('../images/common/quick-ico-btn3.png') no-repeat center center/cover;} #quick ul li:nth-child(4) a:before {content:"";width:5rem;height:5rem;background:url('../images/common/quick-ico-btn4.png') no-repeat center center/cover;} #quick a.pageTop {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;color:#fff;font-size:1.2rem;width:8rem;height:8rem;border-radius:50%;background-color:var(--primary-color);} #quick a.pageTop:before {content:"";width:1rem;height:.9rem;background:url('../images/common/quick-ico-top.png') no-repeat center center/cover;} #floting-area {position:fixed;bottom:0;left:0;width:100%;background-color:var(--basic-color);padding:2.2rem 2rem;z-index:1;} #floting-area .inner {max-width:120rem;width:100%;margin:0 auto;} #floting-area .inner form {display:flex;justify-content:center;align-items:center;gap:1rem;} #floting-area .inner input[type=text], #floting-area .inner select {border:0;border-radius:.5rem;padding:0 .6rem;color:#222;font-size:1.2rem;line-height:3.8rem;font-weight:500;max-width:22rem;width:100%;height:3.8rem;} #floting-area .inner label {color:#fff;font-size:1.2rem;font-weight:500;white-space:nowrap;display:flex;align-items:center;gap:.4rem;} #floting-area .inner button {border:0;border-radius:.5rem;padding:0 1.2rem;color:#fff;font-size:1.2rem;line-height:3.8rem;font-weight:500;max-width:22rem;width:100%;height:3.8rem;text-align:left;background:var(--primary-color) url('../images/main/ico-apply.png') no-repeat right 1.2rem center;margin-left:2rem;} #floting-area a.booknow {display:none;} select { -webkit-appearance:none; -moz-appearance:none; appearance:none; } select::-ms-expand{ display:none; } select { background-image: url('../images/common/ico-selectbox.jpg'); background-repeat: no-repeat; background-position: right .8rem center; background-size: 1rem 1rem; } #hd_pop {position:fixed;top:0;left:0;width:100%;height:100%;padding:2rem;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:9;} #hd_pop .dimBg {position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);} #hd_pop .popup_header {display:flex;align-items:center;justify-content:space-between;font-size:1.4rem;width:100%;height:34px;padding:0 8px;color:#FFFFFF;background-color:#464646;box-sizing:border-box;font-family:'GmarketSansMedium';} #hd_pop .popup_header .popup_close_btn {cursor:pointer;} #modal_layer_popup_options {position:relative;top:0px;left:0px;max-width:600px;width:100%;background:#fff;overflow:hidden;} #modal_layer_popup_options .swiper-origin .swiper-wrapper .swiper-slide {display:flex;font-size:0;line-height:0;height:auto;} #modal_layer_popup_options .swiper-thumb .swiper-wrapper {display:flex;width:100%;} #modal_layer_popup_options .swiper-thumb .swiper-wrapper .swiper-slide {flex:1 0;font-size:1.4rem;text-align:center;padding:2rem .6rem;} #modal_layer_popup_options .swiper-thumb .swiper-wrapper .swiper-slide+.swiper-slide {border-left:1px solid #e4e4e4;} #modal_layer_popup_options .swiper-thumb .swiper-wrapper .swiper-slide.swiper-slide-thumb-active {color:var(--primary-color);font-weight:600;} .scroll-guide {position:absolute;bottom:10rem;left:50%;transform:translate(-50%,0);} .scroll-guide em {color:#000;font-size:1.36rem;font-weight:300;font-style:normal;} .scroll-guide em:before {content:"";position:absolute;top:calc(100% + 1rem);left:50%;transform:translate(-50%,0);width:1px;height:6rem;background-color:#000;} .scroll-guide em:after { content:"";position:absolute;top:calc(100% + 1rem);left:50%;transform:translate(-50%,0);width:.9rem;height:.9rem;background-color:#000;border-radius:50%; animation-name: scroll-bounce; animation-duration: 3.25s; animation-iteration-count: infinite; animation-timing-function: ; } .scroll-guide.bgWH em {color:#fff;} .scroll-guide.bgWH em:before {background-color:#fff;} .scroll-guide.bgWH em:after {background-color:#fff;} @keyframes scroll-bounce { 0% {top:calc(100% + .45rem);} 80% {top:calc(100% + 6.45rem);opacity:1;} 100% {top:calc(100% + 6.45rem);opacity:0;} } .paging-wrap {margin-top:5rem;} .paging-wrap .paging {display:flex;justify-content:center;align-items:center;} .paging-wrap .paging .pagingbtn {font-size:0;line-height:0;} .paging-wrap .paging .num {display:flex;align-items:center;gap:.6rem;margin:0 1rem;} .paging-wrap .paging .num strong, .paging-wrap .paging .num a {padding:.4rem .8rem;} .paging-wrap .mobile-more {display:none;color:var(--primary-color);font-size:1.4rem;padding:1.2rem;border:1px solid var(--primary-color);border-radius:.8rem;text-align:center;} /* Animation */ [class*="cont-obj"] {} [class*="cont-obj"][class*="b-to-t"] {transform:translateY(100px);opacity:0;} [class*="cont-obj"][class*="b-to-t"].ani-motion { animation: scroll-event-b-to-t 1.275s cubic-bezier(.12,.45,0,1.25) forwards; } @keyframes scroll-event-b-to-t { 0% {transform:translateY(100px);opacity:0;} 100% {transform:translateY(0);opacity:1;} } [class*="cont-obj"][class*="l-to-r"] {transform:translateX(-100px);opacity:0;} [class*="cont-obj"][class*="l-to-r"].ani-motion { animation: scroll-event-l-to-r 1.275s cubic-bezier(.12,.45,0,1.25) forwards; } @keyframes scroll-event-l-to-r { 0% {transform:translateX(-100px);opacity:0;} 100% {transform:translateX(0);opacity:1;} } [class*="cont-obj"][class*="r-to-l"] {transform:translateX(100px);opacity:0;} [class*="cont-obj"][class*="r-to-l"].ani-motion { animation: scroll-event-r-to-l 1.275s cubic-bezier(.12,.45,0,1.25) forwards; } @keyframes scroll-event-r-to-l { 0% {transform:translateX(100px);opacity:0;} 100% {transform:translateX(0);opacity:1;} } [class*="cont-obj"][class*="-d1"].ani-motion {animation-delay: .3s;} [class*="cont-obj"][class*="-d2"].ani-motion {animation-delay: .6s;} [class*="cont-obj"][class*="-d3"].ani-motion {animation-delay: .9s;} [class*="cont-obj"][class*="-d4"].ani-motion {animation-delay: 1.2s;} [class*="cont-obj"][class*="-d5"].ani-motion {animation-delay: 1.5s;} [class*="cont-obj"][class*="-d6"].ani-motion {animation-delay: 1.8s;} [class*="cont-obj"][class*="-d7"].ani-motion {animation-delay: 2.1s;} [class*="cont-obj"][class*="-d8"].ani-motion {animation-delay: 2.4s;} [class*="cont-obj"][class*="-d9"].ani-motion {animation-delay: 2.7s;} [class*="cont-obj"][class*="-d10"].ani-motion {animation-delay: 3s;} @media only screen and (max-width:840px){ [class*="cont-obj"][class*="b-to-t"], [class*="cont-obj"][class*="l-to-r"], [class*="cont-obj"][class*="r-to-l"] {transform:translateY(100px);opacity:0;} @keyframes scroll-event-b-to-t { 0% {transform:translateY(100px);opacity:0;} 100% {transform:translateY(0);opacity:1;} } @keyframes scroll-event-l-to-r { 0% {transform:translateY(100px);opacity:0;} 100% {transform:translateY(0);opacity:1;} } @keyframes scroll-event-r-to-l { 0% {transform:translateY(100px);opacity:0;} 100% {transform:translateY(0);opacity:1;} } } @media only screen and (max-width:1160px){ #sHead #gnb ul.oneDepth > li {margin:0;} #sHead a.booknow {padding:0 2rem;margin-left:1.8rem;} } @media only screen and (max-width:1024px){ #sHead {align-items:center;justify-content:center;height:6rem;padding:0 1.6rem;} #sHead .social {position:fixed;bottom:6rem;left:100%;padding:0 1rem;/*backdrop-filter: blur(5px);*/z-index:3;} #sHead .social ul {justify-content:center;padding:2rem 0;background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 25%, #000 50%);} #sHead .inner {justify-content:center;} #sHead .inner .logo {position:relative;width:10rem;z-index:3;} #sHead #gnb {position:fixed;top:0;left:100%;width:100%;height:100%;padding-top:10rem;padding-bottom:6rem;background-color:#000;flex-direction:column;z-index:1;} #sHead #gnb ul.oneDepth {display:flex;flex-direction:column;width:100%;height:calc(100% - 8.2rem);overflow-y:auto;} #sHead #gnb ul.oneDepth > li {text-align:center;padding-bottom:2rem;} #sHead #gnb ul.oneDepth > li:last-child {padding-bottom:10rem;} #sHead #gnb ul.oneDepth > li > a {display:inline-flex;align-items:center;gap:.8rem;color:#7d7d7d;font-size:2rem;} #sHead #gnb ul.oneDepth > li > a:after {content:"v";font-size:1.2rem;display:flex;justify-content:center;align-items:center;width:2.1rem;height:2.1rem;border-radius:50%;border:2px solid #7d7d7d;} #sHead #gnb ul.oneDepth > li.active > a:after, #sHead #gnb ul.oneDepth > li.selected > a:after {border-color:var(--primary-color);} #sHead #gnb ul.oneDepth > li > ul.twoDepth {position:relative;top:auto;left:auto;transform:none;display:inline-block;border-radius:0;border:0;} #sHead #gnb ul.oneDepth > li > ul.twoDepth > li > a {width:100%;display:inline-flex;justify-content:center;align-items:center;gap:.4rem;border:0 !important;border-radius:0;background-color:transparent;color:#fff;padding: .6rem 1rem;} #sHead #gnb ul.oneDepth > li > ul.twoDepth > li.sub > a:before {content:none;} #sHead #gnb ul.oneDepth > li > ul.twoDepth > li.sub > a:after {content:"v";position:relative;top:auto;right:auto;font-size:.7rem;display:flex;justify-content:center;align-items:center;width:1.7rem;height:1.7rem;border-radius:50%;border:2px solid #7d7d7d;} #sHead #gnb ul.oneDepth > li > ul.twoDepth > li.selected > a {color:var(--primary-color);font-weight:700;background-color:transparent;} #sHead #gnb ul.oneDepth > li > ul.twoDepth > li.selected > a:after {color:var(--primary-color);border-color:var(--primary-color);} #sHead #gnb ul.oneDepth > li > ul.twoDepth > li > ul.threeDepth {position:relative;top:auto !important;left:auto;width:100%;height:auto;transform:none;display:inline-flex;flex-wrap:wrap;justify-content:center;border-radius:0;border:0;z-index:1;} #sHead #gnb ul.oneDepth > li > ul.twoDepth > li > ul.threeDepth > li > a {width:100%;display:inline-flex;justify-content:center;align-items:center;gap:.4rem;font-weight:300;border:0 !important;border-radius:0;background-color:transparent;color:#fff;padding:.6rem 1rem;} #sHead #gnb ul.oneDepth > li > ul.twoDepth > li > ul.threeDepth > li.selected > a {color:var(--primary-color);font-weight:600;background-color:transparent;} #sHead #gnb ul.oneDepth > li > ul.twoDepth > li > ul.threeDepth > li {display:flex;align-items:center;} #sHead #gnb ul.oneDepth > li > ul.twoDepth > li > ul.threeDepth > li+li:before {content:"/";color:#aaa;font-size:1rem;} #sHead #gnb ul.oneDepth > li > ul.twoDepth:after {box-shadow:none;} #sHead #gnb ul.oneDepth > li > ul.twoDepth > li > ul.threeDepth {box-shadow:none;} #sHead.mobile.moActive #gnb {left:0;} #sHead.mobile.moActive .social {left:0;} #sHead .mypage {width:100%;padding-bottom:3rem;order:-1;} #sHead .mypage .infor {display:none;} #sHead .mypage ul {position:relative;top:auto;left:1.6rem;display:flex !important;gap:1rem;width:calc(100% - 3.2rem);transform:none;padding-top:2rem;background-color:transparent;border-radius:0;border:0;} #sHead .mypage ul li {flex:1;} #sHead .mypage ul li a {color:#fff;font-size:1.4rem;line-height:2rem;border:1px solid #fff;border-radius:2rem;} #sHead .mypage ul li+li {border:0;} #sHead a.booknow {position:absolute;bottom:0;left:0;width:100%;height:6rem;margin:0;display:block;color:#000;font-size:2rem;line-height:6rem;text-align:center;border-radius:0;} #sHead .btn-menu {display:block;} #sHead.moActive:before {background-color:#fff;} #quick a.pageTop:before {width:.7rem;height:.6rem;} } @media only screen and (max-width:840px){ #sFoot .inner {display:flex;flex-direction:column;gap:4rem;align-items:center;} #sFoot .inner > div.address p {text-align:center;} #quick {bottom:2rem;right:1.2rem;transform:none;} #quick ul {display:none;} #quick a.pageTop {width:5rem;height:5rem;gap:.2rem;} #floting-area {padding:0;} #floting-area .inner {display:none;} #floting-area a.booknow {display:block;width:100%;color:#fff;font-size:2rem;line-height:6rem;font-weight:600;text-align:center} .scroll-guide em {font-size:1rem;bottom:6rem;} .scroll-guide em:before {height:3rem;} .scroll-guide em:after { width:.5rem;height:.5rem; } @keyframes scroll-bounce { 0% {top:calc(100% + .5rem);} 80% {top:calc(100% + 3.75rem);opacity:1;} 100% {top:calc(100% + 3.75rem);opacity:0;} } .paging-wrap .paging {} .paging-wrap .mobile-more {display:none;} } /* } 공통영역 E. */ /* ====================================================================================================================================================== */ /* ====================================================================================================================================================== */ /* 메인 S. { */ .main-cover {position:relative;overflow:hidden;} .main-cover picture {display:flex;} .main-cover picture img {height:90rem;width:100%;object-fit:cover;} .main-cover .text {position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6rem;padding:0 2rem;} .main-cover .text h2 {font-size:9.8rem;line-height:1.2;font-weight:700;text-align:center;} .main-cover .text p {font-size:2.2rem;text-align:center;} .main-cover .swiper-container .swiper-button-next {display:none;position:absolute;top:50%;right:2rem;z-index:1;} .main-cover .swiper-container .swiper-button-prev {display:none;position:absolute;top:50%;left:2rem;z-index:1;} .main-movie {padding-top:18rem;} .main-movie video {display:block;max-width:144rem;width:100%;margin:0 auto;} .main-movie video::-webkit-media-controls { display: none; } .main-movie.youtube {padding:18rem 2rem 0;max-width:147rem;width:100%;margin:0 auto;} .main-movie.youtube .inner {position:relative;width:100%;padding-bottom:56.25%;margin:0 auto;border-radius:1.6rem;overflow:hidden;} .main-movie.youtube .inner iframe {position:absolute;top:0;left:0;width:100%;height:100%;} .main-movie.shorts {padding:18rem 0;width:100%;background-color:var(--basic-color);overflow:hidden;} .main-movie.shorts .inner h3 {display:flex;justify-content:center;} .main-movie.shorts .inner h3 span {display:inline-block;color:#fff;font-size:6.4rem;font-weight:600;line-height:1.0;} .main-movie.shorts .inner h3 span:before {content:"";display:block;width:1.6rem;height:1.6rem;border-radius:50%;background-color:var(--primary-color);margin-bottom:2rem;} .main-movie.shorts .inner .swiper-container {position:relative;width:100%;margin:10rem auto 0;} .main-movie.shorts .inner .swiper-container .swiper-slide {position:relative;width:40.5rem;} .main-movie.shorts .inner .swiper-container .swiper-slide:after {content:"";position:absolute;top:0;left:0;width:100%;height:100%;} .main-movie.shorts .inner .swiper-container .swiper-slide video, .main-movie.shorts .inner .swiper-container .swiper-slide figure {border-radius:2.4rem;overflow:hidden;background-color:#000;} .main-movie.shorts .inner .swiper-container .swiper-slide video {opacity:.2;} .main-movie.shorts .inner .swiper-container .swiper-slide .add-explanation { position:relative;display:flex;flex-direction:column;gap:2rem;background-color:#fff;border-radius:0 0 2.4rem 2.4rem;padding:4rem 2rem;overflow:hidden;transform:translateY(-100%);opacity:0;z-index:-1; transition: all .25s .0s ease-in-out; } .main-movie.shorts .inner .swiper-container .swiper-slide .add-explanation h5 {color:#000;font-size:3rem;font-weight:600;text-align:center;} .main-movie.shorts .inner .swiper-container .swiper-slide .add-explanation p {color:#7d7d7d;font-size:2rem;font-weight:300;text-align:center;} .main-movie.shorts .inner .swiper-container .swiper-slide.swiper-slide-active video, .main-movie.shorts .inner .swiper-container .swiper-slide.swiper-slide-active figure {border-radius:2.4rem 2.4rem 0 0;} .main-movie.shorts .inner .swiper-container .swiper-slide.swiper-slide-active video {opacity:1;} .main-movie.shorts .inner .swiper-container .swiper-slide.swiper-slide-active .add-explanation { transform:translateY(0);opacity:1; transition: all .45s .45s ease-in-out; } .main-movie.shorts .inner .swiper-container .swiper-button-wrap {position:absolute;bottom:18rem;left:50%;transform:translate(-50%,0);margin-left:30.8rem;display:flex;gap:1rem;z-index:1;} .main-movie.shorts .inner .swiper-container .swiper-button-wrap [class^='swiper-button'] {width:7rem;} .main-movie.shorts .inner .swiper-container .swiper-pagination {max-width:58rem;width:100%;margin:7rem auto 0;display:flex;background-color:#fff;} .main-movie.shorts .inner .swiper-container .swiper-pagination span {flex:1 0;height:.6rem;background-color:transparent;transition: all .45s .0s ease-in-out;} .main-movie.shorts .inner .swiper-container .swiper-pagination span.swiper-pagination-bullet-active {background-color:var(--primary-color);} .main-treatments {padding:18rem 2rem;} .main-treatments .inner {max-width:105rem;width:100%;margin:0 auto;} .main-treatments .inner h3 {display:flex;justify-content:center;} .main-treatments .inner h3 span {display:inline-block;font-size:6.4rem;font-weight:600;line-height:1.0;} .main-treatments .inner h3 span:before {content:"";display:block;width:1.6rem;height:1.6rem;border-radius:50%;background-color:var(--primary-color);margin-bottom:2rem;} .main-treatments .inner ul {display:grid;grid-template-columns: 1fr 1fr;gap:8.8rem 5rem;margin-top:10rem;} .main-treatments .inner ul li figure {border-radius:1.4rem;overflow:hidden;} .main-treatments .inner ul li p {font-size:3rem;font-weight:500;text-align:center;margin-top:3rem;} .main-treatments .inner ul li a {display:block;max-width:19.8rem;width:100%;color:#fff;font-size:2.2rem;line-height:5rem;text-align:center;background-color:#01010b;border-radius:5rem;margin:3rem auto 0;} .main-treatments.cols4 .inner {max-width:144rem;} .main-treatments.cols4 .inner ul {grid-template-columns: repeat(4, 1fr);gap:18rem 3rem;} .main-premium {position:relative;} .main-premium picture {display:flex;} .main-premium picture img {min-height:45rem;width:100%;object-fit:cover;} .main-premium .inner {position:absolute;top:0;left:50%;transform:translate(-50%,0);max-width:105rem;width:100%;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:0 2rem;} .main-premium .inner h3 {display:flex;justify-content:center;} .main-premium .inner h3 span {display:inline-block;color:#fff6ef;font-size:6.4rem;font-weight:600;line-height:1.0;} .main-premium .inner h3 span:before {content:"";display:block;width:1.6rem;height:1.6rem;border-radius:50%;background-color:#fff6ef;margin-bottom:2rem;} .main-premium .inner a {display:block;max-width:19.8rem;width:100%;color:#01010b;font-size:2.2rem;line-height:5rem;text-align:center;background-color:#fff6ef;border-radius:5rem;margin:5rem auto 0;} .main-review {padding:18rem 2rem;} .main-review .inner {max-width:105rem;width:100%;margin:0 auto;} .main-review .inner h3 {display:flex;justify-content:center;} .main-review .inner h3 span {display:inline-block;font-size:6.4rem;font-weight:600;line-height:1.0;} .main-review .inner h3 span:before {content:"";display:block;width:1.6rem;height:1.6rem;border-radius:50%;background-color:var(--primary-color);margin-bottom:2rem;} .main-review .inner ul {display:grid;grid-template-columns: 1fr 1fr;gap:8.8rem 5rem;margin-top:10rem;} .main-review .inner ul li {position:relative;padding:4.6rem 4.6rem 12.6rem;border-radius:1.4rem;background-color:#eee;} .main-review .inner ul li figure {border-radius:1.0rem;overflow:hidden;margin-bottom:5rem;} .main-review .inner ul li .brand {text-align:center;font-size:0;line-height:0;padding-bottom:2.2rem;} .main-review .inner ul li .infor {display:flex;justify-content:center;align-items:center;gap:3.6rem;padding-bottom:2.4rem;} .main-review .inner ul li .infor .txt {font-size:2.2rem;} .main-review .inner ul li .infor .star {display:flex;gap:0 .2rem;} .main-review .inner ul li .desc {font-size:2.6rem;font-weight:600;text-align:center;padding:0 3rem;} .main-review .inner a {display:block;position:absolute;bottom:4.6rem;left:50%;transform:translate(-50%,0);max-width:19.8rem;width:100%;color:#fff;font-size:2.2rem;line-height:5rem;text-align:center;background-color:var(--primary-color);border-radius:5rem;} @media only screen and (max-width:1200px){ .main-treatments.cols4 .inner ul li p {font-size:2.2rem;} .main-treatments.cols4 .inner ul li a {font-size:1.8rem;} } @media only screen and (max-width:840px){ .main-cover picture img {height:68rem;} .main-cover .text {gap:4rem;} .main-cover .text h2 {font-size:4rem;} .main-cover .text p {font-size:1.6rem;} .main-movie {padding-top:0;} .main-movie.youtube {padding:4rem 2rem 0;} .main-movie.shorts {padding:8rem 0;} .main-movie.shorts .inner h3 span {font-size:2.2rem;} .main-movie.shorts .inner h3 span:before {width:.6rem;height:.6rem;margin-bottom:1rem;} .main-movie.shorts .inner .swiper-container {margin-top: 4rem;} .main-movie.shorts .inner .swiper-container .swiper-slide {width:36rem;} .main-movie.shorts .inner .swiper-container .swiper-slide .add-explanation h5 {font-size:2rem;} .main-movie.shorts .inner .swiper-container .swiper-slide .add-explanation p {font-size:1.4rem;} .main-movie.shorts .inner .swiper-container .swiper-button-wrap {display:none;} .main-movie.shorts .inner .swiper-container .swiper-pagination {max-width:36rem;width:calc(100% - 4rem);} .main-treatments {padding:8rem 2rem;} .main-treatments .inner h3 span {font-size:2.2rem;} .main-treatments .inner h3 span:before {width:.6rem;height:.6rem;margin-bottom:1rem;} .main-treatments .inner ul {gap:4rem 1.6rem;margin-top:4rem;} .main-treatments .inner ul li {text-align:center;} .main-treatments .inner ul li p {font-size:1.4rem;margin-top:1rem;} .main-treatments .inner ul li a {display:inline-block;width:auto;font-size:1.2rem;line-height:3.2rem;margin-top:1.6rem;padding:0 2rem;} .main-treatments.cols4 .inner ul {grid-template-columns: repeat(3, 1fr);gap:8rem 1.6rem;} .main-treatments.cols4 .inner ul li p {font-size:1.4rem;margin-top:1rem;} .main-treatments.cols4 .inner ul li a {font-size:1.2rem;line-height:3.2rem;} .main-premium {} .main-premium picture img {min-height:22rem;} .main-premium .inner h3 span {font-size:3.2rem;} .main-premium .inner h3 span:before {width:.8rem;height:.8rem;margin-bottom:1rem;} .main-premium .inner a {display:inline-block;width:auto;font-size:1.2rem;line-height:3.2rem;margin-top:1.6rem;padding:0 2rem;} .main-review {padding-top:8rem;padding-bottom:8rem;} .main-review .inner h3 span {font-size:2.2rem;} .main-review .inner h3 span:before {width:.6rem;height:.6rem;margin-bottom:1rem;} .main-review .inner ul {gap:4rem 1.6rem;margin-top:4rem;} .main-review .inner ul li {padding:1rem 1rem 6rem;} .main-review .inner ul li .infor {flex-direction:column;align-items:center;} .main-review .inner ul li figure {margin-bottom:3rem;} .main-review .inner ul li .brand {padding-bottom:1rem;} .main-review .inner ul li .brand img {width:43%;} .main-review .inner ul li .infor {gap:.4rem;padding-bottom:1.4rem;} .main-review .inner ul li .infor .txt {font-size:1.2rem;} .main-review .inner ul li .infor .star img {width:1.6rem;} .main-review .inner ul li .desc {font-size:1.2rem;padding:0;} .main-review .inner ul li a {bottom:1.4rem;display:inline-block;width:auto;font-size:1.2rem;line-height:3.2rem;padding:0 2rem;white-space:nowrap;} } @media only screen and (max-width:480px){ .main-cover picture img {height:56rem;} .main-cover .text {gap:2rem;} .main-movie.shorts .inner .swiper-container .swiper-slide {width:30rem;} .main-movie.shorts .inner .swiper-container .swiper-slide .add-explanation {padding:2rem 1.6rem;} .main-movie.shorts .inner .swiper-container .swiper-slide .add-explanation h5 {font-size:2rem;} .main-movie.shorts .inner .swiper-container .swiper-slide .add-explanation p {font-size:1.4rem;} .main-movie.shorts .inner .swiper-container .swiper-button-wrap {bottom:15.6rem;margin-left:26.6rem;} .main-movie.shorts .inner .swiper-container .swiper-button-wrap [class^='swiper-button'] {width:5rem;} .main-movie.shorts .inner .swiper-container .swiper-pagination {max-width:30rem;margin-top:3rem;} .main-treatments.cols4 .inner ul {grid-template-columns: repeat(2, 1fr);} } /* } 메인 E. */ /* ====================================================================================================================================================== */ /* ====================================================================================================================================================== */ /* 서브 S. { */ /* 공통 */ .sub-cover {position:relative;} .sub-cover picture {display:flex;} .sub-cover picture img {min-height:90rem;width:100%;object-fit:cover;} .sub-cover .text {position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6rem;padding:0 2rem;} .sub-cover .text h2 {font-size:8rem;line-height:1.2;font-weight:700;text-align:center;} .sub-cover .text p {font-size:2.2rem;text-align:center;} .sub-cover .text.stWhite h2, .sub-cover .text.stWhite p {color:#fff;} h3.picture-txt {display:flex;justify-content:center;} h3.picture-txt.sec {margin-top:16rem;} h3.picture-txt span {display:inline-block;font-size:4rem;font-weight:600;line-height:1.2;} h3.picture-txt span:before {content:"";display:block;width:1.6rem;height:1.6rem;border-radius:50%;margin-bottom:2rem;background-color:var(--primary-color);} h3.picture-txt.bk span:before {background-color:var(--basic-color);} h3.picture-txt.f-white span {color:#fff;} @media only screen and (max-width:840px){ h3.picture-txt.sec {margin-top:6rem;} .sub-cover picture img {max-height:68rem;min-height:auto;} .sub-cover .text h2 {font-size:4rem;} .sub-cover .text p {font-size:1.6rem;} h3.picture-txt span {font-size:2.2rem;} h3.picture-txt span:before {width:.8rem;height:.8rem;margin-bottom:1rem;} } @media only screen and (max-width:480px){ .sub-cover picture img {max-height:56rem;} .sub-cover .text {gap:2rem;} } /* 01.about medicube clinic */ /* 01.about medicube clinic > 01.introduction of doctor */ .sub.about.introductor-of-doctor .doctor-wrap {position:relative;padding:18rem 2rem 0;} .sub.about.introductor-of-doctor .doctor-wrap .inner {display:flex;justify-content:space-evenly;max-width:110rem;margin:0 auto;} .sub.about.introductor-of-doctor .doctor-wrap .inner .profile, .sub.about.introductor-of-doctor .doctor-wrap .inner .photo {flex-basis:44.5rem;} .sub.about.introductor-of-doctor .doctor-wrap .inner .profile h3 span {position:relative;font-size:3.6rem;font-weight:700;letter-spacing:-.025rem;} .sub.about.introductor-of-doctor .doctor-wrap .inner .profile h3 span:before {content:"";position:absolute;top:-2.6rem;right:-2.6rem;width:2.6rem;height:2.6rem;background:url('../images/01.about_medicube_clinic/ci.png') no-repeat center center/cover;} .sub.about.introductor-of-doctor .doctor-wrap .inner .profile p {font-size:1.8rem;margin:1.6rem 0 3rem;padding-bottom:3rem;border-bottom:1px solid var(--basic-color);} .sub.about.introductor-of-doctor .doctor-wrap .inner .profile ul {display:flex;flex-direction:column;gap:.4rem;} .sub.about.introductor-of-doctor .doctor-wrap .inner .profile ul li {position:relative;font-size:1.4rem;padding-left:1rem;} .sub.about.introductor-of-doctor .doctor-wrap .inner .profile ul li:before {content:"";position:absolute;top:.8rem;left:0;width:.3rem;height:.3rem;border-radius:50%;background-color:var(--basic-color);} .sub.about.introductor-of-doctor .doctor-wrap .inner .profile ul li.gubun {margin-top:2rem;} .sub.about.introductor-of-doctor .doctor-wrap .inner .photo {} .sub.about.introductor-of-doctor .doctor-wrap .inner .photo figure {border-radius:1.4rem;overflow:hidden;} .sub.about.introductor-of-doctor .doctor-wrap .inner .photo img {width:100%;} .sub.about.introductor-of-doctor .why-medicube-clinic {position:relative;margin-top:18rem;} .sub.about.introductor-of-doctor .why-medicube-clinic picture {display:flex;} .sub.about.introductor-of-doctor .why-medicube-clinic picture img {min-height:45rem;width:100%;object-fit:cover;} .sub.about.introductor-of-doctor .why-medicube-clinic .inner {position:absolute;top:0;left:50%;transform:translate(-50%,0);max-width:105rem;width:100%;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:0 2rem;} .sub.about.introductor-of-doctor .photo-swipe-wrap {position:relative;display:block;padding:0 2rem;margin-top:22rem;overflow:hidden;} .sub.about.introductor-of-doctor .photo-swipe-wrap .swiper-slide {display:flex;flex-direction:column;align-items:center;} .sub.about.introductor-of-doctor .photo-swipe-wrap .swiper-slide figure {max-width:110rem;width:100%;border-radius:1.4rem;overflow:hidden;} .sub.about.introductor-of-doctor .photo-swipe-wrap .swiper-slide figure img {width:100%;} .sub.about.introductor-of-doctor .photo-swipe-wrap .swiper-slide h3 {max-width:144rem;font-size:5rem;font-weight:700;text-align:center;margin:6rem auto 0;} .sub.about.introductor-of-doctor .photo-swipe-wrap .swiper-slide p {max-width:144rem;font-size:3rem;font-weight:500;margin:3rem auto 0;text-align:center;} .sub.about.introductor-of-doctor .photo-swipe-wrap .swiper-pagination {display:flex;justify-content:center;align-items:center;gap:1.4rem;z-index:1;display:none;} .sub.about.introductor-of-doctor .photo-swipe-wrap .swiper-pagination .swiper-pagination-bullet {width:1.6rem;height:1.6rem;border-radius:50%;background-color:#dbdbdb;} .sub.about.introductor-of-doctor .photo-swipe-wrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {background-color:var(--primary-color);} .sub.about.introductor-of-doctor .photo-swipe-wrap .customer-pagination {display:flex;justify-content:center;align-items:center;gap:1.4rem;z-index:1;margin-top:6rem;} .sub.about.introductor-of-doctor .photo-swipe-wrap .customer-pagination .swiper-pagination-bullet {width:1.6rem;height:1.6rem;border-radius:50%;background-color:#dbdbdb;} .sub.about.introductor-of-doctor .photo-swipe-wrap .customer-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {background-color:var(--primary-color);} .sub.about.introductor-of-doctor .middle-banner-wrap {position:relative;margin-top:18rem;} .sub.about.introductor-of-doctor .middle-banner-wrap picture {display:flex;} .sub.about.introductor-of-doctor .middle-banner-wrap picture img {min-height:45rem;width:100%;object-fit:cover;} .sub.about.introductor-of-doctor .middle-banner-wrap .inner {position:absolute;top:0;left:50%;transform:translate(-50%,0);max-width:114rem;width:100%;height:100%;display:flex;justify-content:center;padding:0 2rem;} .sub.about.introductor-of-doctor .middle-banner-wrap .inner figure {flex:1;text-align:center;} .sub.about.introductor-of-doctor .middle-banner-wrap .inner figure img {max-width:none;width:auto;height:100%;} .sub.about.introductor-of-doctor .middle-banner-wrap .inner h3 {flex:1;display:flex;justify-content:center;align-items:center;} .sub.about.introductor-of-doctor .middle-banner-wrap .inner h3 span {display:inline-block;font-size:3.2rem;font-weight:600;letter-spacing:-.075rem;text-align:center;} .sub.about.introductor-of-doctor .middle-banner-wrap .inner h3 span:before {content:"";display:block;width:3rem;height:3rem;background:url('../images/01.about_medicube_clinic/ci-bk.png') no-repeat center center/cover;margin:0 auto 2rem;} /* 01.about medicube clinic > 02.Visia System */ .sub.about.visia-system .visia-prd-wrap {position:relative;} .sub.about.visia-system .visia-prd-wrap picture {display:flex;} .sub.about.visia-system .visia-prd-wrap picture img {height:90rem;width:100%;object-fit:cover;} .sub.about.visia-system .visia-prd-wrap .text {position:absolute;top:0;left:50%;transform:translate(-50%);max-width:114rem;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 2rem;} .sub.about.visia-system .visia-prd-wrap .text .inner {max-width:60.5rem;width:100%;} .sub.about.visia-system .visia-prd-wrap .text h2 {color:#fff;font-size:5.2rem;font-weight:600;margin-top:4rem;} .sub.about.visia-system .visia-prd-wrap .text ul {margin-top:5rem;} .sub.about.visia-system .visia-prd-wrap .text ul li h5 {color:#fff;font-size:2.4rem;font-weight:600;} .sub.about.visia-system .visia-prd-wrap .text ul li p {color:#fff;font-size:2.4rem;margin-top:2.4rem;font-weight:300;} .sub.about.visia-system .visia-prd-wrap .text ul li+li {margin-top:5rem;} .sub.about.visia-system .visia-facial-images-wrap {position:relative;padding:16rem 2rem 18rem;} .sub.about.visia-system .visia-facial-images-wrap .inner {max-width:110rem;margin:0 auto;} .sub.about.visia-system .visia-facial-images-wrap .inner ul {display:grid;grid-template-columns:repeat(4, 1fr);gap:4rem 2rem;margin-top:8rem;} .sub.about.visia-system .visia-facial-images-wrap .inner ul figure {border-radius:1.4rem;overflow:hidden;} .sub.about.visia-system .visia-facial-images-wrap .inner ul figure img {width:100%;} .sub.about.visia-system .visia-facial-images-wrap .inner ul p {font-size:2rem;text-align:center;margin-top:2rem;} .sub.about.visia-system .visia-how-to {padding:16rem 2rem 18rem;background-color:#f5f5f5;} .sub.about.visia-system .visia-how-to .inner {max-width:110rem;margin:0 auto;} .sub.about.visia-system .visia-how-to .inner p {font-size:2.4rem;text-align:center;margin-top:4rem;} .sub.about.visia-system .visia-how-to .inner ul {margin-top:8rem;} .sub.about.visia-system .visia-how-to .inner ul li+li {margin-top:2.4rem;} .sub.about.visia-system .visia-how-to .inner ul li {display:flex;justify-content:space-between;} .sub.about.visia-system .visia-how-to .inner ul li figure {flex:1;} .sub.about.visia-system .visia-how-to .inner ul li figure img {border-radius:1.4rem;overflow:hidden;} .sub.about.visia-system .visia-how-to .inner ul li dl {flex-basis:36%;display:flex;flex-direction:column;justify-content:center;background-color:#fff;padding:6rem;border-radius:1.4rem;} .sub.about.visia-system .visia-how-to .inner ul li dl dt {font-size:2.4rem;font-weight:600;} .sub.about.visia-system .visia-how-to .inner ul li dl dd {font-size:2rem;margin-top:1rem;word-break:keep-all;} .sub.about.visia-system .visia-solutions-wrap {padding:16rem 2rem 18rem;background-color:#1e2022;} .sub.about.visia-system .visia-solutions-wrap .inner {max-width:110rem;margin:0 auto;} .sub.about.visia-system .visia-solutions-wrap .inner h3.picture-txt span {color:#fff;} .sub.about.visia-system .visia-solutions-wrap .inner .box {display:grid;grid-template-columns:1fr 1fr;margin-top:6rem;} .sub.about.visia-system .visia-solutions-wrap .inner .box .left {flex:1;border-radius:1.4rem;border:2px solid #fff;overflow:hidden;background-color:#1A1A1A;} .sub.about.visia-system .visia-solutions-wrap .inner .box .right {flex:1;border-radius:1.4rem;background-color:#fff;padding:6rem;} .sub.about.visia-system .visia-solutions-wrap .inner .box .right h5 {font-size:3rem;font-weight:600;padding-bottom:3rem;border-bottom:2px solid #000;} .sub.about.visia-system .visia-solutions-wrap .inner .box .right dl {display:grid;grid-template-columns:repeat(2, 1fr);padding:3rem 0;} .sub.about.visia-system .visia-solutions-wrap .inner .box .right dl dt {font-size:3rem;font-weight:500;padding:1rem 2rem;} .sub.about.visia-system .visia-solutions-wrap .inner .box .right dl dd {font-size:3rem;text-align:right;font-weight:600;padding:1rem 2rem;} .sub.about.visia-system .visia-solutions-wrap .inner .box .right dl dt.c-pink, .sub.about.visia-system .visia-solutions-wrap .inner .box .right dl dd.c-pink {color:var(--primary-color);} .sub.about.visia-system .visia-solutions-wrap .inner .box .right .caution {position:relative;display:flex;font-size:1.3rem;background-color:#f6f6f6;border-radius:1.4rem;padding:3rem 3rem 3rem 13rem;} .sub.about.visia-system .visia-solutions-wrap .inner .box .right .caution:before {content:"Summary";position:absolute;top:3rem;left:3rem;color:var(--primary-color);font-size:1.3rem;font-weight:700;display:flex;justify-content:center;align-items:end;width:7rem;height:8.5rem;background:url('../images/common/ico-caution.png') no-repeat center top/100% auto;} .sub.about.visia-system .visia-care-wrap {padding:16rem 2rem 18rem;} .sub.about.visia-system .visia-care-wrap .inner {max-width:110rem;margin:0 auto;} .sub.about.visia-system .visia-care-wrap .inner ul {max-width:78rem;width:100%;margin:10rem auto 0;} .sub.about.visia-system .visia-care-wrap .inner ul li+li {margin-top:4rem;} .sub.about.visia-system .visia-care-wrap .inner ul li {display:flex;} .sub.about.visia-system .visia-care-wrap .inner ul li figure {width:25.8rem;border-radius:1.4rem;overflow:hidden;} .sub.about.visia-system .visia-care-wrap .inner ul li dl {display:flex;flex-direction:column;justify-content:center;width:calc(100% - 25.8rem);padding-left:10rem;} .sub.about.visia-system .visia-care-wrap .inner ul li dl dt {font-size:2.6rem;font-weight:600;} .sub.about.visia-system .visia-care-wrap .inner ul li dl dd {font-size:2rem;margin-top:1.6rem;padding-top:1.6rem;border-top:2px solid #000;} /* 01.about medicube clinic > 03.Look to around*/ .sub.about.look-to-around .tours-swipe-wrap {padding:16rem 2rem 18rem;overflow:hidden;} .sub.about.look-to-around .tours-swipe-wrap .inner {max-width:110rem;margin:0 auto;} .sub.about.look-to-around .tours-swipe-wrap .inner ul.tabs {display:grid;grid-template-columns:repeat(4, 1fr);margin-top:8rem;border-top:1px solid var(--primary-color);border-left:1px solid var(--primary-color)} .sub.about.look-to-around .tours-swipe-wrap .inner ul.tabs li {border-right:1px solid var(--primary-color);border-bottom:1px solid var(--primary-color);} .sub.about.look-to-around .tours-swipe-wrap .inner ul.tabs li a {display:flex;justify-content:center;align-items:center;width:100%;height:100%;font-size:2rem;font-weight:600;text-align:center;padding:1.6rem;} .sub.about.look-to-around .tours-swipe-wrap .inner ul.tabs li.active a {color:#fff;background-color:var(--primary-color);} .sub.about.look-to-around .tours-swipe-wrap .inner .swiper-container {margin-top:.5rem} .sub.about.look-to-around .tours-swipe-wrap .inner .swiper-container .swiper-origin {position:relative;} .sub.about.look-to-around .tours-swipe-wrap .inner .swiper-container .swiper-origin .inner {overflow:hidden;} .sub.about.look-to-around .tours-swipe-wrap .inner .swiper-container .swiper-origin .swiper-button-prev {position:absolute;top:50%;left:-10rem;transform:translate(0,-50%);z-index:1;} .sub.about.look-to-around .tours-swipe-wrap .inner .swiper-container .swiper-origin .swiper-button-next {position:absolute;top:50%;right:-10rem;transform:translate(0,-50%);z-index:1;} .sub.about.look-to-around .tours-swipe-wrap .inner .swiper-container .swiper-origin .swiper-button-disabled {opacity:.25;} .sub.about.look-to-around .tours-swipe-wrap .inner .swiper-container .swiper-slide {position:relative;font-size:0;line-height:0;} .sub.about.look-to-around .tours-swipe-wrap .inner .swiper-container .swiper-thumb {margin-top:2rem;} .sub.about.look-to-around .tours-swipe-wrap .inner .swiper-container .swiper-thumb .swiper-slide-thumb-active:after {content:"";position:absolute;top:0;left:0;width:100%;height:100%;border:.4rem solid var(--primary-color);} /* 01.about medicube clinic > 04.infor&location */ .sub.about.infor-location .information-wrap {padding:16rem 2rem 18rem;overflow:hidden;background-color:var(--basic-color);} .sub.about.infor-location .information-wrap .inner ul.weekly-infor {max-width:87.4rem;width:100%;display:grid;grid-template-columns:repeat(2, 1fr);margin:14rem auto 0;} .sub.about.infor-location .information-wrap .inner ul.weekly-infor li {padding:4rem;} .sub.about.infor-location .information-wrap .inner ul.weekly-infor li:nth-child(5) {grid-column: 1 / 3;text-align:center;border-top:1px solid #fff;} .sub.about.infor-location .information-wrap .inner ul.weekly-infor li:nth-child(6) {grid-column: 1 / 3;text-align:center;border-top:1px solid #fff;border-bottom:1px solid #fff;} .sub.about.infor-location .information-wrap .inner ul.weekly-infor li:nth-child(2), .sub.about.infor-location .information-wrap .inner ul.weekly-infor li:nth-child(4) {border-left:1px solid #fff;} .sub.about.infor-location .information-wrap .inner ul.weekly-infor li h5 {color:#fff;font-size:5rem;font-weight:600;} .sub.about.infor-location .information-wrap .inner ul.weekly-infor li p {color:#fff;font-size:3.2rem;} .sub.about.infor-location .information-wrap .inner ul.weekly-infor li:nth-child(6) a {display:inline-flex;align-items:center;gap:1rem;color:#fff;font-size:5rem;font-weight:600;} .sub.about.infor-location .information-wrap .inner ul.weekly-infor li:nth-child(6) a:before {content:"";width:5.6rem;height:6.2rem;background:url('../images/common/ico-call.png') no-repeat center center/cover;} .sub.about.infor-location .information-wrap .inner ul.weekly-infor li.closed h5, .sub.about.infor-location .information-wrap .inner ul.weekly-infor li.closed p {color:var(--primary-color);} .sub.about.infor-location .location-wrap {padding:16rem 2rem 18rem;background-color:#f6f6f6;} .sub.about.infor-location .location-wrap .inner {max-width:110rem;margin:0 auto;} .sub.about.infor-location .location-wrap .inner iframe {width:100%;height:42.6rem;border:1px solid #ccc;margin-top:10rem;} .sub.about.infor-location .location-wrap .inner ul.address {display:flex;flex-direction:column;gap:1rem 0;padding-top:2rem;} .sub.about.infor-location .location-wrap .inner .how-to {display:grid;grid-template-columns:repeat(2, 1fr);gap:.4rem;margin-top:8rem;} .sub.about.infor-location .location-wrap .inner .how-to .left {font-size:0;line-height:0;} .sub.about.infor-location .location-wrap .inner .how-to .left img {height:100%;object-fit:cover;} .sub.about.infor-location .location-wrap .inner .how-to .right {border:1px solid #d6d6d6;background-color:#fff;} .sub.about.infor-location .location-wrap .inner .how-to .right ul.tabs {display:grid;grid-template-columns:repeat(2, 1fr);} .sub.about.infor-location .location-wrap .inner .how-to .right ul.tabs li a {display:flex;justify-content:center;align-items:center;width:100%;height:100%;font-size:2rem;font-weight:600;text-align:center;padding:2rem;border-bottom:1px solid #d6d6d6;background-color:#fff;} .sub.about.infor-location .location-wrap .inner .how-to .right ul.tabs li:nth-child(odd) a {border-right:1px solid #d6d6d6;} .sub.about.infor-location .location-wrap .inner .how-to .right ul.tabs li.active a {color:#fff;background-color:var(--primary-color);} .sub.about.infor-location .location-wrap .inner .how-to span.space {display:block;width:calc(100% + 2px);height:.4rem;background-color:#f6f6f6;border-bottom:1px solid #d6d6d6;margin-left:-1px;} .sub.about.infor-location .location-wrap .inner .how-to .infor-wrap {padding:4rem 5rem;} .sub.about.infor-location .location-wrap .inner .how-to .infor-wrap figure {text-align:center;} .sub.about.infor-location .location-wrap .inner .how-to .infor-wrap p {font-size:2rem;text-align:center;margin-top:4rem;} .sub.about.infor-location .location-wrap .inner .how-to .infor-wrap h5 {font-size:2.4rem;font-weight:600;text-align:center;margin-top:2rem;} .sub.about.infor-location .location-wrap .inner .how-to .infor-wrap dl {display:grid;grid-template-columns:6rem 1fr;align-items:start;gap:.4rem 0;margin-top:1.6rem;} .sub.about.infor-location .location-wrap .inner .how-to .infor-wrap dl.column {grid-template-columns:1fr;} .sub.about.infor-location .location-wrap .inner .how-to .infor-wrap dl dt {display:flex;} .sub.about.infor-location .location-wrap .inner .how-to .infor-wrap dl dt span {color:#fff;font-size:1.8rem;font-weight:500;background-color:#000;padding:.4rem 1rem;border-radius:2rem;} .sub.about.infor-location .location-wrap .inner .how-to .infor-wrap dl dt.line2 span {background-color:#41b351;} .sub.about.infor-location .location-wrap .inner .how-to .infor-wrap dl dt.line9 span {background-color:#d29d2d;} .sub.about.infor-location .location-wrap .inner .how-to .infor-wrap dl dt.lineShinBundang span {background-color:#ab2f2d;} .sub.about.infor-location .location-wrap .inner .how-to .infor-wrap dl dd {font-size:1.6rem;} .sub.about.infor-location .location-wrap .inner .how-to .infor-wrap dl dd strong {font-weight:600;} .sub.about.infor-location .location-wrap .inner .how-to .guide {grid-column: 1 / 3;font-size:2rem;font-weight:600;text-align:center;padding:3rem;border:1px solid #d6d6d6;background-color:#fff;} @media only screen and (max-width:1240px){ .sub.about.look-to-around .tours-swipe-wrap .inner .swiper-container .swiper-origin .swiper-button-prev {left:1rem;width:6rem;height:6rem;} .sub.about.look-to-around .tours-swipe-wrap .inner .swiper-container .swiper-origin .swiper-button-next {right:1rem;width:6rem;height:6rem;} } @media only screen and (max-width:840px){ .sub.about.introductor-of-doctor .doctor-wrap {background-color:#f6f6f6;padding:0 2rem 6rem;} .sub.about.introductor-of-doctor .doctor-wrap .inner {flex-direction:column-reverse;} .sub.about.introductor-of-doctor .doctor-wrap .inner .photo figure {border-radius:0;text-align:center;} .sub.about.introductor-of-doctor .doctor-wrap .inner .photo figure img {max-width:50rem;} .sub.about.introductor-of-doctor .doctor-wrap .inner .profile {margin-top:5rem;text-align:center;} .sub.about.introductor-of-doctor .doctor-wrap .inner .profile ul li:before {position:relative;top:auto;left:auto;display:inline-block;vertical-align:middle;margin-right:.4rem;} .sub.about.introductor-of-doctor .doctor-wrap .inner .profile h3 span {font-size:3rem;} .sub.about.introductor-of-doctor .why-medicube-clinic {margin-top:0;} .sub.about.introductor-of-doctor .why-medicube-clinic picture img {min-height:auto;height:18rem;} .sub.about.introductor-of-doctor .photo-swipe-wrap {margin-top:0;} .sub.about.introductor-of-doctor .photo-swipe-wrap .customer-pagination {margin-top:4rem;} .sub.about.introductor-of-doctor .photo-swipe-wrap .customer-pagination .swiper-pagination-bullet {width:1rem;height:1rem;} .sub.about.introductor-of-doctor .photo-swipe-wrap .swiper-slide h3 {font-size:2.4rem;margin:4rem auto 0;} .sub.about.introductor-of-doctor .photo-swipe-wrap .swiper-slide p {font-size:1.6rem;margin:1rem auto 0;} .sub.about.introductor-of-doctor .middle-banner-wrap {margin-top:8rem;padding:6rem 2rem 0;} .sub.about.introductor-of-doctor .middle-banner-wrap picture {position:absolute;top:0;left:0;width:100%;height:100%;} .sub.about.introductor-of-doctor .middle-banner-wrap picture img {width:100%;max-width:none;min-height:auto;} .sub.about.introductor-of-doctor .middle-banner-wrap .inner {position:relative;flex-direction:column-reverse;} .sub.about.introductor-of-doctor .middle-banner-wrap .inner h3 span {font-size:2rem;font-weight:400;line-height:1.2;} .sub.about.introductor-of-doctor .middle-banner-wrap .inner h3 span:before {width:2rem;height:2rem;margin-bottom:1rem;} .sub.about.introductor-of-doctor .middle-banner-wrap .inner figure img {max-width:100%;height:auto;} .sub.about.visia-system .visia-prd-wrap picture img {height:68rem;} .sub.about.visia-system .visia-prd-wrap .text .inner {max-width:100%;} .sub.about.visia-system .visia-prd-wrap .text figure {text-align:center;} .sub.about.visia-system .visia-prd-wrap .text figure img {max-height:4rem;} .sub.about.visia-system .visia-prd-wrap .text h2 {font-size:2.8rem;text-align:center;} .sub.about.visia-system .visia-prd-wrap .text ul {max-width:100%;} .sub.about.visia-system .visia-prd-wrap .text ul li h5 {font-size:1.6rem;text-align:center;} .sub.about.visia-system .visia-prd-wrap .text ul li p {font-size:1.6rem;text-align:center;margin-top:1.6rem;} .sub.about.visia-system .visia-facial-images-wrap {padding:6rem 2rem;} .sub.about.visia-system .visia-facial-images-wrap .inner ul {margin-top:4rem;} .sub.about.visia-system .visia-facial-images-wrap .inner ul {grid-template-columns: repeat(2, 1fr);gap:3rem 1rem;} .sub.about.visia-system .visia-facial-images-wrap .inner ul p {font-size:1.6rem;margin-top:1rem;} .sub.about.visia-system .visia-how-to {padding:6rem 2rem;} .sub.about.visia-system .visia-how-to .inner p {font-size:1.6rem;margin-top:2rem;} .sub.about.visia-system .visia-how-to .inner ul {margin-top:4rem;} .sub.about.visia-system .visia-how-to .inner ul li {flex-direction:column;} .sub.about.visia-system .visia-how-to .inner ul li figure img {width:100%;border-radius:1.6rem 1.6rem 0 0;} .sub.about.visia-system .visia-how-to .inner ul li dl {flex-basis:45%;padding:2rem;border-radius:0 0 1.6rem 1.6rem;} .sub.about.visia-system .visia-how-to .inner ul li dl dt {font-size:1.6rem;} .sub.about.visia-system .visia-how-to .inner ul li dl dd {font-size:1.6rem;} .sub.about.visia-system .visia-solutions-wrap {padding:6rem 2rem;} .sub.about.visia-system .visia-solutions-wrap .inner .box {grid-template-columns:1fr;margin-top:4rem;} .sub.about.visia-system .visia-solutions-wrap .inner .box .right {padding:3rem;} .sub.about.visia-system .visia-solutions-wrap .inner .box .right h5 {font-size:2rem;} .sub.about.visia-system .visia-solutions-wrap .inner .box .right dl {padding:1rem 0;} .sub.about.visia-system .visia-solutions-wrap .inner .box .right dl dt {font-size:2rem;} .sub.about.visia-system .visia-solutions-wrap .inner .box .right dl dd {font-size:2rem;} .sub.about.visia-system .visia-solutions-wrap .inner .box .right .caution {padding:2rem 2rem 2rem 7rem;} .sub.about.visia-system .visia-solutions-wrap .inner .box .right .caution:before {left:2rem;width:4rem;height:5.6rem;} .sub.about.visia-system .visia-care-wrap {padding:6rem 2rem;} .sub.about.visia-system .visia-care-wrap .inner ul li {flex-direction:column;} .sub.about.visia-system .visia-care-wrap .inner ul li figure {width:100%;border-radius:1.6rem 1.6rem 0 0;} .sub.about.visia-system .visia-care-wrap .inner ul li figure img {width:100%;} .sub.about.visia-system .visia-care-wrap .inner ul li dl {width:100%;padding:1rem 0 0;} .sub.about.visia-system .visia-care-wrap .inner ul li dl dt {font-size:2rem;} .sub.about.visia-system .visia-care-wrap .inner ul li dl dd {font-size:1.6rem;margin-top:1rem;padding-top:1rem;} .sub.about.look-to-around .tours-swipe-wrap {padding:6rem 2rem;} .sub.about.look-to-around .tours-swipe-wrap .inner ul.tabs {margin-top:4rem;grid-template-columns:repeat(2, 1fr);} .sub.about.look-to-around .tours-swipe-wrap .inner ul.tabs li a {font-size:1.4rem;padding:1rem;} .sub.about.infor-location .information-wrap {padding:6rem 2rem;} .sub.about.infor-location .information-wrap .inner ul.weekly-infor li {padding:2rem;} .sub.about.infor-location .information-wrap .inner ul.weekly-infor li h5 {font-size:3.2rem;} .sub.about.infor-location .information-wrap .inner ul.weekly-infor li p {font-size:2rem;} .sub.about.infor-location .information-wrap .inner ul.weekly-infor li:nth-child(6) a {font-size:3.2rem;} .sub.about.infor-location .information-wrap .inner ul.weekly-infor li:nth-child(6) a:before {width:3rem;height:3.3rem;} .sub.about.infor-location .information-wrap .inner ul.weekly-infor {margin-top:4rem;} .sub.about.infor-location .location-wrap {padding:6rem 2rem;} .sub.about.infor-location .location-wrap .inner iframe {height:32rem;;margin-top:4rem;} .sub.about.infor-location .location-wrap .inner ul.address li {text-align:center;} .sub.about.infor-location .location-wrap .inner ul.address li strong {display:block;text-align:center;;} .sub.about.infor-location .location-wrap .inner .how-to {display:flex;flex-direction:column;margin-top:4rem} .sub.about.infor-location .location-wrap .inner .how-to .left img {width:100%;} .sub.about.infor-location .location-wrap .inner .how-to .right ul.tabs li a {font-size:1.6rem;padding:1rem 1rem;} .sub.about.infor-location .location-wrap .inner .how-to .infor-wrap {padding:2rem 3rem;} .sub.about.infor-location .location-wrap .inner .how-to .infor-wrap figure img {width:10rem;height:auto;} .sub.about.infor-location .location-wrap .inner .how-to .infor-wrap p {font-size:1.3rem;margin-top:1rem;} .sub.about.infor-location .location-wrap .inner .how-to .infor-wrap h5 {font-size:1.6rem;} .sub.about.infor-location .location-wrap .inner .how-to .infor-wrap dl dt span {font-size:1.4rem;} .sub.about.infor-location .location-wrap .inner .how-to .infor-wrap dl dd {font-size:1.4rem;} .sub.about.infor-location .location-wrap .inner .how-to .guide {font-size:1.6rem;padding:1.6rem 2rem;} } @media only screen and (max-width:480px){ .sub.about.visia-system .visia-prd-wrap picture img {height:56rem;} .sub.about.look-to-around .tours-swipe-wrap .inner .swiper-container .swiper-origin .swiper-button-prev {left:.5rem;width:4rem;height:4rem;} .sub.about.look-to-around .tours-swipe-wrap .inner .swiper-container .swiper-origin .swiper-button-next {right:.5rem;width:4rem;height:4rem;} .sub.about.infor-location .information-wrap .inner ul.weekly-infor li {padding:1.6rem 1rem;} .sub.about.infor-location .information-wrap .inner ul.weekly-infor li:nth-child(1) {padding-left:0;} .sub.about.infor-location .information-wrap .inner ul.weekly-infor li:nth-child(3) {padding-left:0;} .sub.about.infor-location .information-wrap .inner ul.weekly-infor li h5 {font-size:2rem;} .sub.about.infor-location .information-wrap .inner ul.weekly-infor li p {font-size:1.6rem;} .sub.about.infor-location .information-wrap .inner ul.weekly-infor li:nth-child(6) a {font-size:2rem;} .sub.about.infor-location .information-wrap .inner ul.weekly-infor li:nth-child(6) a:before {width:2rem;height:2.2rem;} } /* 02.TREATMENTS */ /* 02.TREATMENTS > 01.*/ .point-swipe-wrap {position:relative;padding:16rem 2rem 18rem;overflow:hidden;} .point-swipe-wrap .swiper-container {display:block;margin-top:8rem;} .point-swipe-wrap .swiper-slide {display:flex;flex-direction:column;align-items:center;} .point-swipe-wrap .swiper-slide figure {position:relative;max-width:110rem;width:100%;border-radius:1.4rem;overflow:hidden;} .point-swipe-wrap .swiper-slide figure img {width:100%;} .point-swipe-wrap .swiper-slide figure video {position:absolute;top:0;left:0;width:100%;height:100%;} .point-swipe-wrap .swiper-slide h3 {max-width:120rem;width:100%;font-size:4.4rem;font-weight:700;text-align:center;margin-top:6rem;} .point-swipe-wrap .swiper-slide p {max-width:120rem;width:100%;font-size:2.4rem;font-weight:500;margin-top:3rem;text-align:center;} .point-swipe-wrap .swiper-slide p.point{font-size:2rem;font-weight:400; color: #7c7c7c;} .point-swipe-wrap .swiper-slide p.point>strong{font-weight: bold; font-size:2.2rem; color: var(--primary-color);} .point-swipe-wrap .swiper-pagination {display:flex;justify-content:center;align-items:center;gap:1.4rem;z-index:1;display:none;} .point-swipe-wrap .swiper-pagination .swiper-pagination-bullet {width:1.6rem;height:1.6rem;border-radius:50%;background-color:#dbdbdb;} .point-swipe-wrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {background-color:var(--primary-color);} .point-swipe-wrap .customer-pagination {display:flex;justify-content:center;align-items:center;gap:1.4rem;z-index:1;margin-top:6rem;} .point-swipe-wrap .customer-pagination .swiper-pagination-bullet {width:1.6rem;height:1.6rem;border-radius:50%;background-color:#dbdbdb;} .point-swipe-wrap .customer-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {background-color:var(--primary-color);} .what-is-it-wrap {position:relative;} .what-is-it-wrap picture {display:flex;} .what-is-it-wrap picture img {width:100%;min-height:70rem;object-fit:cover;} .what-is-it-wrap .text {position:absolute;top:0;left:50%;transform:translate(-50%);max-width:114rem;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 2rem;} .what-is-it-wrap .text .inner {max-width:55rem;width:100%;} .what-is-it-wrap .text p.point {font-size:2rem;padding-bottom:4rem;} .what-is-it-wrap .text figure.prd-logo {padding-bottom:6rem;} .what-is-it-wrap .text figure.imgs{padding-top:5.5rem;} .what-is-it-wrap .text h2 {position:relative;margin-top:3rem;} .what-is-it-wrap .text h2 span {position:relative;font-size:5rem;font-weight:600;line-height:1.1;margin-top:4rem;} .what-is-it-wrap .text h2.xerf-font span {font-size:4rem;} .what-is-it-wrap .text h2 span em {position:absolute;bottom:calc(100% + .8rem);left:0;font-size:2rem;} .what-is-it-wrap .text h2 span:before {content:"";position:absolute;top:-2.6rem;right:-2.6rem;width:2.6rem;height:2.6rem;background:url('../images/01.about_medicube_clinic/ci.png') no-repeat center center/cover;} .what-is-it-wrap .text p.desc {font-size:2rem;margin-top:4rem;} .what-is-it-wrap .text.stWhite p.point {color:#fff;} .what-is-it-wrap .text.stWhite h2 span {color:#fff;} .what-is-it-wrap .text.stWhite h2 span em {color:#fff;} .what-is-it-wrap .text.stWhite p.desc {color:#fff;} .sub-gif {position:relative;} .sub-gif picture {display:flex;} .sub-gif picture img {width:100%;min-height:96rem;object-fit:cover;} .sub-gif figure{width:100%; height:100%; padding:2rem; position: absolute; left:0; top:0; display:flex;align-items:center;justify-content:center;} .before-n-after {position:relative;font-size:0;line-height:0;} .before-n-after picture img{min-height:88rem;width:100%;object-fit:cover;} .before-n-after .cont-wrap {position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 2rem;} .before-n-after .cont-wrap .inner {position:relative;max-width:110rem;width:100%;background-color:#fff;border-radius:1.4rem;margin-top:4rem;padding:8rem 6rem 10rem;} .before-n-after .cont-wrap .inner .swiper-container {display:block;max-width:52rem;width:100%;margin:0 auto;overflow:hidden;} .before-n-after .cont-wrap .inner .swiper-slide {display:grid;grid-template-columns:repeat(2, 1fr);gap:5rem 2.4rem;} .before-n-after .cont-wrap .inner .swiper-slide .type {grid-column:1/3;text-align:center;} .before-n-after .cont-wrap .inner .swiper-slide .type span {display:inline-block;color:#fff;font-size:2rem;line-height:1.2;padding:2rem 2.6rem;border-radius:3rem;background-color:var(--primary-color);} .before-n-after .cont-wrap .inner .swiper-slide figure {position:relative;padding-bottom:4rem;} .before-n-after .cont-wrap .inner .swiper-slide figure img {border-radius:1.4rem;overflow:hidden;} .before-n-after .cont-wrap .inner .swiper-slide figure.before:after {content:"BEFORE";position:absolute;bottom:0;left:0;width:100%;color:#a7a7a7;font-size:2.4rem;line-height:1.2;font-weight:600;text-align:center;} .before-n-after .cont-wrap .inner .swiper-slide figure.after:after {content:"AFTER";position:absolute;bottom:0;left:0;width:100%;color:var(--primary-color);font-size:2.4rem;line-height:1.2;font-weight:600;text-align:center;} .sub.juvelook .before-n-after .cont-wrap .inner .swiper-slide figure.after:after {content:"AFTER 6WEEKS";} .before-n-after .cont-wrap .inner [class*="swiper-button"] {position:absolute;top:50%;transform:translate(0,-50%);width:6.8rem;height:6.8rem;z-index:1;} .before-n-after .cont-wrap .inner [class*="swiper-button"].swiper-button-disabled {opacity:.25;} .before-n-after .cont-wrap .inner .swiper-button-prev {left:6rem;} .before-n-after .cont-wrap .inner .swiper-button-next {right:6rem;} .treatment-areas {position:relative;} .treatment-areas picture {display:flex;} .treatment-areas picture img {width:100%;min-height:120rem;object-fit:cover;} .treatment-areas .cont-wrap {position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:start;align-items:center;padding:14rem 2rem 0;} @media only screen and (max-width:840px){ .point-swipe-wrap {padding:6rem 2rem 8rem;} .point-swipe-wrap .swiper-container {margin-top:4rem;} .point-swipe-wrap .swiper-slide h3 {font-size:2rem;margin-top:2rem;} .point-swipe-wrap .swiper-slide p {font-size:1.4rem;font-weight:400;margin-top:1rem;} .point-swipe-wrap .swiper-slide p.point{font-size:1.2rem;} .point-swipe-wrap .swiper-slide p.point>strong{font-size:1.4rem;} .point-swipe-wrap .customer-pagination {margin-top:2rem;} .point-swipe-wrap .customer-pagination .swiper-pagination-bullet {width:1rem;height:1rem;} .what-is-it-wrap picture img {max-height:60rem;min-height:auto;} .what-is-it-wrap .text {justify-content:start;padding-top:6rem;} .what-is-it-wrap .text .inner {max-width:100%;text-align:center;} .what-is-it-wrap .text p.point {font-size:1.6rem;padding-bottom:2rem;} .what-is-it-wrap .text figure.prd-logo {padding-bottom:4rem;} .what-is-it-wrap .text figure.prd-logo img {max-height:3rem;} .what-is-it-wrap .text h2 {margin:2rem 2rem 0;} .what-is-it-wrap .text h2 span {font-size:3.2rem;} .what-is-it-wrap .text h2 span em {bottom:calc(100% + .4rem);font-size:1.3rem;} .what-is-it-wrap .text h2 span:before {top:-1.6rem;right:-2rem;width:2rem;height:2rem;} .what-is-it-wrap .text p.desc {font-size:1.4rem;margin-top:3rem;} .sub-gif picture img {min-height:auto;} .before-n-after picture img {min-height:56rem;} .before-n-after .cont-wrap .inner {padding:4rem 6rem 4rem;} .before-n-after .cont-wrap .inner .swiper-slide .type {gap:2rem 2.4rem;} .before-n-after .cont-wrap .inner .swiper-slide .type span {font-size:1.6rem;padding:1rem 1rem;} .before-n-after .cont-wrap .inner .swiper-slide {gap:1rem;} .before-n-after .cont-wrap .inner .swiper-slide figure {padding-bottom:2rem;} .before-n-after .cont-wrap .inner .swiper-slide figure.before:after {font-size:1.2rem;} .before-n-after .cont-wrap .inner .swiper-slide figure.after:after {font-size:1.2rem;} .before-n-after .cont-wrap .inner [class*="swiper-button"] {width:4rem;height:4rem;} .before-n-after .cont-wrap .inner .swiper-button-prev {left:1rem;} .before-n-after .cont-wrap .inner .swiper-button-next {right:1rem;} .treatment-areas picture img {min-height:50rem;} .treatment-areas .cont-wrap {padding-top:4rem;} } @media only screen and (max-width:480px){ .what-is-it-wrap picture img {max-height:none;height:62rem;} .sub.xerf .what-is-it-wrap picture img {height:66rem;} .sub.rejuran_hb_plus .what-is-it-wrap picture img {height:66rem;} .sub.lifting .what-is-it-wrap picture img {height:74rem;} .before-n-after picture img {min-height:46rem;} .before-n-after .cont-wrap .inner {padding:4rem 5rem 4rem;} .before-n-after .cont-wrap .inner [class*="swiper-button"] {top:calc(50% + 1.6rem);width:3rem;height:3rem;} } .sub.treatments.acne-erasing {} /* 03.RESULTS */ /* 03.RESULTS > */ .sub.result .before-after-wrap {padding:16rem 2rem 18rem;} .sub.result .before-after-wrap .inner {max-width:110rem;margin:0 auto;} .sub.result .before-after-wrap .inner ul.tabs {display:grid;grid-template-columns:repeat(7, 1fr);margin-top:8rem;border-top:1px solid var(--primary-color);border-left:1px solid var(--primary-color)} .sub.result .before-after-wrap .inner ul.tabs li {border-right:1px solid var(--primary-color);border-bottom:1px solid var(--primary-color);} .sub.result .before-after-wrap .inner ul.tabs li a {display:flex;justify-content:center;align-items:center;width:100%;height:100%;font-size:1.8rem;font-weight:600;text-align:center;padding:1.6rem;} .sub.result .before-after-wrap .inner ul.tabs li.active a {color:#fff;background-color:var(--primary-color);} .sub.result .before-after-wrap .inner .list-container {margin-top:4rem;} .sub.result .before-after-wrap .inner .list-container ul {display:grid;grid-template-columns:repeat(3, 1fr);gap:4rem 1rem;} .sub.result .before-after-wrap .inner .list-container ul li .thumb {position:relative;overflow:hidden;border:1px solid #d6d6d6;font-size:0;line-height:0;} /*.sub.result .before-after-wrap .inner .list-container ul li .thumb figure:after {content:"Before";color:#fff;font-size:1.6rem;font-weight:600;display:flex;justify-content:center;align-items:center;position:absolute;top:0;left:0;width:50%;height:100%;backdrop-filter:blur(5px);background-color:rgba(0,0,0,.85);backdrio-filter:blur(10px);}*/ .sub.result .before-after-wrap .inner .list-container ul li .thumb figure img {position:absolute;top:50%;left:0;transform:translate(0,-50%);} .sub.result .before-after-wrap .inner .list-container ul li p {font-size:2rem;text-align:center;margin-top:1rem;} .sub.result.view .before-after-wrap {padding-top:30rem;} .sub.result .before-after-wrap .inner .view-container {border-top:.3rem solid #292a2f;margin-top:8rem;} .sub.result .before-after-wrap .inner .view-container .board-title {font-size:3rem;text-align:center;border-bottom:.3rem solid #c4c4c4;padding:2rem 2rem;} .sub.result .before-after-wrap .inner .view-container .board-content {padding:5rem 0;border-bottom:.3rem solid #c4c4c4;} .sub.result .before-after-wrap .inner .view-container .board-content figure {text-align:center;} .sub.result .before-after-wrap .inner .view-container .board-content p {color:#8c8c8c;font-size:2rem;} .sub.result .before-after-wrap .inner .view-container .board-foot {display:flex;justify-content:space-between;margin-top:3rem;} .sub.result .before-after-wrap .inner .view-container .board-foot .left, .sub.result .before-after-wrap .inner .view-container .board-foot .right {display:flex;gap:.6rem;} .sub.result .before-after-wrap .inner .view-container .board-foot a {color:#b5b5b5;font-size:2rem;line-height:7rem;font-weight:600;text-align:center;min-width:17.8rem;border:1px solid #b5b5b5;} .sub.result .before-after-wrap .inner .view-container .board-foot a.back {color:var(--primary-color);border-color:var(--primary-color);} @media only screen and (max-width:840px){ .sub.result .before-after-wrap {padding:6rem 2rem;} .sub.result .before-after-wrap .inner ul.tabs {grid-template-columns:repeat(3, 1fr);margin-top:4rem;} .sub.result .before-after-wrap .inner ul.tabs li a {font-size:1.6rem;} .sub.result .before-after-wrap .inner .list-container ul {grid-template-columns:repeat(2, 1fr);gap:2rem 1rem;} .sub.result .before-after-wrap .inner .list-container ul li p {font-size:1.6rem;} .sub.result.view .before-after-wrap {padding-top:10rem;} .sub.result .before-after-wrap .inner .view-container {margin-top:4rem;} .sub.result .before-after-wrap .inner .view-container .board-title {font-size:2rem;} .sub.result .before-after-wrap .inner .view-container .board-content p {font-size:1.6rem;} .sub.result .before-after-wrap .inner .view-container .board-foot a {font-size:1.6rem;line-height:4rem;min-width:8rem;padding:0 1rem;} .sub.result .before-after-wrap .inner .view-container .board-foot a {font-size:1.6rem;line-height:4rem;min-width:8rem;padding:0 1rem;} } @media only screen and (max-width:480px){ .sub.result .before-after-wrap .inner ul.tabs {grid-template-columns:repeat(2, 1fr);} .sub.result .before-after-wrap .inner ul.tabs li a {font-size:1.4rem;padding:1rem;} .sub.result .before-after-wrap .inner .list-container ul li p {font-size:1.4rem;} } /* 04.CONTACT US */ /* 04.CONTACT US > */ .sub.contactus .contactus-wrap {padding:16rem 2rem 18rem;} .sub.contactus .contactus-wrap .inner {max-width:110rem;margin:0 auto;} .sub.contactus .contactus-wrap .inner p.desc {font-size:2.4rem;font-weight:500;text-align:center;margin-top:4rem;} .sub.contactus .contactus-wrap .inner ul.qrcode-wrap {display:flex;justify-content:center;flex-wrap:wrap;gap:10rem 2rem;margin-top:8rem;} .sub.contactus .contactus-wrap .inner ul.qrcode-wrap li {width:calc(100% / 3 - 4rem);text-align:center;} .sub.contactus .contactus-wrap .inner ul.qrcode-wrap li a {display:inline-block;color:#fff;font-size:2.6rem;font-weight:600;padding:1rem 2.6rem;border-radius:4rem;background-color:#000;margin-top:3rem;} @media only screen and (max-width:1024px){ .sub.contactus .contactus-wrap .inner ul.qrcode-wrap li a {font-size:2rem;} } @media only screen and (max-width:840px){ .sub.contactus .contactus-wrap {padding:6rem 2rem;} .sub.contactus .contactus-wrap .inner p.desc {font-size:1.6rem;margin-top:2rem;} .sub.contactus .contactus-wrap .inner ul.qrcode-wrap {margin-top:4rem;gap:4rem 1rem;} .sub.contactus .contactus-wrap .inner ul.qrcode-wrap li {width:calc(100% / 2 - .5rem);} .sub.contactus .contactus-wrap .inner ul.qrcode-wrap li:nth-child(1) {order:1;} .sub.contactus .contactus-wrap .inner ul.qrcode-wrap li:nth-child(2) {order:3;width:100%;} .sub.contactus .contactus-wrap .inner ul.qrcode-wrap li:nth-child(2) figure {max-width:calc(50% - .5rem);margin:0 auto;} .sub.contactus .contactus-wrap .inner ul.qrcode-wrap li:nth-child(3) {order:2;} .sub.contactus .contactus-wrap .inner ul.qrcode-wrap li:nth-child(4) {order:4;} .sub.contactus .contactus-wrap .inner ul.qrcode-wrap li:nth-child(5) {order:5;} .sub.contactus .contactus-wrap .inner ul.qrcode-wrap li a {font-size:2rem;} } @media only screen and (max-width:540px){ .sub.contactus .contactus-wrap .inner ul.qrcode-wrap li a {font-size:1.3rem;padding:1rem 1.4rem;margin-top:1.4rem;} } /* } 서브 E. */ /* ====================================================================================================================================================== */ /* ====================================================================================================================================================== */