/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

html,body{font-size: 16px;}
body{font-family:'NanumBarunGothic',sans-serif; color: #818181; letter-spacing: -0.025em}
body *{box-sizing: border-box; word-break: keep-all;}
a{text-decoration: none; color:inherit;}
strong{font-weight: 400;}
.light{font-weight: 300;}
.bold{font-weight: 700;}
img{max-width: 100%; vertical-align: top;}
/* global */
#skipNav {overflow:hidden;position:absolute;left:-9999px;width:0;height:1px;margin:0;padding:0} /* 스킵네비게이션 */
.ir{display: block; width: 100%; height: 100%; text-indent: -9999em;}
.ir_pm {display:block;overflow:hidden;font-size:0px;line-height:0;text-indent:-9999px} /* 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할때 */
.ir_wa {display:block;overflow:hidden;position:relative;z-index:-10;width:100%;height:100%} /* 중요한 이미지 대체텍스트로 이미지off시에도 대체 텍스트를 보여주고자 할때 */
.screen_out {overflow:hidden;position:absolute;width:0;height:0;line-height:0;text-indent:-9999px} /* 대체텍스트가 아닌 접근성을 위한 숨김텍스트를 제공할때 */
.f_l {float:left}
.f_r {float:right}
.cl_b {width:0;height:0;font-size:0;line-height:0;clear:both}
.show {display:block}
.hide {display:none}
.p_r{position: relative;}
.p_a{position: absolute;}
.clear:after {display:block;visibility:hidden;height:0;font-size:0;clear:both;content:''}
.container{width: 100%;max-width: 1430px;padding: 0 15px; margin: auto; position: relative;}
.container.sm{max-width: 1200px;}
.container.md{max-width: 1300px;}
.pc-content{display: block;}
.mobile-content{display: none;}
/* line */
.txt_bar {font-size:12px;color:#b6b6b6} /* 텍스트형 구분라인 */
.udl{display: inline-block; position: relative;}
.udl:after{content:''; position: absolute; bottom:0; width: 102%; height: 1px; border-radius:2px; left:0; background: #a3a3a3;}
.c1.udl:after{background: #9fbfd6;}
/* hamberger button style */
.ham-btn{position: fixed; top:2.5%; right:2%; z-index: 10;}
.hamberger {
	width: 3.625rem;
	height: 2.250rem;
	position: relative;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
}

.hamberger span {
	display: block;
	position: absolute;
	height: 0.313rem;
	width: 100%;
	background: #666666;
	border-radius: 5px;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}

.change .hamberger span{background: #eee;}
.change.nav-up .hamberger span,.change .hamberger.open span{background: #666;}

.hamberger span:nth-child(1) {
	top: 0px;
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-o-transform-origin: left center;
	transform-origin: left center;
}

.hamberger span:nth-child(2) {
	top: 1rem;
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-o-transform-origin: left center;
	transform-origin: left center;
}

.hamberger span:nth-child(3) {
	top: 2rem;
	left: 1rem;
	width: 70%;
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-o-transform-origin: left center;
	transform-origin: left center;
}

.hamberger.open span:nth-child(1) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	top: -0.188em;
	left: 0.5rem;
}

.hamberger.open span:nth-child(2) {
	width: 0%;
	opacity: 0;
}

.hamberger.open span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	top: 2.375rem;
	left: 0.5rem;
	width: 100%;
}

.dp_f {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.dp_sb {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.dp_c {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.dp_wrap{
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.dp_ib{display: inline-block;}

.wrap{position: relative; overflow: hidden; }

.c_bk{color: #151515;}
.c_gry{color: #d2d2d2;}
.c_w{color: #fff;}
.c1{color: #9fbfd6;}
.c2{color: #abcfe8;}

.ta_l{text-align: left;}
.ta_c{text-align: center;}
.ta_r{text-align: right;}
.va_m{vertical-align: middle;}


.chosun{font-family: 'Chosunilbo_myungjo',serif;}

.fz14{font-size:0.875rem; line-height: 1.4;}
.fz15{font-size:0.938rem; line-height: 1.4;}
.fz16{font-size:1rem; line-height: 1.5;}
.fz17{font-size:1.063rem; line-height: 1.5;}
.fz18{font-size:1.125rem; line-height: 1.5;}
.fz19{font-size:1.188rem; line-height: 1.5;}
.fz20{font-size:1.250rem; line-height: 1.5;}
.fz21{font-size:1.313rem; line-height: 1.5;}
.fz22{font-size:1.375rem; line-height: 1.5;}
.fz23{font-size:1.438rem; line-height: 1.5;}
.fz24{font-size:1.5rem; line-height: 1.5;}
.fz26{font-size:1.625rem; line-height: 1.5;}
.fz28{font-size:1.75rem; line-height: 1.5;}
.fz30{font-size:1.875rem; line-height: 1.5;}
.fz32{font-size:2rem; line-height: 1.5;}
.fz35{font-size:2.188rem; line-height: 1.5;}
.fz38{font-size:2.375rem; line-height: 1.4;}
.fz42{font-size:2.625rem; line-height: 1.4;}
.fz44{font-size:2.75rem; line-height: 1.4;}
.fz48{font-size:3rem; line-height: 1.4;}
.fz54{font-size:3.375em; line-height: 1.4;}
.fz60{font-size:3.75rem; line-height: 1.4;}
.fz70{font-size:4.375rem; line-height: 1.4;}
.fz100{font-size:6.25rem; line-height: 1.4;}

.fz17.lh18{line-height: 1.8; }
.fz17.sub-desc-color{ color: #5b5b5b;}

.m_12{margin-bottom: 12px;}
.m_20{margin-bottom: 20px;}
.m_28{margin-bottom: 28px;}
.m_36{margin-bottom: 36px;}
.m_45{margin-bottom: 45px;}
.m_60{margin-bottom: 60px;}
.m_72{margin-bottom: 72px;}
.m_100{margin-bottom: 100px;}
.sect_space{margin-bottom: 150px;}


/* header */

.main-header{width: 100%;padding:1% 2% 0.7%; background: rgba(255,255,255,0); z-index: 9; position: relative;}
.main-header.fixed{position: fixed; }
.main-header.change{color: #eee;}
.main-header.change.nav-up{color: #818181;}

.logo{background: url(/img_up/shop_pds/seoulyoo/design/img/mm_logo.png)center center/100% no-repeat; width: 12.875em; height: 3.750em; transition:.2s ease;}
.nav-up .logo{width: 11.5rem; height: 3rem;}


.lang-select{position: absolute; top:calc(100% + 3px); left:2%;}
.lang-select > div{width: 30px; height: 30px;background: url(/img_up/shop_pds/seoulyoo/design/img/memi-flag.png)left top /200% no-repeat; display: inline-block;}
.lang-select .lang-ko{background-position: bottom left}
.lang-select .lang-ko.on{background-position: top left}
.lang-select .lang-en{background-position: bottom right;}
.lang-select .lang-en.on{background-position: top right;}


.nav-area{width: 60%;}
.nav-list {margin-left: 10%; width: 100%;}
.nav-list li{display: inline-block; margin-right: .4rem;}
.nav-list li.active a{color: #78a1c6;}
.nav-list li a{display: block; padding:.8rem .2rem;}

.main-header .box-lf{width: 60%;}
.main-header .location{width: 40%;}
.main-header .head-address{margin-right: 13%; padding: .4rem;}
.rnb{position: fixed; top:0; right: -100%; width: 50%; height: 100%;background: #fff; z-index: 10; transition:right .6s ease; opacity: .96; overflow-y:auto;}
/* width */
::-webkit-scrollbar {
  width: .8rem;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(197,197,197,.5);
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(159,191,212,1);
}
.rnb.open{right: 0;}
.rnb-wrap{padding: 8% 10%; }
.nav-title1{margin-bottom: 12px; font-size:1.188rem}

.rnb .main-menu{color: #151515; font-size: 1.5rem;}
.rnb .main-menu li{margin-bottom: .4rem;}
.rnb .main-menu li a{padding: .3rem 0; display: block; }
.rnb .sub-menu{color: #151515; font-size:1.188rem; font-weight: 300;}
.rnb .sub-menu li{margin-bottom: .5rem;}
.rnb .sub-menu li a{padding: .5rem 0; display: block; }
.rnb .sub-menu li strong{font-size: 1.438rem;}
.rnb li.active a{color: #8cb7d5;}


#gnb,.gnb-foot-top,.gnb-foot-address {padding: 3% 2% 3% 4%; }
.gnb-foot-top{color: #9fbfd6;}
.gnb-foot-top a{margin-left: 1.6rem;}
.gnb-foot-address{border-top:2px solid #9fbfd6;}
.gnb-foot-address address,.gnb-foot-address .call-num{width: 50%;}

body.open{width: 100vw; height: 100vh;overflow: hidden;box-sizing: border-box;}
.bg_bk{position: fixed; top:0; right:-100%; width: 100%; height: 100%; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .4s; z-index: 9;}
.bg_bk.open{opacity: 1; right:0;}

.pin{width: 14px; display: inline-block; vertical-align: top; margin-right: .6rem;}

.quick{position: fixed; top:8rem; right:2rem; z-index: 10; height: 8.5rem; transition:height .4s}
.circ-img{width: 6rem; height: 6rem; border-radius: 50%; overflow: hidden; cursor: pointer; }
.circ-img img{transition:transform .3s ease;}
.circ-img:hover img{transform: scale(1.05);}
.shdw-10{box-shadow: 2px 10px 6px rgba(104,104,104,.15);}

.quick.open{height: 21rem;}
.quick.open .quick-social-icon li{opacity: 1; transform: translateY(30%);}
.quick-social-icon li:nth-child(1){transition-delay: 0s}
.quick-social-icon li:nth-child(2){transition-delay: .1s}
.quick-social-icon li:nth-child(3){transition-delay: .2s}
.quick-social-icon li:nth-child(4){transition-delay: .3s}
.quick-social-icon li:nth-child(5){transition-delay: .4s}

.quick-social-icon{width: 35px; margin: 1rem auto 0;}
.quick-social-icon li {
	width: 35px;
	height: 35px;
	background: #9fa0a0 url(/img_up/shop_pds/seoulyoo/design/img/social-icon-sprite-01.png)top left/175px no-repeat;
	border-radius: 50%;
	margin: .75rem 0;
	opacity: 0;
	transform: translateY(0);
	transition: .6s ease;
	position: relative;
}
.quick-social-icon li:before,.quick-social-icon li:after{display: none;}
.quick-social-icon li:hover:before,.quick-social-icon li:hover:after{display: block;}
.quick-social-icon li.nresv{background-position:0% 0;}
.quick-social-icon li.yotub{background-position:50% 0;}
.quick-social-icon li.insta{background-position: 25% 0;}
.quick-social-icon li.blog{background-position: top right;}
.quick-social-icon li.kakao{background-position: 75% 0;}
.quick-social-icon li:before{content:''; position: absolute; width: 0; height: 0; top:50%; right:100%; border: 5px solid transparent; border-left-color:rgba(0,0,0,.3); transform: translateY(-50%);}
.quick-social-icon li:after{position: absolute; right:calc(100% + 10px); width: 4.8rem; padding: .6rem;background: rgba(0,0,0,.3); color: #fff; text-align: center; top:50%; transform: translateY(-50%); border-radius:8px; line-height: 1.2;}

.quick-social-icon li.nresv:after{content:'네이버예약'; }
.quick-social-icon li.yotub:after{content:'유튜브';}
.quick-social-icon li.insta:after{content:'인스타그램';}
.quick-social-icon li.blog:after{content:'블로그';}
.quick-social-icon li.kakao:after{content:'진료시간·약도';}

.m_quick {position: fixed; bottom: 30px; left: 50%; transform: translate(-50%, 0); display: none; z-index: 10; width: 80vw;}
.m_quick .quick-btn {width: 5rem; margin: 0 auto;}
.m_quick .quick-social-icon {position: absolute; width: 100%; bottom: 0; left: 0; z-index: -1; display: flex;}

.m_quick .quick-social-icon li {position: absolute; bottom: 0; left: 50%; transform: translate(-50%,0); background-size: 222px; width: 45px; height: 45px; margin: 0;}

.m_quick.open .quick-social-icon li{opacity: 1;}
.m_quick.open .quick-social-icon li.nresv {bottom: 95px;}
.m_quick.open .quick-social-icon li.yotub {left: 25%;}
.m_quick.open .quick-social-icon li.insta {left: 36%;}
.m_quick.open .quick-social-icon li.blog {left: 64%;}
.m_quick.open .quick-social-icon li.kakao {left: 75%;}

.m_quick .quick-social-icon li:nth-child(1) {transition-delay: 0s}
.m_quick .quick-social-icon li:nth-child(2) {transition-delay: 0s}
.m_quick .quick-social-icon li:nth-child(3) {transition-delay: 0s}
.m_quick .quick-social-icon li:nth-child(4) {transition-delay: 0s}
.m_quick .quick-social-icon li:nth-child(5) {transition-delay: 0s}

.naver-res {position: fixed; top: 6em; right: 0.8em; width: 45px; height: 45px; display: none; background: #9fa0a0 url(/img_up/shop_pds/seoulyoo/design/img/social-icon-sprite-01.png)top left/222px no-repeat; z-index: 10; border-radius: 50%;}


.spinner {
	width: 5rem;
	padding: .75rem .7rem 1.2rem .5rem;
	height: 3.5rem;
	text-align: center;
	background: url(/img_up/shop_pds/seoulyoo/design/img/quick-box-bg.png)center center/100% no-repeat;
	position: absolute;
	top:-2.4rem;
	right:-0.6rem;
	z-index: 1;
}

.spinner > div {
	width: .5rem;
	height: .5rem;
	background-color: #fff;

	border-radius: 100%;
	display: inline-block;
	margin:0 0 0 .2rem;
	-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.spinner .bounce2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {

	0%,
	80%,
	100% {
		-webkit-transform: scale(0)
	}

	40% {
		-webkit-transform: scale(1.0)
	}
}

@keyframes sk-bouncedelay {

	0%,
	80%,
	100% {
		-webkit-transform: scale(0);
		transform: scale(0);
	}

	40% {
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
	}
}


.top-btn-wrap{position: fixed; bottom:1.5rem; right:2rem; z-index: 1; }
.top-btn{width: 3.313rem; height: 1.813rem; background: url(/img_up/shop_pds/seoulyoo/design/img/movetop.png)top left/100% no-repeat;}





/* en-header */
.en-quick .quick-social-icon li.nresv:after{content:'NAVER booking'; }
.en-quick .quick-social-icon li.yotub:after{content:'Youtube';}
.en-quick .quick-social-icon li.insta:after{content:'instagram';}
.en-quick .quick-social-icon li.blog:after{content:'Blog';}
.en-quick .quick-social-icon li.kakao:after{content:'KakaoTalk';}

.en-header.main-header .head-address {margin-right: 0;}



@media (max-width:768px){

  .call-area:after {content:'※위 전화번호를 터치하면 통화가 연결됩니다'; display:block; width:100%; font-size:12px; opacity:.8;}

}