#header {background: none;}

#header .header__logo > a {background: url("/_wavedream/images/common/logo_nanum_white.webp") no-repeat center center/contain;transition: .4s;}
#header .header__logo > a > img {opacity: 0;}
#header .header__gnb > ul > li {color: #fff;}
#header .header__gnb > ul > li:hover {color: var(--color-primary);}
#header .header__mobile-bar > svg {color: #fff;}
#header.on {background: #fff;}
#header.on .header__logo {opacity: 1; visibility: visible;}
#header.on .header__logo > a {background: url("/_wavedream/images/common/logo_nanum.webp") no-repeat center center/contain;}
#header.on .header__gnb > ul > li {color: #777;}
#header.on .header__gnb > ul > li:hover {color: var(--color-black);}
#header.on .header__mobile-bar > svg {color: var(--color-black);}



#case {}
.case-wrap {width: 100%;max-width: 910px;margin: 0 auto; padding: 0 var(--layout-padding);}
.case__visual {position: relative;margin-bottom: 208px;}
.case__visual > figure {}
.case__visual > figure > img {width: 100%;object-fit: cover;}
.case__visual-title {position: absolute;bottom: 20%;left: 50%;transform: translateX(-50%);}
.case__visual-title-box {position: relative;max-width: 412px;}
.case__visual-title-box:after {content: "";display: block; position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);;width: 128%;height: 162%; border-radius: 50%; background: rgba(255,255,255,0.7); filter: blur(35px);z-index: -1;;}
.case__visual-title-logo {margin-bottom: 18px;}
.case__visual-title-logo > img {width: 100%;}
.case__visual-title-text {font-size: 42px;font-weight: 900;letter-spacing: 0;}



.case__content {margin-bottom: 140px;}
.case__content.type-table {margin-bottom: 200px;}
.case__content > ul {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 25px 28px;}
.case__content > ul > li {}
.case__content > ul > li:not(.center) {cursor: pointer;}
.case__content > ul > li > img {width: 100%;}
.case__content > ul > li.center {display: flex;flex-direction: column;align-items: center;justify-content: center; padding: 0 21px;box-shadow: 0 0 10px rgba(0,0,0,.2);}
.case__content > ul > li.center > figure {width: 100%;margin-bottom: 20px;}
.case__content > ul > li.center > figure > img {width: 100%;}
.case__content > ul > li.center > p {font-size: 22px;font-weight: 900; color: var(--color-secondary);}


.case__bottom {padding: 185px 0 171px;text-align: center;background: url('/_wavedream/images/case/bottom_banner.webp') no-repeat center center/cover;}
.case__bottom .section-wrap {}
.case__bottom-title {margin-bottom: 120px;color: #fff;font-weight: 700;}
.case__bottom-logo {width: 380px;max-width: 80%;margin: 0 auto;}
.case__bottom-logo > img {width: 100%;}



.case__popup {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 1000;color: #fff;opacity: 0;visibility: hidden;transition: .4s;}
.case__popup.on {opacity: 1;visibility: visible;}
.case__popup-bg {width: 100%;height: 100%;background: rgba(0,0,0,.5);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);}
.case__popup-close {position: absolute;top: 30px;right: 30px;z-index: 1;}
.case__popup-close > svg {width: 35px;}
.case__popup-navi {display: flex;align-items: center;justify-content: space-between;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;height: 0;padding: 0 30px;}
.case__popup-navi > div {cursor: pointer;}
.case__popup-navi > div > svg {width: 30px;}
.case__popup-img {position: absolute;top: 50%;left: 50%; transform: translate(-50%, -50%);}
.case__popup-img > img {display: block;width: auto; height: auto;max-width: 100dvw;max-height: 100dvh;}


@media all and (max-width:1024px) {
    .case__visual {margin-bottom: 100px;}
    .case__visual-title {bottom: 15%;}
    .case__visual-title-box {width: 53%;max-width: 100%;container-type: inline-size;}
    .case__visual-title-logo {margin-bottom: 8px;}
    .case__visual-title-text {font-size: 10cqw;}
    .case__visual > figure > img {min-height: auto;}

    .case__content {margin-bottom: 80px;}
    .case__content.type-table {margin-bottom: 120px;}
    .case__content > ul {gap: 8px;}
    .case__content > ul > li.center {padding: 0 5px;box-shadow: 0 0 8px rgba(0,0,0,.2);text-align: center;container-type: inline-size;}
    .case__content > ul > li.center > figure {padding: 0 10px;margin-bottom: 10px;}
    .case__content > ul > li.center > p {font-size: 16cqw;word-break: keep-all;}

    .case__bottom {padding: 100px 0;}
    .case__bottom-title {margin-bottom: 50px;}
    .case__bottom-logo {width: 200px;}

    .case__popup-close {display: flex;align-items: center;justify-content: center;top: 10px;right: 10px; width: 30px;height: 30px; padding: 3px;background: #fff;border-radius: 50%; color: #333;text-align: center;opacity: .7;}
    .case__popup-close > svg {width: 100%;vertical-align: middle;}
    .case__popup-navi {padding: 0 10px;}
    .case__popup-navi > div {display: flex;align-items: center;justify-content: center;width: 30px;height: 30px; padding: 5px;border-radius: 50%;background: #fff;color: #333;text-align: center;opacity: .7;}
    .case__popup-navi > div > svg {width: 100%;}
}