/* 헤더 */
#header {height: 192px;}
#header .header-wrap .logo {height: 120px; padding: 15px 0; box-sizing: border-box; position: relative;}
#header .header-wrap .gnb {width: 100%; height: 75px; display: flex; align-items: center; background: linear-gradient(to right, #0080cc, #00428e);}
#header .header-wrap .gnb > ul {height: 100%; max-width: 920px; margin: 0 auto; display: flex; align-items: center; gap: 0; position: relative;}
#header .header-wrap .gnb > ul > li {width: 150px; height: 100%; text-align: center;}
#header .header-wrap .gnb > ul > li:hover {background-color: #A2DAF0; }
#header .header-wrap .gnb > ul > li > a {font-size: 18px; color : #fff; height: 100%; display: inline-flex; align-items: center; justify-content: center;} 
#header .header-wrap .gnb ul .dep2 {display: none; background: linear-gradient(to right, #00428e, #0080cc); max-width: 1420px; width: 100%; margin: 0 auto; color: #fff; position: absolute; height: 60px; top: calc(100% - 3px); left: 0;}
#header .header-wrap .gnb > ul > li:hover > a + ul.dep2 {display: flex; gap: 24px; justify-content: center;;}
#header .header-wrap .gnb ul .dep2 li {position: relative;}
#header .header-wrap .gnb ul .dep2 li:not(:last-child)::after {position: absolute; display: block; content: '';; width: 1px; height: 14px; top: 50%; right: -12px; transform: translateY(-50%); background-color: #fff;}
#header .header-wrap .gnb ul .dep2 li a {height: 100%; display: inline-flex; justify-content: center; align-items: center;}
#header .header-wrap .mobile-gnb {z-index: 2; position: relative; width: 100%; display: none;}

.btn-mobile {display: none; background-color: transparent; border: none; cursor: pointer; position: absolute; top: 50%; right: 10px;}
.btn-mobile i {font-size: 22px; color: #00428e;}

/* 푸터 */
#footer {height: 290px; background-repeat: no-repeat; background-size: cover; background-position: center;}
#footer .footer-wrap {height: 100%; display: flex; gap: 0; justify-content: space-between; align-items: center; color: #fff;}
/* #footer .footer-wrap .footer-left {width: 35%;} */
#footer .footer-wrap .footer-left {width: 100%;}
#footer .footer-wrap .footer-left .contact p {font-size: 32px; font-weight: 500; margin-bottom: 12px;}
#footer .footer-wrap .footer-left .contact div {display: flex; flex-direction: column; gap: 10px;}
#footer .footer-wrap .footer-right {width: 45%; display: flex; gap: 16px; align-items: center;}
#footer .footer-wrap .footer-right .border {border-radius: 5px; padding: 15px; box-sizing: border-box; text-align: center; font-size: 14px; border: 1px solid #fff; white-space: nowrap;}
#footer .footer-wrap .footer-right > div.border > span {font-size: 20px; font-weight: 600;}
#footer .footer-wrap .footer-right > div > span {line-height: 135%; font-size: 15px; word-break: keep-all; display: block;}



@media all and (max-width: 568px) {
    /* 헤더 */
    #header {height: 60px;}
    #header .header-wrap .logo {height: 60px; padding: 10px 15px;}
    #header .header-wrap .logo img {height: 100%;}
    #header .header-wrap .gnb {display: none;}

    .btn-mobile {display: block;}
    #header .header-wrap .mobile-gnb.active {display: block;}
    #header .header-wrap .mobile-gnb .gnb-wrap {width: 80vw; background-color: #fff; height: 100vh; position: fixed; top: 0; right: 0}
    #header .header-wrap .mobile-gnb .gnb-wrap .gnb-top {height: 60px; display: flex; justify-content: space-between; padding: 0 15px; box-sizing: border-box; align-items: center;}
    #header .header-wrap .mobile-gnb .gnb-wrap .gnb-top .logo {padding: 10px 0;}
    #header .header-wrap .mobile-gnb .gnb-wrap .gnb-top .btn-close {border: none; background-color: transparent; height: fit-content; margin-top: 25px;}
    #header .header-wrap .mobile-gnb .gnb-wrap .gnb-top .btn-close i {font-size: 22px; color: #161616;}
    #header .header-wrap .mobile-gnb ul {padding: 10px 0;}
    #header .header-wrap .mobile-gnb .gnb-wrap > ul > li {padding: 0 15px; box-sizing: border-box; height: 40px;}
    #header .header-wrap .mobile-gnb .gnb-wrap > ul > li > a {display: flex; align-items: center; height: 100%;}
    #header .header-wrap .mobile-gnb .gnb-wrap > ul > li .dep2 {display: none;}
    #header .header-wrap .mobile-gnb .gnb-wrap > ul > li.active {height: fit-content; padding: 0;}
    #header .header-wrap .mobile-gnb .gnb-wrap > ul > li.active > a {height: 40px; padding: 0 15px; box-sizing: border-box;}
    #header .header-wrap .mobile-gnb .gnb-wrap > ul > li.active .dep2 {display: block; position: relative; color: #00428e; background-color: #f4f4f4;}
    #header .header-wrap .mobile-gnb .gnb-wrap > ul > li.active .dep2 li {height: 40px;}
    #header .header-wrap .mobile-gnb .gnb-wrap > ul > li.active .dep2 li a {padding: 0 15px; box-sizing: border-box; display: inline-flex; align-items: center; height: 100%;}
    #header .header-wrap .gnb-layer {position: fixed; width: 100%; height: 100vh; top: 0; left: 0; background-color: rgba(0,0,0,0.4); z-index: 0}

    /* 푸터 */
    #footer {height: fit-content;}
    #footer .footer-wrap {flex-direction: column; gap: 35px; padding: 25px 15px; box-sizing: border-box;}
    #footer .footer-wrap .footer-left {width: 100%;}
    #footer .footer-wrap .footer-left .contact p {font-size: 24px; margin-bottom: 8px;}
    #footer .footer-wrap .footer-left .contact div {line-height: 120%; gap: 6px; font-size: 13px;}
    #footer .footer-wrap .footer-left .contact div .footer-mo {display: block; margin-top: 6px;}
    #footer .footer-wrap .footer-right {width: 100%; flex-direction: column; gap: 12px; align-items: flex-start;}
    #footer .footer-wrap .footer-right .border {padding: 15px; font-size: 12px;}
    #footer .footer-wrap .footer-right > div.border > span {font-size: 16px;}
    #footer .footer-wrap .footer-right > div > span {font-size: 14px; }
}