focus {outline:dashed 3px #188acb; box-shadow: 0 0 0 3px #188acb inset; }
img:focus-visible, button:focus-visible, span:focus-visible, li:focus-visible, a:focus-visible, input:focus-visible  {outline:dashed 3px #188acb;  box-shadow: 0 0 0 1px #188acb inset; z-index:99999999;}


.swiper-slide-active:focus {box-shadow: 0 0 0 3px #188acb inset; }
.swiper-slide-active:focus-visible {outline:dashed 3px #188acb inset; box-shadow: 0 0 0 3px #188acb inset; }
.swiper-slide-active img:focus-visible {outline:dashed 3px #188acb inset; box-shadow: 0 0 0 3px #188acb inset; }

body{text-align:center; }
body.gray {background-color: #444; color: #fff;}


.gray a, .gray p, .gray h2, .gray .th p, .gray .td p.text, .gray dl dt, .gray table, .gray th, .gray td, .gray h1,
.gray h2, .gray h3, .gray h4, .gray h5, .gray h6,
.gray .txt1, .gray .sub-top .sub-title h2, .gray .sub-top .sub-title .sub-txt,
.gray #header .top-link ul li a, .gray .login-wrap .texts .txt1, .gray .report-info-top .report-info .m-txt,
.gray .login-wrap .login-guide .guide-box dt, .gray .mng-info-wrap .info-box dd a, .gray .ctitle,
.gray .online-reserve-info .my-info dt, .gray .mtitle, .gray .mem-info-wrap .mem-info .name,
.gray .facility-item .f-name, .gray .facility-item .f-info dl dd, .gray .column-list .txt .title, .gray .column-list .txt .title,
.gray .column-list .txt .date, .gray .board-view .view-title, .gray .stitle, .gray .find-wrap dt .m-txt, .gray .mb-title h2{color: #fff;}

body.gray #header header, body.gray .data-search ,body.gray .navLayor, body.gray .sub-top .sub-top-link, body.gray .board-view .view-file,
body.gray .con-table table thead th, body.gray .faq-list dd, body.gray .con-table table tbody .bg, body.gray .document-down .docu-wrap,
body.gray .document-down .docu-wrap p, body.gray .floor-view-wrap .floor-view .view-fac,
body.gray .board-list table th, body.gray .sub-top .sub-top-link a, body.gray .login-wrap .login-guide .guide-box,
body.gray .sitemap-wrap .dep1, .gray .reserve-select-wrap, body.gray .subject-list, body.gray .speciality-mem-list .mem-list,
body.gray .treatment-schedule table thead th, body.gray .treatment-schedule table tbody .bg,
body.gray .out-info-wrap .info-time, body.gray .con-tab > ul > li,
body.gray .board-view .view-info, body.gray .pr-mv-wrap, body.gray .pr-gallery-wrap {background-color: #606060; color: #fff;}

body.gray .fc td, body.gray .reserve-calender .time-select li { background: #c3c3c3; color: #000;}

.gray .mng-info-wrap .info-box.box4, .gray .mng-info-wrap .info-box.box5,
.gray .mng-info-wrap .info-box.box7, .gray .mng-info-wrap .info-box.box12 {background: #606060; color: #fff;}

body.gray .inner2 p, body.gray .inner2 a{color: #000;}

.font_big .inner2 a {width:70%;}
.font_big .util a {width:calc(100% / 2 - 20px)}
.font_big .util {width: 30%;}
.font_big .navLayor .top-centerInfo {width: 279px;}

.font_big body, .font_big table, .font_big input, .font_big textarea, .font_big select, .font_big button,
.font_big a, .font_big h2, .font_big .th p, .font_big .td p.text, .font_big dl dt, .font_big table, .font_big th, .font_big td, .font_big h1,
.font_big h3, .font_big h4, .font_big h5, .font_big h6, .font_big #gnav > li > a, .font_big  body .fc,
.font_big .reserve-calender .time-select li, .font_big #gnav > li > a, .font_big #header .top-link ul li a,
.font_big .sub-top .sub-title .sub-txt, .font_big .intro-txt,
.font_big #header header, .font_big .data-search, .font_big .navLayor, .font_big .sub-top .sub-top-link, .font_big .board-view .view-file,
.font_big .con-table table thead th, .font_big .faq-list dd, .font_big .con-table table tbody .bg, .font_big .document-down .docu-wrap,
.font_big .document-down .docu-wrap p, .font_big .floor-view-wrap .floor-view .view-fac,
.font_big .board-list table th, .font_big .sub-top .sub-top-link a, .font_big .login-wrap .login-guide .guide-box,
.font_big .sitemap-wrap .dep1, .gray .reserve-select-wrap, .font_big .subject-list, .font_big .speciality-mem-list .mem-list,
.font_big .treatment-schedule table thead th, .font_big .treatment-schedule table tbody .bg,
.font_big .out-info-wrap .info-time, .font_big .con-tab > ul > li,
.font_big .board-view .view-info, .font_big .pr-mv-wrap, .font_big .pr-gallery-wrap,
.font_big  .txt1, .font_big .sub-top .sub-title .sub-txt,
.font_big .login-wrap .login-guide .guide-box dt, .font_big .mng-info-wrap .info-box dd a, .gray .ctitle,
.font_big .online-reserve-info .my-info dt, .font_big .mtitle, .font_big .mem-info-wrap .mem-info .name,
.font_big .facility-item .f-name, .font_big .facility-item .f-info dl dd, .font_big .column-list .txt .title, .font_big .column-list .txt .title,
.font_big .column-list .txt .date, .font_big .board-view .view-title, .font_big .stitle, .font_big .main-reserve-wrap .reserve-link a .m-txt{font-size: 110%}

.font_big .login-wrap .login-guide .guide-box dd a {width:175px;}
.font_big #gnav .snav {left: 10px;}


	.top_amblem {width:100%; height:48px; line-height: 1.35em; background:#e8e8e8;text-align: left;}
	.inner2 {max-width:1200px; height:100%; margin: 0 auto;}
	.inner2 img {height:100%;}
	.inner2 a{ float: left; width:75%;height: 100%;}
	.inner2 p {float: right; margin:10px; font-weight: bold;}
	
	/** ~600 *************************************************************************************************************** */
	@media all and (max-width:600px){
			.inner2 p {display:none;}
	}



.blind{position:absolute;left:0;top:0;right:0;bottom:0;background:#000;opacity:0.4;z-index:9998;display:none;}

/* skip navigation */
.skip-nav{position:absolute;left:0;top:-30px;z-index:99999;}
.skip-nav li{position:absolute;left:0;top:0;width:200px;}
.skip-nav a{position:absolute;left:0;top:0;display:block;width:100%;height:30px;line-height:30px;color:#fff;background:#373d48; font-size:13px;}
.skip-nav a:focus{top:30px;}
.mobile .skip-nav{display:none;}

#wrap{min-width:375px;}

.inner{max-width:1200px; margin:0 auto;}
.inner:after{display:block;content:'';clear:both;}

#header{width:100%;height:110px;}
#header header{position:relative;z-index:9996;height:110px;background-color:#fff; border-bottom:1px solid #dcdcdc;}
#header .top-link{height:34px;}
#header .top-link:after{display:block;content:'';clear:both;}
#header .top-link ul{float:right; padding-top:10px;}
#header .top-link ul li{float:left;}
#header .top-link ul li a{padding:0 20px; line-height:24px; position:relative; font-size:14px; color:#222; display:inline-block;}
#header .top-link ul li + li a:before{position:absolute; left:-1px; top:3px; width:1px; height:15px; background-color:#dcdcdc; content:'';}
#header .top-link .top-search{height:24px; text-align:left; text-indent:-9999px; width:20px; background:url(../img/layout/btn_search.png) center center / 24px 24px no-repeat;}
#header .top-link .top-sitemap{height:24px; text-align:left; text-indent:-9999px; width:20px; background:url(../img/layout/btn_menu.png) center center / 24px 24px no-repeat;}

#header .top-nav{height:76px;}
#header .top-nav:after{display:block;content:'';clear:both;}
#header .top-logo{float:left;}
#header .top-logo img{height:77px;}

#header .top-gnav{float:right;}

#gnav{position:relative;z-index:9996;}
#gnav > li{float:left;position:relative;}
#gnav > li > a{display:block; line-height:76px; padding:0 33px; font-size:20px; font-weight:600;}
#gnav > li > a:hover{color:#01a4c1;}
#gnav > li.on > a{color:#01a4c1;}
#gnav .snav{position:absolute; left:40px; right:0;/*top:103px;*/top: 85px;text-align:left;display:none;}
#gnav .snav a{display:block;padding: 6px 10px;font-size: 15px;white-space:nowrap;}
#gnav .snav a:hover{color:#0782a4; font-weight:600; text-decoration:underline;}
#gnav .snav a.off{color:#cacaca;}

#gnav .snav2{position:absolute; left:33px; right:0; /*top:103px;*/ top:95px; text-align:left; display:none;}
#gnav .snav2 a{display:block; padding:6px 0; font-size:15px; white-space:nowrap;}
#gnav .snav2 a:hover{color:#0782a4; font-weight:600; text-decoration:underline;}
#gnav .snav2 a.off{color:#cacaca;}


.navLayor{position:absolute;left:0;right:0;top:111px;background-color:#fff;border-bottom:1px solid #dcdcdc;/*padding:30px 0;*/padding:65px 0;display:none;}
.navLayor .nav-inner{max-width:1200px; margin:0 auto; position:relative;}
.navLayor .top-centerInfo{width:304px; height:238px; border-right:1px solid #e3e3e3; text-align:left;}
.navLayor .top-centerInfo .guide-link{margin-bottom:35px;}
.navLayor .top-centerInfo .guide-link:after{display:block;content:'';clear:both;}
.navLayor .top-centerInfo .guide-link li{width:61px; margin-right:8px; float:left;}
.navLayor .top-centerInfo .guide-link li a{display:block; padding:67px 0 0 0; text-align:center; font-size:13px; letter-spacing:-1px; line-height:1.33em;}
.navLayor .top-centerInfo .guide-link li.link1 a{background:url(../img/layout/icon_topGuide1.png) center top no-repeat;}
.navLayor .top-centerInfo .guide-link li.link2 a{background:url(../img/layout/icon_topGuide2.png) center top no-repeat;}
.navLayor .top-centerInfo .guide-link li.link3 a{background:url(../img/layout/icon_topGuide3.png) center top no-repeat;}
.navLayor .top-centerInfo .guide-link li.link4 a{background:url(../img/layout/icon_topGuide4.png) center top no-repeat;}

.mobile-menu{position:absolute;;right:15px;top:15px;display:none;}
.mobile-menu a,
.mobile-menu button{display:inline-block;width:40px;height:40px;text-align:left;text-indent:-9999px;vertical-align:top;}
.mobile-menu .btn-search{background:url(../img/layout/btn_search.png) center center / 24px 24px no-repeat;}
.mobile-menu .btn-menu{background:url(../img/layout/btn_menu.png) center center / 24px 24px no-repeat;}

#mHeader{position:fixed; left:0; top:0; bottom:0; width:320px; z-index:99999; background-color:#fff; overflow-y:auto; display:none;}
.m-top{height:70px; text-align:left; position:relative;}
.m-top .logo{padding-left:20px;}
.m-top .logo img{height:70px;}
.m-top .header-close{position:absolute; right:0; top:0;}
.m-top .header-close button{position:absolute; right:0; top:0; width:50px; height:70px; text-align:left; text-indent:-9999px; overflow:hidden; background:url(../img/layout/btn_close_nav.png) center center / 18px auto no-repeat;}
.m-top-link:after{display:block; content:''; clear:both;}
.m-top-link a{float:left; width:50%; box-sizing:border-box; text-align:center; line-height:50px; background-color:#0ca2c1; color:#fff; font-size:14px;}
.m-top-link a + a{border-left:1px solid #fff;}
.m-top-nav{}
.m-top-nav{border-top:1px solid #ccccce; text-align:left;}
.m-top-nav > ul > li{border-bottom:1px solid #ccccce;}
.m-top-nav > ul > li > a{display:block;padding:15px 0 15px 30px;font-size:16px;color:#222;position:relative; background:url(../img/layout/m_nav_plus.png) 285px center / 12px auto no-repeat;}
.m-top-nav > ul > li.on > a{ background-image:url(../img/layout/m_nav_minus.png);}
.m-top-nav .snav{background:#f5f5f6;display:none;padding:10px 30px 10px 30px; border-top:1px solid #ddd;}
.m-top-nav .snav li + li{border-top:1px solid #e2e3e5;}
.m-top-nav .snav a{display:block;padding:10px 0;font-size:14px;}
.m-top-nav .snav a{display:block;padding:10px 0;font-size:14px;}
.m-top-nav li.on > a{color:#0ca2c1; font-weight:bold;}
.m-top-nav li.on > a + .snav{display:block;}
.m-top-nav li.active{}

.sub-top{margin-bottom:40px;}
.sub-top .sub-title{height:140px; box-sizing:border-box; padding:50px 0 0 0;}
.sub-top .sub-title h2{font-size:34px; font-weight:600; margin-bottom:10px; color:#222;}
.sub-top .sub-title .sub-txt{font-size:15px; color:#585858;}
.sub-top .sub-top-link{background-color:#e9ecf1; height:40px;}
.sub-top .sub-top-link ul{max-width:1200px; margin:0 auto;}
.sub-top .sub-top-link ul:after{display:block;content:'';clear:both;}
.sub-top .sub-top-link ul li{float:left; margin-right:2px; box-sizing:border-box;}
.sub-top .sub-top-link a{display:block; line-height:40px; background-color:#fff; position:relative; padding:0 20px 0 52px; font-size:14px; color:#222;}
.sub-top .sub-top-link a:before{position:absolute;left:20px;top:9px; display:block; content:''; width:22px; height:22px;}
.sub-top .sub-top-link a.go-info:before{ background:url(../img/layout/icon_info.png) 0 0 / 22px 22px no-repeat;}
.sub-top .sub-top-link a.go-reserve:before{background:url(../img/layout/icon_reserve.png) 0 0 / 22px 22px no-repeat;}
.sub-top .sub-top-link a.print:before{background:url(../img/layout/icon_print.png) 0 0 / 22px 22px no-repeat;}

#container{}

.sub-contents{max-width:1200px; margin:0 auto 60px auto; text-align:left; word-wrap:normal; word-break:keep-all; line-height:1.5em; min-height:400px;}
.sub-contents.wide{max-width:100%;text-align:center;}

#footer{justify-content: center;}
.related-link{background-color:#374052; height:60px;}
.related-link .related-site{line-height:60px; }
.related-link .related-site a{line-height:60px; color:#fff; font-size:16px; padding:0 32px; position:relative;}
.related-link .related-site a + a:before{position:absolute; left:0; top:50%; content:''; width:2px; height:2px; background-color:#fff; border-radius:2px;}
.related-link .related-site a:first-child{padding-left:0;}
.related-link .family-site{position:relative;}
.related-link .family-site button{height:60px;width: 170px; color:#fff; padding-left:15px; background:url(../img/layout/select_arr_up.png) 5px center / 10px auto no-repeat;}
.related-link .family-site .family-site-list{position:absolute;right:0; bottom:59px; background-color:#374052; border:1px solid #374052; display:none; padding:5px; text-align:left;}
.related-link .family-site .family-site-list li + li{border-top:1px solid rgba(255,255,255,0.2);}
.related-link .family-site .family-site-list a{display:block; padding:8px 5px;color:#fff}
.related-link .family-site .family-site-list a:hover{background-color:#00b1b7;}

.footer-content{clear:both;max-width:1200px; margin:0 auto; position:relative; padding:30px 0 50px;}
.footer-content:after{display:block; content:''; clear:both; }
.footer-content .footer-logo{float:left; width:128px; text-align:left;}
.footer-content .footer-info{float:left; text-align:left;}
.footer-content .footer-link{margin-bottom:18px;}
.footer-content .footer-link:after{display:block; content:''; clear:both;}
.footer-content .footer-link li{float:left;}
.footer-content .footer-link a{display:block; padding:0 25px; position:relative;}
.footer-content .footer-link li + li a:before{position:absolute; left:-1px; top:3px; width:1px; height:15px; background-color:#dcdcdc; content:'';}
.footer-content .footer-link li:first-child a{padding-left:0;font-weight:bold;color:#000;}
.footer-content .site-info{line-height:1.75em; font-size:13px; color:#777;}
.footer-content .site-info .addr{margin-right:25px;}
.footer-content .site-info .tel{margin-right:25px;}

/*.footer-content .footer-etc{ position:absolute; right:0; top:28px;}*/
.footer-content .footer-etc{ position:absolute; right:18%; top: 68px;}
.footer-content .footer-etc .wa{width:52px;}
.footer-content .footer-etc .sungnam{width:64px; margin-left:10px;}


/* menu.jsp */
	.dropmenu{ border:none; border:0px; margin:0px; padding:0px; font-family:KoddiUDOnGothic; font-size:18px; }
	.dropmenu ul{}	
	.dropmenu li{}	
	.dropmenu li a{}
		
	.dropmenu a:hover, .dropmenu:hover a{background:#1dbecf; color:#FFFFFF; text-decoration:none; text-align: center;}
	.dropmenu div{background:#1dbecf; display:none; height:auto; border:0px; position:absolute; width: 100%; z-index:200; /*top:1em; left:0;*/ left: 100%;top:-10px; }
	.dropmenu div ul {width: calc(100% / 3); margin: 10px 0; float: left;}
	.dropmenu:hover div{ display:block;overflow: hidden; height: 370px; width: 800px;}
	.dropmenu li {display:block; float:none; margin:0px; padding:0px; width:200px; text-align: center; }
	.dropmenu:hover li a{ background:none; }
	.dropmenu ul a{ display:block; height:80px; font-size:14px; margin:0px; padding:0px 10px 0px 15px; text-align:left; height: auto; }
	.dropmenu ul a:hover, .dropmenu ul li:hover a{ background:#fff; border:0px; color:#ffffff; text-decoration:none; }
	
	.util {position: relative; width:25%; float: right;}
	.util a {position: relative; width:calc(100% / 2 - 20px); margin:11px 10px;}
	.slide_box{position: absolute;right:0;top: 50%;display: block;margin-top: -4px;}
	.slide_box .slide_bg{width: 30px;height: 8px;background: #b9daf3;border-radius: 50px;display: block;position: relative;}
	.slide_circle{transition: 0.4s ease ; width: 16px;position: absolute;left: 0;border-radius: 50%;display: block;background: #61abdc;height: 16px;top: 50%;margin-top: -8px;z-index: 1;}
	.slide_box .slide_bg.on{background: #60c1dd; }
	.slide_circle.on{background: #226eb4; left:100%; margin-left: -12px; transition: 0.4s ease}
		
	.snow {background-image: linear-gradient( rgb(255 255 255 / 30%), rgb(255 255 255 / 70%) ), url(../img/layout/spring.gif);/* background-size: 60%;*/ background-size: inherit; width: 100%; height: 100vh; position: absolute; z-index: 99;}

/* menu.jsp_END */


/* sns 챙혶쨈챘짱쨍챙짠�� */
.scmcFacebook{background:url(../img/layout/ic_facebook.png) center center / 24px 24px no-repeat;text-indent: -9999px;}
.scmcInstar{background:url(../img/layout/ic_instagram.png) center center / 24px 24px no-repeat;text-indent: -9999px;}
.scmcTwit{background:url(../img/layout/ic_twitter.png) center center / 24px 24px no-repeat;text-indent: -9999px;}
.scmcYoutube{background:url(../img/layout/ic_youtube.png) center center / 24px 24px no-repeat;text-indent: -9999px;}
/** ~1160 *************************************************************************************************************** */
@media all and (max-width:1200px){
.inner2 a {width:100%}
.top_amblem {    display: none;}
	
	
#header{width:100%;height:70px;}
#header header{height:70px;}
#header .top-link{display:none;}
#header .top-nav{padding:0 20px; height:70px;}
#header .top-logo img{height:70px;}

.top-gnav{display:none;}

.mobile-menu{display:block;}

.sub-top{margin-bottom:30px;}
.sub-contents{padding:0 20px; margin:0 auto 40px auto; min-height:100px;}

.related-link{padding:0 20px;}

.footer-content .footer-etc{ right:20px;}


/* pop up */
.popLayor{left:20% !important; width:30% !important; padding:20px;}

}

/** ~1000 *************************************************************************************************************** */
@media all and (max-width:1000px){


.related-link{height:40px;}
.related-link .related-site{line-height:40px; }
.related-link .related-site a{line-height:40px; font-size:13px; padding:0 10px;}
.related-link .family-site button{height:40px;}
.related-link .family-site .family-site-list{ bottom:40px;}

.footer-content{clear:both;max-width:1200px; margin:0 auto; position:relative; padding:20px 20px 30px;}
.footer-content .footer-logo{display:none;}
.footer-content .footer-info{float:left; text-align:left;}
.footer-content .footer-link{margin-bottom:18px;}
.footer-content .footer-link:after{display:block; content:''; clear:both;}
.footer-content .footer-link li{float:left;}
.footer-content .footer-link a{font-size:13px; padding:0 10px;}
.footer-content .site-info span{display:block;}
.footer-content .site-info .addr{margin-right:0;}
.footer-content .site-info .tel{margin-right:0;}

}


/** 800~1000 *************************************************************************************************************** */
@media all and (min-width:800px) and (max-width:1000px){
	

}

/** 600~800 *************************************************************************************************************** */
/*@media all and (min-width:600px) and (max-width:800px){}*/
@media all and (max-width:800px){
	.sub-contents{display: flex; flex-direction: column;}

}

/** ~800 *************************************************************************************************************** */
@media all and (max-width:800px){




}



/** ~600 *************************************************************************************************************** */
@media all and (max-width:600px){

.sub-top .sub-title{height:auto; padding:20px 0;}
.sub-top .sub-title h2{font-size:24px;}
.sub-top .sub-title .sub-txt{font-size:13px;}
.sub-top .sub-top-link{border:1px solid #e9ecf1; background-color:#fff; height:auto;}
.sub-top .sub-top-link ul li{width:50%; margin:0; }
.sub-top .sub-top-link ul li a{border:1px solid #e9ecf1; }
.sub-top .sub-top-link a.print{display:none;}

.related-link{height:auto; padding:5px 20px;}
.related-link .fr{clear:both;float:none; border-top:1px solid rgba(255,255,255,0.1); text-align:left;}
.related-link .fr .family-site{position:relative;}
.related-link .related-site a{padding:0 3px 0 7px;}

.related-link .family-site button{font-size:13px;}
.related-link .family-site .family-site-list{right:inherit; left:0; }

.footer-content .footer-link a{padding:0 5px; letter-spacing:-1px;}

.footer-content .footer-etc{ top:50px;}
.footer-content .footer-etc .wa{width:52px;}

.m-block{display:block;}

.popLayor{left:5% !important; width:90% !important; right:5% !important; padding:20px;}

}

/** 600~ *************************************************************************************************************** */
@media all and (min-width:600px){


}


/** ~400 *************************************************************************************************************** */
@media all and (max-width:460px){

.related-link .related-site{float:none; text-align:left;}

.footer-content .footer-link li{margin-bottom:10px;}
.footer-content .footer-link li:nth-child(5) a{padding-left:0;}
.footer-content .footer-link li:nth-child(5) a:before{display:none;}

.footer-content .footer-etc{}
.footer-content .footer-etc .wa{width:42px;}
.footer-content .footer-etc .sungnam{width:54px; margin-left:0;}

}
설명