.ul{display: flex;flex-wrap: wrap;} .dl{ display:flex;} .dl dt{flex-shrink: 0;} .dl dd{flex-grow: 1;} /* 전체레이아웃 설정값 */ #wrap{ min-width:320px;} /* header 설정값 */ #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;)} .header { position:relative;top:0; left:0; height:100%; margin: 0 auto; width: 88%; display: flex;flex-wrap: wrap;justify-content: space-between;z-index: 3; border-bottom:1px solid rgb(225,225,225,0.2)} .header .logo { z-index:9; width:170px; 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 .logo img{ width:100%;} .header .logo_m{ display:none;background:url(../img/common/logo-fixed.png) 50% 50% no-repeat; background-size:auto 100%; font-size:0; width:200px; height:65px; margin:10px;} .header .logo_m a{ display:block; width:100%; height:100%;} .header .nav {display: flex; } .header .nav .close, .header .nav .logo {display: 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; -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 55px; display: block; height: 100%; white-space:nowrap; display: flex; align-items: center; color: #000; 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:#0091db; 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: 19px; color: #fff; font-weight:400;} .header .nav .deps_1 > li .deps_2 li > a:hover{ color:#FF0} .header .nav .hd_login{ display:none;} .header .icon-box {height: 100%; display: flex; align-items: center;} .header .icon-box button { position:absolute; right:0; top:0; height:100%; width:50px;font-size: 24px; color: #222; background:none; cursor:pointer} .header .icon-box button.ham {display: none} .header .icon-box ul{gap:0 10px;} .header .icon-box ul li{ position:relative;} .header .icon-box ul li a{ color:#999;} .header .icon-box ul li+li{ padding-left:15px;} .header .icon-box ul li+li:before{ content:''; width:1px; height:10px; position:absolute; top:50%; transform: translateY(-50%);left:0; border-left:1px solid rgb(0,0,0,0.2) ;} .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} .header .r_con{ 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;} .header .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;} #header.fixed #headerInnerWrap{ height:90px; background:#fff; box-shadow: 12px 9px 17px #0000001c;} @media all and ( min-width: 1221px ){ #header.fixed{ height:90px;} #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:23px;} #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;} #header.fixed .youtube{ border:1px #ddd solid;} #header.fixed .en_link a{ border:none; background:#06C} #header.fixed .header > .icon-box button{ color:#333;} } @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) { #header{height:90px;} .header .logo{ width:120px;} .header .nav .deps_1 > li{ font-size:20px;} .header .nav .deps_1 > li a{ padding:0 40px;} .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:110px;} #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:19px;} .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; padding-left:20px;} .header .logo_m{ display:block;} #header.fixed{ height:70px;} #header.fixed #headerInnerWrap{ height:70px;} #header.fixed .header .logo{ width:130px;} .header .nav{justify-content:top;} .header .nav .close , .header .icon-box button.ham, .header .quick-text {display: block; color: #666;} .header .nav .close {position: absolute; right:20px; top: 17px; color: #fff; background:none; font-size:20px; width:37px; height:37px; text-align:center; display:flex;justify-content: center; align-items: center; cursor:pointer;} .header .nav {position: fixed; left:0%;right: auto ;top: 0; width: 100%; height: 100%; z-index:10000; display: block; background-color: #495ef7; transform: translate(100%,0); transition: left .5s ease-in-out;overflow: auto; } .header.on .nav {left: -100%; } .header .nav .logo {display:block; height:90px;} .header .nav .quick-text{display: block; margin-top: 70px; 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:calc((100% / 4) - 31px); border: 1px solid rgba(255,255,255, 0.2); height:50px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 15px;} .header .nav .quick-text .navi_bg li a{ color:#fff;} .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:10px 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: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:#156eb3;} .header .nav .deps_1 > li .deps_2 li > a {justify-content: flex-start; padding-left: 40px} .header .nav .hd_login{ display:block;} .header .r_con{ padding-right:50px;} .header .r_con .hd_login{ display:none;} .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 .icon-box ul{ margin-right:50px;} } @media (max-width:640px) { .header .icon-box ul{ display:none;} } #footer {background-color:#efefef; padding:40px 0; color:#5a5a5a; position: relative;} #footer .inner .footerlogo .ul li {margin: 20px 0;} #footer .inner .footerlogo .ul li a{ margin-right: 50px;} #footer .footerBox{} #footer .footerBox .fB1{} #footer .footerBox .fB1 .fB_box{display: flex; margin-bottom: 5px;} #footer .footerBox .fB1 .fB_box p{margin-right: 20px;} #footer .footerBox .fB2{ background-color: #f6f6f6; border-radius: 24px; padding: 50px; position: absolute; right: 0; top: 5%;} #footer .footerBox .fB2 span{ font-size: 24px; font-weight: 600; color: #000;} #footer .footerBox .fB2 h1{color: #e7497b; font-weight: 800;} #footer .inner .privacy-b a{ color:#999; border:1px solid rgb(255,255,255,0.2); display:inline-block; padding:10px 20px; border-radius:10px;} #footer .inner .copy{ border-top:1px solid rgba(0, 0, 0, 0.1); padding-top:30px; margin-top:30px; color: #5a5a5a; font-size: 16px;display: flex;} #footer .inner .copy a{ color: #5a5a5a; font-size: 16px;} @media (max-width: 1920px) { } @media (max-width: 1400px) { } @media (max-width: 1280px) { #footer{ padding:70px 10px;} #footer .inner .footerBox .fBbox2 { margin-top: 0px;} #footer .inner .footerBox .fBbox2 strong {font-size: 20px; } #footer .inner .footerBox .fBbox2 p {font-size: 18px; } #footer .inner .footerBox .fBbox2 p:nth-child(3) { margin-left: 90px;} #footer .footerBox .fB2 { position: unset; margin-top: 15px; padding: 30px 50px;} } @media (max-width: 1028px) { #footer .inner .privacy-b{ position:relative; margin-top:20px !important;} #footer .inner .footerBox p br{ display:block;} #footer .footerBox .fB1 .fB_box { display: block; margin-bottom: 0px;} #footer .footerBox .fB1 .fB_box p { margin-right: 0; margin-bottom: 5px; } } @media (max-width: 640px) { .header .logo img { width: 75%;} #footer { padding:20px 0; } #footer .inner .footerBox { display: block;} #footer .inner .footerBox .fBbox2 { margin-top: 15px; } #footer .inner .footerlogo .ul li a { margin-right: 20px; } .ul { display: block;} } @media (max-width: 500px) { } @media (max-width: 480px) { #footer .inner .footerBox p span{ display:block;} #footer .inner .footerBox p span+span{ margin-left:0;} #footer .inner .copy{ font-size:14px;} }