@charset "utf-8";

/* layout */
.inner {position: relative; width: 100%; max-width: 1440px; margin: 0 auto;
    @media (width <= 1480px) {padding: 0 20px;}
}
.main-container {position: relative; display: block; width: 100%; padding: var(--header-height) 0 0;}
.sub-container {position: relative; display: block; width: 100%; padding: var(--header-height) 0 0; border-bottom: 1px solid #eee;
    & .sub-wrapper {padding: 48px 0 120px;
        & .inner {display: flex; flex-direction: column; gap: 36px;}
        & .sub-tit {
            & p {font-size: 30px; font-weight: 600; color: #adb5bd;}
        }
        & .sub-contents {}
    }
    @media (width <= 1024px) {
        & .sub-wrapper {
            & .sub-tit {
                & p {font-size: 26px;}
            }
        }
    }
    @media (width <= 640px) {
        & .sub-wrapper {padding: 24px 0 48px;
            & .inner {gap: 24px;}
            & .sub-tit {
                & p {font-size: 24px;}
            }
        }
    }
    @media (width <= 460px) {
        & .sub-wrapper {
            & .sub-tit {
                & p {font-size: 18px;}
            }
        }
    }
}
.fix-mb {position: fixed; bottom: 0; left: 0; display: none; width: 100%; background: #fff; box-shadow: var(--key-shadow); z-index: 2;
    > ul {display: flex;
        > li {position: relative; width: calc(100% / 5);
            & a {position: relative; display: block; width: 100%; text-align: center; padding: 12px 0;
                & i {font-size: 20px; color: #999;}
                & p {font-size: 12px; font-weight: 500; color: #999; line-height: 1; margin: 4px 0 0;}
            }
            &.on {
                & a::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #d5081e 0%, #2c4f87 100%);}
                & a i {color: var(--key-color);}
                & a p {color: var(--key-color);}
            }
        }
    }
    @media (width <= 640px) {display: block;}
}

/* header */
header {position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 9;
    & .header-wrap {background: #fff;
        & .h-top {background: #2b2b2b; height: 40px;
            & .banner {display: flex; align-items: center; height: 100%;
                & .con {text-align: center;
                    & a {display: inline-block;
                        & p {font-size: 14px; color: #fff;
                            & strong {font-weight: 500; color: #ffd700;}
                        }
                    }
                }
                & .close {position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 14px; height: 14px; cursor: pointer;
                    & span {position: absolute; display: block; width: 100%; height: 2px; background: #fff;
                        &:nth-child(1) {top: 50%; left: 0; transform: translateY(-50%) rotate(45deg);}
                        &:nth-child(2) {top: 50%; left: 0; transform: translateY(-50%) rotate(-45deg);}
                    }
                }
            }
        }
        & .h-mid {position: relative; display: flex; justify-content: space-between; align-items: center; padding: 12px 120px; border-bottom: 1px solid #eee;
            & .left {display: flex; align-items: center; gap: 60px;
                & .logo {
                    & a {display: block; max-width: 152px;
                        & img {width: 100%;}
                    }
                }
                & .search {cursor: pointer;
                    & .search-bar {display: flex; align-items: center; gap: 80px; background: #F8F9FC; padding: 8px 16px; border-radius: 24px;
                        & p {font-size: 15px; color: #666;}
                    }
                }
            }
            & .right {display: flex; align-items: center; gap: 40px;
                & .sns {display: flex; gap: 12px;
                    & a {display: flex; align-items: center; gap: 6px; background: #F8F9FC; padding: 4px 8px; border-radius: 4px;
                        & i {
                            &.yt {color: var(--key-color);}
                            &.nv {color: #06cc80;}
                            &.is {background: linear-gradient(to right, #f9ce34, #ee2a7b, #6228d7); background-clip: text; -webkit-background-clip: text; color: transparent;}
                        }
                        & p {font-size: 14px; line-height: 1; color: #aaa;}
                    }
                }
                & .hm {
                    & .hm-bt {
                        & button {position: relative; display: block; width: 24px; height: 17px; font-size: 0; z-index: 99;
                            & span {position: absolute; left: 50%; transform: translateX(-50%); display: block; width: 100%; height: 2px; background: #222;
                                &:nth-child(1) {top: 0;}
                                &:nth-child(2) {top: 7px; transition: 0.25s;}
                                &:nth-child(3) {top: 7px; transition: 0.25s;}
                                &:nth-child(4) {top: 14px;}
                            }
                        }
                    }
                    & .hm-con {position: fixed; top: 0; right: 0; display: flex; align-items: flex-start; align-content: center; flex-wrap: wrap; gap: 80px; width: 90%; height: var(--view-height); background: #2b2b2b; padding: 0 120px; z-index: 9; opacity: 0; visibility: hidden; pointer-events: none; transition: 0.25s;
                        &::before {content: ''; position: absolute; right: 36px; bottom: 40px; display: block; width: 747px; aspect-ratio: 747 / 542; background: url("/img/layout/hm-bg.svg") no-repeat center; background-size: 100% auto;}
                        & .info {flex: 2;
                            > ul {
                                > li {margin: 0 0 24px;
                                    &:first-child {margin: 0 0 40px;}
                                    &:last-child {margin: 0;}
                                    & h2 {font-size: 34px; font-weight: 700; color: #fff;}
                                    & p {font-size: 14px; color: rgba(255, 255, 255, 0.7);}
                                    & span {display: block; font-size: 14px; color: rgba(255, 255, 255, 0.4);}
                                    & a {display: block; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, 0.4);
                                        &:hover {color: #fff;}
                                    }
                                }
                            }
                        }
                        & .list {position: relative; flex: 6; z-index: 2;
                            > ul {display: flex; gap: 40px; width: 100%;
                                > li {width: calc(100% / 5); border-right: 1px solid rgba(255, 255, 255, 0.2);
                                    &:last-child {border-right: 0;}
                                    & a {display: block; font-size: 18px; color: rgba(255, 255, 255, 0.4); margin: 0 0 24px; transition: all 0.2s;
                                        &:first-child {font-size: 34px; font-weight: 700; margin: 0 0 40px;}
                                        &:last-child {margin: 0;}
                                    }
                                    &:hover {
                                        & a {color: #fff;}
                                    }
                                }
                            }
                        }
                    }
                    &.on {
                        & .hm-bt {
                            & button {
                                & span {background: #fff;
                                    &:nth-child(1) {opacity: 0;}
                                    &:nth-child(2) {transform: translateX(-50%) rotate(45deg);}
                                    &:nth-child(3) {transform: translateX(-50%) rotate(-45deg);}
                                    &:nth-child(4) {opacity: 0;}
                                }
                            }
                        }
                        & .hm-con {width: 100%; opacity: 1; visibility: visible; pointer-events: initial;}
                    }
                }
            }
        }
        & .h-bot {position: relative; padding: 0 120px; border-bottom: 1px solid #eee;
            & .gnb {
                > ul {display: flex;
                    > li {
                        > a {display: block; font-weight: 500; line-height: 40px; padding: 0 30px;
                        }
                        &:first-child {
                            > a {padding: 0 30px 0 0;}
                        }
                        &:last-child {
                            > a {padding: 0 0 0 30px;}
                        }
                        & .gnb-depth {position: absolute; top: calc(100% - 1px); left: 0; display: none; width: 100%; border-top: 1px solid #eee; border-bottom: 1px solid #eee; background: #fff;
                            & .gnb-cate {width: 400px; padding: 36px 0 36px 120px; background: #F8F9FC;
                                & p {font-size: 36px; font-weight: 600;}
                            }
                            & .gnb-list {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: calc(100% - 400px); padding: 0 120px 0 0;
                                &.gr2 {grid-template-columns: repeat(2, minmax(0, 1fr));
                                    & .con:nth-child(2n) {border-right: 0;}
                                }
                                & .con {padding: 36px; border-right: 1px solid #eee;
                                    & .depth1 {padding: 0 0 24px;
                                        & a {display: block; font-size: 18px; font-weight: 600;}
                                    }
                                    & .depth2 {display: flex; flex-wrap: wrap; gap: 24px 0;
                                        & a {display: block; width: calc(100% / 2); font-weight: 500; color: #666;
                                            &:hover {color: var(--key-color);}
                                        }
                                    }
                                    &:nth-child(3n) {border-right: 0;}
                                    &.full {grid-column: 1 / 4; border-right: 0; border-top: 1px solid #eee;
                                        & .depth2 {
                                            & a {width: calc(100% / 4);}
                                        }
                                    }
                                    &.on {
                                        & .depth1 {
                                            & a {color: var(--key-color);}
                                        }
                                    }
                                }
                            }
                            &.on {display: flex;}
                        }
                        &.off {
                            & a {color: #ddd;}
                        }
                    }
                }
            }
        }
    }
    & .search-layer {position: absolute; top: calc(100% - 40px); left: 0; width: 100%; height: 460px; display: flex; justify-content: center; align-items: center; background: #fff; border-bottom: 1px solid #eee; height: 0; overflow: hidden; opacity: 0; transition: all 0.25s;
        & .search-con {display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px 0; width: 100%; max-width: 600px;
            & .bar {display: flex; align-items: center; width: 100%; border: 1px solid var(--key-color); padding: 12px 20px; border-radius: 24px;
                & input[type="text"] {width: 100%; font-size: 16px; border: 0;}
                & button {
                    & img {width: 16px;}
                }
            }
            & .rank {width: 250px;
                & .rank-tit {margin: 0 0 24px;
                    & p {font-weight: 500;
                        & strong {color: var(--key-color);}
                    }
                }
                & .rank-list {
                    & a {display: flex; align-items: center; margin: 0 0 4px;
                        & span {font-size: 14px; color: #999; width: 30px;}
                        & p {font-size: 14px; color: #000; width: calc(100% - 30px); text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
                        &:hover {
                            & p {text-decoration: underline;}
                        }
                        &:nth-child(1) {
                            & span {color: var(--key-color);}
                        }
                        &:nth-child(2) {
                            & span {color: var(--key-color); opacity: 0.87;}
                        }
                        &:nth-child(3) {
                            & span {color: var(--key-color); opacity: 0.74;}
                        }
                        &:last-child {margin: 0;}
                    }
                }
            }
            & .recent {width: calc(100% - 270px); padding: 0 0 0 20px; border-left: 1px solid #eee;
                & .recent-tit {display: flex; justify-content: space-between; align-items: flex-start; margin: 0 0 24px;
                    & p {}
                    & button {font-size: 12px; color: #adb5bd; border-bottom: 1px solid #adb5bd; padding: 2px 0 3px;}
                }
                & .recent-none {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; width: 100%; height: 150px; background: #F8F9FC; border: 1px solid #eee; gap: 10px;
                    & img {}
                    & p {width: 100%; font-size: 14px; font-weight: 500; color: #636569; text-align: center;}
                }
                & .recent-list {display: flex; gap: 8px; flex-wrap: wrap;
                    & p {display: flex; align-items: center; max-width: 150px; background: #F8F9FC; padding: 4px 8px; border-radius: 5px;
                        & .keyword {font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #aaa;
                            &:hover {color: #222;}
                        }
                        & .remove {
                            & i {font-size: 18px; color: #adb5bd;}
                        }
                    }
                }
            }
            & .close {width: 100%; text-align: center; cursor: pointer;
                & p {display: inline-block; font-size: 15px; padding: 4px 24px; border-radius: 4px; background: var(--key-color); color: #fff;}
            }
        }
        &.on {opacity: 1; height: 460px;}
    }
    & .bg-dim {position: fixed; display: none; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.3); z-index: -1;}
    @media (width <= 1480px) {
        & .header-wrap {
            & .h-top {
                & .banner {
                    & .close {right: 20px;}
                }
            }
            & .h-mid {padding: 12px 20px;
                & .right {
                    & .hm {
                        & .hm-con {flex-wrap: wrap; padding: var(--header-height) 20px 0;
                            &::before {width: 70%;}
                            & .info {display: none;}
                            & .list {width: 100%; height: 100%; flex: unset; order: 1; overflow-y: auto;
                                > ul {flex-direction: column; gap: 0;
                                    > li {display: flex; flex-wrap: wrap; width: 100%; border: 0; gap: 24px 36px; padding: 24px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.2);
                                        &:first-child {border-top: 1px solid rgba(255, 255, 255, 0.2);}
                                        & a {font-size: 16px; margin: 0;
                                            &:first-child {width: 100%; font-size: 22px; margin: 0 0}
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            & .h-bot {padding: 0 20px;
                & .gnb {
                    > ul {
                        > li {
                            & .gnb-depth {
                                & .gnb-cate {width: 200px; padding: 24px 0 24px 20px;
                                    & p {font-size: 30px;}
                                }
                                & .gnb-list {width: calc(100% - 200px); padding: 0 20px 0 0;
                                    & .con {padding: 24px;}
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 1280px) {
        & .header-wrap {
            & .h-mid {
                & .right {
                    & .sns {display: none;}
                }
            }
        }
    }
    @media (width <= 1024px) {
        & .header-wrap {
            & .h-mid {
                & .left {gap: 30px;
                    & .logo {
                        & a {max-width: 120px;}
                    }
                }
            }
            & .h-bot {display: none;}
        }
        & .search-layer {top: 100%;}
    }
    @media (width <= 640px) {
        & .header-wrap {
            & .h-top {
                & .banner {
                    & .con {
                        & a {
                            & p {font-size: 12px;}
                        }
                    }
                }
            }
            & .h-mid {
                & .left {
                    & .search {display: none;}
                }
            }
        }
        & .search-layer {align-items: flex-start;
            & .search-con {max-width: 100%; padding: 20px; gap: 20px;
                & .bar {order: 1; padding: 8px 14px;
                    & input[type="text"] {font-size: 15px;}
                }
                & .rank {width: 100%; order: 3;
                    & .rank-tit {margin: 0 0 12px;
                        & p br {display: none;}
                    }
                    & .rank-list {display: flex; flex-wrap: wrap; gap: 0 8px;
                        & a {width: calc(100% / 2 - 4px);}
                    }
                }
                & .recent {width: 100%; order: 2; padding: 0; border: 0;
                    & .recent-tit {margin: 0 0 12px;
                        & p br {display: none;}
                    }
                }
                & .close {order: 4;}
            }
            &.on {height: auto; max-height: calc(var(--view-height) - var(--header-height)); overflow-y: auto;}
        }
    }
    @media (width <= 460px) {
        & .search-layer {
            & .search-con {
                & .recent {
                    & .recent-list {
                        & p {
                            & .keyword {font-size: 12px;}
                            & .remove i {font-size: 14px;}
                        }
                    }
                }
            }
        }
    }
}

/* footer */
footer {position: relative;
    & .footer-wrap {display: flex; justify-content: space-between; align-items: flex-end; padding: 40px 120px;
        & .f-left {
            & .f-logo {
                & a {display: inline-block; max-width: 152px;
                    & img {width: 100%;}
                }
            }
            & .f-link {margin: 24px 0;
                > ul {display: flex;
                    > li {position: relative; padding: 0 24px;
                        &::after {content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 70%; background: #aaa; opacity: 0.5;}
                        &:first-child {padding: 0 24px 0 0;}
                        &:last-child {padding: 0 0 0 24px;
                            &::after {content: none;}
                        }
                        & a {display: block; font-size: 14px; color: #636569;}
                    }
                }
            }
            & .f-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: 14px; line-height: 1; color: #000;}
                        & p {font-size: 14px; line-height: 1; color: #636569;}
                        & a {font-size: 14px; line-height: 1; color: #636569;}
                    }
                }
            }
            & .f-copy {margin: 24px 0 0;
                & p {font-size: 13px; color: #999;}
            }
        }
        & .f-right {
            & .f-cs {text-align: right; margin: 0 0 12px;
                & p {}
                & h2 {font-size: 30px; font-weight: 600; margin: 8px 0; color: var(--key-color);}
                & span {display: block; font-size: 14px;
                    &:last-child {color: #999;}
                }
            }
            & .f-sns {display: flex; justify-content: flex-end;
                & a {display: block; width: 40px; height: 40px; font-size: 0; text-indent: -9999px; border-radius: 50%; background-position: center center; background-repeat: no-repeat;
                    &.yt {background-image: url("/img/layout/ico-sns-yt.png"); background-size: 26px; background-color: #636569;}
                }
            }
        }
    }
    @media (width <= 1480px) {
        & .footer-wrap {padding: 36px 20px;}
    }
    @media (width <= 1024px) {
        & .footer-wrap {flex-direction: column; gap: 24px;
            & .f-left {width: 100%;}
            & .f-right {width: 100%;
                & .f-cs {display: none;}
                & .f-sns {justify-content: flex-start;}
            }
        }
    }
    @media (width <= 640px) {
        & .footer-wrap {padding: 36px 20px 96px;
            & .f-left {text-align: center;
                & .f-logo {
                    & a {max-width: 120px;}
                }
                & .f-link {
                    > ul {justify-content: center;
                        > li {padding: 0 12px;
                            & a {font-size: 12px;}
                            &:first-child {padding: 0 12px 0 0;}
                            &:last-child {padding: 0 0 0 12px;}
                        }
                    }
                }
                & .f-info {
                    > ul {justify-content: center; flex-wrap: wrap; gap: 8px;
                        > li {padding: 0;
                            & strong {font-size: 12px;}
                            & p {font-size: 12px;}
                            &:first-child {width: 100%; padding: 0;}
                            &:last-child {padding: 0;}
                            &::after {content: none;}
                        }
                    }
                }
                & .f-copy {margin: 8px 0 0;}
            }
            & .f-right {
                & .f-sns {justify-content: center;
                    & a {width: 30px; height: 30px;
                        &.yt {background-size: 18px;}
                    }
                }
            }
        }
    }
}