@charset "utf-8";


/* layout */
.inner {	width: 100%; max-width:1600px;	position:relative;	margin-left:auto;	margin-right:auto;  }
.s-inner {	width:100%; max-width:1400px;	position:relative;	margin-left:auto;	margin-right:auto; }
#wrap { overflow-x: hidden; /*scroll-behavior:smooth;*/ }

/* 타블렛 가로 */
@media all and (max-width:1599px) {
	.inner {	width:90%; }
}
@media all and (max-width:1399px) {
	.s-inner {	width:90%; }
}
@media all and (max-width:1280px) {
	html { font-size: 60% !important; }
}
@media all and (max-width:976px) {
	html { font-size: 60% !important; }
}
@media all and (max-width:768px) {
	html { font-size: 0.55rem !important; }
}
@media all and (max-width:480px) {
	html { font-size: 2.15vw !important; }
}




/*Header*/
#header{position:fixed; width:100%; height:100px; z-index:8888;}
.h_height {line-height:100px}
.hd_mbx { display: none; }

#hd_logo {position:absolute; left:3%;  z-index:999}
#hd_logo img {vertical-align:middle;}
#hd_logo img.on{display:none;}

#hd_mem {position:absolute; right:3%;  top:0; z-index:60; display: flex; gap: 20px;}
#hd_mem > a{width: 50px;display: inline-block; height: 50px;}
#hd_mem > a img{width: 100%; height: 100%;}
#hd_mem ul {display:flex; }
#hd_mem ul li {margin-left:-1px}
#hd_mem ul li a {padding:0 1em; line-height:40px; color:#FFF; display:inline-block; border:1px solid rgba(255,255,255,0.1); font-size:1.5rem; font-weight:600}
#hd_mem ul li:first-child a {background:rgba(255,255,255,0.1); }
#hd_mem img {vertical-align: middle; }


#gnb_pc {padding-left:5%; position:relative; left:0; text-align:Center; width:100%; box-sizing:border-box; color:#fff; 
			background: rgba(20,38,61, 0); overflow: hidden;  transition: max-height 0.3s ease, background 0.3s ease;  
			max-height: 100px;}
#gnb_pc:before {display:none; content:''; width:100%; height:100px; background:#FFF; position:absolute; left:0; top:0;
					transition: background 0.3s ease;  }
#gnb_pc .gnb_dp1{display:inline-block; vertical-align:top; text-align:Center; position:relative; z-index:3}
#gnb_pc .gnb_dp1 > div {font-weight:500; height:100px; line-height:100px; padding:0 45px; 
								box-sizing:Border-box; cursor:pointer;}
#gnb_pc .gnb_dp1 > div > a {font-size: 2.0rem; color:#FFF; font-weight:600}
#gnb_pc .gnb_dp1 .smenu{display:none;; padding:30px 0;}
#gnb_pc .gnb_dp1 .smenu > li {padding:10px 0;}
#gnb_pc .gnb_dp1 .smenu > li > a { font-size:1.7rem; color:#FFF; }
#gnb_pc .gnb_dp1 .smenu > li:hover > a {text-decoration:underline;}



#menuToggle { right: 5px; top:5px; border-right: 0px solid rgba(255,255,255,0.1);  position:absolute; cursor:pointer; z-index:9999; 
					box-sizing: border-box; background:#FFF; border-radius:100%; width:65px; height:65px;}
#menuToggle span {display:block; width:26px; height:2px; background:#333; position:absolute; left:50%; margin-left: -13px; 
						transition:all 0.5s}
#menuToggle span.t {top:23px;}
#menuToggle span.m {top:50%; margin-top:-1px;width:20px;}
#menuToggle span.b {bottom:22px; }

#menuToggle.m_on span {background:#FFF}
#menuToggle.m_on span.t {transform:translateY(8.0px) rotate(45deg)}
#menuToggle.m_on span.m { width:0;}
#menuToggle.m_on span.b {transform:translateY(-8.0px) rotate(-45deg)}

#header.on .hd_full { background-color:#bc121b; }




#gnb_mo { position:fixed; height:100%; z-index:900; right:0;  top:0; padding-top:75px; background:rgba(32,33,40,0.98);
                color:#212121; width:100%; max-width:380px; box-sizing:border-box; transition: all 0.4s ease;
            	-webkit-transform: translateX(100%) rotate(0); -moz-transform: translateX(100%) rotate(0);
				-ms-transform: translateX(100%) rotate(0); -o-transform: translateX(100%) rotate(0);
               transform: translateX(100%) rotate(0);}
#gnb_mo .gnb_dp1_wrap {border-top:1px solid rgba(50,50,50,0.7);}
#gnb_mo .gnb_dp1 > div { font-weight:500; font-size:2.0rem; padding:1.2em 1em; cursor:pointer;
							border-bottom:1px solid rgba(50,50,50,0.7); }
#gnb_mo .gnb_dp1 > div > a { color:#FFF; }
#gnb_mo .gnb_dp1 > div.on { background: #007bc3; border-bottom:1px solid #007bc3 }
#gnb_mo .gnb_dp1 > div.on> a { color:#fff; }
#gnb_mo .smenu {display:none; padding:1em 1.5em; background: #f5f7fb; }
#gnb_mo .smenu>li br{display:none;}
#gnb_mo .smenu>li>a,
#gnb_mo .smenu>li>span {display:block; padding:0.5em 0; font-size:1.8rem; color:#777; font-weight:400;}
#gnb_mo .smenu>li>a:hover,
#gnb_mo .smenu>li>span:hover{ color:#212121; font-weight:500;}


#mem_mo {margin:1.5em }
#mem_mo ul {display:flex; }
#mem_mo ul li {margin-left:-1px}
#mem_mo ul li a {padding:0 1em; line-height:40px; color:#FFF; display:inline-block; border:1px solid rgba(255,255,255,0.1);
					font-size:1.7rem; font-weight:600}
#mem_mo ul li:first-child a {background:rgba(255,255,255,0.1); }
#mem_mo img {vertical-align: middle; }




#header.menu_on #hd_logo img.on{display:inline-block;}
#header.menu_on #hd_logo img.off{display:none;}
#header.menu_on #gnb_pc {color:#333; font-weight:600; background:rgba(9,44,76,0.95);  max-height:800px; }
#header.menu_on #gnb_pc:before {display:block}
#header.menu_on #gnb_pc .gnb_dp1 > div > a {color:#222; font-weight:700}
#header.menu_on #menuToggle span {background:#212121;}
#header.menu_on #hd_mem ul li a {border:1px solid rgba(51,51,51,0.1); color:#333}
#header.menu_on #hd_mem ul li:first-child a {background:rgba(51,51,51,1); color:#FFF}


#header.scroll { background: #fff; }
#header.scroll #hd_logo img.on{display:inline-block;}
#header.scroll #hd_logo img.off{display:none;}
#header.scroll #gnb_pc {color:#333;font-weight:600;}
#header.scroll #gnb_pc:before {display:block}
#header.scroll #gnb_pc .gnb_dp1 > div > a {color:#222}
#header.scroll #hd_mem ul li a {border:1px solid rgba(51,51,51,0.1); color:#333}
#header.scroll #hd_mem ul li:first-child a {background:rgba(51,51,51,1); color:#FFF}

#gnb_mo.m_menuOn {	-webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0);	
								-ms-transform: translateX(0) rotate(0);	-o-transform: translateX(0) rotate(0);	
								transform: translateX(0) rotate(0); }



@media screen and (max-width:1699px){
	#hd_logo { left:2%;}
	#gnb_pc .gnb_dp1 > div {padding:0 25px; }	
	#hd_mem {right:2%;}
}
@media screen and (max-width:1499px){
	#gnb_pc .gnb_dp1 > div {padding:0 22px; }	
	#hd_mem img {height:50px}
}
@media screen and (max-width:1330px){
	#header {height:75px;}		
	.h_height {line-height:75px}
	.hd_mbx { display: block; width: 75px; height: 75px; }

	#hd_mem {right:75px;padding-right:5px}
	#hd_mem img {height:45px}
	#gnb_pc {display:none;}	
}
@media screen and (max-width:976px){
	#hd_logo img {height:50px}
	#gnb_mo { max-width:100%; }
	#menuToggle { right: 10px; top:10px; width:55px; height:55px;}
	#menuToggle span.t {top:19px;}
	#menuToggle span.m {top:50%; margin-top:-1px;width:20px;}
	#menuToggle span.b {bottom:18px; }
}
@media screen and (max-width:768px){
	#hd_mem ul{display:none}
    #hd_mem > a{width: 55px; height: 55px; margin-top: -2px;}
}
@media screen and (max-width:480px){
	#hd_logo img {height:46px}
	#hd_mem {padding-right:0}
	#hd_mem img {height:10vw}
}
@media screen and (max-width:400px){
	#hd_logo img {height:38px}
}






/* footer */
#footer {width:100%; padding:3% 0; background:#2d303b;}
#footer .inner {display:flex; flex-wrap:wrap; justify-content:space-between; align-items: center;}
#footer h1 {font-size:0;}
#footer #f-link {display:flex; }
#footer #f-link a {margin-left:10px; padding:0.5em; font-size:1.5rem; color:#9c9c9c}
#footer #f-link a:hover {color:#FFF}
#footer #f-info {padding-top:30px; margin-top:20px; width:100%; border-top:1px solid rgba(255,255,255,0.05); 
					display:flex; flex-wrap:wrap;}
#footer #f-info li {margin-bottom:5px; font-size:1.6rem; padding-right:1.5em; color:#9c9c9c; }
#footer #f-info li span {padding-right:0.5em; color:#e7e7e7}
#footer #f-info li.copy {padding-top:5px; margin-bottom:0; width:100%;  font-size:1.3rem}

@media screen and (max-width:768px){
	#footer { padding:5% 0; }
	#footer .inner {flex-wrap:wrap; justify-content:center;}

	#footer h1 {width:100%; text-align:center}
	#footer h1 img {height:50px}
	#footer #f-link {margin-top:1em}
	#footer #f-info {padding-top:1.5em; margin-top:1em;}
	#footer #f-info {justify-content:center;}
	#footer #f-info li.copy {text-align:center}
}
@media screen and (max-width:480px){
	#footer #f-info li {margin-bottom:0;}
}




/* 의료진 약력 팝업 */

.overlay { background-color: rgba(0, 0, 0, 0.7); display: none; bottom: 0; left: 0; opacity: 0; position: fixed; right: 0; top: 0;cursor: default; visibility: hidden; z-index: 999991; -webkit-transition: opacity .5s; -moz-transition: opacity .5s; -ms-transition: opacity .5s; -o-transition: opacity .5s; transition: opacity .5s;}
.overlay:target {visibility: visible; opacity: 1; display: block;}
.popup {background-color: #fff;  left: 50%; opacity: 0; padding: 0; position: fixed; top: -100%;  z-index: 999999; width:90%; max-width:1024px; height: 600px; 
			-webkit-transform: translate(-50%, -50%);  -moz-transform: translate(-50%, -50%);  
			-ms-transform: translate(-50%, -50%); -o-transform: translate(-50%,-50%); transform: translate(-50%, -50%); 
			-webkit-transition: opacity .8s, top .8s; -moz-transition: opacity .8s, top .8s; 
			-ms-transition: opacity .8s, top .8s;-o-transition: opacity .8s, top .8s; transition: opacity .8s, top .8s;}
.overlay:target+.popup { top: 50%; opacity: 1; visibility: visible;}

.popup .close { width: 80px; height: 80px; line-height: 80px; position: absolute; right: 0; text-align: center; text-decoration: none; top: 0;}
.popup .close:before { color: #fff; content: ''; background: url('/images/common/menu_on_close.png') no-repeat center center;  width: 30px; height: 30px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
/*.popup .close:hover { background-color:#1d2832;} */

.popup .in-box { width:100%; height:100%; padding: 5%;  display:flex; flex-wrap:wrap}

.popup .img-box {width:30%}
.popup .img-box img { width: 100%; }
.popup .img-box dl { width: 100%; padding:1.3em 0.5em; background:#e8ebf0 url('/images/main/mdoctor-sb.png') no-repeat 95% center; text-align:center }
.popup .img-box dl dt { font-size: 3.0rem; font-weight:700; color:#15263d;  font-family: 'esamanru';  }
.popup .img-box dl dt span {font-weight:300}
.popup .img-box dl dd { padding-bottom:0.3em; font-size: 1.6rem; color:#7b8795 }


.popup .profile-box {width:70%; padding:0 15px 0 5%}
.popup .profile-box {height:500px; overflow-y: auto;}
.popup .profile-box .line {margin:2em 0;  height:5px; background: url('/images/common/slsline.png') repeat-x left bottom; }
.popup .profile-box::-webkit-scrollbar {width: 7px;}
.popup .profile-box::-webkit-scrollbar-thumb {background-color: #7b8795; border-radius: 10px; background-clip: padding-box;}
.popup .profile-box::-webkit-scrollbar-track {background-color: #e8ebf0 ; border-radius: 10px; box-shadow: inset 0px 0px 5px white;}

.popup .profile-box > div { font-size:1.8rem}
.popup .profile-box > div h3 { margin-bottom:20px;  display:inline-block; padding:0.7em 1.5em;  
									font-size:1.8rem; font-family: 'ONE-Mobile-Title';  font-weight:normal; color:#FFF}
.popup .profile-box > div h3.bg1 {background:#a00c14;}
.popup .profile-box > div h3.bg2 {background:#0e3f82;}
.popup .profile-box > div h3.bg3 {background:#192331;}

.popup .profile-box > div span {padding:0.3em 1em 0.3em 0}




@media screen and (max-width:1024px){
	.popup { height: 560px; }
	.popup .in-box { padding:5%}
	.popup .profile-box {height:100%}
}
@media screen and (max-width:768px){
	.popup {padding:50px 5%}
	.popup .in-box {overflow-y: auto; width:100%; height:100%; padding:0; padding-right:10px }
	.popup .img-box {width:100%; max-width:230px; margin:0 auto}
	.popup .profile-box {width:100%; height:auto; padding:0; padding-top:5%; overflow-y: hidden; }
	.popup .profile-box .line {margin:1.5em 0; }
	.popup .close {top:-15px; right:-15px}

	.popup .in-box::-webkit-scrollbar {width: 5px;}
	.popup .in-box::-webkit-scrollbar-thumb {background-color: #7b8795; border-radius: 10px; background-clip: padding-box;}
	.popup .in-box::-webkit-scrollbar-track {background-color: #e8ebf0 ; border-radius: 10px; box-shadow: inset 0px 0px 5px white;}
}





#dotList li {position:relative; margin-bottom:0.5em}
#dotList li:before {content:''; width:3px; height:3px; border-radius:100%; background:rgba(0,0,0,0.3);
					position:absolute; left:0; top:0.75em;}
#dotList li p {padding-left:10px; font-size:1.8rem; line-height:1.5em}
#dotList li p span {display:inline-block; width:110px}

#dotList li:last-child {margin-bottom:0}

#dotList.w50 {display:flex; flex-wrap:Wrap; gap:5px 15px}
#dotList.w50 li {margin-bottom:0}