#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:fixed; display:flex; justify-content: space-between;height:120px; top:0; left:0; width:100%; z-index:99; background:#fff; -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:270px; background-image:url(../img/common/logo.png); background-repeat:no-repeat; background-position:50% 50%; 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%; left: 50%; transform: translateX(-65%); 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-size: 25px; font-weight: 500; position: relative} #header .nav .deps_1 > li a {padding: 0 60px; display: block; height: 100%; white-space:nowrap; display: flex; align-items: center; color: #333 ; position: relative} #header .nav .deps_1 > li a:hover{ color:#06C} #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: #06C; 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{ display: flex;align-items: center;} #header .icon-box {height: 100%; display: flex; align-items: center;} #header .icon-box button { display:flex; align-items: center; height:100%;font-size: 24px; padding:0 20px; color: #fff} #header .icon-box button.ham {display: none; background:#0089d7; margin-left:10px} #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} /* Header :: login */ .hd_login{ display:flex;align-items: center; height:100%;} .hd_login li{ height:100%;display:flex;align-items: center;} .hd_login li+li{ margin-left:15px;} .hd_login a{ font-size:16px; color:#777;} .hd_login .sns img{ width:50px;} .hd_login .layerP{ height:100%;} .hd_login .hash{ display:flex;align-items: center; height:100%; background:#0089d7; color:#fff; padding:0 30px;} .hd_login .hash button{ background:none; font-size:37px; color:#fff; } /* Header :: 한복모델신청버튼 */ .app-btn{ position:relative; margin-right:20px;} .app-btn:before{ content:''; position:absolute; top:50%; left:-220px; width:200px; height:1px;transform: translateY(-50%); border-top:1px #a81a31 solid;} .app-btn a{ color:#fff; background:#a81a31; padding:15px 25px; border-radius:30px; font-size:23px;} .app-btn a i{ margin-left:10px;} #header .nav .app-btn{ display:none;} /* Header :: FIXED 스타일 (PC스타일) */ #header.fixed #headerInnerWrap{top:0; height:95px; 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.png); } #header.fixed .nav .deps_1 > li a{ color:#333;} .enBtn{ border:1px solid rgb(255,255,255,0.3); padding:10px 20px; border-radius:20px;transition: all .3s ease-in-out;} .enBtn:hover{ background:#fff; color:#06C} .sitemap-container{ position:fixed; top:0; left:0; width:100%; height:100%; background-color:#255b94; display:none; z-index:99999; transition: all .3s ease-in-out;} .sitemap-content{ position: absolute; left: 50%; top: 50%; width: 100%; max-width: 1780px; text-align: center; color: #fff; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);} .sitemap-content h1{padding:0; text-align:center; border-bottom:1px #33729e solid; padding-bottom:30px;} .sitemap-content h1 img{ width:330px;} .sitemap-wrapper{padding:70px 0;} .sitemap-wrapper > ul{overflow:hidden;} .sitemap-wrapper > ul > li{float:left; width:calc(100% / 5) ; text-align:center;} /* 메뉴 갯수에 맞게 %ë¡œ 계산, 두줄로 들어갈 경우 heightê°’ 설정 */ .sitemap-wrapper.menu4 > ul > li{width:25%;} .sitemap-wrapper.menu6 > ul > li{width:16.6%;} .sitemap-wrapper.menu7 > ul > li{width:14.2%;} .sitemap-wrapper > ul > li > h2{color:#fff; margin:0 2% ; padding-bottom:20px; letter-spacing:-1.0px; letter-spacing:0;} .sitemap-wrapper > ul > li > h2 a{ color:#fff;} .sitemap-wrapper > ul > li .sitemap-2dep {padding:0 5%;} .sitemap-wrapper > ul > li .sitemap-2dep li{} .sitemap-wrapper > ul > li .sitemap-2dep a{display:block; padding:7px 0; color:#fff; font-weight:400;background:rgb(255,255,255,0.1) } .sitemap-wrapper > ul > li .sitemap-2dep a:hover{color:#fff; text-decoration:underline;} .sitemap-wrapper > ul > li .sitemap-2dep .sitemap-3dep{ padding:7px 0;} .sitemap-wrapper > ul > li .sitemap-2dep .sitemap-3dep li{ border:none;} .sitemap-wrapper > ul > li .sitemap-2dep .sitemap-3dep a{ opacity:0.5;background:none; } .sitemap-content .close{ position:absolute; right:0; top:0;} .sitemap-content .close i{ display:block; width:50px; height:50px; border-radius:100%; background:#fff; cursor:pointer; color:#777; display:flex;align-items: center;justify-content: center;} @media (max-width: 1920px) { #headerInnerWrap{ height:90px;} #header .logo a{width:200px;} #header .nav .deps_1 > li{ font-size:20px;} #header .nav .deps_1 > li a{ padding:0 50px;} #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 li+li{ margin-left:7px;} .hd_login .sns img{ width:40px;} .hd_login .hash{padding:0 15px;} .hd_login .hash button{ font-size:25px;} .app-btn a{padding:10px 20px; font-size:16px;} #header.fixed #headerInnerWrap{height:80px;} #header.fixed .logo a { width:170px;} .sitemap-content{max-width: 1280px; } .sitemap-content h1 img{ width:270px;} .sitemap-wrapper{padding:50px 0 0 0;} .sitemap-wrapper > ul > li .sitemap-2dep a{ padding:5px 0;} } @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.fixed #headerInnerWrap{ height:60px;} #header .nav .close , #header .icon-box button.ham, #header .quick-text {display: block} #header .logo{ padding-left:10px;} #header .header-util-box{ padding-right:0;} #header .nav .close { 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); 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; width: 100%;} #header .nav .quick-text .m-top{ display:flex; justify-content: space-between;background:rgb(0,0,0,0.2); padding:25px 40px;} #header .nav .quick-text > p {font-size: 24px; color: #fff; font-weight: 700; padding: 0 40px;} #header .nav .quick-text .m-logo img{ width:270px;} #header .nav .quick-text .navi_bg {padding: 0; box-shadow: none; border-radius: 0; display: flex;flex-wrap: wrap;border-bottom: 10px solid rgba(255,255,255, 0.2) } #header .nav .quick-text .navi_bg li {width:calc(100% / 3); border: 1px solid rgba(255,255,255, 0.2); height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing:border-box;} #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(2), #header .nav .deps_1 > li:nth-of-type(3), #header .nav .deps_1 > li:nth-of-type(4), #header .nav .deps_1 > li:nth-of-type(5) {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(3) > a, #header .nav .deps_1 > li:nth-of-type(4) > a, #header .nav .deps_1 > li:nth-of-type(5) > 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(3) > a:after, #header .nav .deps_1 > li:nth-of-type(4) > a:after, #header .nav .deps_1 > li:nth-of-type(5) > 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; padding-bottom:10px;} .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; color:rgb(255,255,255,0.5)} .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 .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;} .hd_login .hash{ display:none;} } @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:170px;} #header .header-util-box .app-btn{ display:none;} #header.fixed #headerInnerWrap{ height:70px;} #header.fixed .logo a{ width:150px;} #header .nav .quick-text .m-top{ padding:25px;} #header .nav .quick-text .m-logo img{ width:200px;} .hd_login .sns img{ width:35px;} .hd_login .tnb_admin{ display:none;} } @media all and ( max-width: 480px ){ .hd_login .sns img{ width:30px;} #header .icon-box button.ham{ padding:0 15px;} #header .logo a{ width:150px;} .hd_login li + li{ margin-left:3px;} }