:root{--ani:cubic-bezier(.32,.94,.6,1)} .main .xgap1 {--x-gap:1rem} .main .xgap2 {--x-gap:2rem} .main .xgap3 {--x-gap:3rem} .main .ygap0 {--y-gap:0} .main .ygap3 {--y-gap:3rem} .main .ygap4 {--y-gap:4rem} .main .ygap5 {--y-gap:5rem} .main .Tit {font-size: 3.125rem; line-height: 1.2;} .main .Tit span {color:var(--pointcolor)} /* mainSlide */ #mainSlide {overflow:hidden;position:relative;width:100%; height: 100vh; /* aspect-ratio: 16/8; */ transition:transform .6s var(--ani)} #mainSlide .mainSwiper {opacity:1;/* transform:scale(1.05); */width:100%;height:100%;transition:all 2s var(--ani)} /* #mainSlide .mainSwiper.on {opacity:1;transform:scale(1)} */ #mainSlide .mainSwiper .swiper-slide {height:100%;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .3s} #mainSlide .mainSwiper .swiper-slide-active {transform:skew(0)} #mainSlide .bg {position:absolute;left:0;top:0;width:100%;height:100%;background:center no-repeat;background-size:cover} #mainSlide .bg.bg-1 {background-image:url('/img/main/mainSlide01.jpg')} #mainSlide .inner {position: absolute; width: 90%; max-width: 1256px; height: fit-content; top:0; bottom:0; right:0; left:0; margin: auto;} #mainSlide .Txt {font-size: 3.75rem; font-weight: 700; text-align: center; line-height: 1.2;} #mainSlide .swiper-slide .ani:before {content: attr(data-text); position: absolute; overflow: hidden; white-space: nowrap; color:rgba(255,255,255,.3)} #mainSlide .swiper-slide-active .ani {position: relative; font-size: 3.75rem; display: inline-block;} /* why */ #why .box .Img {border-radius: 0rem; overflow: hidden; transition:all .3s;} #why .box:hover .Img {border-radius: 3.125rem; transition: all .3s;} /* rollingBox */ #rollingBox {width: 100%; overflow: hidden;} #rollingBox .rolling {white-space: nowrap; color: #3aaca9;} #rollingBox .rolling .rolling_text {font-size: 10vw; letter-spacing: 3vw; line-height: 1; opacity: .3; display: inline-block; font-family: var(--pointfont);} /* mind */ #mind .LogoBg {position: absolute; top:-5.3rem; left:-7.5rem; width: 11.8125rem;} #mind .inner {width: fit-content; max-width: 36.375rem;} #mind .inner.R {margin-right: auto;} #mind .inner.L {margin-left: auto;} #mind .box3 {margin-top: -10rem;} #mind .box5 {margin-top: -9rem;} @media(max-width:1340px) { #mind .box3 {margin-top: -8rem;} #mind .box5 {margin-top: -2rem;} } @media(max-width:990px) { #mind .box3 {margin-top: -2rem;} #mind .box4 {margin-top: 5rem;} } @media(max-width:768px) { #mind .LogoBg {left: -1rem;} #mind .inner.R {margin-right: 0; margin-left: auto;} #mind .inner.L {margin-left: 0; margin-right: auto;} #mind .box2 {margin-top: 0rem;} #mind .box3 {margin-top: 0rem;} #mind .box4 {margin-top: 0rem;} } /* treatment */ #treatment .swiper-slide {aspect-ratio: 11/14; border-radius: 30px; padding: 2rem; overflow: hidden; background: no-repeat bottom center / cover;} #treatment .slide1 {background-image: url('/img/main/treatment01.jpg');} #treatment .slide2 {background-image: url('/img/main/treatment02.jpg');} #treatment .slide3 {background-image: url('/img/main/treatment03.jpg');} #treatment .slide4 {background-image: url('/img/main/treatment04.jpg');} #treatment .slide5 {background-image: url('/img/main/treatment05.jpg');} #treatment .slide6 {background-image: url('/img/main/treatment06.jpg');} #treatment .swiper-slide .Desc {opacity: 1; transform: translateY(0px); transition: all 0.5s ease-in-out;} #treatment .swiper-slide-active .Desc {opacity: 0; transform: translateY(-100%); transition: all 0.5s ease-in-out;} #treatment .swiper-slide .Hidden {position: absolute; opacity: 0; top:70%; transition: all 0.4s ease-in-out; transition-delay: 0.1s;} #treatment .swiper-slide-active .Hidden {opacity: 1; top: 2rem; transition: all 0.6s ease-in-out; transition-delay: 0.3s;} #treatment .swiper-slide:after {content:''; width: 100%; height: 50%; position: absolute; left: 0; bottom:0; background: linear-gradient(transparent , #3aaca9); transform: translateY(100%);} #treatment .swiper-slide-active:after { transform: translateY(0%); transition: all 0.4s ease-in-out; transition-delay: 0.1s;} /* with */ #with {background: no-repeat center url('/img/main/withBg.jpg'); background-size: cover;} #with .flexBox {display: flex;} #with .circle {width: 14.375rem; height: 14.375rem; border-radius: 100vmax; position: absolute; top:-1rem; right:-4.5rem;} #with #text {font-family: var(--pointfont); color:var(--pointcolor); letter-spacing: 30px; position: absolute; width: 100%; height: 100%; animation: textRotation 15s linear infinite;} @keyframes textRotation {to {transform: rotate(360deg);}} #with #text span {position: absolute; left: 50%; transform-origin: 0 6.25rem;} #with .character {position: absolute; width: 18.5625rem; right: -48%; top:30%;} #with .DecoTxt {position: absolute; width: 24.9375rem; bottom: 0; right:-2.2rem;} #with .Txt {position: relative; z-index: 3; line-height: 1.2;} #with .Txt.L {top:23%} #with .Txt.R {top:65%; left: 25%;} @media(max-width:1340px) { #with .Txt.R {left: 15%;} } @media(max-width:990px) { #with .flexBox {flex-direction: column;} #with .ImgBox {width: 60%; margin: auto;} #with .box.L {margin-right: auto; width: 100%;} #with .box.R {margin-left: auto; width: 50%;} #with .Txt.R {top:-5vw} #with .DecoTxt {bottom:auto; top:-5vw;} #with .character {right:auto; top:50%; left: -5vw;} } @media(max-width:500px) { #with .ImgBox {width: 80%;} #with .box.R {width: 60%;} #with .Txt.L {top:5vw;} #with .Txt.R {left: -5%;} #with .DecoTxt {top:-15vw; width: 22rem;} } /* awareness */ #awareness .inner {max-width: 1582px; margin-left: auto; padding-top: 9.375rem; position: relative;} #awareness .Txt {font-family: var(--pointfont); color:rgba(58,172,169,.3); font-size: 9.375rem; line-height: 1; opacity: .3; position: absolute; left: -6rem; top: 2.5rem;} #awareness .TxtLg {font-family: var(--pointfont); color:rgba(58,172,169,.3); font-size: 12.5rem; letter-spacing: 3.5rem; line-height: 1; white-space: nowrap; position: relative; bottom: -1.95rem; left: -1rem; margin-top: 3rem;} @media(max-width:500px) { #awareness .Txt {font-size: 6.3rem; left: -1rem; top:4.5rem;} #awareness .TxtLg {font-size: 6rem; letter-spacing: 1rem;} } /* interior */ #interior {background: linear-gradient(#d8eeee, transparent); height: 100%; overflow: hidden;} #interior .inner {height: 50.5rem;} #interior .TxtBox {padding-bottom: 16rem; position: relative; z-index: 3;} #interior .ImgBox {width: 40%; height: 100%; position: absolute; top:0;} #interior .ImgBox.Left {left: 0;} #interior .ImgBox.Right {right:0;} #interior .ImgBox img {position: absolute;} #interior .Img1 {top:1rem; left: 12rem; width: 20.0625rem;} #interior .Img2 {top:auto; bottom:35%; left: 0; margin: auto; width: 19.625rem;} #interior .Img3 {bottom:2.5rem; left: 13rem; width: 25.875rem;} #interior .Img4 {top:0; right: 3rem; width: 26.125rem;} #interior .Img5 {top:0; bottom:0; right: 0; margin: auto; width: 18.4375rem;} #interior .Img6 {bottom:5rem; right: 6rem; width: 27.6875rem;} @media(max-width:1200px) { #interior .TxtBox {padding-bottom: 0;} #interior .Img1 {} #interior .Img2 {bottom:10%;} #interior .Img3 {bottom:-18%;} #interior .Img4 {} #interior .Img5 {bottom:-20%; right: -5%;} #interior .Img6 {bottom:-5%} } @media(max-width:990px) { #interior .TxtBox {padding-bottom: 3rem;} #interior .inner {height: 60.5rem;} #interior .Img1 {width: 26.125rem; left:-5rem;} #interior .Img2 {left:-8rem; bottom:25%;} #interior .Img3 {left: 5%; bottom: 0%;} #interior .Img4 {width: 20.0625rem; right:-15%; top:5%;} #interior .Img5 {right:-30%;} #interior .Img6 {right:-17%; bottom: 10%; width: 24rem;} } @media(max-width:500px) { #interior .TxtBox {padding-bottom: 8rem;} #interior .ImgBox {width: 45%;} #interior .Img2 {bottom:15%;} #interior .Img4 {right: -25%;} #interior .Img5 {bottom:-37%; right:-50%;} } @media(max-width:400px) { #interior .ImgBox {width: 52%;} } /* notice */ #notice .swiper-slide {position: relative; padding-right: 2rem;} #notice .swiper-slide:after {content:''; width: 1px; height: 9.375rem; background-color: #aaa; position: absolute; right:1rem; top:0; bottom:0; margin: auto;} #notice .swiper-pagination-progressbar {position: relative; margin-top: 4rem; background-color: #cecece;} #notice .swiper-pagination-progressbar-fill {background-color: var(--pointcolor);} /* info */ #info .root_daum_roughmap {width: 100%; height: 100%;} #info .root_daum_roughmap .wrap_map {height: 100%;} #info .map_cover {width: 100%; height: 100%; background-color: rgba(0,0,0,.1); position: absolute; top:0; left: 0; right:0; bottom:0; margin: auto; z-index: 3; mix-blend-mode: color;} #info .Btnbox {display: flex; align-items: center; position: absolute; bottom:0; left: 0; z-index: 5;} #info .Btnbox a {display: flex; align-items: center; gap:0 1rem; padding: .8rem 2.8rem; background-color: #fff; position: relative;} #info .Btnbox a:first-child:after {content:''; width: 2px; height: 70%; background-color: #b3b3b3; position: absolute; right:0; top:0; bottom:0; margin: auto;} #info ul {padding: 0 2rem;} #info ul li {padding: 2.9rem 0;} #info ul li:nth-child(2) {border-top: 1px solid #aaa; border-bottom:1px solid #aaa;} #info .TbTit {width: 7.5rem; text-align: justify; padding-right: 2rem; height: 30px; display: block; font-weight: 300;} #info .TbTit:after {content:''; display: inline-block; width: 100%;} @media(max-width:768px) { #info .root_daum_roughmap, #info .root_daum_roughmap .wrap_map {aspect-ratio: 1 / 1;} #info ul {padding: 0;} #info ul li:nth-child(1) {border-top: 1px solid #aaa;} } /* footer */ footer {padding: 5rem 0; background-color: #000; color:#f7f7f2;} footer a {color:#f7f7f2;} footer .footerLogo {margin-left: auto; width: 13.8125rem;} footer .Line {height: 1px; width: 100%; background-color: rgba(255,255,255,.1); margin: 4rem 0;} footer .infoLink {display: flex; align-items: center; justify-content: flex-end;} footer .infoLink a {position: relative; padding-left: 2rem;} footer .infoLink a:after {content:''; width: 1px; height: 70%; background-color: #f7f7f2; position: absolute; left: 1rem; top:0; bottom:0; margin: auto;} footer .infoLink li:first-child a:after {display: none} @media(max-width:500px) { footer {text-align: center;} footer .footerLogo {margin-right: auto;} footer .infoLink {justify-content: center;} }