@charset "UTF-8";

:root {
    --footer-fs: 18px;
}

@media (max-width:768px) {
    :root {
        --footer-fs: 16px;
    }
}

@media (max-width:480px) {
    :root {
        --footer-fs: 14px;
    }
}

/* #header {height: 74px; background-color: #ffffff; box-shadow: var(--bs-header); display: -webkit-flex; display: flex; align-items: center;}*/
#header {height: 4.625rem; background-color: #ffffff; display: -webkit-flex; display: flex; align-items: center;}
#header .menu-area {display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; column-gap: 120px;}
#header .logo-area {-webkit-flex-shrink: 0; flex-shrink: 0; width: 172.703px; height: 40px; display: block;}
#header .logo-area .logo {width: 100%; height: 100%; object-fit: contain; display: block; margin-top: -6%;}

#header .gnb, 
#header .member-area {display: -webkit-flex; display: flex; align-items: center; column-gap: 1.875rem;}

#header .gnb {margin-right: auto;}
#header .main-menu, 
#header .member-menu {font-family: "Danjunghae", sans-serif; font-size: var(--fs-title4); color: var(--dark);}
#header .main-menu.on, 
#header .member-menu.on {color: var(--highlight);}



#header .member-area .btn-contact {font-family: "Open Sans", sans-serif; font-size: var(--fs-title5); color: var(--dark); font-weight: 600; display: flex; justify-content: center; align-items: center; padding: 8px 24px; border-radius: 6px; background: #FACC15;}


#header .notify-area {position: relative; margin-left: auto;}

#header .btn-notify {width: 2.75rem; height: 2.75rem; border-radius: 50%; display: -webkit-flex; display: flex; justify-content: center; align-items: center; margin: -4px;}
#header .btn-notify .icon-notify {width: 1.875rem; height: 1.875rem; display: block;}
#header .btn-notify .icon-notify circle {display: none;}
#header .btn-notify.new .icon-notify circle {display: block;}

#header .btn-notify {transition: .2s cubic-bezier(0.77, 0, 0.175, 1);}
#header .btn-notify:hover {background: var(--light-gray);}

#header .notify-box {width: 90vw; max-width: 380px; position: absolute; top: calc(100% + 30px); right: -18px; border-radius: 10px; background: #FFF; filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.25));}
#header .notify-box::before {content: ''; width: 25.45px; height: 15.53px; display: block; position: absolute; top: -14.038px; right: 22.3px; background-size: contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25.45' height='15.53' viewBox='0 0 25.45 15.53'%3E%3Cpath d='M9.58,1.53c1.6-2.04,4.69-2.04,6.29,0l9.58,14H0L9.58,1.53Z' fill='white'/%3E%3C/svg%3E");}

#header .notify-box .scroll {width: 100%; max-height: 70vh; overflow-x: hidden; overflow-y: auto;}

#header .notify-box .top {width: 100%; padding: 15px 20px; display: -webkit-flex; display: flex; justify-content: space-between; align-items: start; gap: 20px; position: sticky; top: 0; border-radius: 10px 10px 0 0; background: #fff;}
#header .notify-box .tit {color: #000; font-size: clamp(12px, 1rem, 16px); line-height: 1;}

#header .notify-box .btn-close {width: 20px; height: 20px; border-radius: 50%; background: var(--highlight);}
#header .notify-box .btn-close .icon-close {width: 100%; height: 100%; display: block;}

/* #header .ul-notify {padding: 20px 15px;}*/
#header .ul-notify {padding: 5px 15px 20px;}

#header .ul-notify .notify + .notify {margin-top: 10px;}
#header .ul-notify .notify {width: 100%; display: -webkit-flex; display: flex; padding: 13px 15px 13px 13px; justify-content: space-between; align-items: start; gap: 10px; border-radius: 10px; border: 2px solid #E7E7E7; background: #FFF;}

#header .ul-notify .notify svg {-webkit-flex-shrink: 0; flex-shrink: 0; width: 34px; height: 34px; display: block;}

#header .ul-notify .notify .message {width: 100%; color: var(--dark); font-size: clamp(10px, 0.875rem, 14px);}

#header .ul-notify .notify .time {-webkit-flex-shrink: 0; flex-shrink: 0; display: -webkit-flex; display: flex; justify-content: end; color: #B5B5B5; text-align: right; font-size: 0.75rem;}
#header .ul-notify .notify .time::before {content: ''; width: 5px; height: 5px; display: inline-block; border-radius: 50%; background: #B5B5B5; margin: calc((0.75rem * 1.4 - 5px)/2) 3px calc((0.75rem * 1.4 - 5px)/2) 0;}


#header .btn-notify.close ~ .notify-box {display: none;}
#header .btn-notify.open ~ .notify-box {display: block;}

#header .ul-notify {transition: opacity .2s linear; transition-delay: .1s; opacity: 0; visibility: hidden;}

#header .btn-notify.close ~ .notify-box .ul-notify {opacity: 0; visibility: hidden;}
#header .btn-notify.open ~ .notify-box .ul-notify {opacity: 1; visibility: visible;}

#header .contact-area {position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; z-index: 1000; justify-content: center; align-items: center; display: none;}
#header .contact-area.on {display: flex;}
#header .contact-area .bg {position: absolute; background: rgba(0, 0, 0, 0.253); width: 100%; height: 100%; z-index: -1;}
#header .contact-area .contact-wrap {background: #fff; max-width: 1100px; padding: 72px 144px 72px 144px; width: 100%; font-family: 'Cafe24Danjeonghae'; border-radius: 15px; box-shadow: 0 0 20px 0 rgba(4, 21, 45, 0.20);}
#header .contact-area .contact-wrap h3 {color: #222; text-align: center; font-size: 36px; font-weight: 400; line-height: 140%;}
#header .contact-area .contact-wrap p {color: #333; text-align: center; font-family: 'Pretendard'; font-size: 18px; line-height: 140%; font-weight: 500; margin-top: 10px;}
#header .contact-area form {display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 56px; gap: 20px; font-family: "Maru Buri";}
#header .contact-area label {font-weight: 700;}
#header .contact-area .input-box {display: flex; flex-direction: column; width: 48%; gap: 12px;}
#header .contact-area .input-box.textarea-box {width: 100%;}
#header .contact-area .btn-box {display: flex; justify-content: center; align-items: center; width: 100%; gap: 60px; margin-top: 40px;}
#header .contact-area .btn-box button {width: 280px; height: 42px; display: flex; justify-content: center; align-items: center; border-radius: 6px; font-size: 20px;}
#header .contact-area .btn-box button:first-child {background: #B7B6B5;}
#header .contact-area .btn-box button:last-child {background: #FACC15;}
#header .contact-area input,#header .contact-area textarea {background: #F5F5F5;}
#header .contact-area input:focus,#header .contact-area textarea:focus {background: #ffffff;}
#header .contact-wrap {position: relative; overflow: hidden;}
#header .loading-box {position: absolute; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; display: none; justify-content: center; align-items: center; background: #ffffffb0; backdrop-filter: blur(5px);}
#header .loading-box.on {display: flex;}
#header .loading-box iframe {border: 0;}



#footer {font-family: 'Pretendard'; position: relative; width: 100%; background: #111224; color: #B4B5BE; font-size: var(--footer-fs);}
#footer * {font-family: inherit;}
#footer .certificate-area {background:  #FFF;border-top: 2px solid #D2D4DA;border-bottom: 2px solid #D2D4DA;padding: 20px 48px;}
#footer .certificate-area img {width: 100%;height: 100%;max-height: 66px;object-fit: contain;}
#footer .certificate-wrap .swiper-wrapper {align-items: center;}
#footer .certificate-wrap .swiper-slide {height: auto;width: auto;}
#footer .inner {max-width: 1350px;}

#footer > .inner {padding: 94px 0 140px;}
#footer .site-area {border-top: 1px solid #5D5D6A;}
#footer .ft-logo {width: 197px;}
#footer .ft-logo svg {width: 100%; display: block;}
#footer .corporation {color: #E8E9EE; font-size: 22px; font-weight: 700; margin-top: 5px; margin-bottom: 32px;}

#footer address {color: var(--gray40); font-weight: 500; line-height: 160%; letter-spacing: var(--ls); margin-bottom: 40px;}
#footer address * {color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit;}
#footer address p>* + *::before,#footer .copy-wrap button+button::before,#footer .site-list li+ li::before {display: inline-block; content: ''; width: 1px; height: 12px; background: var(--gray40); margin: 0 6px;}

#footer .copy-wrap {display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px solid var(--gray20); font-weight: 500;}
#footer .copy-wrap .util {display: flex; justify-content: start; align-items: center;}
#footer .copy-wrap .util>*, 
#footer .copy {color: var(--gray40); font-size: var(--footer-fs); font-weight: 500; line-height: 140%; letter-spacing: var(--ls);}
#footer .copy-wrap .util #privacy {color: var(--gray20); font-weight: 700;}

#footer .site-list {display: flex; padding: 37px 0;}
#footer .site-list li {display: flex;align-items: center;}
#footer .site-list a {color: #FFF; font-size: 22px; font-weight: 600;display: flex;align-items: center;}
#footer .site-list li+ li::before {margin: 0 28px;height: 20px;}





@media (max-width:1440px) {
    #header .contact-area .contact-wrap {padding: 40px; max-width: fit-content; width: 80%;}
    #header .contact-area .btn-box {margin-top: 20px;}
}

@media (max-width:1400px) {
    #footer .inner {max-width: none;width: 100%; padding-left: 20px;padding-right: 20px;}
}

@media (max-width:1280px) {
    #header .menu-area {column-gap: 66px;}
    #header .logo-area {width: 138.156px; height: 32px;}
    
    #footer .top-bar {padding: 20px 50px 0; border: 0; border-top: var(--border-solid);}
    #footer .list-wrap {width: 100%; cursor: pointer; position: relative;}
    
    #footer .top-bar .list-wrap .tit {width: 100%; padding: 10px 16px; margin: 0; border: var(--border-solid); background: var(--white);}
    #footer .top-bar .list-wrap .list-site {position: absolute; top: 36.88px; width: 100%; transform: scaleY(0); transform-origin: top; transition: all 0.3s; border-left: var(--border-solid); border-right: var(--border-solid); background: var(--white);}

    #footer .top-bar .list-wrap .list-site .item {width: 100%; margin: 0; padding: 10px 16px; border-bottom: var(--border-solid);}
    #footer .top-bar .list-wrap .list-site .item a {width: 100%; height: 20px;}
}

@media (max-width:992px) {
    #footer .top-bar {padding: 20px 50px 0; border: 0; border-top: var(--border-solid);}
    #footer .list-wrap {width: 100%; cursor: pointer; position: relative;}
    #related + .related-label {width: 100%; cursor: pointer; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
    #related + .related-label::after {content: '\f078'; font-weight: 900; font-family: "Font Awesome 6 Free"; font-size: 20px; color: var(--highlight); line-height: 1; position: absolute; top: 7px; right: 20px;}
    #related:checked + .related-label::after {content: '\f077';}
    #footer .top-bar .list-wrap .tit {width: 100%; padding: 10px 16px; margin: 0; border: var(--border-solid); background: var(--white);}
    #footer .top-bar .list-wrap .list-site {position: absolute; top: 36.88px; width: 100%; transform: scaleY(0); transform-origin: top; transition: all 0.3s; border-left: var(--border-solid); border-right: var(--border-solid); background: var(--white);}
}

@media (max-width:768px) {
    #header .contact-area .contact-wrap {padding: 20px;}

    #header .member-area .btn-contact {padding: 4px 12px;}
    #header .gnb, #header .member-area {gap: 10px;}
    /* #header .contact-area form {flex-direction: column;}*/
    #header .contact-area .input-box {width: calc(50% - 5px);}
    #header .contact-area form {margin-top: 20px; gap: 10px;}
    #header .contact-area .input-box {gap: 8px;}
    #header .contact-area .btn-box {gap: 20px;}
    #header .contact-area .btn-box button {width: calc(50% - 10px);}
    #header .contact-area textarea {min-height: 100px;}
    #header .contact-area .btn-box {margin-top: 10px;}
    #header .contact-area input {height: 32px; line-height: 32px;}
    #header .contact-area input::placeholder,#header .contact-area textarea::placeholder {font-size: 12px;}
    #header .contact-area .contact-wrap p {font-size: 14px;}
    #header .contact-area .btn-box button {font-size: 16px;}

    #footer .certificate-area {padding: 10px 20px;}
    #footer .copy-wrap {padding-top: 24px; flex-direction: column; align-items: flex-start; gap: 8px;}
    #footer address * {display: block;}
    #footer address a {width: fit-content;}
    #footer address p>* + *::before {display: none;}
    #footer .site-list a {font-size: 14px;}
    #footer .site-list li+ li::before {margin: 0 10px;}
    #footer .site-list {padding: 20px 0;}
    #footer > .inner {padding: 40px 20px 20px;}
    #footer .ft-logo {width: 157px;}
    #footer .corporation {font-size: 20px;}
}

@media (max-width:700px) {
    #header .menu-area {column-gap: var(--inner-padding-l);}
}

@media (max-width:600px) {
    #header .notify-box {right: -140px;}
    #header .notify-box::before {right: calc(22.3px + 118px);}
}

@media (max-width:480px) {
    #header {height: auto; padding: 15px 0;}

    #header .menu-area {display: grid; row-gap: 15px; grid-template-areas: 
    'logo logo'
    'gnb member';}
    #header .menu-area .logo-area {grid-area: logo;}
    #header .menu-area .gnb {grid-area: gnb;}
    #header .menu-area .member-area {grid-area: member;}

    #header .logo-area {width: 120.8923px; height: 28px;}

    #footer .site-list {flex-direction: column;}
    #footer .site-list li+ li {margin-top: 4px;}
    #footer .site-list li+ li::before {display: none;}
}