@charset "utf-8";
.inner {width: calc(100% - 100px); max-width: 1500px; margin: 0 auto;}

/********* 헤더 *********/
#hd {height: 60px; background-color: #fff; border-bottom: 1px solid #e5e5e5;}
#hd.sticky {width: 100%; z-index: 999; position: fixed; top: 0; background-color: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 10px rgba(0,0,0,0.1); animation: dropDown 0.5s ease forwards;}
@keyframes dropDown {from { transform: translateY(-100%); } to { transform: translateY(0); }}
#hd .inner {height: 100%; display: flex; align-items: center; justify-content: space-between;}
#hd h1 {width: 195px; height: 24px;}
#hd h1 a {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
#hd h1 a img {width: 100%; height: 100%; object-fit: contain;}
#hd nav ul {display: flex; align-items: center; column-gap: 40px;}
#hd nav ul li a {padding: 10px; font-family: 'Hana2', sans-serif !important; font-size: 1rem; font-weight: 500; text-decoration: none; display: inline-block; color: #313131; background: linear-gradient(to right, #313131 50%, rgba(0, 145, 120, 1) 50%, rgba(31, 64, 113, 1) 100%);background-size: 200% 100%; background-position: 0% 0%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: background-position 0.4s ease-out;}
#hd nav ul li a:hover {background-position: -100% 0%;}

/********* 푸터 *********/
#ft {padding-block: 60px;}
#ft .inner {display: flex; flex-direction: column; row-gap: 36px;}
#ft strong {color: #fff; line-height: 1.8; font-size: 0.938rem; font-weight: 500;}
#ft li {color: #CECECE; line-height: 1.8; font-size: 0.938rem; word-break: keep-all;}

@media screen and (min-width: 1921px) {
    .inner {max-width: 1600px;}
}

@media screen and (max-width: 1440px) {
    .inner {width: calc(100% - 64px); max-width: 1227px;}
}

@media screen and (max-width: 1280px) {
    #hd nav ul {column-gap: 30px;}
}

@media screen and (max-width: 1024px) {
    .inner {width: calc(100% - 48px);}
    #hd nav ul {column-gap: 24px;}
}

@media screen and (max-width: 768px) {
    #hd nav ul {column-gap: 16px;}
    #hd h1 {max-width: calc(100% - 200px);}
    #hd nav ul li a {padding: 5px;}
}

@media screen and (max-width: 480px) {
    .inner {width: calc(100% - 32px);}
    #hd nav ul {column-gap: 0px;}
    #hd nav ul li a {letter-spacing: -1px;}
}