#header{position:absolute; height:110px; -webkit-transition:top 0.5s;-moz-transition:top 0.5s;-o-transition:top 0.5s;-ms-transition:top 0.5s;transition:top 0.5s}
#headerInnerWrap{position:fixed; top:0; left:0; height:110px; width:100%; z-index:99;  -webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s; background:rgba(0,0,0, 0.3)}

.header { position:relative;top:0; left:0; height:100%; width: 100%; display: flex;justify-content: space-between;z-index: 3;}
.header .logo{ position:absolute; top:0; left:70px; z-index:11; width:200px; height:100%;}
.header .logo a{display: flex; align-items: center; width:100%; height: 100%; background:url(../img/common/logo-fixed.png) 50% 50% no-repeat; background-size:100% auto; font-size:0;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s;}

.header .nav {position: absolute; height: 100%; width:100%; justify-content: space-between;   display: flex;  left: 50%; transform: translateX(-50%); top: 0;}
.header .nav .close {display: none}
.header .nav .deps_1 {height: 100%; display: flex; justify-content: center; margin: 0 auto;}
.header .nav .deps_1 > li {height: 100%; font-size: 23px; font-weight: 500; position: relative; -webkit-transition:top 0.5s;-moz-transition:top 0.5s;-o-transition:top 0.5s;-ms-transition:top 0.5s;transition:top 0.5s}
.header .nav .deps_1 > li a {padding: 0 40px; display: block; height: 100%; white-space:nowrap; display: flex; align-items: center; color: #fff ; position: relative; -webkit-transition:top 0.5s;-moz-transition:top 0.5s;-o-transition:top 0.5s;-ms-transition:top 0.5s;transition:top 0.5s}

.header .quick-text {display: none}
.header .nav .deps_1 > li .deps_2 {position: absolute;left: 0; bottom: 15px; transform: translateY(100%); width: 100%; background: #004a80; opacity: 0; overflow: hidden ;
transition: all .3s ;padding: 17px 0; visibility: hidden}
.header .nav .deps_1 > li .deps_2 li > a {padding: 8px 0px;justify-content: center; font-size: 17px; color: #fff; font-weight:400;}
.header .nav .deps_1 > li .deps_2 li > a:hover{ color:#3CF}

.header .nav .deps_1 > li:nth-child(3) .deps_2, .header .nav .deps_1 > li:nth-child(6) .deps_2 { display:none;}

.header > .icon-box {height: 100%; display: flex; align-items: center; padding-right: 65px}
.header > .icon-box button { position:absolute; right:0; top:0; height:100%; width:50px;font-size: 24px; color: #fff; background:none;}
.header > .icon-box button.ham {display: none}
.header .fix_btn_box {position: fixed; right: 40px; bottom: 40px; opacity: 1; z-index: 5 ; transition: all .3s}



.facility-header,
.totalSearch-header,
.medicalInformation-header,
.myPage-header,
.header.service-header {background-color: #f4f5f7}

.facility-header .nav .deps_1 > li a,
.totalSearch-header .nav .deps_1 > li a,
.myPage-header .nav .deps_1 > li a,
.medicalInformation-header .nav .deps_1 > li a,
.header.service-header .nav .deps_1 > li a {color: #000 ;}

.facility-header > .icon-box button,
.totalSearch-header  > .icon-box button,
.myPage-header > .icon-box button,
.medicalInformation-header > .icon-box button,
.header.service-header > .icon-box button {color: #000}

.top_btn_box {width: 100px; height: 100px; border-radius: 50%;box-shadow: 2px 1px 25px rgb(0 0 0 / 15%);background-color: #fff; display: flex; align-items: center; justify-content: center; margin-top: 30px; overflow: hidden; transition: background 0.3s ease-in-out;}
.top_btn_box .top_btn {font-size: 32px; cursor: pointer; width: 100%; height: 100%; }
.top_btn_box i {transition: 0.3s ease-in-out;}



.header .fix_btn_box .menu_btn_box {background-color: #28bb9d;; width: 100px; min-height: 100px;border-radius: 50px; display: flex; align-items: center; justify-content: center;padding:  35px 15px; box-shadow: 2px 1px 25px rgb(0 0 0 / 25%);color: #fff; cursor: pointer; position: relative; transition: all .3s}
.header .fix_btn_box .menu_btn_box > i {display: block; font-size: 32px; position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%);transition: all .3s}
.header .fix_btn_box .menu_btn_box ul{max-height: 0; overflow: hidden; transition: max-height 500ms , opacity .3s; opacity: 0}
.header .fix_btn_box .menu_btn_box ul li a{display: flex; align-items: center; justify-content: center; flex-wrap: wrap}
.header .fix_btn_box .menu_btn_box ul li + li {margin-top: 35px}
.header .fix_btn_box .menu_btn_box ul li .icon {width: 100%; margin-bottom: 15px; color: #fff; font-size: 32px; display: flex;align-items: center; justify-content: center; opacity: 0.4; transition: all .3s}
.header .fix_btn_box .menu_btn_box ul li .icon img {width: 35px}
.header .fix_btn_box .menu_btn_box ul li .icon + span {color: #fff;display: block; font-size: 13px}
.header .fix_btn_box .top_btn_box:hover {box-shadow: none; background: #000;}
.header .fix_btn_box .top_btn_box:hover i {color:#fff;}
.header .fix_btn_box .menu_btn_box:hover ul{max-height: 542px; opacity: 1}
.header .fix_btn_box .menu_btn_box:hover >i {opacity: 0;visibility: hidden}
.header .fix_btn_box .menu_btn_box ul li a:hover .icon {opacity: 1}

.search_form_wrap {opacity: 0; pointer-events: none; position: absolute; top:109px; z-index: 99; width: 100%; transition: 0.3s ease-in-out;}
.search_form_wrap.show {opacity: 1; pointer-events: inherit;}
.search_form_wrap .search_box {height:300px; display: flex; align-items: center; justify-content: center; background: #28bb9d;}
.search_form_wrap .search_box > .search_area_close {color:#FFFFFF; margin-left:15px; font-size:23px; cursor: pointer; position: relative; z-index: 9;}
.search_form_wrap .search_box > .search_area_close i {color: #FFFFFF;}
.search_form_wrap .search_box .input_box {width:460px;}

.search_form_wrap .search_box .input_box {width:340px; height:60px; position: relative;}
.search_form_wrap .search_box input {width:100%; height:100%; line-height:60px; font-size:14px; padding:0 70px 0 33px; background:#F5F5F6; border-radius: 27.5px; border:none; outline: none;}
.search_form_wrap .search_box button {font-size:0; position: absolute; top:0; right:0; height:100%; padding:0 30px; color: #000}
.search_form_wrap .search_box button i {font-size:20px; color: #000}

.hd_login { display:inline-block;display: flex;  -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
.hd_login li {height: 34%;}
.hd_login a { position:relative;display: block; height: 100%; white-space:nowrap; display: flex; align-items: center; color: #fff ; padding:0 13px; }
.hd_login a:before{ content:''; position:absolute; width:1px; height:10px; border-left:1px #fff solid; opacity:0.5; top:50%; right:0;transform: translateY(-50%); }
.hd_login li:last-child a:before{ display:none;}


.header .r_con{ position:absolute; right:10px; top:50%;transform: translateY(-50%);  display: flex;align-items: center; justify-content:right; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;z-index: 100;}
.header .r_con .area{ display:flex;}
.header .youtube{ position:relative; background:#fff; padding:0 20px;height:40px; line-height:40px; border-radius:30px; margin-left:10px;}
.header .youtube select{ border:none; background:#fff; margin-left:20px;}
.header .youtube i{ position:absolute; top:50%; left:10px;   transform: translateY(-50%); color:#F30; font-size:30px;}
.hd_login { display: flex;}

.hd_login a { position:relative;display: block; white-space:nowrap; display: flex; align-items: center; color: #fff ; padding:0 13px; }
.hd_login a:before{ content:''; position:absolute; width:1px; height:10px; border-left:1px #fff solid; opacity:0.5; top:50%; right:0;transform: translateY(-50%); }
.hd_login li:last-child a:before{ display:none;}

.en_link{ margin-right:10px;}
.en_link a{ display:inline-block; color:#fff; width:40px; height:40px; text-align:center; line-height:40px; border:1px solid rgb(255,255,255,0.5); border-radius:50%;}

.google_select{ display:inline-block; height:40px; overflow:hidden;}

#google_translate_element > div > div {position: relative;min-width: 140px;height:100%;text-align:center;border-radius:30px; overflow:hidden;height:35px; line-height:35px;}
#google_translate_element > div > div > select::-ms-expand { display: none;}
#google_translate_element > div > div:after { content: '<>'; /* 목록 펼침 아이콘 */ font: 17px "Consolas", monospace; color: #333; transform: rotate(90deg); right: 11px; top: 18px; padding: 0 0 2px; border-bottom: 1px solid #999; position: absolute; pointer-events: none; display:none;}
#google_translate_element > div > div > select { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; width: 100%; max-width: 320px; height: 40px; float: right; margin: 5px 0px; padding: 0px 24px; font-size: 16px; line-height: 1.75; color: #333; border: 1px solid #cccccc; -ms-word-break: normal; word-break: normal; border-radius: 10px;}


/**유튜브 css 시작**/
.custom-select { position: relative;  display: inline-block;    margin-left: 5px;}

#ddB {background-color: #f4f4f4;  border: 1px solid #ccc; padding: 8px 23px; cursor: pointer; display: flex; align-items: center; gap: 8px; border-radius: 25px;
  }
#ddB img { width: 30px;  height: auto; border-radius: 7px; }
#ddM {  display: none; position: absolute;  background-color: #ffffff; border: 1px solid #ccc; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); list-style: none; padding: 0; margin: 0; z-index: 1000; width: 95%; }
#ddM li {padding: 8px 12px;  cursor: pointer; display: flex;  align-items: center; gap: 8px; font-size: 14px;}
#ddM li:hover {  background-color: #f4f4f4;}
#ddM li img {width: 15%; height: auto; }
/**유튜브 css 끝**/

    #google_translate_element { display: block !important; }
    .skiptranslate {  display: inline !important; /* 구글 번역 UI 강제 표시 */}
	#goog-gt-vt { display: none !important;}


@media all and ( min-width: 1221px ){	

	
		
	#header.fixed{ height:90px;}
	#header.fixed #headerInnerWrap{ height:90px; background:#fff; box-shadow: 12px 9px 17px #0000001c;}
	#header.fixed .header .logo{  width:170px;}
	#header.fixed .header .logo a{background:url(../img/common/logo.png) no-repeat 50% 50%; background-size:100% auto;}
	#header.fixed .header .nav .deps_1 > li { font-size:20px;}
	#header.fixed .header .nav .deps_1 > li a{ color:#333;}
	#header.fixed .header .nav .deps_1 > li .deps_2 li > a{ color:#fff;}
	#header.fixed .header .nav .deps_1 > li .deps_2 li > a:hover{ color:#3CF}
	#header.fixed .hd_login a { color: #777 ;  }
	#header.fixed .hd_login a:before{ border-color:#999;}
	
}

@media (min-width: 1400px){
   
	
	.header .nav .logo {display:block; height:90px !important;}
	
    .header .nav .deps_1 > li:hover .deps_2 {opacity: 1; bottom: 0;   visibility:inherit}
    .header .fix_btn_box .top_btn_box:hover {box-shadow: none; background: #000;}
    .header .fix_btn_box .top_btn_box:hover i {color:#fff;}
    .header .fix_btn_box .menu_btn_box:hover ul{max-height: 542px; opacity: 1}
    .header .fix_btn_box .menu_btn_box:hover >i {opacity: 0;visibility: hidden}
    .header .fix_btn_box .menu_btn_box ul li a:hover .icon {opacity: 1}

}


@media (max-width: 1920px) {
	
	#header{height:90px;}
	#headerInnerWrap{ height:90px;}
	.header .logo{ width:170px;}
	.header .nav .deps_1 > li{ font-size:20px;}
	.header .nav .deps_1 > li a{ padding:0 20px;}
	.header .nav .deps_1 > li a span{font-size:17px;}
	.header .nav .deps_1 > li .deps_2 li > a{ font-size:15px;}
	.header .nav .deps_1 > li .deps_2 li > a span{font-size: 13px;}
	
	.hd_login a{ font-size:15px;}
	
	#header.fixed{ height:77px;}
	#header.fixed #headerInnerWrap{ height:77px;}
	#header.fixed .header .logo{  width:150px;}
	#header.fixed .header .nav .deps_1 > li { font-size:19px;}
	#header.fixed .header .nav .deps_1 > li .deps_2 li > a{ font-size:15px;}
	
	.google_select{ height:35px;}
	#google_translate_element > div > div{ height:30px; line-height:30px;}
	.header .youtube{ height:35px; line-height:35px;}
	.header .youtube i{font-size:25px;}

	
}
@media (max-width: 1680px) {
	
	.header .logo{ left:10px;}
	.header .nav .deps_1 > li{ font-size:18px;}
	.header .nav .deps_1 > li a{ padding:0 20px;}
	.hd_login{ padding-right:10px;}
}

@media (max-width: 1400px) {


	#header{height:70px;}
	#headerInnerWrap{ height:70px;}
	.header .logo{ width:130px; height: 75px;}
	
	#header.fixed{ height:70px;}
	#header.fixed #headerInnerWrap{ height:70px;}
	#header.fixed .header .logo{  width:130px;}
	
	
    .header .nav .close ,
    .header > .icon-box button.ham,
    .header .quick-text {display: block}


    .header .nav .close {position: absolute; right:20px; top: 20px; color: #004a80; font-size:20px; width:37px; height:37px; border-radius:50%; background:#fff;}
    .header .nav {position: fixed; left:0%;right: auto ;top: 0; width: 100%; height: 100%; z-index: 10000; display: block; background-color: #004a80;
        transform: translate(100%,0); padding:70px 0px 20px 0px; transition: left .5s ease-in-out;overflow: auto;}
    .header.on .nav {left: -100%; }
    .header .nav .quick-text{display: block; margin-top: 40px; width: 100%;}
    .header .nav .quick-text > p {font-size: 24px; color: #fff; font-weight: 700; padding: 0 40px;}
    .header .nav .quick-text .navi_bg {padding: 0; box-shadow: none; border-radius: 0; display: flex; margin-top: 20px;border-bottom: 10px solid rgba(255,255,255, 0.2) }
    .header .nav .quick-text .navi_bg li {width: 20%; border: 1px solid rgba(255,255,255, 0.2); height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 15px;}
    .header .nav .quick-text .navi_bg li + li {margin-top: 0; border-left: none;}
    .header .nav .quick-text .navi_bg .icon_box {height:40px ; display: flex; align-items: center ; justify-content: center }
    .header .nav .quick-text .navi_bg li .ico_tit {word-break: keep-all;}
    .header .nav .quick-text .navi_bg li .ico_tit br {display: none;}

    .header .nav .bot-text {display: block; display: flex; font-size: 15px; width: 100%; padding-left: 40px; padding-top: 15px;}
    .header .nav .bot-text ul {display: flex; width: 100%;}
    .header .nav .bot-text ul li {border: 1px solid rgba(255,255,255, 0.2); color: #fff; border-radius: 50px; padding: 0 15px; height: 35px; line-height: 33px; font-size: 13px;}
    .header .nav .bot-text ul li + li {margin-left: 15px;}
    .header .nav > ul {display: flex;flex-direction: column; align-items: flex-start; padding: 20px 0;}
    .header.on > .right .spe .ham {display:none}
    .header.on > .right .spe .close {display:flex; position: fixed; right: 0; top: 0px; width: 80px; height: 80px;}
    .header .nav .deps_1 {padding: 0; margin-top: 10px; width: 100%; height: auto}
    .header .nav .deps_1 > li {width: 100%; height: auto; font-weight: 500;  padding: 0 0px 0px; border-bottom:1px solid rgba(255,255,255, 0.3);}
    .header .nav .deps_1 > li > a {height: auto; padding: 0px;color: #fff !important; display: flex; align-items: center; justify-content: flex-start; padding:  20px 40px 0px;  padding-bottom:20px ;}
    .header .nav .deps_1 > li > a::after {content:"\e942";  font-family:xeicon;display: none; posi0tion: static; width: auto; height:auto; font-size:25px; transform: translateX(0); vertical-align: middle; line-height: 1; margin-left: auto; font-weight: 500; width: auto; transition: all .3s;}
    .header .nav .deps_1 > li:nth-of-type(1), 
    .header .nav .deps_1 > li:nth-of-type(2),
    .header .nav .deps_1 > li:nth-of-type(4),
    .header .nav .deps_1 > li:nth-of-type(7) {cursor: pointer}
    .header .nav .deps_1 > li:nth-of-type(1) > a,
    .header .nav .deps_1 > li:nth-of-type(2) > a,
    .header .nav .deps_1 > li:nth-of-type(4) > a,
    .header .nav .deps_1 > li:nth-of-type(7) > a{pointer-events: none}
    .header .nav .deps_1 > li:nth-of-type(1) > a:after,
    .header .nav .deps_1 > li:nth-of-type(2) > a:after,
    .header .nav .deps_1 > li:nth-of-type(4) > a:after,
    .header .nav .deps_1 > li:nth-of-type(7) > a:after{display: inline-block}
    .header .nav .deps_1 > li:first-child a{margin-top: 0; }
    .header .nav .deps_1 > li.on {background-color: transparent; color: #fff;}
    .header .nav .deps_1 > li.active > a::after {transform: rotate(180deg);     }

    .header .nav .deps_1 > li .deps_2 {position: static; transform: none; opacity: 1;visibility: visible; transition: none; display: none; background:#002f60}
    .header .nav .deps_1 > li .deps_2 li > a {justify-content: flex-start; padding-left: 40px}

    .navi_bg {; border-radius: 55px; padding:45.5px 20px 42.5px; box-shadow:2px 1px 25px rgba(0,0,0,0.35);}
    .navi_bg li + li {margin-top:40px;}
    .navi_bg i {font-size:35px; color: rgba(255,255,255,0.3); display: block; text-align: center;}
    .navi_bg .ico_tit {font-size:13px; font-weight: 400; margin:15px auto 0; color:#fff; display: block; text-align: center;}
    .navi_bg a {display: block; width:100%; text-align: center;}
    .navi_bg img {width:36px; opacity: 0.3;}
    .navi_bg a i, .navi_bg a img {transition: 0.3s ease-in-out;}

/*    .header .fix_btn_box .menu_btn_box {display: none}*/
	
	.header .nav .hd_login{ display:block;}
    .header .r_con{ right:50px;}
    .header .r_con .hd_login{ display:none;}
	
    
    
    .hd_login{ padding-right:60px;}
   

}


@media (max-width:640px) {

.header .logo{ left:5px;}
.header .logo a{background-size:110px auto;}

.header .nav .deps_1 > li > a{ padding: 15px 20px ;}
#google_translate_element > div > div{ min-width:100px;} 

.header .youtube{ padding:0 10px;}

.header .nav .hd_login li{ display:inline-block;}

.header .r_con .area{}
.hd_login{ padding-right:0;justify-content: center; margin-bottom:15px;}
.hd_login  a{ display:inline-block;}
#headerInnerWrap{ height:110px;}
.header{ display:block;}
.header .r_con{ position:relative; display:block; background:#333; padding:5px 0; top:0; left:0;transform: translateY(0%); text-align:center;}
.header .area{justify-content: center;}
.header .logo{ height:56px; top:50px;}
button.ham{ margin-top:25px;}

#header.fixed .r_con{ display:none}
#header.fixed button.ham{ margin-top:0;}
#header.fixed .logo{top:0px;}

}