@charset "utf-8";

/*
 * main.css
 * 메인영역 삽입 추가하시면됩니다. 아래 커스텀진행하세요.
 *
 * 1) main visual
 * 
 */
 
/* visual */
.visual{position:relative; width:100%; height:100vh;}
.visual .swiper-slide:before{content:''; position:absolute; left:0; top:0; width:100%; height:100%;}
.visual .swiper-slide-active:before{animation:visual_img 2s both;}
.visual .s1:before{background:url('/images/main/mainVisual01.jpg') no-repeat 50% / cover;}
.visual .s2:before{background:url('/images/main/mainVisual02.jpg') no-repeat 50% / cover;}
.visual .s3:before{background:url('/images/main/mainVisual03.jpg') no-repeat 50% / cover;}
.visual .s4:before{background:url('/images/main/mainVisual04.jpg') no-repeat 50% / cover;}
.visual .txt{display:flex; flex-direction:column; justify-content:center; height:100%; color:#fff;}
.visual .txt h3{margin-top:-30rem; font-weight:normal; font-size:40rem; opacity:0; line-height:1.5;}
.visual .txt h3 > br.show_mo{display:none;}
.visual .txt h2{margin-top:20rem; font-weight:normal; font-size:70rem; opacity:0;}
.visual .txt span{margin-top:60rem; font-weight:300; font-size:22rem; opacity:0; line-height:1.5;}
.visual .txt span > br.show_mo{display:none;}
.visual .txt b{font-weight:bold;}
.visual .swiper-slide-active .txt h3{animation:visual_txt 1s both;}
.visual .swiper-slide-active .txt h2{animation:visual_txt 1s 0.3s both;}
.visual .swiper-slide-active .txt span{animation:visual_txt 1s 0.5s both;}
.visual .ctrl{position:absolute; z-index:5; right:50rem; top:50%; transform:translateY(-50%);}
.visual .ctrlPlay{position:relative; margin-left:auto; margin-top:60rem; aspect-ratio:1; width:100rem; display:flex; align-items:center; justify-content:center;}
.visual .circle, .visual .circle-opacity{position:absolute; inset:0; width:100%; height:100%; stroke-width:2rem; stroke:#fff; fill:none; stroke-dashoffset:calc(var(--stroke-dasharray) * 1px * (1 - var(--progress))); stroke-dasharray:var(--stroke-dasharray); transform: rotate(-90deg);}
.visual .circle{--progress:0; --stroke-dasharray:208; stroke-dashoffset:calc(var(--stroke-dasharray) * 1px * (1 - var(--progress))); stroke-dasharray:var(--stroke-dasharray) }
.visual .circle-opacity{opacity: .3;}
.visual .state-btn{width:100%; height:100%; display:grid; place-content:center; cursor:pointer; pointer-events:auto; z-index:1; background:none;}
.visual .state-icon{display:block; width:16rem; height:15rem; background:#fff;}
.visual .state-icon:not(.isPlay){margin-left:3rem; clip-path:polygon(1rem 0, 15rem 50%, 1rem 100%);}
.visual .state-icon.isPlay{clip-path:polygon(0 100%, 0 0, 5rem 0, 5rem 100%, 11rem 100%, 11rem 0, 100% 0, 100% 100%);}
.visual .ctrlPaging{position:relative; bottom:auto; top:auto; left:auto; right:auto;}
.visual .swiper-pagination-bullet{display:block; margin-left:auto !important; margin-right:auto !important; width:10rem; height:10rem; background:#fff; border-radius:50%; opacity:.4;}
.visual .swiper-pagination-bullet+.swiper-pagination-bullet{margin-top:40rem;}
.visual .swiper-pagination-bullet-active{opacity:1;}
.scrlUi{display:flex; flex-direction:row-reverse; position:absolute; overflow:hidden; left:50rem; bottom:50rem; z-index:5; transform:rotate(-90deg); transform-origin:left top;}
.scrlUi p{float:left; margin-left:30rem; font-size:14rem; color:#fff; opacity:0.8; font-family:var(--font-mont);}
.scrlUi span{display:block; transform:rotate(180deg); float:right; position:relative; margin-top:7rem; width:130rem; height:2px; background:rgba(255, 255, 255, 0.3);}
.scrlUi span:after{content:''; display:block; position:absolute; top:0; left:0; width:0; height:2px; background:#fff; animation:scroll 3s infinite;}
@keyframes scroll{100%{width:100%;}}
@keyframes move{100%{left:175px;}}
@keyframes visual_img{
    0%{transform:scale(1.05);}
    100%{transform:scale(1);}
}
@keyframes visual_txt{
    0%{transform:translateY(20rem); opacity:0;}
    100%{transform:translateY(0); opacity:1;}
}
@keyframes scrollUi{
    0%{height:0;}
    100%{height:100%;}
}
@media(max-width:1024px){
    .scrlUi{left:4%; bottom:0;}
    .scrlUi p{display:none;}
    .scrlUi span{margin-top:0;}
    .visual .ctrl{right:4%;}
}
@media(max-width:768px){
    .visual .txt h3{font-size:30rem;}
    .visual .txt h2{font-size:60rem;}
    .scrlUi span{width:100rem;}
}
@media(max-width:480px){
    .visual .txt h3{font-size:19rem;}
    .visual .txt h2{font-size:35rem;}
    .visual .txt span{margin-top:40rem; font-size:16rem;}
    .visual .txt span > br.show_mo{display:block;}
    .visual .ctrl{display:flex; align-items:center; top:auto; bottom:20rem; transform:none;}
    .visual .ctrlPaging{display:flex;}
    .visual .swiper-pagination-bullet{width:8rem; height:8rem;}
    .visual .swiper-pagination-bullet+.swiper-pagination-bullet{margin-top:0; margin-left:25rem;}
    .visual .ctrlPlay{margin-top:0; margin-left:25rem;}
}


/* main common */
:root{
    --fs20 : 20rem;
    --fs18 : 18rem;
    --fs16 : 16rem;
    
    --pt200 : 200rem;
    --pb200 : 200rem;
    --pt150 : 150rem;
    --pb150 : 150rem;
    --pt100 : 100rem;
    --pb100 : 100rem;
}
@media(max-width:1024px){
    :root{
        --pt200 : 150rem;
        --pb200 : 150rem;
        --pt150 : 100rem;
        --pb150 : 100rem;
        --pt100 : 80rem;
        --pb100 : 80rem;
    }
}
@media(max-width:768px){
    :root{
        --pt200 : 100rem;
        --pb200 : 100rem;
    }
}
@media(max-width:480px){
    :root{
        --fs20 : 17rem;
        --fs18 : 15rem;
        --fs16 : 14rem;
        
        --pt200 : 70rem;
        --pb200 : 70rem;
        --pt150 : 70rem;
        --pb150 : 70rem;
        --pt100 : 60rem;
        --pb100 : 60rem;
    }
}

main#content *{box-sizing:border-box; word-break:keep-all;}
article{position:relative; overflow:hidden;}
@media(max-width:1024px){}
@media(max-width:768px){}
@media(max-width:480px){}


/* about */
.about{padding:var(--pt200) 0 var(--pb200);}
.about .txtWrap{display:flex; justify-content:space-between;}
.about .txtWrap_t{padding-right:0; width:calc(100% - 640rem);}
.about .txtWrap_t h2{margin-bottom:50rem; font-size:50rem; font-weight:normal; color:#000; line-height:1.5;}
.about .txtWrap_t b{font-weight:bold; color:var(--color-point);}
.about .txtWrap_t p{font-size:var(--fs20); font-weight:300; color:#444; line-height:1.6;}
.about .txtWrap_t p+p{margin-top:25rem;}
.about .txtWrap_img{display:block; position:relative; margin-top:160rem; width:640rem;}
.about .txtWrap_img .img{display:block; width:100%; border-radius:250rem;}
.about .txtWrap_img .obj{display:block; position:absolute; right:-90rem; top:-190rem; width:378rem; opacity:.1; z-index:-1;}
.about .marquee{display:flex; position:relative; margin-top:-70rem; overflow:hidden; z-index:-1;}
.about .marqueeWrap{flex:none; display:flex;}
.about .marqueeWrap_holder{flex:none; align-items:center; display:flex; white-space:nowrap; will-change:transform; animation:marquee 350s linear infinite;}
.about .marqueeWrap_holder__cont{flex:none; display:flex; align-items:center; margin:0 100rem; font-size:150rem; font-family:var(--font-cor); font-weight:bold; color:#000; opacity:.05;}
.about .swiperWrap{margin-top:160rem;}
.about .swiper{overflow:visible;}
.about .swiper-slide{overflow:hidden; margin:0 25rem; height:360rem;}
.about .swiper-slide.shape1{width:540rem; border-radius:10rem;}
.about .swiper-slide.shape2{width:500rem; border-radius:10rem 200rem 200rem 10rem;}
.about .swiper-slide.shape3{width:360rem; border-radius:50%;}
.about .swiper-slide img{display:block; width:auto; height:100%; object-fit:cover;}
@keyframes marquee {
  0% {transform: translateX(0);}
  100% {transform: translateX(-70%)}
}
@media(max-width:1024px){
    .about .txtWrap_t{width:50%;}
    .about .txtWrap_t h2{margin-bottom:35rem; font-size:40rem;}
    .about .txtWrap_img{margin-top:200rem; width:50%;}
    .about .txtWrap_img .obj{top:-42%; right:-14%; width:55%;}
    .about .marquee{margin-top:-40rem;}
    .about .marqueeWrap_holder__cont{font-size:100rem;}
    .about .swiperWrap{margin-top:100rem;}
    .about .swiper-slide{margin:0 15rem; height:300rem;}
    .about .swiper-slide.shape1{width:450rem;}
    .about .swiper-slide.shape2{width:400rem;}
    .about .swiper-slide.shape3{width:300rem;}
}
@media(max-width:768px){
    .about .txtWrap{display:block;}
    .about .txtWrap_t{width:90%;}
    .about .txtWrap_img{margin-top:60rem; margin-left:auto; width:80%;}
    .about .marquee{margin-top:-30rem;}
    .about .marqueeWrap_holder__cont{margin:0 40rem; font-size:80rem;}
    .about .swiperWrap{margin-top:70rem;}
}
@media(max-width:480px){
    .about .txtWrap_t{width:100%;}
    .about .txtWrap_t h2{margin-bottom:25rem; font-size:26rem;}
    .about .txtWrap_t p > br{display:none}
    .about .txtWrap_t p+p{margin-top:20rem;}
    .about .txtWrap_img{margin-top:40rem; width:100%;}
    .about .marquee{margin-top:15rem;}
    .about .marqueeWrap_holder__cont{margin:0 20rem; font-size:50rem;}
    .about .swiperWrap{margin-top:50rem;}
    .about .swiper-slide{margin:0 10rem; height:160rem;}
    .about .swiper-slide.shape1{width:240rem;}
    .about .swiper-slide.shape2{width:200rem; border-radius:10rem 100rem 100rem 10rem;}
    .about .swiper-slide.shape3{width:160rem;}
}


/* 원장님 소개 */
.doctor{padding:var(--pt150) 0 0; background:url('/images/main/doctor_bg.jpg')no-repeat center/cover;}
.doctor .tit_mo{display:none; margin-bottom:50rem; padding:0 4%; font-size:40rem; font-weight:normal; color:#000; line-height:1.5; text-align:center;}
.doctor .tit_mo b{font-weight:bold; color:#844b02;}
.doctor .inr{display:flex; justify-content:space-between; padding:0 110rem 0 140rem;}
.doctor .txt{padding-right:50rem; width:calc(100% - 475rem);}
.doctor .txt h2{margin-bottom:40rem; font-size:40rem; font-weight:normal; color:#000; line-height:1.5;}
.doctor .txt h2 b{font-weight:bold; color:#844b02;}
.doctor .txt em{display:flex; align-items:center; justify-content:center; background:#483a37; border-radius:8rem; color:#fff; width:420rem; height:70rem;}
.doctor .txt em b{display:block; margin-right:20rem; font-family:var(--font-serifK); font-size:35rem; font-weight:500;}
.doctor .txt em i{display:block; margin-top:18rem; font-size:20rem;}
.doctor .list{margin-top:35rem; padding:0 20rem var(--pt100);}
.doctor .list li{padding-left:16rem; font-size:var(--fs18); color:#333; font-weight:300;}
.doctor .list li+li{margin-top:10rem;}
.doctor .list li.part{margin-top:30rem;}
.doctor .list li:before{content:''; display:block; position:absolute; left:0; top:8rem; width:6rem; aspect-ratio:1; background:#483a37; border-radius:50%;}
.doctor .imgWrap{display:block; position:relative;}
.doctor .img{display:block; position:relative; width:475rem; z-index:1;}
.doctor .obj{display:block; position:absolute; right:-30rem; top:70rem; width:300rem; opacity:.5;}
@media(max-width:1024px){
    .doctor .inr{padding:0;}
    .doctor .txt em{width:100%;}
}
@media(max-width:768px){
    .doctor .inr{flex-direction:column-reverse;}
    .doctor .tit_mo{display:block;}
    .doctor .txt{padding-right:0; width:100%;}
    .doctor .txt h2{display:none;}
    .doctor .img{margin:auto; width:350rem;}
    .doctor .obj{right:120rem; top:40rem; width:250rem;}
}
@media(max-width:480px){
    .doctor .tit_mo{margin-bottom:40rem; font-size:26rem;}
    .doctor .txt em{height:58rem;}
    .doctor .txt em b{font-size:24rem;}
    .doctor .txt em i{margin-top:9rem; font-size:18rem;}
    .doctor .list{margin-top:25rem;}
    .doctor .list li{padding-left:12rem;}
    .doctor .list li:before{top:7rem; width:5rem;}
    .doctor .list li.part{margin-top:25rem;}
    .doctor .img{width:170rem;}
    .doctor .obj{right:65rem; top:25rem; width:100rem;}
}


/* 진료과목 */
.treatment{padding:var(--pt200) 0 var(--pb200); background:url('/images/main/treatment_bg.jpg')no-repeat center/cover;}
.treatment li{display:flex; justify-content:space-between; align-items:flex-end;}
.treatment li+li{margin-top:100rem;}
.treatment li:nth-child(even){flex-direction:row-reverse;}
.treatment .img{display:block; width:50%; border-radius:10rem; overflow:hidden;}
.treatment .img img{display:flex; width:100%;}
.treatment .txt{padding:20rem 0; width:calc(50% - 80rem);}
.treatment .txt em{display:block; margin-bottom:20rem; color:var(--color-point); font-size:var(--fs16);}
.treatment .txt h3{font-size:35rem; color:#111;}
.treatment .txt p{margin:40rem 0 50rem; line-height:1.5; font-size:var(--fs18); font-weight:300; color:#333;}
.treatment .txt a{display:block; text-align:center; font-size:var(--fs18); font-weight:500; font-family:var(--font-mont); color:#483a37; width:200rem; height:60rem; line-height:59rem; border-radius:35rem; border:1px solid #483a37; opacity:.6;}
@media(hover:hover){
    .treatment .txt a:hover{opacity:1;}
}
@media(max-width:1024px){
    .treatment li{align-items:unset;}
    .treatment .img{width:45%;}
    .treatment .img img{height:100%; object-fit:cover;}
    .treatment .txt{padding:10rem 0; width:calc(55% - 50rem);}
    .treatment .txt em{margin-bottom:15rem;}
    .treatment .txt h3{font-size:30rem;}
    .treatment .txt p{margin:30rem 0 40rem;}
    .treatment .txt p > br{display:none;}
}
@media(max-width:768px){
    .treatment li+li{margin-top:80rem;}
    .treatment .txt{width:calc(55% - 30rem);}
}
@media(max-width:480px){
    .treatment li{display:block;}
    .treatment li+li{margin-top:60rem;}
    .treatment .img{width:100%;}
    .treatment .txt{margin-top:25rem; padding:0; width:100%; text-align:center;}
    .treatment .txt em{margin-bottom:10rem;}
    .treatment .txt h3{font-size:24rem;}
    .treatment .txt p{margin:20rem 0 30rem;}
    .treatment .txt a{margin:auto; line-height:45rem; height:46rem;}
}


/* 고객센터 및 진료시간 */
.cs{position:relative; padding:var(--pt150) 0 0; background:url('/images/main/cs_bg.jpg')no-repeat center/cover;}
.cs .obj{display:block; position:absolute; bottom:-130rem; left:-130rem; width:378rem; opacity:.05;}
.cs .inr{z-index:1;}
.cs .info{padding:50rem 0; width:calc(50% - 100rem);}
.cs .info > em{display:block; font-size:var(--fs16); color:#ffeca7; font-weight:bold;}
.cs .info .num{display:block; margin:35rem 0 20rem; font-size:50rem; font-weight:600; color:#fff; font-family:var(--font-mont); pointer-events:all;}
.cs .info .address{position:relative; padding-left:28rem; font-size:var(--fs20); line-height:1.6; color:#fff;}
.cs .info .address:before{content:''; display:block; position:absolute; left:0; top:4rem; width:17rem; height:22rem; background:url('/images/common/icon_location.svg')no-repeat center/contain;}
.cs .info ul.time{display:grid; grid-template-columns:repeat(2,1fr); margin:45rem 0 30rem; border-top:2px solid #fff;}
.cs .info ul.time li{display:flex; padding:20rem 15rem; border-bottom:1px solid rgba(255,255,255,0.3); font-size:var(--fs18); color:#fff;}
.cs .info ul.time span{display:block; width:90rem; font-weight:bold;}
.cs .info ul.time p{width:calc(100% - 90rem); font-weight:300;}
.cs .info ul.guide li{position:relative; padding-left:12rem; font-weight:300; font-size:var(--fs16); color:#d0d0d0; line-height:1.5;}
.cs .info ul.guide li+li{margin-top:10rem;}
.cs .info ul.guide li:before{content:'*'; display:block; position:absolute; left:0; top:0;}
.cs .info ul.guide li b{font-weight:bold; color:#ffe37c;}
.cs .mapWrap{position:relative; margin-left:auto; right:0; width:50%; height:660rem; overflow:hidden; border-top-left-radius:80rem;}
.cs .map_tabBtn{display:flex; position:absolute; bottom:0; left:0; z-index:2;}
.cs .map_tabBtn li{font-size:var(--fs18); color:#483a37; font-weight:500; background:#fff; border-bottom:none !important; text-align:center; width:180rem; height:60rem; line-height:59rem; cursor:pointer;}
.cs .map_tabBtn li:first-child{border-top:2px solid var(--color-point); border-right:1px solid var(--color-point);}
.cs .map_tabBtn li:last-child{border-top-right-radius:8rem; border-top:2px solid var(--color-point); border-left:1px solid var(--color-point); border-right:2px solid var(--color-point);}
.cs .map_tabBtn li.active{background:var(--color-point);}
.cs .map_tabCnt{position:absolute; left:0; top:0; background:#fff; width:100%; height:100%; opacity:0; visibility:hidden;}
.cs .map_tabCnt.show{opacity:1; visibility:visible;}
.cs .map_tabCnt1 img{display:block; width:100%; height:100%; object-fit:cover; object-position:left top;}
.cs .map_tabCnt2 .root_daum_roughmap{width:100% !important; height:100%;}
.cs .map_tabCnt2 .wrap_map{height:100% !important;}
.cs .map_tabCnt2 .map_border,
.cs .map_tabCnt2 .wrap_controllers{display:none;}
@media(min-width:1501px){
    .cs .inr{position:absolute; top:var(--pt150); left:50%; transform:translateX(-50%); pointer-events:none;}
}
@media(max-width:1700px){
    .cs .info{padding:0; width:calc(50% - 50rem);}
    .cs .info .num{margin:25rem 0 15rem; font-size:45rem;}
    .cs .info ul.time{margin:35rem 0 30rem;}
    .cs .info ul.guide li > br{display:none;}
    .cs .mapWrap{height:570rem;}
}
@media(max-width:1500px){
    .cs{padding:var(--pt150) 0 var(--pt150);}
    .cs .info{width:calc(55% - 50rem);}
    .cs .info ul.time li{padding:20rem 0;}
    .cs .mapWrap{position:absolute; top:50%; transform:translateY(-50%); width:45%; z-index:2; height:510rem;}
    .cs .map_tabCnt1{overflow-x:scroll;}
    .cs .map_tabCnt1 img{width:auto;}
}
@media(max-width:1024px){
    .cs{padding:var(--pt150) 0 0;}
    .cs .obj{display:none;}
    .cs .info{width:100%;}
    .cs .mapWrap{position:relative; top:auto; transform:none; margin-top:50rem; width:96%; height:600rem;}
    .cs .map_tabCnt1 img{width:100%;}
}
@media(max-width:768px){
    .cs .mapWrap{height:540rem;}
}
@media(max-width:480px){
    .cs .info .num{margin:20rem 0 12rem; font-size:32rem;}
    .cs .info .address{padding-left:20rem;}
    .cs .info .address:before{top:3rem; width:14rem; height:18rem;}
    .cs .info ul.time{display:block; margin:30rem 0 25rem;}
    .cs .info ul.time li{padding:18rem 10rem;}
    .cs .info ul.guide li+li{margin-top:8rem;}
    .cs .mapWrap{margin-top:40rem; border-top-left-radius:20rem; height:280rem;}
    .cs .map_tabBtn li{width:120rem; height:42rem; line-height:41rem;}
}