/* 푸터 */
footer {background: #282828; color: #fff; padding: 60px 0; font-family: 'SUIT', sans-serif !important;}
footer .logo img {width: 8rem;}
footer a {color: #fff;}
footer .line {width: 100%; height: 1px; margin: 2.5rem auto; background: #fff; opacity: 0.2;}
footer .contBox {display: flex; justify-content: space-between;}

footer .cont {display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end;}
footer .sns {display: flex; gap: 1rem; align-items: flex-end;}
footer .sns img {width: 2.5rem;}
footer .adm {display: flex;}
footer .adm a {padding: 0 .75rem; position: relative; line-height: 1;}
footer .adm a:after {position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 1rem; background: #888888; content: "";}
footer .adm a:first-child:after {display: none;}
footer .infor span {padding: 0 .5rem;}

@media(max-width:1240px) {
    footer .infor span {display: none;}
}

@media(max-width:768px) {
    footer .logo img {width: 9rem;}
    footer .contBox {flex-direction: column; gap: 3.125rem;}
    footer .cont {align-items: flex-start; gap: .5rem;}
    footer .sns img {width: 3.5rem;}
}

/* 퀵메뉴 */
#quick {position: fixed; z-index: 10; right: 1.5%; bottom: 10%; cursor: pointer;}
#quick img {width: 10rem; animation: bounce 0.8s cubic-bezier(0, 0, 0.18, 0.99) infinite alternate;}
#quick a:not(:first-child) img { margin-top: 1rem; }

@keyframes bounce{
    to{
        transform: translateY(-1rem);
    }
}

/* 모달 */
#modal {position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 15; background: url("/img/main/popBg.png"); background-size: cover; background-position: center; background-repeat: no-repeat; max-width: 51rem; width: 100%; aspect-ratio: 849 / 706; display: none;}
#modal .wrap {width: 85%; margin: auto;}
#modal .point {position: absolute; left: 60%; top: 3rem;}
#modal .point img {width: 14rem;}
#modal .closeBtn {position: absolute; right: 10%; top: 8%; cursor: pointer;}

#modal .cont .box {background: #f2f4fa; border-radius: 1.25rem; padding: 1rem 1.5rem; position: relative; z-index: 1;}
#modal .cont .box p {margin-top: .25rem;}
#modal .cont .box p button {font-size: 0.875rem; width: fit-content; background: var(--pointcolor); color: #fff; padding: .5rem .625rem .25rem; margin-left: .25rem;}

#modal .cont li {margin-top: .5rem; padding-left: .625rem; position: relative;}
#modal .cont li:after {position: absolute; left: 0; top: 0; content: "·";}
#modal .cont li span {font-size: 1rem; line-height: 1; color: #868ebd;}

#bg-overlay {position: fixed; left: 0; top: 0; height: 100%; width: 100%; background: #000; opacity: 0.5; z-index: 14; display: none;}


@media(max-width:768px) {
    #modal {max-width: 95%; background: #fff; padding: 5rem 0; border-radius: 3.125rem;}
    #modal .font-30 {font-size: 2.5rem;}
    #modal .font-20,
    #modal .font-18 {font-size: 1.5rem;}
    #modal .cont li span {font-size: 1.125rem;}
    #modal .cont .box p button {font-size: 1.125rem; width: 100%; padding: 1rem 1rem .85rem; margin: .625rem 0;}

    #modal .point {top: 7rem; left: 55%;}
    #modal .closeBtn  {right: 5%; top: 5%;}
}

@media(max-width:500px) {
    #modal {max-width: 95%; background: #fff; padding: 5rem 0; border-radius: 3.125rem;}
    #modal .font-30 {font-size: 2.25rem;}
    #modal .font-20,
    #modal .font-18 {font-size: 1.25rem;}
    #modal .cont li span {font-size: 1rem;}
    #modal .cont .box p button {font-size: 1rem;}

    #modal .point {top: 5rem; left: 50%;}
    #modal .closeBtn  {right: 5%; top: 5%;}
}

/* 해더 */
#header {position: fixed; left: 50%; top: 0; transform: translateX(-50%); width: 90%; z-index: 11; clip-path: polygon(0% 0%, 100% 0%, 99.5% 100%, .5% 100%); background: #fff; border-radius: 0 0 3.5rem 3.5rem; }
#header .wrap {width: 90%; margin: auto; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1;}
#header .logo img {width: 15rem;}
#header .gnb {display: flex; gap: 2rem;}
#header .gnb li { padding: 2rem 0; }
#header .gnb li a { line-height: normal; display: inline-block; color: var(--pointcolor); background-color: transparent; padding: .75rem 1rem .5rem; border-radius: 2rem; }
#header .gnb li.call_119 a { display: inline-flex; align-items: flex-start; justify-content: center; color: var(--pointcolor2); background-color: var(--pointcolor); }
#header .gnb li.call_119 a span { line-height: 1; }

#header .hamburger {width: 3.125rem; height: 2.8125rem; position: relative;  -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);   -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; display: none; margin-right: 5%;}
#header .hamburger span {display: block; position: absolute; height: 4px; width: 100%; background: var(--pointcolor); opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}

#header .hamburger span:nth-child(1) {top: 0px;}
#header .hamburger span:nth-child(2),
#header .hamburger span:nth-child(3) {top: 1rem;}
#header .hamburger span:nth-child(4) {top: 2rem;}

#header.on .hamburger span:nth-child(1) {top: 1rem; width: 0%; left: 50%;}
#header.on .hamburger span:nth-child(2) {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
#header.on .hamburger span:nth-child(3) {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
#header.on .hamburger span:nth-child(4) {top: 1rem; width: 0%; left: 50%;}

@media(max-width:1440px) {
    #header {clip-path:none; border-radius: 0; width: 100%;}
    #header .gnb>li {font-size: 1.25rem;}
}


@media(max-width:990px) {
    #header {clip-path:none; border-radius: 0; width: 100%; height: 7rem; display: flex; align-items: center; left: 0; transform: none;}
    #header .logo {margin-left: 5%;}
    #header .wrap {width: 100%;}

    #header .gnb {position: fixed; left: 0; top: 7rem; height: calc(100vh - 7rem); background: #fff; width: 100%; flex-direction: column; opacity: 0; visibility: hidden; padding-top: 5rem; overflow-y: scroll; gap: 0; padding-bottom: 5rem; justify-content: space-between;}
    #header .gnb>li {width: 100%; text-align: center; font-size: 3.75rem;}
    #header .gnb>li a {padding: 0;}
    #header .gnb li a { padding: 1rem 1.5rem .75rem; }
    #header .gnb li.call_119 a { align-items: center; }
    #header .gnb li.call_119 a img { min-width: 2rem; }
    #header .gnb li.call_119 a span { line-height: 1; }


    #header .gnb::-webkit-scrollbar {display: none;}

    #header.on .gnb {opacity: 1; visibility: visible;}
    #header .hamburger {display: block;}
}

@media(max-width:500px) {
    #header .gnb  {gap: 3.75rem;}
}