.menu_util{border-bottom:1px #ddd solid;} .menu_util .inner{display: flex;justify-content: space-between;} .menu_util .lArea{transform: translateX(0); } .menu_util .rArea{transform: translateY(0); } .menu_util a{ color:#777; padding:10px 0; display:inline-block; font-size:17px; } .menu_util ul{ display:flex; flex-wrap:wrap;} .menu_util ul li{ position:relative; margin-right:13px; padding-right:13px;} .menu_util ul li:before{ content:''; position:absolute; width:1px; height:10px; border-left:1px #999 solid; opacity:0.5; top:50%; right:0;transform: translateY(-50%); } .menu_util ul li:last-child:before{ display:none;} .menu_util i{ margin-right:5px;} #header{position:relative; 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:relative;height:100%; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s; } #headerInnerWrap .inner{ height:100%;} .header { position:relative; height:100%; display: flex;justify-content: space-between;z-index: 3;} .header .logo{ position:absolute; top:0; left:0px; z-index:9; width:300px; height:100%;} .header .logo a{display: flex; align-items: center; width:100%; height: 100%;-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 img{ width:100%} .header .nav {position: absolute; height: 100%; left: 50%; transform: translateX(-10%); top: 0} .header .nav .close {display: none} .header .nav .deps_1 {height: 100%; display: flex; justify-content: center} .header .nav .deps_1 > li {height: 100%; display: flex; align-items: center; 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; white-space:nowrap; display: flex; align-items: center; color: #333 ; 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:50%; margin-left:-100px; bottom: 15px; transform: translateY(100%); width: 100%; background: #004a80; opacity: 0; overflow: hidden ; transition: all .3s ;padding: 17px 0; visibility: hidden; width:200px;} .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(6) { display:none;} /* .header .nav .deps_1 > li:nth-child(5) .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: #333; 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;height: 100%; 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; padding-right:70px;} .hd_login li {height: 100%;} .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;} @media (min-width: 1400px){ .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) { .menu_util a {font-size: 15px;} #header{height:90px;} #headerInnerWrap{ height:90px;} .header .logo{ width:230px;} .header .nav .deps_1 > li{ font-size:20px;} .header .nav .deps_1 > li a{ padding:0 30px;} .header .nav .deps_1 > li .deps_2 li > a{ font-size:15px;} .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;} } @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: 1280px) { .menu_util{padding:0 10px;} #header{height:70px;} #headerInnerWrap{ height:70px;} #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: 10; display: block; background-color: #004a80; transform: translate(100%,0); padding:70px 0px 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: 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); display:block;} .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(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; background:#002f60; left:0; 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} .hd_login{ padding-right:60px;} } @media (max-width:640px) { .header .nav .deps_1 > li > a{ padding: 15px 20px ;} } footer{ margin-top:150px; text-align:center; background:#2d3237} footer .area{ padding:100px 0;color:#999;} footer .area .logo{ margin-bottom:30px} footer .area .logo img{ width:200px;} footer .area .slogan{ margin-bottom:30px;} footer .area .slogan img{ width:450px;} footer .footer_menu{ padding:20px 0; background:#1a1e21} footer .footer_menu li{ position:relative; display:inline-block; padding-right:20px; margin-right:15px; } footer .footer_menu li:before{ content:''; position:absolute; top:5px; right:0; width:1px; height:15px; border-left:1px #777 solid;} footer .footer_menu li:last-child:before{ display:none;} footer .footer_menu a{color:#ccc;} footer .footer_menu br{ display:none;} footer .add b{ display:inline-block; margin:0 5px 0 10px;} footer .copy{color:#777; padding:20px 0; font-size:15px;} footer .copy a{ color:#777;} footer .copy a:visited{ color:#777;} @media all and ( max-width: 1920px ){ footer{ margin-top:120px;} footer .area .logo img{ width:230px;} footer .footer_menu li{ padding-right:15px; margin-right:10px;} footer .footer_menu li:before{ height:10px;} footer .area{ padding:70px 0;} footer .copy{ font-size:13px;} footer .area .logo img{ width:160px;} footer .area .slogan img{ width:370px;} } .inner{ position:relative; width:1600px; margin:0 auto; } .sub-visual {position:relative;margin:0 auto; height:570px; } .sub-visual .inner{ height:100%;} .sub-visual .title { padding-top:290px;} .sub-visual .title .sTit{ font-size:70px;font-weight:700 ; letter-spacing:-2px; margin-bottom:10px} .sub-visual .title .bTit{ font-size:25px;} .sub-visual .bg{ background-size:cover; background-position:50% 50%; height:600px; margin:-125px 50px 0 50px;} .sub-visual .bg01{ background-image:url(../../../sites/care/image/subVisual01.jpg)} #container{ color:#222; word-break:keep-all; padding-top:70px;} .contents{ margin-top:100px;} .sub_tabmenu { position:absolute; left:0; bottom:0; background:#fff; width:67%;} .sub_tabmenu .home{ width:80px;display: flex; background:#0072bc; color:#fff; text-align:center;justify-content: center; align-items: center;} .sub_tabmenu ul{} .sub_tabmenu ul li{ padding:25px 0;} .sub_tabmenu ul li a {display: block; position: relative; font-size: 23px; color: #777; text-align: center; border-radius: 35px; padding:0 35px; font-weight:600} .sub_tabmenu ul li.on a { color:#0072bc; background:#fff; border-radius:30px;} .sub_tabmenu ul li.on a span{ position:relative;display:inline-block;} .sub_tabmenu ul li a:before{ content:''; position:absolute; right:0; top:5px; border-left:1px #ccc solid; width:1px; height:15px;} .sub_tabmenu ul li:last-child a:before{ display:none;} .subLnbTit{ font-size:47px; font-weight:600; margin-bottom:15px;} .location{ color:#777;} .location span{ padding:0 10px; } @media all and ( max-width: 1920px ){ .inner{ width:1280px;} .sub-visual{ height:450px;} .sub-visual .title { padding-top:210px;} .sub-visual .title .sTit{ font-size:55px;} .sub-visual .title .bTit{ font-size:20px;} .sub_tabmenu ul li a{font-size:20px;} .subLnbTit{ font-size:37px;} #container{ padding-top:70px;} } @media all and ( max-width: 1280px ){ .contents{ padding:0 10px;} .inner{ width:100%;} #container{ width:100%; display:inline-block;} .sub-visual{height:370px;} .sub-visual .title{ padding-left:20px;} .sub_tabmenu{ display:none !important} } @media all and ( max-width:960px ){ footer{ margin-top:70px;} footer .footer_menu br{ display:block} footer .footer_menu li{ margin-bottom:10px;} footer .footer_menu li:nth-child(4):before{ display:none;} footer .add{ margin-top:15px;} .sub-visual{ height:200px;} .sub-visual .title{ padding-top:60px;} .sub-visual .title p{ font-size:30px; margin-bottom:10px;} } @media all and ( max-width:640px ){ .contents{ line-height:normal;} .menu_util .lArea{ display:none;} footer .add{ line-height:23px;} footer .add span{ display:block;} footer .footer_menu li { padding-right: 10px; margin-right:5px;} .sub-visual .title .sTit{font-size: 35px;} .sub-visual .title .bTit{font-size: 17px;} } @media all and ( max-width:480px ){ .contents{ margin-top: 50px;} footer .area .slogan img{ width:250px;} } /* 로그인 */ .login1 {width:550px;margin:11px auto 0;padding:50px 50px;border:1px solid #e8e8e8;} .login1 h2 {margin-bottom:10px; text-align:center; font-size:30px} .login1 .desc {color:#747272;font-size:25px;text-align:center;letter-spacing:-1.5px;margin-bottom:40px;} .login1 .desc em {font-style:normal;color:#2e2e2e;} .login1 .form_textbox {width:100%;height:45px;margin-bottom:9px;padding:0 18px;color:#888;border:1px solid #dbdbdb;-webkit-transition:all 0.2s;transition:all 0.2s;outline:0 none;} .login1 .form_textbox:focus {border-color:#000;} .login1 button {margin-top:3px; padding:10px 0; height:50px; width:100%;color:#fff;font-size:18px;background-color:#717171; -webkit-transition:all 0.2s;transition:all 0.2s;} .login1 button:hover, .login1 button:focus {background-color:#000;} .login1 .member_link {margin-top:20px} .login1 .member_link:after{content:'';display:block;clear:both;} .login1 .member_link .idsave {float:left; color:#666;} .login1 .member_link .idsave label:before {top:5px} .login1 .member_link .idsave label:after {top:5px} .login1 .list {float:right;} .login1 .list li {display:inline-block;color:#666;} .login1 .list li::before {content:'';display:inline-block;position:relative;top:-1px;width:1px;height:13px;margin:0 12px 0 13px;background-color:#d3d3d3;vertical-align:middle;} .login1 .list li:first-child::before {display:none;} .login1 .list li a:hover {font-weight:500;} .login1 .sns_login {margin-top:40px} .login1 .sns_login .title {margin-bottom:15px; text-align:center} .login1 .sns_login a {height:50px; border:1px solid #333; overflow:hidden; text-overflow:ellipsis; display:inline-block; padding:0 20px; background-color:#333; color:#fff; text-align:center; vertical-align:middle; -webkit-transition:all 0.2s; transition:all 0.2s; margin-right:2%; width:48.5%; line-height:3} .login1 .sns_login a:last-child {margin-right:0} .login1 .sns_login a i {vertical-align:-1px; margin-right:5px} .login1 .sns_login .vvYellow {border:1px solid #fee500 !important} .login1 .sns_login .ltGreen {border:1px solid #03c75a !important} .login1 .sns_login .vvYellow:hover, .login1 .sns_login .ltGreen:hover {background-color:#fff !important; border:1px solid #333 !important; color:#333 !important}