@charset "utf-8";

.inner {max-width: 1280px; margin: 0 auto;}
.inner .inner {padding: 0;}

.img-wrap img {width: 100%; height: 100%; object-fit: cover;}
.semibold {font-weight: 600;}

.header {position: fixed; top: 0; left:0; width: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 9999;}
.header .inner {display: flex; justify-content: space-between; align-items: center; padding: 16px 0;}
.header .inner .gnb {display: flex; align-items: center;}
.header .inner .gnb li a {width: 100%; padding: 0 50px; color: var(--text_w); font-size: 18px; font-weight: 500;}
.header .inner .gnb li a svg {display: none;}
.header .inner .gnb li:last-of-type a {padding: 0 0 0 50px;}
.header .inner .gnb li:hover a {color: var(--primary); transition: 0.3s;}
.header .inner .gnb li.active a {color: var(--primary);}
.header .inner .gnb li.notice {padding: 0;}

.hover .inner .gnb li.active a {border-bottom: 1px solid var(--primary);}
.hover .inner .gnb li.active a svg path {fill: var(--primary);}

.mo-btn{position:relative;display:none;width:30px;height:30px;cursor:pointer;}
.mo-btn span,
.mo-btn span:before,
.mo-btn span:after{display:block;position:absolute;left:0;width:100%;height:3px;background:#fff;transition:all 0.3s;}
.mo-btn span{top:50%;transform:translteY(-50%,-50%);}
.mo-btn span:before,
.mo-btn span:after{content:'';}
.mo-btn span:before{top:-10px;}
.mo-btn span:after{top:10px;}

.hover .mo-btn>span{background:transparent;}
.hover .mo-btn>span:before{top:0;transform:rotate(45deg);}
.hover .mo-btn>span:after{top:0;transform:rotate(-45deg);}

footer {background-color: var(--bg); padding: 96px 0 55px 0;}
footer .inner {display: flex; justify-content: space-between; align-items: center;}
footer .inner .footer-l .sns {display: flex; column-gap: 10px; padding-top: 17px; align-items: center;}
footer .inner .footer-l .sns a {width: 30px; height: 30px; border-radius: 50%; background-color: #707070; display: flex; align-items: center; justify-content: center;}
footer .inner .footer-l .sns a svg {width: 20px; height: 20px;}
footer .inner .footer-l .sns .mo {display: none;}
footer .inner .footer-l .sns h4 {height: 30px; line-height: 37px; font-size: 24px; padding-right: 10px; color: var(--text_w)}
footer .inner .footer-r {max-width: 610px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; column-gap: 20px; row-gap: 10px; font-size: 16px;}
footer .inner .footer-r li {color: var(--text_w);}
footer .inner .footer-r li a.admin-btn {padding-right: 20px;}
footer .inner .footer-r li a:not(.logout){text-decoration: underline;}
footer .line-g {width: 100%; height: 1px; background-color: var(--primary); display: block; margin-top: 60px;}

/* 반응형 */
@media screen and (max-width: 1280px) {
    .inner {width: 100%; padding: 0 20px;}
    .header .inner {padding: 16px 20px;}
}

@media screen and (max-width: 1024px) {
    .header .inner .gnb li a {padding: 0 30px;}

    footer {padding: 46px 0 68px 0;}
    footer .inner {flex-direction: column; row-gap: 36px;}
    footer .inner .footer-l {padding-bottom: 16px; border-bottom: 1px solid #C4FA2F;}
    footer .inner .footer-l > img {width: 100px;}
    footer .inner .footer-l .sns {font-size: 20px; padding-top: 14px; flex-direction: column; align-items: flex-start; row-gap: 14px;}
    footer .inner .footer-l .sns > a {display: none;}
    footer .inner .footer-l .sns .mo {display: flex; column-gap: 24px; align-items: center;}
    footer .inner .footer-l,
    footer .inner .footer-r {width: 100%; max-width: 100%;}
    footer .inner .footer-r {justify-content: flex-start;}
    footer .inner .footer-r li:first-of-type,
    footer .inner .footer-r li:last-of-type {width: 100%;}
    footer .line-g {display: none;}
}

@media screen and (max-width: 768px) {
    .header .logo {display: flex; align-items: center; justify-content: center;}
    .header .logo img {height: 32px}
    .header .inner .gnb {display: none; position: absolute; top: 64px; left: 0; width: 100%; flex-direction: column; row-gap: 30px; background: #2B2B2B;}
    .header .inner .gnb li {width: 100%;}
    .header .inner .gnb li a {width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 0 10px 0; border-bottom: 1px solid #373737;}
    .header .inner .gnb li:last-of-type a {padding: 0 0 10px 0;}
    .header .inner .gnb li:hover a {border-bottom: 1px solid var(--primary); transition: 0.3s;}
    .header .inner .gnb li:hover a svg path {fill: var(--primary); transition: 0.3s;}

    .mo-btn {display: block;}
    .hover .inner .gnb {display: flex; padding: 30px 20px;}
    .hover .inner .gnb li a svg {display: block;}
}

@media screen and (max-width: 500px) {
    .inner {padding: 0px 16px;}
}

@media screen and (max-width: 410px) {
    .header .logo img {height: 25px;}
    .header .inner .gnb {top: 62px;}
    .header .inner .gnb li a {font-size: 16px;}

    footer .inner .footer-l > img {width: 80px;}
    footer .inner .footer-l .sns h4 {font-size: 20px;}
    footer .inner .footer-r {font-size: 16px;}
    footer .inner .footer-r li {word-break: keep-all;}
}