#header{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} #headerInnerWrap{position:absolute; display:flex; justify-content: space-between;height:140px; top:0; left:0; width:100%; z-index:1000; -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 .logo{padding-left: 70px} #header .logo a{display: flex; align-items: center; height: 100%;width:320px; background-image:url(../img/common/logo.png); background-repeat:no-repeat; background-position:50% 50%; background-size:100% auto; font-size:0;} #header .nav {position: absolute; height: 100%; left: 50%; transform: translateX(-45%); top: 0} #header .nav .close {display: none; background:none;} #header .nav .deps_1 {height: 100%; display: flex; justify-content: center} #header .nav .deps_1 > li {height: 100%; font-weight: 500; position: relative} #header .nav .deps_1 > li a {padding: 0 35px; display: block; height: 100%; white-space:nowrap; display: flex; align-items: center; color: #fff ; position: relative; font-size:25px;} #header .nav .deps_1 > li a:hover{ color:#008594;} #header .quick-text {display: none} #header .nav .deps_1 > li .deps_2 {position: absolute;left: 0; bottom: 15px; transform: translateY(100%); width:200px; left:50%; margin-left:-100px;; background: #008594; 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} #header .header-util-box{ padding-right:70px; display: flex;align-items: center;} #header .icon-box {height: 100%; display: flex; align-items: center;} #header .icon-box button {padding: 25px; font-size: 24px; color: #fff} #header .icon-box button.ham {display: none; background: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;} .footer .top_btn_box {display: none} #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} .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} /* Header :: login */ .hd_login{ display:flex;} .hd_login li+li{ margin-left:10px;} .hd_login a{ font-size:16px; color:#fff;} .hd_login .hd_btn{ border:1px solid rgb(255,255,255,0.3); padding:13px 25px; border-radius:25px;font-family:'Paperlogy'; font-weight:500; letter-spacing:2px; font-size:15px;-webkit-transition: 0.3s;transition: 0.3s} .hd_login .hd_btn:hover{ background:#0072bc; border:1px solid #0072bc; color:#fff; } #header .nav .app-btn{ display:none;} #header.fixed .hd_login a{ color:#555;} #header.fixed .hd_login .hd_btn{ border:1px solid rgb(0,0,0,0.2); color:#555; } #header.fixed .hd_login .hd_btn:hover{ background:#0072bc; border:1px solid #0072bc; color:#fff; } /* Header :: FIXED 스타일 (PC스타일) */ #header.fixed #headerInnerWrap{top:0; height:110px; box-shadow: 12px 9px 17px #0000001c; background:#fff; border-bottom:0;} #header.fixed .logo{ top:20px;} #header.fixed .logo a { width:200px; background-image:url(../img/common/logo-fixed.png); } #header.fixed .nav .deps_1 > li a{ color:#333;} .sns{ position:fixed; top:40%; right:50px;} .sns li+li{ margin-top:10px;} .sns a{ display:flex; justify-content: center;align-items: center;width:77px; height:77px; background:#fff; color:#333; border-radius:50%;box-shadow: 8px 8px 16px 0 rgba(0,0,0,.08);} .sns a img{ width:37px;} .sns a i{ font-size:40px;} @media (max-width: 1920px) { #headerInnerWrap{ height:110px;} #header .logo a{width:250px;} #header .nav .deps_1 > li{ font-size:15px;} #header .nav .deps_1 > li a{ padding:0 30px; font-size:20px;} #header .nav .deps_1 > li .deps_2 li > a{ font-size:16px;} #header .nav .deps_1 > li .deps_2 {width:170px;margin-left:-85px; } .hd_login a{ font-size:15px;} .hd_login .hd_btn{font-size:12px;padding:10px 20px; } .app-btn a{padding:10px 20px; font-size:16px;} #header.fixed #headerInnerWrap{height:80px;} #header.fixed .logo a { width:230px;} .sns a{width:57px; height:57px;} .sns a img{ width:27px;} .sns a i{ font-size:30px;} } @media (max-width: 1680px) { .app-btn:before{ display:none;} #header .nav {transform: translateX(-50%);} #header .nav .deps_1 > li a { padding: 0 30px;} } @media (max-width: 1400px) { #headerInnerWrap{ height:70px;} #header .nav .close , #header .icon-box button.ham, #header .quick-text {display: block} #header .logo{ padding-left:20px;} #header .logo a{ width:210px;} #header .header-util-box{ padding-right:0;} #header .nav .close {position: absolute; right:30px; top: 20px; color: #fff; font-size: 28px} #header .nav {position: fixed; left:0%;right: auto ;top: 0; width: 100%; height: 100%; z-index: 10; display: block; background-color: #141d3c; transform: translate(100%,0); padding: 20px 0px; transition: left .5s ease-in-out;overflow: auto; display: flex; flex-direction: column; align-items: flex-start;;} #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: 40px; width: 100%; height: auto} #header .nav .deps_1 > li {width: 100%; height: auto; font-weight: 500; padding: 0 0px 0px; border-bottom:1px solid rgb(255,255,255,0.2)} #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: 15px; 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(4), #header .nav .deps_1 > li:nth-of-type(6), #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(4) > a, #header .nav .deps_1 > li:nth-of-type(6) > 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(4) > a:after, #header .nav .deps_1 > li:nth-of-type(6) > 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; width:100%; margin-left:0;} #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.fixed .icon-box button{ color:#333; background:none;} #header .nav .app-btn{ display:block;} #header .nav .app-btn{ text-align:center; margin:15px 0 0 0; width:100%;} #header .nav .app-btn a{ display:inline-block;} } @media (min-width: 1400px){ #header .nav .deps_1 > li:hover a:before {opacity: 1; bottom: -5px; } #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 all and ( max-width: 640px ){ #header .logo a{ width:120px;} #header .header-util-box .app-btn{ display:none;} #header.fixed #headerInnerWrap{ height:70px;} #header.fixed .logo a{ width:120px;} .hd_login .hd_btn{ padding:10px; font-size:10px;} .sns{ right:20px;} .sns a{ width:50px; height:50px;} #header .icon-box button{ padding:20px;} .hd_login li + li{ margin-left:5px;} }