@charset "utf-8";


/* layout */
html, body { height:100%;}
body { color:#686868; letter-spacing:0; -webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased;}
#wrap {	position:relative; width:100%; min-width:320px;height:100%; font-size:1.6rem; }
.w-inner {	width:1680px;	position:relative;	margin-left:auto;	margin-right:auto;}
.inner {	width:1500px;	position:relative;	margin-left:auto;	margin-right:auto;}
.s-inner {	width:1280px;	position:relative;	margin-left:auto;	margin-right:auto;}



/* 타블렛 가로 */
@media all and (max-width:1700px) {	
.w-inner {width:90%;}
}
@media all and (max-width:1520px) {	
.inner {width:90%;}
}
@media all and (max-width:1300px) {	
.s-inner {width:90%;}
}



html{font-size: 62.5% !important;}
@media all and (max-width:1024px){
    html{font-size:60% !important}
}
@media all and (max-width:768px){
    html{font-size: 57.5% !important;}
}
@media all and (max-width:568px){
    html{font-size: 55% !important;}
}
@media all and (max-width:480px) {
	html { font-size: 2.2vw !important; }
}




.p-Part { padding:120px 0}
.m-Part { margin:120px 0}
 
@media all and (max-width:1280px) {
	.p-Part { padding:90px 0}
	.m-Part { margin:90px 0}
}
@media all and (max-width:480px) {
	.p-Part { padding:15vw 0}
	.m-Part { margin:15vw 0}
}





/* header */
#header{position: fixed; top: 0; width: 100%; left: 0; z-index: 99; height: 80px; transition: .5s;}
#header:hover{background-color: #fff; border-bottom: 1px solid #eee;}
#header.on{background-color: #fff; border-bottom: 1px solid #eee;}
#header.always{background-color: #fff; border-bottom: 1px solid #eee;}
#header .inner{height: 100%;}
#header .inner #logo{position: absolute; top: 50%; transform: translateY(-50%); left: 0;}
#header .inner #logo a{width: auto; aspect-ratio: 346/120; height: 40px; background: url(/images/common/logo.png) no-repeat center center / cover; display: block;}
#header:hover .inner #logo a{background: url(/images/common/logo_on.png) no-repeat center center / cover;}
#header.on .inner #logo a{background: url(/images/common/logo_on.png) no-repeat center center / cover;}
#header.always .inner #logo a{background: url(/images/common/logo_on.png) no-repeat center center / cover;}
#header .pcGnb{}
#header .pcGnb > ul{display: flex; justify-content: flex-end; align-items: center; gap:0 20px;}
#header .pcGnb > ul > li{position: relative; padding: 0 20px;}
#header .pcGnb > ul > li > div{}
#header .pcGnb > ul > li > div > a{font-size: 16px; font-weight: 500; color: #fff; display: block; line-height: 80px;}
#header:hover .pcGnb > ul > li > div > a{color:#222;}
#header.on .pcGnb > ul > li > div > a{color:#222;}
#header.always .pcGnb > ul > li > div > a{color:#222;}
#header:hover .pcGnb > ul > li > div > a::after{content: '';  left: 0; height: 2px; background-color: transparent; display: block; position: absolute; bottom: 30px; transition: 0.5s}
#header.on .pcGnb > ul > li > div > a::after{content: '';  left: 0; height: 2px; background-color: transparent; display: block; position: absolute; bottom: 30px; transition: 0.5s}
#header.always .pcGnb > ul > li > div > a::after{content: '';  left: 0; height: 2px; background-color: transparent; display: block; position: absolute; bottom: 30px; transition: 0.5s}
#header .pcGnb > ul > li > ul{position: absolute; background-color: #133F8F; padding: 30px; width: 230px; left: 50%; transform: translateX(-50%); margin-top: 0px; box-shadow: 1px 1px 10px 0px rgba(0,0,0,0.1);display: none; top: 90%;}
#header .pcGnb > ul > li > ul > li{text-align: left;}
#header .pcGnb > ul > li > ul > li > a{font-size: 1.7rem; font-weight: 600; color: #fff;}
#header .pcGnb > ul > li > ul > li:hover > a{text-decoration: underline; text-underline-offset: 3px;}
#header .pcGnb > ul > li > ul > li + li{margin-top: 15px;}

#header .menuToggle{display: none; cursor: pointer;}
#header .menuToggle span{color: #fff; transition: .4s;}
#header .menuToggle.on span{color: #1f6096 !important;}


.lang { position:absolute; top:50%; right:0; transform:translateY(-50%); display:inline-block; cursor:pointer; }
.lang .icon { border:1px solid #fff; border-radius:30px; padding:15px 20px; display:flex; gap:10px; align-items:center; color:#fff; font-size:1.6rem; font-weight:bold; transition: 0.3s;}
.lang.on .icon {border-radius:0px; transition: 0.3s;}
.lang .icon span{display: inline-block; font-size: 1.6rem;}
#header:hover .lang .icon { border-color:#aaa; color:#000; }
#header.always .lang .icon { border-color:#aaa; color:#000; }
#header.on .lang .icon { border-color:#aaa; color:#000; }
#header:hover .lang img { filter: invert(1); }
#header.always .lang img { filter: invert(1); }
#header.on .lang img { filter: invert(1); }

.lang .arrow { margin-left:10px; transition: transform .25s ease; }
.lang.active .arrow { transform: rotate(180deg); }

.lang .list{text-align: center; display: none; position: absolute; background-color: #222; width: 100%; left: 50%; transform: translateX(-50%); top: 52px; overflow: hidden; font-size: 1.6rem; border: 1px solid #222;}
.lang .list li{line-height: 25px;}
.lang .list li a{display: block; padding: 10px 0; color: #fff; width: 100%; height: 100%; font-weight: bold;}
.lang .list li a:hover{background-color: #fff; overflow: hidden; color: #222;}


#gnb_mo{display: none;}

@media all and (max-width:1680px){
	#header .pcGnb > ul > li{padding: 0 20px;}
}
@media all and (max-width:1480px){
	#header .pcGnb{}
    #header .pcGnb > ul{gap:0 10px;}
	#header .pcGnb > ul > li{padding: 0 15px;}
	#header .pcGnb > ul > li > div > a{font-size: 17px; line-height: 100px;}
}
@media all and (max-width:1280px){
    #header{height: 65px;}
	#header .pcGnb{display: none;}
    
	#header .menuToggle{display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
	#header.on .menuToggle span{color: #222;}
	#header.always .menuToggle span{color: #222;}
	#header:hover .menuToggle span{color: #222;}
    
	#gnb_mo{display: block;position: fixed; top: -100%; z-index: 98; background-color: #fff; width: 100%; height: calc(100% - 70px); transition: .4s;}
	#gnb_mo.on{top: 65px;}
	#gnb_mo > ul{}
	#gnb_mo > ul > li{}
	#gnb_mo > ul > li > div{cursor: pointer; pointer-events: auto; border-bottom: 1px solid #eee;}
	#gnb_mo > ul > li > div > a{ font-size: 1.8rem; display: block; padding: 20px; color: #000; font-weight: 500; position: relative;}
    #gnb_mo > ul > li > div > a:not(.nav-home){pointer-events: none;}
	#gnb_mo > ul > li > div > a::after{position: absolute; top: 50%; right: 20px;content: '↓'; transform: translateY(-50%); font-family: 'suit';font-size: 1.6rem;}
    #gnb_mo > ul > li > div > a.nav-home::after{display: none;}
	#gnb_mo > ul > li > div.on > a{color: #0056a4;}
	#gnb_mo > ul > li > div.on > a::after{content: '↑'; }
	#gnb_mo > ul > li > ul{display: none;}
	#gnb_mo > ul > li > ul > li{border-bottom: 1px solid #eee;}
	#gnb_mo > ul > li > ul > li > a{background-color: #fafafa; display: block; font-size: 1.6rem; padding: 20px 30px; font-weight: 500;}
	#gnb_mo > ul > li > ul > li:hover > a{color: #0056a4;}
    
    .lang{right: 45px;}
    .lang .icon {padding: 10px 20px;font-size: 1.5rem;}
    .lang .arrow{margin-left: 5px;}
    .lang .list{top: 42px;}
    .lang .list li a{padding: 8px 0;}
}
@media all and (max-width:976px){
    /* #header .inner #logo a{width: 400px;}
	#header:hover .inner #logo a{width: 400px;}
	#header.on .inner #logo a{width: 400px;}
	#header.always .inner #logo a{width: 400px;} */
}

@media all and (max-width:480px){
    .lang{right: 35px;}
    .lang .icon{padding: 8px 15px;gap: 5px;}
    .lang .icon span{font-size: 1.4rem;}
    .lang .icon img{width: 15px;}
    .lang .icon .arrow{display: none;}
    .lang .list{top: 32px; font-size: 1.4rem;}
    .lang .list li a{padding: 3px 0;}
}


/* footer */
#footer {padding: 70px 0 60px; text-align: center; background-color: #0a2639;}
#footer .inner{display: flex; justify-content: space-between; align-items: center;}
#footer .inner .l_cont .f_logo img{width: 230px; max-width: 40vw;}
#footer .info{display: inline-flex; flex-wrap: wrap; gap:5px 15px; align-items: center; justify-content: flex-end; color: #fff; font-size: 1.4rem;width: 100%;  text-align: right;}
#footer .info p{display: inline-flex; align-items: center; gap: 5px; line-height: 1.5em; font-weight: 300;}
#footer .info p .ico{display: inline-block; align-items: center; width: 20px;;}
#footer .info .ceo{padding-left: 15px; position: relative;}
#footer .info .ceo:before{content: ''; position: absolute; right: 100%; top: 50%; transform: translateY(-50%); width: 1px; height: 13px; background-color: #fff;}
#footer .info + .info{ margin-top: 20px;}

@media all and (max-width:1024px){
    #footer .info .copy{width: 100%; text-align: right; display: block;}
    #footer .info .ceo{width: 100%; text-align: right; display: block;}
    #footer .info .ceo:before{display: none;}
    #footer .info + .info{ margin-top: 5px;}
}
@media all and (max-width:768px){
    #footer{padding: 50px 0 40px;}
    #footer .inner{flex-direction: column; justify-content: center;}
    #footer .inner .l_cont .f_logo{margin-bottom: 30px; text-align: center;}
    #footer .info{justify-content: center;}
    #footer .info .copy{text-align: center;}
    #footer .info .ceo{text-align: center;}
}
@media all and (max-width:568px){
}
@media all and (max-width:480px){
    #footer .info{font-size: 1.3rem;}
}







/* 의료진 약력 팝업 */

.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: 991; -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: #FBFBFB;  left: 50%; opacity: 0; padding: 0;  /* padding-right:10px; padding-block: 10px; */ position: fixed; top: -100%;  z-index: 999; width:90%; max-width:1024px; 
			-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; border-radius: 16px; overflow: hidden;}
.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 {overflow-y: scroll; width:100%; height: 800px; }
.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;}

@media screen and (max-width:1024px){
}
@media screen and (max-width:768px){
	.popup .in-box {max-height: 70vh;}
	.popup {padding:50px 5%}
	.popup .close {top:-15px; right:-15px}
	
}



#privacy-content{position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1000; max-width: 640px; width: 74%;padding:50px 2% 2%; background-color: #fff; box-shadow: 0 0 30px rgba(0,0,0,0.2); cursor: pointer; }
#privacy-content .priv-in{ height: 60vh; overflow-y: scroll; }
#privacy-content .close-prv{font-size: 0;  width: 50px; height: 50px; line-height: 50px; position: absolute; right: 0; text-align: center; text-decoration: none; top: 0;}
#privacy-content .close-prv: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%); }

  /* terms & privacy */
.terms{color: #555; font-size: 1.4rem; line-height: 1.8em; word-break: keep-all;}
.terms h3{font-size: 1.8rem; color: #111; margin: 60px 0 30px; font-weight: 700; border-bottom: 2px solid #111; padding-bottom: 15px;}
.terms h3:first-child{margin-top: 0;}
.terms h4{font-size:  1.6rem; color: #111; margin: 45px 0 20px; font-weight: 700; position: relative; padding-left: 15px;}
.terms h4::before{content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 18px; background-color: var(--color1);}
.terms p{margin-bottom: 15px; font-size: 1.4rem;;}
.terms p b{color: #111; font-weight: 700;}

.terms .orderList{margin: 30px 0; padding: 30px;  background-color: #f8f9fb; border: 1px solid #eef0f3;}
.terms .orderList li{margin-bottom: 8px;}
.terms .orderList li:last-child{margin-bottom: 0;}
.terms .orderList li p{margin-bottom: 0; font-size: 1.4rem; color: #666;}

.terms .table { margin-top: 30px; overflow-x: auto; }
.terms .tb-style1 { width: 100%; border-top: 2px solid var(--color1); border-collapse: collapse; border-bottom: 1px solid #eee; }
.terms .tb-style1 th { background-color: #f8f9fb; color: #111; font-weight: 700; padding: 15px 20px; border-bottom: 1px solid #eee; border-right: 1px solid #eee; font-size: 16px; text-align: center; }
.terms .tb-style1 td { padding: 15px 20px; border-bottom: 1px solid #eee; border-right: 1px solid #eee; text-align: center; color: #666; font-size: 1.4rem; vertical-align: middle; background: #fff; line-height: 1.5em; }

@media (max-width: 1024px) {
    .terms h3 { margin: 50px 0 25px; }
    .terms h4 {  margin: 40px 0 18px; }
    .terms .tb-style1 th, .terms .tb-style1 td { padding: 12px 8px; font-size: 14px; }
}

@media (max-width: 768px) {
    #privacy-content{height: 55vh;}
    .terms { font-size: 1.3rem;}
    .terms h3 { font-size: 1.6rem; margin: 40px 0 20px; }
    .terms h4 { font-size: 1.5rem; margin: 30px 0 15px; }
    .terms .orderList { padding: 20px; }
    .terms .tb-style1 { min-width: 500px; }
}