/* main-visual */
.visual-sect{height: 100vh; max-height: 920px;}

.visual01 .visual-bg{background: url(/img_up/shop_pds/seoulyoo/design/img/main-visual01-bg.jpg)center center/cover no-repeat;}
.visual02 .visual-bg{background: url(/img_up/shop_pds/seoulyoo/design/img/main-visual02-bg.jpg)center center/cover no-repeat;}
.visual03 .visual-bg{background: #000}
.main-visual{height: 100%;}
.main-visual .swiper-slide{position: relative; height: 100%;}
.visual-bg{position: absolute; top:50%; left:50%; width: 100%; height: 100%; transform: translate(-50%,-50%);}
.visual-img{}
.visual01 .visual-img{position: absolute; bottom:0; left:50%;}
.visual03 .visual-img{position: absolute; bottom:0; left:25%;}
.visual-desc{position: absolute; transform: translate(-50%,-50%); width: 50%;}
.visual01 .visual-desc{left:44%; top:45%;}
.visual02 .visual-desc{left:40%; top:52%; color: #fff; text-shadow: 0 0 5px rgba(51,51,51,.25); width: 80%; max-width: 720px;}
.visual03 .visual-desc{left:70%; top:52%; color: #fff; width: 40%;}
.visual04 .visual-desc{left:74%; top:52%; width: 40%;}

.main-visual.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom:6%}
.main-visual .swiper-pagination{width: 60%; left:50%; transform:translateX(-50%);}
.main-visual.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{}
.main-visual .swiper-pagination-bullet{border-radius: 0; height: 3px;background: rgba(255,255,255,.57); width:14.375em;}
.main-visual .swiper-pagination-bullet-active{background: rgba(162,189,209,.57);}
.main-visual .video_bg:after{content:''; position: absolute; top:0; left:0; width: 100%;  height: 100%; background: rgba(51,51,51,.18);}

.visual-anim{}
.ani-txt{position: absolute; opacity: 0;}
.ani-txt.txt01{left:52%; top:3.6%; transform: rotate(10deg)}
.ani-txt.txt02{left:59%; top:4.6%; transform: rotate(5deg)}
.ani-txt.txt03{left:66%; top:6.4%; transform: rotate(9deg)}
.ani-txt.txt04{left:75%; top:9.2%; transform: rotate(-1deg)}
.ani-txt.txt05{left:82%; top:11%; transform: rotate(6deg)}
.ani-txt.txt06{left:88%; top:13%; transform: rotate(5deg)}
.ani-txt.txt07{left:95%; top:17.5%; transform: rotate(-8deg)}
.ani-txt.txt08{left:97%; top:21%; transform: rotate(5deg)}

.main-visual .swiper-slide-active .ani-txt{animation: fadeInDown1 .7s forwards;}
.main-visual .swiper-slide-active .ani-txt.txt01{animation: fadeInDown1 .7s forwards 1.3s;}
.main-visual .swiper-slide-active .ani-txt.txt02{animation: fadeInDown2 .7s forwards 1.4s;}
.main-visual .swiper-slide-active .ani-txt.txt03{animation: fadeInDown3 .7s forwards 1.5s;}
.main-visual .swiper-slide-active .ani-txt.txt04{animation: fadeInDown4 .7s forwards 1.6s;}
.main-visual .swiper-slide-active .ani-txt.txt05{animation: fadeInDown5 .7s forwards 1.7s;}
.main-visual .swiper-slide-active .ani-txt.txt06{animation: fadeInDown6 .7s forwards 1.8s;}
.main-visual .swiper-slide-active .ani-txt.txt07{animation: fadeInDown7 .7s forwards 1.9s;}
.main-visual .swiper-slide-active .ani-txt.txt08{animation: fadeInDown8 .7s forwards 2.0s;}

.main-visual .swiper-slide .slide-ani{overflow: hidden;}
.main-visual .swiper-slide .slide-ani .txt-inner{ transition-property: transform; transition-duration: .45s; transform: translateY(-100%);display: block;}
.main-visual .swiper-slide-active .slide-ani .txt-inner{ transform: translateY(0); }

.main-visual .swiper-slide .txt-right{transform:translateX(100px); transition-property: all; transition-duration: 1.2s; opacity: 0; word-break: keep-all;}
.main-visual .swiper-slide-active .txt-right{transform:translateX(0); opacity: 1;}


@keyframes fadeInDown1 {
    0%{
		transform: rotate(10deg) translateY(-10px);
        opacity: 0;
    }
    100%{
		transform: rotate(10deg) translateY(0px);
        opacity: 1;
    }
}
@keyframes fadeInDown2 {
    0%{
		transform: rotate(5deg) translateY(-10px);
        opacity: 0;
    }
    100%{
		transform: rotate(5deg) translateY(0px);
        opacity: 1;
    }
}
@keyframes fadeInDown3 {
    0%{
		transform: rotate(9deg) translateY(-10px);
        opacity: 0;
    }
    100%{
		transform: rotate(9deg) translateY(0px);
        opacity: 1;
    }
}
@keyframes fadeInDown4 {
    0%{
		transform: rotate(-1deg) translateY(-10px);
        opacity: 0;
    }
    100%{
		transform: rotate(-1deg) translateY(0px);
        opacity: 1;
    }
}
@keyframes fadeInDown5 {
    0%{
		transform: rotate(6deg) translateY(-10px);
        opacity: 0;
    }
    100%{
		transform: rotate(6deg) translateY(0px);
        opacity: 1;
    }
}
@keyframes fadeInDown6 {
    0%{
		transform: rotate(5deg) translateY(-10px);
        opacity: 0;
    }
    100%{
		transform: rotate(5deg) translateY(0px);
        opacity: 1;
    }
}
@keyframes fadeInDown7 {
    0%{
		transform: rotate(-8deg) translateY(-10px);
        opacity: 0;
    }
    100%{
		transform: rotate(-8deg) translateY(0px);
        opacity: 1;
    }
}
@keyframes fadeInDown8 {
    0%{
		transform: rotate(5deg) translateY(-10px);
        opacity: 0;
    }
    100%{
		transform: rotate(5deg) translateY(0px);
        opacity: 1;
    }
}


.video_bg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   pointer-events: none;
   overflow: hidden;
}
.video_bg iframe {
   width: 100vw;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   min-height: 100vh;
   min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}


.main-visual .swiper-slide-active .visual-bg{animation: scl1 1.6s forwards ease;}
.main-visual .swiper-slide-active .visual-img{animation: scl2 2.2s forwards ease;}
.main-visual .swiper-slide-active.visual02 .visual-bg{animation:none}
.main-visual .swiper-slide-active.visual04 .visual-bg{animation:none}
.main-visual .swiper-slide-active.visual03 .visual-img{animation:none}
.main-visual .swiper-slide-active.visual03 .visual-img img{animation: scl2 1.4s forwards ease;}


@keyframes scl1{
	0%{
		transform: translate(-50%,-50%) scale(1.1);
	}
	100%{
		transform: translate(-50%,-50%) scale(1);
	}
}
@keyframes scl2{
	0%{
		transform: scale(1.12);
	}
	100%{
		transform: scale(1);
	}
}

@keyframes scl3{
	0%{
		transform: translate(-50%,-50%) scale(1.2);
	}
	100%{
		transform: translate(-50%,-50%) scale(1);
	}
}

/* subj-slide */

.scroll-slide-wrap{padding: 15% 0 5% 15%;}
.scroll-slide-wrap .title-area{width: 25rem; }
.scroll-slide-wrap .subj-slider{width: 74%; margin: 0;}

.subj-slider{padding: 0 0 5%;}
.subj-slider.swiper-container-horizontal>.swiper-scrollbar{width: 80%;}
.swiper-scrollbar-drag{background: #8cb7d5;}
.scroll-slide-wrap .title-copy{ position: absolute; bottom:9%; left:18%;}

.subj-slider .img-area{padding: 68.86% 0 0; position: relative; overflow: hidden}
.img-ani{position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); width: 100%; height: 100%;}
.img-ani img{width: 100%; height: 100%;}
.subj-slider .swiper-slide-active .img-ani{animation: scl3 3s forwards ease;}

.txtline{position: relative;}
.txtline > h2,.txtline > span{overflow: hidden; display: block;}
.txtline > h2:nth-child(2) .txt-ani{transition-delay: .05s;}
.txtline > h2:nth-child(3) .txt-ani{transition-delay: .1s;}
.txtline > h2:nth-child(4) .txt-ani{transition-delay: .15s;}

.txtline > span:nth-child(2) .txt-ani{transition-delay: .05s;}
.txtline > span:nth-child(3) .txt-ani{transition-delay: .1s;}
.txtline > span:nth-child(4) .txt-ani{transition-delay: .15s;}

.txtline .txt-ani{display: block; transition-duration: .45s; transition-property: transform; transform: translateY(100%)}
.txtline.on .txt-ani{transform: translateY(0)}
.delay-100{transition-delay: .1s}
.delay-200{transition-delay: .2s}
.delay-300{transition-delay: .3s}
.delay-400{transition-delay: .4s}
.delay-500{transition-delay: .5s}
.delay-600{transition-delay: .6s}
.delay-700{transition-delay: .7s}
.delay-800{transition-delay: .8s}
.delay-900{transition-delay: .9s}
.delay-1000{transition-delay: 1.0s}

.dura-100{transition-duration: .1s}
.dura-200{transition-duration: .2s}
.dura-300{transition-duration: .3s}
.dura-400{transition-duration: .4s}
.dura-500{transition-duration: .5s}
.dura-600{transition-duration: .6s}
.dura-700{transition-duration: .7s}
.dura-800{transition-duration: .8s}
.dura-900{transition-duration: .9s}
.dura-1000{transition-duration: 1.0s}



.waypoint.fadeUp,.waypoint .fadeUp{opacity: 0; transition-property: all; transition-duration: 0.8s; transform: translateY(10%)}
.waypoint.fadeUp.on,.waypoint.on .fadeUp{opacity: 1;  transform: translateY(0);}
.waypoint.fadeLeft,.waypoint .fadeLeft{opacity: 0; transition-property: all; transition-duration: 0.8s; transform: translateX(20%)}
.waypoint.fadeLeft.on,.waypoint.on .fadeLeft{opacity: 1;  transform: translateX(0);}

.waypoint.fadeRight,.waypoint .fadeRight{opacity: 0; transition-property: all; transition-duration: 0.8s; transform: translateX(-20%)}
.waypoint.fadeRight.on,.waypoint.on .fadeRight{opacity: 1;  transform: translateX(0);}

.waypoint2.fadeUp,.waypoint2 .fadeUp{opacity: 0; transition-property: all; transition-duration: 0.8s; transform: translateY(10%)}
.waypoint2.fadeUp.on,.waypoint2.on .fadeUp{opacity: 1;  transform: translateY(0);}
.waypoint2.fadeLeft,.waypoint2 .fadeLeft{opacity: 0; transition-property: all; transition-duration: 0.8s; transform: translateX(20%)}
.waypoint2.fadeLeft.on,.waypoint2.on .fadeLeft{opacity: 1;  transform: translateX(0);}

.waypoint2.fadeRight,.waypoint2 .fadeRight{opacity: 0; transition-property: all; transition-duration: 0.8s; transform: translateX(-20%)}
.waypoint2.fadeRight.on,.waypoint2.on .fadeRight{opacity: 1;  transform: translateX(0);}


.waypoint .zoomIn,.waypoint2 .zoomIn{
	transition-property: all; transition-duration: 1.2s; transform: scale(1.2);
}
.waypoint.on .zoomIn,.waypoint2.on .zoomIn{
	transform: scale(1.0);
}



/* 소독시스템 */

.clean-sys{padding: 0 0 4%;}
.clean-container{width: 96%; padding: 0 15px; position: relative; max-width: 1366px; margin: auto}
.clean-box{float: right; background: rgba(248,248,248,.88); height: 100%; padding: 8% 3.3% 6.6%; width: 50%; max-width: 425px;}


.more-btn{position: relative;}
.more-line{width: calc(100% - 4rem); height: 3px; position: absolute; top:33%; right:0; border-radius: 2px}
.c1 .more-line{background: #9fbfd6;}

.pin-line{width:6.438rem; height:4.625rem ;position: absolute; bottom:-.6rem; left:-1rem; background: url(/img_up/shop_pds/seoulyoo/design/img/main-point-line.png)center center /100% no-repeat;}

.clean-desc{position: absolute; left:5rem; bottom:0; width: 50%; max-width: 480px; }
.hr_50{width: 50px; display: inline-block; height: 2px; background: #bfbfbf;}
.c_w .hr_50{background: #fff;}
.hr_50 hr{margin: 0; border:0; height: 100%;}


.clean-video-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
}

.clean-video-bg iframe {
	width: 100vw;
	height: 56.25vw;
	/* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
	min-height: 100vh;
	min-width: 177.77vh;
	/* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


/* 의료진 섹션 */

.doc-intro{overflow: hidden; transition:all .1s ease .2s; margin: 13rem 0 16rem;}
.doc-intro .container {padding: 3% 15px;}
.doc-intro.plus{ background: #f8f8f8;}
.doc-intro .txt-area{width: 75%; max-width: 640px; padding: 2% 6% 3% 6%;}
.sns-icon-sm{width: 28px; height: 28px; display: inline-block; background: url(/img_up/shop_pds/seoulyoo/design/img/social-icon-sprite.png)top left/400% no-repeat; border-radius:50%; vertical-align: middle; margin-right: .4rem;}
.sns-icon-sm.insta{background-position: left top;}
.sns-icon-sm.yotub{background-position: 33% top;}

.doc-intro .more-btn{position: absolute;bottom: 14%; right:10%}
.doc-intro .plus-btn,
.doc-intro .bg-ani {
	position: absolute;
	left: 68%;
	top: 20%;
}


.plus-btn {
	width: 1.5rem;
	height: 1.5rem;
	border-radius:50%;
	z-index: 0;
	background: #bfbfbf;
	animation: bounce .6s infinite alternate;
	-webkit-animation: bounce .6s infinite alternate;
}

.doc-intro .bg-ani{
	position: absolute; 
	background: #f8f8f8;
	width: 0;
	height: 0;
	border-radius:50%;
	transform: translate(-50%,-50%);
	transition: all .6s ease;
	z-index: -2;
	visibility: hidden;
}

.plus .bg-ani {
	width: 120vw;
	height: 120vw;
	visibility: visible;
}

@keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}

.plus .plus-btn{background: #f8f8f8;}
.plus .plus-btn button{color: #f8f8f8; background: #f8f8f8;}


.plus-btn button{background: #bfbfbf; width: 100%; height: 100%; padding: 0; border:0;  color: #fff; cursor: pointer; border-radius: 50%;}
/*.doc-intro .container{overflow: hidden;}*/
.doc-intro .doc-img-area{position: absolute; bottom:0; right:-4%; width: 32%;}
.doc-intro .memi-txt-img{position: absolute; width: 85%; top:10%; left:calc(50% - 100px); z-index: -1;}

.plus-add{display: none; opacity: 0;}
.doc-intro .plus-add{position: absolute; left:12%;top:100%; transform: translateY(-50%);}
.plus .plus-remove{opacity: 0;}
.plus .plus-add{opacity: 1; display: block;}

.career-list{font-size: 1.125rem; font-weight: 300; }
.career-list.plus-add{width: 200%; max-width: 850px}
.career-list li{line-height: 1.4; padding: .5rem 0;}


.paper-wrap{position: relative; width: 65%; max-width: 785px; }
.paper-inner{padding: 40% 0 0;}
.paper-wrap .paper-img{position: absolute; top:0; width: 27.5%; max-width: 212px; box-shadow: -2px 3px 6px rgba(0,0,0,.15)}
.paper-wrap .paper-img img{max-width: 100%;}
.paper-wrap .paper-img.p01{left:0;}
.paper-wrap .paper-img.p02{left:14%; z-index: 1;}
.paper-wrap .paper-img.p03{left:28%; z-index: 2}
.paper-wrap .paper-img.p04{left:41%; z-index: 3}
.paper-wrap .paper-img.p05{left:55%; z-index: 4}
.paper-wrap .paper-img.p06{left:74%; z-index: 5;}

/* youtube area */
.youtube-sect{background: #f7f7f7; padding: 6.6% 0 2%; position: relative; overflow: hidden;}
.bg-img-yt{position: absolute; left:0%; top:45%; width: 39%; z-index: 0;}
.bg-img-yt img{width: 100%;}
.youtube-sect .container{z-index: 1;}
.youtube-sect .title-area{width: 32%;}
.video-area{width: 66%;}
.play-area{position: relative; width: 100%; padding-bottom: 56.25%; z-index: 1;}
.play-area iframe{position: absolute; width: 100%; height: 100%;}

.video-thumb-list li{margin-right: .6rem; cursor: pointer;}
.video-thumb-list li:last-child{margin-right: 0;}
.video-thumb-list li button{padding: 0; border: 0; cursor: pointer;}
.video-thumb-click {position: absolute; bottom: 0; width: 100%;}
.video-thumb-click li{width: 100%; margin-right: .6rem; cursor: pointer;}
.video-thumb-click li:last-child{margin-right: 0;}
.video-thumb-click li div{padding: 56.25% 0 0;}

/* before & after */

.ovl{display: inline-block; margin-left: .3rem; position: relative;}
.main-case .ovl{vertical-align: -2px; }
.main-case .ovl:before{bottom: 95%;}
.ovl:before{position: absolute; content:''; bottom:110%; width: 100%; height: 3px; background: #9fbfd6;left:48%; transform: translateX(-50%);}
.main-case .img-area{overflow: hidden;}

.main-case{padding: 8% 0; }
.main-case .title-area{word-break: keep-all;}
.main-case .title-area h2{max-width: 1024px;}
.main-case .title-area blockquote{width: 95%; max-width: 520px;}
.main-case .case-area{width: 49%;}

.case-slider{padding: 5% 10%;}
.prog-bar{width: 80%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative;}
.prog-bar:after{position: absolute; content:''; top:48%; left:0; width: 100%; height: 2px; background: #ededed; z-index: -1;}
.prog-slider{width: 2.750rem; height: 2.750rem; background: url(/img_up/shop_pds/seoulyoo/design/img/progress-slider.png)left top/100% no-repeat;}
.prog-slider-sm{width: 1.8rem; display: inline-block; vertical-align: middle; margin-right: .4rem; animation:lnr 1.6s infinite linear}
.prog-slider-sm img{width: 100%;}

.main-case .sect-title{right:0; top:2rem; z-index: -1; color: #f1f1f1; font-size: 12.5vw;}

@keyframes lnr {
	0%{transform: translateX(0)}
	25%{transform: translateX(-4px)}
	50%{transform: translateX(0)}
	75%{transform: translateX(4px)}
}


input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
	background: #ffffff;
	width: 2.750rem; height: 2.750rem; background: url(/img_up/shop_pds/seoulyoo/design/img/progress-slider.png)left top/100% no-repeat;
}
input[type=range]::-moz-range-thumb {
	background: #ffffff;
	width: 2.750rem; height: 2.750rem; background: url(/img_up/shop_pds/seoulyoo/design/img/progress-slider.png)left top/100% no-repeat;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;

  /* Hides the slider so custom styles can be added */
  background: transparent; 
  border-color: transparent;
  color: transparent;
}

.logo-w{width: 10.8rem; height: 2.9rem; background: url(/img_up/shop_pds/seoulyoo/design/img/mm_logo_w.png)center center/100% no-repeat;}
.case-num,.case-logo,.case-desc-txt{position: absolute; z-index: 1;}
.case-num{left:3%; top:5%; text-transform: uppercase; border:2px solid #c6e8ff; padding: .8rem .4rem; line-height: 1.4; color: #c6e8ff;width: 4.25rem; height: 4.25rem;}
.case-logo{bottom:6%; left:4%; opacity: .4;}
.case-desc-txt{right:4%; bottom:6%; color: #fff; font-weight: 300}
.title-area{padding: 2% 0 0 3.6%;}

.case-thumb-img{width: 60%;}
.case-thumb-more{width: 40%; padding:6% 4%; text-align: center;}

.case-after{position: absolute; top:0; left:0; width: 100%; z-index: 0; opacity: 0;}

.on .case-after{animation: fadeIn50 1s forwards .3s;}
.on .case-after.move{animation: none;}

@keyframes fadeIn50 {
	0%{
		opacity: 0;
	}
	100%{
		opacity: .5;
	}
}

/* 임플란트 섹션 */
.implant-sect{padding: 5% 0 8%;background: #f7f7f7 ;}
.implant-sect .desc-area .img-area{width: 27.8%; max-width: 530px; margin-right: 1.2%;}
.implant-sect .ovl{vertical-align: -2px;}
.implant-sect .ovl:before{bottom: 95%;}
.imp-case-wrap{width: 56%;}
.imp-case-wrap img{width: 49.5%;}
.imp-case-wrap figcaption{border:1px solid #d2d2d2; padding: 2.3% 3%; background: url(/img_up/shop_pds/seoulyoo/design/img/pattern-4px.png); text-align: center;}

.implant-point > div{width: 49.5%; padding: 3% 2% 0 2%;}
.implant-point .desc-txt{width: 88%; word-break: keep-all;}

.chk-icon{background: url(/img_up/shop_pds/seoulyoo/design/img/chk-icon.png)top left/100% no-repeat; position: absolute; bottom:.4rem;right:-1.6rem; width: 1.2rem; height: 1.2rem;}

.implant-sect .sect-title{
	top:2rem;
	right:0;
	z-index: 1;
	color: #e5e5e5;
}
/* 인비절라인 부분 */

.invis-sect{padding: 10% 0;}
.invis-img{left:-4%; bottom:-6%; z-index: -1}
.invis-sect .desc-area{width: 56%; max-width: 785%;}
.invis-video{padding:64.52% 0 0 0;position:relative;}
.invis-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
.invis-sect .ovl{vertical-align: -2px;}
.invis-sect .ovl:before{bottom: 95%;}
.invis-point > div{ padding: 3% 2% 0 2%;}
.invis-point .point01{width: 55%;}
.invis-point .point02{width: 45%;}
.invis-point .desc-txt{width: 88%; word-break: keep-all;}
.invis-point .point02 .desc-txt{width: 100%;}

.invis-case .case-area{width: 49%;}
.invis-case .case-num{position: relative;}



/* 원장님 인터뷰 영상 부분 */
.interview-video{height: 80vh; max-height: 708px; overflow: hidden; }
.interview-video:after{content:''; position: absolute; top:0; left:0; width: 100%; height: 100%; background: rgba(0,0,0,.25);}
.interview-video .video_bg {top:24%; overflow: visible;}
.interview-video .video_bg iframe{height: 56.25vw; min-height: 100vh;}

.int-desc-container{position: absolute; width: 100%; height: 100%; top:0; left:0; z-index: 1}
.box-title{position: absolute; left:calc(50% - 650px); top:4%; border:2px solid #fff; color: #fff;}
.box-title p{padding: .7rem .5rem; text-align: center; line-height: 1.2;}
.box-title .bg_w{background: #fff; color: #787878;}
.box-desc{position: absolute; left:calc(50% + 100px); top:64%; background: #fff; max-width: 577px; padding: 4% 3.3% 11%; }
.box-desc p{line-height: 2;}
.box-desc .sign{position: absolute; bottom: 7%; right: 8%;}

.interview-sect .img-area{position: absolute; top:52%; left:32%; transform: translate(-50%,-50%);}
.interior-desc.mobile-content .img-area img{width: 100%;}

/* 인테리어 부분 */
.interior-sect{background:#f9f9f9 url(/img_up/shop_pds/seoulyoo/design/img/interior-bg.jpg)top center no-repeat; padding: 20% 0 7%; overflow: hidden}

.interior-video-area{position: relative; padding: 51.25% 0 0;}
.interior-video-area iframe{position:absolute;top:0;left:0;width:100%;height:100%;}

.interior-sect .sect-tit{position: absolute; top:-8%; left:70%; font-size: 13.125rem; z-index: 0;}
.floor-desc{position: absolute; top:-5%; right:-6.6%;}
.video-progress{width: 85%; margin: auto; padding:1%;}
.video-desc-txt{color: #455354;}
.video-prog-bg{height: 2px; width: 70%; background: #d2d2d2; position: relative;}
.video-prog-bar{position: absolute; left:0; width: 6%; height: 100%; background: #1b1b1b;}

.interior-desc{position: relative; margin-top: 11.25%; z-index: 1}
.blue-box{background: #9fbfd6; color: #fff; width: 375px; height: 243px; display: flex; justify-content: center; flex-direction: column; padding-left: 20%;}
.interior-sect .interior-01 .img-area{width: 52.25%; max-width: 731px; position: relative; }
.interior-sect .interior-01 .img-area:after{content:''; width: 52.25%; height: 3px; background: #9fbfd6; position: absolute; left:100%; top:15%}
.interior-sect .interior-01 .txt-area{width: 47.75%; padding: 0 0 4.3% 4.3% ;}


/* 미미치과 스토리 */
.sect-tit{font-size: 11.500em; opacity: .4; color: #e5e5e5; font-weight: 700; letter-spacing: -0.035em;}
.memi-story-sect .sect-tit{
	position: absolute;
	top:10%;
	right:0;
}
.memi-story-sect{}
.memi-story-wrap{padding: 10% 0 10% 17%;}
.story-slide{padding:0 0 6%;}
.story-slide.swiper-container-horizontal>.swiper-scrollbar{width: 75%;}
.story-slide figure{max-width: 282px;}
.story-slide figcaption{padding: 16% 3% 3%; text-align: center; word-break: keep-all}
.story-slide figure img{width: 100%;}

/* 오시는길 부분 */
.location-sect{margin-bottom: 100px; height: 48vw; max-height: 880px; min-height: 680px; background-color: #eee; overflow: hidden; position: relative;}
.map-wrap{position: absolute; top:0; right:0; width: 100%; height: 100%;}
#map{ background: url(/img_up/shop_pds/seoulyoo/design/img/memi-location-big.jpg)center center/cover no-repeat; width: 100%; height: 100%;}
.location-desc,.map-wrap{height: 100%;}
.location-desc{width: 50%; background: #eee; padding: 7% 2% 4% 4%; position: absolute; top:0; left:-100%; z-index: 1;}
.map-desc{right:6%; bottom:8%; width: 46%;}
.time-tit{margin-top: 25%;}
.time-table{}
.time-table th,.time-table td{
	padding: .4rem 0;
}
.time-table th{}
.time-table td{padding-left: .3rem}
.time-table .day th{letter-spacing: 0.01rem}
.time-table .weekend th{letter-spacing: 0.08rem}

.map-title{position: absolute; top:0; left:0; width: 100%; height: 100%; background: rgba(0,0,0,.53); opacity: 1; pointer-events: none;}
.map-title p{width: 100%;}

/* 협력사 배너 부분 */
.partner-sect{padding: 3% 0;}

/* 소셜 링크 배너 */
.sns-link-bnr{padding: 2% 0;}
.sns-bnr-list li{width: 7.5rem; display: inline-block; margin: 2.4%;}
.sns-bnr-list li a{display: block; width: 100%; height: 100%;}
.sns-icon-xl{width: 7.5rem;height: 7.5rem;display: inline-block; background:#9fa0a0 url(/img_up/shop_pds/seoulyoo/design/img/social-icon-sprite.png)top left/400% no-repeat; border-radius: 50%;}
.sns-icon-xl.insta{}
.sns-icon-xl.yotub{background-position: 33.3333% 0}
.sns-icon-xl.kakao{background-position: 66.6666% 0}
.sns-icon-xl.blog{background-position: 100% 0}

/* footer */
.main-footer{border-top:1px solid #d1d1d1}
.foot-top{padding: 2.8% 0;}
.foot-copy{padding: 1.5% 0; background: #f7f7f7;}
.foot-wrap{width: 95%; margin: auto;}
.foot-txt{width: 63%; text-align: center;}
.call-area{width:12.875em;}




/* 서브 공통 클래스명 */
.sub-visual{
	position: relative;
	height: 100vh;
    max-height: 920px;
}

.bd-box{border:1px solid #818181; display: inline-block; padding:.5rem 1.2rem}
.c_w.bd-box,.c_w .bd-box{border-color:#fff;}


/* 서브3 임플란트 */
.sub-visual.implant .title-area{
	position: absolute;
	left:40%;
	top:45%;
	transform: translate(-50%,-50%);
}

.sub-visual.implant .video_bg:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(51,51,51,.18);
}

.list3{}
.list3 li{display: inline-block; padding: 2%;width:30%; border-right:1px dotted #c3c3c3; vertical-align: middle;}
.list3 li:last-child{border-right:0;}
.sub3-1{padding: 12.5% 0;}
.sub3-2{padding: 12.5% 0 6% 15%; background: #f5f5f5; position: relative; overflow: hidden;}

.sub3-2 .ovl{vertical-align: 0;}
.sub3-2 .ovl:before{bottom: 110%;}
.sub3-2 .title-area{position: relative; z-index: 1;}
.sub3-2-title {font-size: 12.500em;}
.certi-wrap{position: relative; width: 54%; height: 27rem;}
.certi-img{position: absolute; bottom: 0; width: 33.3333%; box-shadow: 4px 5px 4px rgba(75,75,75,.20)}
.certi-img.certi01{left:0;z-index: 6; width: 34.1%;}
.certi-img.certi02{left:15%; z-index: 5;}
.certi-img.certi03{left:28%; z-index: 4;}
.certi-img.certi04{left:42%; z-index: 3;}
.certi-img.certi05{left:55%; z-index: 2;}
.certi-img.certi06{left:70%; z-index: 1;}


.mo-wrap{flex-wrap: nowrap;}
.mo-wrap > div{width: 100%;}
.sub3-2 .dp_sb{align-items: flex-end}
.sub3-implant-img{position: absolute; left:80%; width: 26.250em; bottom:-18%; z-index: -1;}

.certi-desc{position: absolute; top:105%; left: 3%;}
.certi-desc2{position: absolute; top:105%; left: 45%;}
.imp-sect-title{
	font-size: 12.500em; color: #cfcfcf; font-weight: 700; opacity: .2; position: absolute; right:0; top:12%;
}

.sub-wide-sect{padding: 10% 6%;}
.sub-wide-sect .dp_sb{align-items: center; max-width: 1920px; margin: auto;}
.sub-wide-sect .sub-wide-ani{width: 50%; position: relative; height: 30.8vw; max-width: 902px; max-height:590px;}
.sub-wide-sect .sub-wide-ani .img-area{position: absolute; top:0; left:0; width: 100%; height: 100%;}
.sub-wide-sect .title-area{width: 50%; word-break: keep-all;padding: 1% 0 0 4.5%;}
.sub-wide-sect .title-area h2{width: 90%;}
.sub-wide-sect.imp-fact02 .title-area p{width: 75%; max-width: 500px;}


.sub-bna-sect{padding: 5% 0; background: #fff;}
.sub-bna-tit {border-top:1px solid #707070}
.sub-bna-tit > p{display: inline-block; width: 49.5%; padding: 1.2rem;}
.sub-bna-list li{margin-bottom: 6%;}
.sub-bna-list figcaption{background: #eeeeee; color: #000; padding: 1.2rem; max-width: 1394px; margin: auto;}

.sub-qna-sect {padding:7.5% 0;}
.sub-qna-sect .container{width:90%; max-width: 1200px;}
.sub-qna-sect .ovl:before{width:50%; }
.sub-qna-list{}
.sub-qna-list li{border-top:1px solid #dcdcdc;}
.sub-qna-list li:last-child{border-bottom:1px solid #dcdcdc;}
.sub-qna-list .q-txt,.sub-qna-list .a-txt{padding:1.875rem 3.5rem ; line-height: 1.5;}
.sub-qna-list .q-txt{color: #000; font-size: 1.25rem; position: relative; cursor: pointer;}
.sub-qna-list .q-txt:before{content:'Q.'; position: absolute; left:0.8rem; font-size: 1.6rem; font-weight: 700; top:50%; transform:translateY(-50%);}
.sub-qna-list .q-txt:after{content:'+'; position: absolute; right:1rem; font-size: 2.5rem; font-weight: 300; top:50%; transform:translateY(-50%);}
.sub-qna-list .q-txt.open:after{content:'-';}
.sub-qna-list .a-txt{color: #67a4ce; font-size: 1.125rem; background: #f5f5f5; border-top:1px solid #dcdcdc;}

/* 서브2 라미네이트 */

.sub-visual.laminate{background: #000;}
.sub-visual.laminate .title-area{width: 55%; text-align: center; position: absolute; top:40%; left:50%; transform: translate(-50%,-50%); }

.sub-top-sect{padding: 11% 0 9%;}
.sub-top-desc{width: 95%; max-width: 730px; margin:9% auto 0; word-break: keep-all;}

.sub-rt-sect{padding: 12.5% 0 6% 13%; position: relative; overflow: hidden;}
.sub-rt-sect .dp_sb{align-items: flex-end;}
.sub-rt-sect .title-area{width: 50%;}
.sub-rt-sect.lami-fact01{padding-top: 8%;}
.sub-rt-sect.lami-fact03 .title-area{width: 48%; word-break: keep-all; position: relative;}

.sub-rt-sect.lami-fact03 .title-area .plus-btn{position: absolute; left:48%; top:-50%; display: block;}

.sub-rt-sect.lami-fact03 .title-area .plus-btn span {
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    color: #fff;
    border-radius: 50%;
	display: block;
	text-align: center;
}

.sub-rt-sect.lami-fact01 .title-area p{width: 88%; max-width: 640px;}
.lami-fact04 .title-area p{width: 95%; max-width: 660px;}
.sub-rt-sect .rt-img{width:50%;}
.sub-rt-sect .rt-img img{width:100%;}


.text-stroke {
  -webkit-text-stroke: 2px #bebebe;
}
.sect-title{font-size:12.5rem ; position: absolute; color: transparent; font-weight: 700; opacity: .4;}
.lami-fact01 .sect-title{top:28%; right:0; letter-spacing: -0.05em}
.lami-fact03 .sect-title{top:1rem; left:0;}


.sub-bna-fig{position: relative;}
.sub-bna-fig figcaption{position: absolute; top:30%; text-align: center; width: 100%; color: #fff;}


.sub-bna-img:before{content:''; position: absolute; top: 50%; left:50%; background: url(/img_up/shop_pds/seoulyoo/design/img/arrow-right.png)left top/200% no-repeat; width: 1.438rem; height: 3.938rem; transform: translate(-50%,-50%);}
.sub-bna-img .img-area{position: relative; width: 48.8%; max-width: 683px;}
.sub-bna-img .logo-w{position: absolute; top:0; z-index: 1; top:6%; left:5%; opacity:.6 }
.sub-bna-desc{background: #eeeeee; padding: 1.2rem; }

.sub-bna-sect.change h2{color: #fff;}
.sub-bna-sect.change .sub-bna-img:before{background-position: right top;}

.lami-slide-wrap{position: absolute; bottom:0; width: 100%; left:0; }
.lami-slide-wrap:after{content:''; position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 1; background-image: linear-gradient(to left, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 15%, rgba(0,0,0,.8) 35%,rgba(0,0,0,0) 45%,rgba(0,0,0,0) 55%,rgba(0,0,0,.8) 65%, rgba(0,0,0,1) 85%, rgba(0,0,0,1) 100%); pointer-events: none;}


.lami-slide{max-width: 1400px; padding: 5% 0 0;}
.lami-slide .swiper-slide{transition-duration: .3s;}
.lami-slide .swiper-slide-active{transform: scale(1.3); transform-origin: center bottom; transition:transform .3s .4s; z-index: -1;}

.laminate .prog-slider-sm{width: 1.3rem; border-radius:2em; height: 2rem; background: rgba(200,200,200,.5); position: relative;}
.laminate .prog-slider-sm:after{content:''; position: absolute; left:50%; top:20%; width: 5px; height: 5px; border-radius:5px; background: #000; transform: translateX(-50%);}

.sub-wide-sect .sub-wide-video{width: 50%; max-width: 902px; max-height:590px;}
.sub-video-area{padding: 56.25% 0 0; position: relative;}
.sub-wide-sect .sub-wide-video iframe{width: 100%; height: 100%; position: absolute; top:0; left:0;}


/* 서브5 충치치료 */

.sub-visual.cavity{background: url(/img_up/shop_pds/seoulyoo/design/img/sub/sub5-visual-bg.jpg)center center/cover no-repeat; position: relative;}
.sub-visual.cavity .title-area{position: absolute; top:35%; left:50%; transform: translateX(-50%); text-align: center; width: 48%; word-break: keep-all}



.sub-nav-list {text-align: center;padding: 1rem 0;}
.sub-nav-list li {padding: 1rem; display: inline-block; margin: 0 .4rem;}
.sub-nav-list li a{}

.sub-wide-sect.cavity-fact01{padding: 10% 5% 5% 13%; }
.sub-wide-sect.cavity-fact01 .sub-wide-ani {
    width: 40.5%;
    height: 24.0vw;
    max-width: 631px;
    max-height: 458px;
}
.sub-wide-sect.cavity-fact01 .title-area {
    width: 55%;
    padding: 1% 0 0 4.5%;
}

.sub-rt-sect.cavity-fact02{padding:5% 0 5% 13%;}
.sub-rt-sect.cavity-fact02 .rt-img {
	width: 55%;
}
.sub-rt-sect.cavity-fact02 .rt-img img{
	width: auto;
}
.sub-rt-sect.cavity-fact02 .title-area {
    width: 35%;
    padding: 1% 0 0 3%;
}
.sub-rt-sect.cavity-fact02 .title-area p{max-width: 500px;}

.sub-wide-sect.cavity-fact03{
	padding:14% 0 14% 13%;
	position: relative;
}
.sub-wide-sect.cavity-fact03 .visual-bg:after{
	content:''; position: absolute; top:0; left:0; width: 100%; height: 100%; background: rgba(0,0,0,.3);
}
.z1{z-index: 1;}
.sub-wide-sect.cavity-fact03 .title-area {
    width: 40%;
    padding: 1% 0 0 3%;
}
.sub-wide-sect.cavity-fact03 .title-area p{
	max-width: 560px;
}
.sub-rt-sect.cavity-fact04{padding-top:6%;}
.sub-rt-sect.cavity-fact04 .title-area p{
	max-width: 680px; word-break:keep-all; 
}
.sub-rt-sect.cavity-fact04 .plus-btn{
	position: absolute;
	z-index: 1;
	top:44%;
	left:12%;
	text-align: center;
	color: #fff;
}

.cavity-fact05 {
	height: 100vh;
	max-height: 940px;
	background: url(/img_up/shop_pds/seoulyoo/design/img/sub/sub5-5a1-bg.jpg)center center/cover no-repeat;
	position: relative;
	padding: 14% 7%;
}
.cavity-fact05 .title-area{width: 40%; margin: 0 0 0 auto;}

.sub-wide-sect.cavity-fact06{
	padding: 10% 13% 5% 13%;
}
.sub-wide-sect.cavity-fact06 .sub-wide-ani {
    width: 42.5%;
    height: 25.5vw;
    max-width: 600px;
    max-height: 487px;
}

.sub-wide-sect.cavity-fact06 .title-area {word-break: keep-all;}
.sub-wide-sect.cavity-fact06 .beauty-img01{align-items: flex-start;}
.sub-wide-sect.cavity-fact06 .beauty-img01 .title-area h2{max-width: 480px}
.sub-wide-sect.cavity-fact06 .beauty-img01 .title-area p{max-width: 450px}
.sub-wide-sect.cavity-fact06 .title-area p{word-break: keep-all;}

.sub-wide-sect.cavity-fact06 .beauty-img02 .sub-wide-ani{
	height: 18.2vw;
	max-height: 349px;
}
.sub-wide-sect.cavity-fact06 .beauty-img02 .title-area p{max-width: 560px}
.cavity-fact07 {
	height: 100vh;
	max-height: 940px;
	background: url(/img_up/shop_pds/seoulyoo/design/img/sub/sub5-7-bg.jpg)center center/cover no-repeat;
	position: relative;
	padding: 10.8% 11%;
}
.cavity-fact07 .desc-l{max-width:550px;}
.cavity-fact07 .desc-s{max-width:420px;}


/* 서브4 인비절라인 */

.sub-visual.invis{padding: 12% 0 0;}
.sub-visual.invis .title-area{max-width:720px; padding-left: 1.5%}
.sub-visual.invis .visual-anim-bg{background: url(/img_up/shop_pds/seoulyoo/design/img/sub/sub4-visual-bg.jpg)center center/cover no-repeat; position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: -1;}

.invis-point-list{text-align: center;}
.invis-point-list li{width: 24%; border-radius:50%; border:1px solid #eee; background: #fff;}
.invis-point-list li .inner{position: relative; padding: 100% 0 0;}
.invis-point-list li span{position: absolute; top:50%; left:50%; display: block; width: 90%; transform:translate(-50%,-50%);}

.sub-top-desc.invis-desc{max-width: 830px;}

.invis-sect01{background: url(/img_up/shop_pds/seoulyoo/design/img/sub/sub4-invis-model.jpg)center center/cover no-repeat; padding: 10% 0 8%;}

.sub-wide-sect.invis-fact01{padding: 10% 5% 5% 13%; }
.sub-wide-sect.invis-fact01 .sub-wide-ani {
    width: 40.5%;
    height: 24.0vw;
    max-width: 631px;
    max-height: 458px;
}
.sub-wide-sect.invis-fact01 .title-area {
    width: 55%;
    padding: 1% 0 0 4.5%;
}

.sub-rt-sect.invis-fact02{padding:5% 0 5% 13%;}
.sub-rt-sect.invis-fact02 .rt-img {
	width: 55%;
}
.sub-rt-sect.invis-fact02 .rt-img img{
	width: auto;
}
.sub-rt-sect.invis-fact02 .title-area {
    width: 42%;
    padding: 1% 0 0 3%;
	word-break:keep-all; 
}

.invis-video-sect{padding:3.6% 0;}

.invis-video-tit{font-size: 12.5rem; font-weight: bold; color: #e5e5e5; opacity: .5;}
.video4x3{width: 100%; padding: 64.52% 0 0; position: relative;}
.video4x3 iframe{position: absolute; top:0; left:0; width: 100%; height: 100%;}
.video16x9{width: 100%; padding: 64.52% 0 0; position: relative;}
.video16x9 iframe{position: absolute; top:0; left:0; width: 100%; height: 100%;}

/* 서브1 이준호원장님 */
.sub-doctorlee.doc-intro{
	margin: 0;
	padding:14% 0 5% ;
	max-height: auto;
	background: #f9f8f7;
}
.doc-intro.sub-doctorlee .txt-area{max-width:680px; padding: 0;}
.doc-intro.sub-doctorlee .career-list {
    font-size: 1.063em;
    font-weight: 300;
}
.doc-intro.sub-doctorlee .career-list li{padding: .4rem 0;}
.insta-link{margin-left: 1rem; vertical-align: .5em; color: #afafaf;}


.doctorlee-paper{padding: 9% 0 ;}
.paper-slide{
	width: 97%;
	max-width: 1750px;
	padding: 0 0 3.6%;
}
.paper-slide .swiper-slide img{width: 100%;}
.paper-slide.swiper-container-horizontal>.swiper-scrollbar{width: 56%; left:22%;}

.memi-review{padding: 9% 0;}
.memi-review .txt-area,.memi-review .slide-area{width: 50%;}
.memi-review .txt-area{padding: 0 7.7% 0 0;}
.memi-review .review-slide{padding: 0 0 9%;}
.memi-review .review-slide .swiper-slide{background: #f6f6f6; padding: 16% 0 9%;box-sizing: content-box; height: 17rem;}
.review-slide.swiper-container-horizontal>.swiper-scrollbar{width: 54%; left:23%;}
.profile-area{width: 10rem; margin: auto;}
.profile-area p{width: 5rem; margin: auto;}
.profile-area .thumb-area{width: 4rem; height: 4rem; margin-right: 1rem;}
.drlee-fact01 h3{max-width: 700px;}

.listen3{padding:5% 4% 4% 9.4%;}
.listen3 ul{position: relative;}

.listen3 li{width: 30%; word-break: keep-all;}
.listen3 li:nth-child(1) p{max-width: 310px; margin: auto;}
.listen3 li:nth-child(2) p{max-width: 270px; margin: auto;}

.listen3 .circle{width:70%; border:2px solid #eee; background: #fff; border-radius:50%; margin:0 auto 8%; position: relative;}
.listen3 .circle:after{content:''; position: absolute; top:50%; left:100%; width: 160%; height: 2px; background: #eee; transform: translateX(-50%); z-index: -1;}
.listen3 li:last-child .circle:after{display: none;}
.circle-txt{position: relative; padding: 100% 0 0; }
.circle-txt-inner{position: absolute; top:50%; left:50%; width: 100%; transform: translate(-50%,-50%);}

.memi-drlee-sect{padding: 6.6% 0;}
.drlee-fact02 .title-area,.drlee-fact02 .img-area,.drlee-fact03 .title-area,.drlee-fact03 .img-area{width: 50%; word-break: keep-all;}
.drlee-fact02 .title-area{padding-left:4.5%; padding-right: 2%}
.drlee-fact03 .title-area{padding-left: 0; padding-right: 4.5%;}

.video1x1{padding: 100% 0 0; position: relative;}
.video1x1 iframe{position: absolute; top:0; left:0; width: 100%; height: 100%;}

.sub1-interior .desc-txt{max-width: 860px;}


@media screen and (max-width: 1024px) {
	.bg-img-yt{left:auto; right:0;top:18%}
	.main-case .sect-title{font-size: 15vw;}
	.paper-wrap{width: 100%;}
	.sect-title,.sect-tit{font-size: 3.6rem;}
}




/* en-main */
.en-main .visual03 .visual-desc {width: 38%; left: 66%;}
.en-main .visual04 {color: #fff;}
.en-main .visual04 .visual-bg{background: url(/img_up/shop_pds/seoulyoo/design/img/main-visual01-bg2.jpg) center center/cover no-repeat;}
.en-main .visual04 .visual-desc{left: 52%; transform: translate(0,-50%); width: 36em;}

.en-main .subj-slider figcaption {padding-right: 5em;}

.en-main .doc-intro .container {padding: 3% 15px 10em;}
.en-main .doc-intro .plus-add{top:130%;}

.en-main .invis-point .point01{width: 100%;}

.en-main .blue-box {padding-left: 10%;}

.en-main .youtube-sect .youtube-tit span {display: block; width: 3em; margin: 1rem 0 1.8rem 0.5em;}
.en-main .youtube-sect .youtube-tit h2 {width: 18em;}

.en-main .case-thumb-more {font-size: 1.2rem; margin: 0 auto; padding: 2em; margin-bottom: 4rem; transition: all 0.3s;}
.en-main .case-thumb-more:hover {color:#9fbfd6;}
.en-main .case-thumb-more:hover .udl:after {background: #9fbfd6; animation: udlhover 0.4s forwards;}

@keyframes udlhover {
	0% {width: 0;}
	100% {width: 102%;}
}

.en-main .box-desc {padding: 4% 3.3% 4%;}

.en-main .main-case .title-area .txtline p {width: 60%;}

.en-main .case-desc-txt {width: 90%; text-align: right;}