@charset "utf-8";

/* 공통 레이아웃 - layout */
.inner {position: relative; width: 100%; max-width: 1500px; margin: 0 auto;
    @media (width <= 1540px) {width: calc(100% - 60px);}
}

/* header */
header {position: fixed; top: 0; left: 0; width: 100%; z-index: 9; transition: all 0.3s ease;
    & .header-wrap {position: relative; display: flex; justify-content: space-between; align-items: center; gap: 48px; width: 100%; height: var(--header-height); padding: 0 100px; transition: all 0.3s ease;
        & .logo {position: relative; width: 160px; z-index: 2;
            & a {display: block; width: 100%;
                & img {width: 100%; filter: brightness(0) invert(1);}
            }
        }
        & .gnb {flex: 1;
            > ul {display: flex; gap: 24px;
                > li {position: relative;
                    &.on {
                        > a {
                            &::after {width: calc(100% - 24px);}
                        }
                    }
                    > a {position: relative; font-size: 17px; font-weight: 500; line-height: var(--header-height); color: #fff; padding: 0 12px;
                        &::after {content: ''; position: absolute; top: calc(100% - 16px); left: 12px; width: 0; height: 1.5px; background: #fff; transition: all 0.3s ease;}
                    }
                    & .depth {position: absolute; top: calc(100% - 8px); left: 0; width: 180px; background: #fff; border-radius: 4px; padding: 8px; border: 1px solid #eee;
                        > a {display: block; font-size: 15px; font-weight: 500; color: #636569; padding: 8px; border-radius: 4px;
                            &:hover {background: #f5f5f5;}
                        }
                    }
                }
            }
        }
        & .util {display: flex; align-items: center; gap: 16px;
            & a {position: relative; font-size: 14px; font-weight: 500; color: #fff; border: 1px solid #fff; padding: 4px 12px; border-radius: 4px;
                &::before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0; background: rgba(255, 255, 255, 0.3); z-index: -1; transition: all 0.3s ease;}
                &:hover {
                    &::before {height: 100%;}
                }
            }
        }
        & .lang {position: relative;
            & .lang-btn {
                & button {display: flex; align-items: center; gap: 8px;
                    & i {color: #fff; height: 20px;}
                    & p {font-size: 16px; font-weight: 500; line-height: var(--header-height); color: #fff;}
                }
            }
            & .lang-list {position: absolute; top: calc(100% - 12px); left: 50%; transform: translateX(-50%); background: #fff; border-radius: 4px; padding: 8px; border: 1px solid #eee;
                > a {display: block; font-size: 15px; font-weight: 500; color: #636569; padding: 8px; border-radius: 4px;
                    &:hover {background: #f5f5f5;}
                }
            }
        }
        & .hm {display: none;
            & .hm-bt {position: relative; display: block; width: 24px; height: 16px; z-index: 2;
                & span {position: absolute; left: 50%; display: block; width: 100%; height: 2px; border-radius: 4px; background: #fff; transition: all 0.3s ease;
                    &:nth-child(1) {top: 0; transform: translate(-50%, 0);}
                    &:nth-child(2) {top: 50%; transform: translate(-50%, -50%);}
                    &:nth-child(3) {top: 50%; transform: translate(-50%, -50%);}
                    &:nth-child(4) {bottom: 0; transform: translate(-50%, 0);}
                }
            }
            & .hm-wrap {position: fixed; top: 0; left: 0; display: flex; flex-direction: column; width: 100%; height: var(--view-height); background: #fff; padding: var(--header-height) 24px; opacity: 0; pointer-events: none; transition: all 0.3s ease;
                & .link {display: flex; gap: 16px; padding: 12px 0; margin: 0 0 12px; border-top: 1px solid #eee; border-bottom: 1px solid #eee;
                    & a {font-weight: 600; color: #999;}
                }
                & .list {flex: 1; overflow: scroll;
                    > ul {display: flex; flex-direction: column; gap: 12px;
                        > li {
                            > a {font-size: 20px; font-weight: 500; line-height: 30px;}
                            > button {display: flex; justify-content: space-between; align-items: center; width: 100%;
                                & p {font-size: 20px; font-weight: 500; line-height: 30px;}
                                & img {width: 16px;}
                                &.on {
                                    & img {transform: rotate(-180deg);}
                                }
                            }
                            > .depth {margin: 12px 0 0; padding: 16px 0; background: #f5f5f5; border-radius: 8px;
                                & a {font-size: 15px; color: #666; padding: 0 16px; margin: 0 0 16px;
                                    &:last-child {margin: 0;}
                                }
                            }
                        }
                    }
                }
            }
            &.on {
                & .hm-bt {
                    & span {
                        &:nth-child(1) {width: 0; opacity: 0;}
                        &:nth-child(2) {transform: translate(-50%, -50%) rotate(45deg);}
                        &:nth-child(3) {transform: translate(-50%, -50%) rotate(-45deg);}
                        &:nth-child(4) {width: 0; opacity: 0;}
                    }
                }
                & .hm-wrap {opacity: 1; pointer-events: visible;}
            }
        }
    }
    &.header-scroll {background: #fff; border-bottom: 1px solid #eee;
        & .header-wrap {
            & .logo a img {filter: none;}
            & .gnb > ul > li {
                &.on > a {color: var(--point-color1);}
                > a {color: #000;
                    &::after {background: var(--point-color1);}
                }
            }
            & .util a {color: #000; border: 1px solid #000;
                &:hover {color: #fff;
                    &::before {background: #000;}
                }
            }
            & .lang .lang-btn button {
                & i {color: #000;}
                & p {color: #000;}
            }
            & .hm-bt span {background: #000;}
        }
    }
    &.header-hm {
        & .header-wrap {
            & .logo a img {filter: none;}
            & .hm-bt span {background: #000;}
        }
    }
    @media (width <= 1500px) {
        & .header-wrap {padding: 0 60px;}
    }
    @media (width <= 1280px) {
        & .header-wrap {padding: 0 24px; gap: 30px;
            & .logo {width: 150px;}
            & .gnb > ul {gap: 12px;
                > li > a {font-size: 16px;}
            }
        }
    }
    @media (width <= 1024px) {
        & .header-wrap {
            & .logo {width: 140px;}
            & .gnb {display: none;}
            & .util {display: none;}
            & .lang {display: none;}
            & .hm {display: block;}
        }
    }
}

/* footer */
footer {padding: 50px 0; border-top: 1px solid #eee;
    & .footer-wrap {display: flex; justify-content: space-between; align-items: center;
        & .footer-left {display: flex; flex-direction: column;
            & .logo {
                & img {width: 200px;}
            }
            & .link {padding: 20px 0;
                > ul {display: flex;
                    > li {position: relative; padding: 0 16px;
                        &::after {content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 70%; background: #aaa; opacity: 0.5;}
                        &:first-child {padding: 0 16px 0 0;}
                        &:last-child {padding: 0 0 0 16px;
                            &::after {content: none;}
                        }
                        & a {display: block; font-size: 15px; color: #636569;}
                    }
                }
            }
            & .info {
                > ul {display: flex; padding: 4px 0;
                    > li {position: relative; padding: 0 12px;
                        &::after {content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 70%; background: #aaa; opacity: 0.5;}
                        &:first-child {padding: 0 12px 0 0;}
                        &:last-child {padding: 0 0 0 12px;
                            &::after {content: none;}
                        }
                        & strong {font-size: 15px; font-weight: 500; line-height: 1; color: #000;}
                        & p {font-size: 15px; line-height: 1; color: #636569;}
                    }
                }
            }
            & .copy {padding: 24px 0 0;
                & p {font-size: 14px; color: #999;}
            }
        }
        & .footer-right {
            & .cs {text-align: right; margin: 0 0 12px;
                & p {}
                & h2 {font-size: 30px; font-weight: 700; color: var(--point-color1); padding: 6px 0;}
                & span {display: block; font-size: 14px;
                    &:last-child {color: #999;}
                }
            }
            & .sns {display: flex; justify-content: flex-end; gap: 10px;
                & a {display: block; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; font-size: 0;
                    &.blog {background: url("/images/main/sns-blog.svg") no-repeat center; background-size: cover;}
                    &.insta {background: url("/images/main/sns-is.svg") no-repeat center; background-size: cover;}
                    &.yt {background: url("/images/main/sns-yt.svg") no-repeat center; background-size: cover;}
                    &.fb {background: url("/images/main/sns-fb.svg") no-repeat center; background-size: cover;}
                }
            }
        }
    }
    @media (width <= 1024px) {
        & .footer-wrap {
            & .footer-right {display: none;}
        }
    }
    @media (width <= 860px) {padding: 36px 0 50px;
        & .footer-wrap {
            & .footer-left {flex: 1; text-align: center;
                & .logo img {width: 150px;}
                & .link {padding: 12px 0;
                    > ul {justify-content: center;
                        > li a {font-size: 14px;}
                    }
                }
                & .info {
                    > ul {justify-content: center;
                        > li p {font-size: 14px;}
                        > li strong {font-size: 14px;}
                    }
                }
                & .copy p {font-size: 12px;}
            }
        }
    }
    @media (width <= 640px) {
        & .footer-wrap {
            & .footer-left {
                & .link {display: none;
                    > ul {
                        > li a {font-size: 12px;}
                    }
                }
                & .info {
                    > ul {flex-wrap: wrap; gap: 4px 0; padding: 12px 0;
                        > li::after {content: none;}
                        > li p {font-size: 12px;}
                        > li strong {font-size: 12px;}
                    }
                }
            }
        }
    }
}