.cl-tabmenu {
    --tabmenu-list-margin-top: 24px;
    --tabmenu-list-margin-top-current: var(--tabmenu-list-margin-top);
    --tabmenu-list-width: 100%;
    --tabmenu-list-align: center;
    --tabmenu-list-blur: 5px;
    --tabmenu-list-bgcolor: transparent;
    --tabmenu-list-style-full: 1;
    --tabmenu-btn-col-default: 3;
    --tabmenu-btn-col-mobile-default: 3;
    --tabmenu-btn-col: var(--tabmenu-btn-col-default);
    --tabmenu-btn-col-mobile: var(--tabmenu-btn-col-mobile-default);
    --tabmenu-btn-minh: 46px;
    --tabmenu-btn-minh-current: var(--tabmenu-btn-minh);
    --tabmenu-btn-gap-col: 8px;
    --tabmenu-btn-gap-row: 8px;
    --tabmenu-btn-gap-col-current: var(--tabmenu-btn-gap-col);
    --tabmenu-btn-gap-row-current: var(--tabmenu-btn-gap-row);
    --tabmenu-btn-fname: "Noto Sans KR", "Open Sans", sans-serif;
    --tabmenu-btn-fsize: 15px;
    --tabmenu-btn-fsize-current: var(--tabmenu-btn-fsize);
    --tabmenu-btn-fweight: 400;
    --tabmenu-btn-letterspacing: 0em;
    --tabmenu-btn-lineheight: 140%;
    --tabmenu-btn-color: #45484d;
    --tabmenu-btn-color-active: #fff;
    --tabmenu-btn-bgcolor-active: #4789e7;
    --tabmenu-line-color: #dfe3e8;
    --tabmenu-line-color-active: #4789e7;
    --tabmenu-object-color: #fff;
    --tabmenu-block-bgcolor: #fff;
    --tabmenu-block-bgimg: none;
    --tabmenu-block-bgimg-layer-color: transparent;
    --tabmenu-block-bgimg-size: cover;
    --tabmenu-block-bgimg-position: center center;
    --tabmenu-block-bgimg-repeat: no-repeat;
    --tabmenu-padding-top: 50px;
    --tabmenu-padding-bottom: 0px;
    --tabmenu-padding-top-current: var(--tabmenu-padding-top);
    --tabmenu-padding-bottom-current: var(--tabmenu-padding-bottom);
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
    padding-top: var(--tabmenu-padding-top-current);
    padding-bottom: var(--tabmenu-padding-bottom-current);
    background-color: var(--tabmenu-block-bgcolor, #fff);
    background-image:
        linear-gradient(var(--tabmenu-block-bgimg-layer-color, transparent), var(--tabmenu-block-bgimg-layer-color, transparent)),
        var(--tabmenu-block-bgimg, none);
    background-size: var(--tabmenu-block-bgimg-size, cover);
    background-position: var(--tabmenu-block-bgimg-position, center center);
    background-repeat: var(--tabmenu-block-bgimg-repeat, no-repeat);
}

/* 저장된 레이아웃 CSS와 버튼 행 계산이 끝나기 전 기본 프리셋이 먼저 보이는 것을 막는다. */
.cl-tabmenu:not(.tabmenu-ready) {
    visibility: hidden;
}

.cl-tabmenu[data-parallax="true"][data-parallax-effect="fixed"] {
    background-attachment: fixed;
}

.cl-tabmenu[data-parallax="true"][data-parallax-effect="fixed"]::before,
.cl-tabmenu[data-parallax="true"][data-parallax-effect="fixed"]::after {
    background-attachment: fixed;
}

.cl-tabmenu > .parallax-layer[data-mode] {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: var(--parallax-bgimg);
    background-size: var(--parallax-bgimg-size, cover);
    background-position: var(--parallax-bgimg-position, 50% 0);
    background-repeat: var(--parallax-bgimg-repeat, repeat-y);
    pointer-events: none;
}

.cl-tabmenu > .parallax-layer[data-mode="scroll"] {
    top: -250px;
    bottom: -250px;
}

.cl-tabmenu > .parallax-layer + .tabmenu-container {
    position: relative;
    z-index: 1;
}

.cl-tabmenu *,
.cl-tabmenu *::before,
.cl-tabmenu *::after {
    box-sizing: border-box;
}

.cl-tabmenu .tabmenu-list-wrap,
.cl-tabmenu .tabmenu-content-wrap {
    width: 100%;
}

.cl-tabmenu .tabmenu-content-wrap {
    position: relative;
}
.cl-tabmenu .tabmenu-container.full-width {
    width: 100% !important;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
    padding-right: 15px;
    padding-left: 15px;
}


.cl-tabmenu .tabmenu-content {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.cl-tabmenu .tabmenu-box {
    line-height: 1.5;
}

.cl-tabmenu .tabmenu-list-wrap {
    position: relative;
    display: flex;
    justify-content: var(--tabmenu-list-align);
}

.cl-tabmenu .tabmenu-list-wrap::before,
.cl-tabmenu .tabmenu-list::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    background-color: var(--tabmenu-list-bgcolor);
    -webkit-backdrop-filter: blur(var(--tabmenu-list-blur));
    backdrop-filter: blur(var(--tabmenu-list-blur));
    pointer-events: none;
}

.cl-tabmenu .tabmenu-list-wrap::before {
    left: 50%;
    width: 100vw;
    opacity: var(--tabmenu-list-style-full);
    transform: translateX(-50%);
}

.cl-tabmenu .tabmenu-list::before {
    left: 0;
    width: 100%;
    z-index: -1;
    opacity: calc(1 - var(--tabmenu-list-style-full));
}

.cl-tabmenu .tabmenu-list {
    position: relative;
    z-index: 1;
    width: var(--tabmenu-list-width);
    display: grid;
    grid-template-columns: repeat(var(--tabmenu-btn-col), minmax(0, 1fr));
    grid-auto-rows: 1fr;
    column-gap: var(--tabmenu-btn-gap-col);
    row-gap: var(--tabmenu-btn-gap-row);
}

.cl-tabmenu[data-btn-sizing="auto"] .tabmenu-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    column-gap: var(--tabmenu-btn-gap-col-current);
    row-gap: var(--tabmenu-btn-gap-row-current);
    justify-content: var(--tabmenu-list-align);
}

.cl-tabmenu[data-btn-sizing="auto"] .tabmenu-btn {
    width: auto;
    max-width: 100%;
    flex: 0 0 auto;
}

@media (min-width: 768px) and (max-width: 991px) {
    .cl-tabmenu {
        --tabmenu-btn-minh-current: calc(var(--tabmenu-btn-minh) * .8);
        --tabmenu-btn-fsize-current: max(13px, calc(var(--tabmenu-btn-fsize) * .9));
    }

    .cl-tabmenu[data-btn-sizing="auto"] {
        --tabmenu-btn-gap-col-current: calc(var(--tabmenu-btn-gap-col) * .8);
        --tabmenu-btn-gap-row-current: calc(var(--tabmenu-btn-gap-row) * .8);
    }
}

@media (max-width: 767px) {
    .cl-tabmenu {
        --tabmenu-btn-minh-current: calc(var(--tabmenu-btn-minh) * .6);
        --tabmenu-btn-fsize-current: max(12px, calc(var(--tabmenu-btn-fsize) * .8));
    }

    .cl-tabmenu[data-btn-sizing="auto"] {
        --tabmenu-btn-gap-col-current: calc(var(--tabmenu-btn-gap-col) * .5);
        --tabmenu-btn-gap-row-current: calc(var(--tabmenu-btn-gap-row) * .5);
    }

    .cl-tabmenu:not([data-btn-sizing="auto"]) .tabmenu-list {
        grid-template-columns: repeat(var(--tabmenu-btn-col-mobile), minmax(0, 1fr));
    }

    .cl-tabmenu[data-btn-sizing="auto"] .tabmenu-btn {
        height: auto;
        align-self: flex-start;
    }
}

.cl-tabmenu[data-btn-sizing="equal"][data-btn-style="table"] .tabmenu-list {
    gap: 0;
}

.cl-tabmenu .tabmenu-btn {
    min-width: 0;
    min-height: var(--tabmenu-btn-minh-current);
    height: 100%;
    font-family: var(--tabmenu-btn-fname);
    font-size: var(--tabmenu-btn-fsize-current);
    font-weight: var(--tabmenu-btn-fweight);
    letter-spacing: var(--tabmenu-btn-letterspacing);
    line-height: var(--tabmenu-btn-lineheight);
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--tabmenu-line-color);
    background-color: transparent;
    color: var(--tabmenu-btn-color);
    text-align: center;
    text-decoration: none;
    white-space: normal;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.cl-tabmenu .tabmenu-btn:hover,
.cl-tabmenu .tabmenu-btn:focus,
.cl-tabmenu .tabmenu-btn.active {
    border-color: var(--tabmenu-line-color-active);
    background-color: var(--tabmenu-btn-bgcolor-active);
    color: var(--tabmenu-btn-color-active);
    text-decoration: none;
}

.cl-tabmenu .tabmenu-list-wrap {
    margin-top: var(--tabmenu-list-margin-top-current);
}

/* one/multi page sticky navigation rail (outside .dsgn-body overflow) */
.tabmenu-sticky-rail {
    position: absolute;
    /* 페이지 콘텐츠보다는 위, 메뉴와 드롭다운 stacking context보다는 아래 */
    z-index: 18;
    pointer-events: none;
}

@media (min-width: 768px) {
    body[data-clnav-layout="sidenav"] > .tabmenu-sticky-rail {
        right: 0;
        left: var(--sidenav-w, 260px) !important;
        width: auto !important;
    }
}

.tabmenu-sticky-rail > .cl-tabmenu {
    position: sticky;
    top: var(--tabmenu-sticky-top, 0px);
    width: 100%;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible;
    background: transparent !important;
    visibility: hidden;
    pointer-events: none;
}

.tabmenu-sticky-rail > .cl-tabmenu.tabmenu-sticky-active {
    visibility: visible;
}

.tabmenu-sticky-rail > .cl-tabmenu::before,
.tabmenu-sticky-rail > .cl-tabmenu::after {
    display: none !important;
}

.tabmenu-sticky-rail > .cl-tabmenu > .tabmenu-sticky-background {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.tabmenu-sticky-rail > .cl-tabmenu > .tabmenu-sticky-background > .tabmenu-sticky-background-canvas {
    position: absolute;
    max-width: none;
    pointer-events: none;
}

.tabmenu-sticky-rail > .cl-tabmenu > .tabmenu-container {
    position: relative;
    z-index: 1;
}

.tabmenu-sticky-rail > .cl-tabmenu .tabmenu-list-wrap {
    margin-top: 0;
    pointer-events: auto;
}

.cl-tabmenu .tabmenu-list-wrap.tabmenu-sticky-placeholder {
    visibility: hidden;
    pointer-events: none;
}

.tabmenu-onepage-duplicate-unit {
    display: none !important;
}

.tabmenu-onepage-page-hidden {
    display: none !important;
}

/* tabmenu-01: simple text navigation */
.cl-tabmenu[data-tabmenu-design="tabmenu-01"] {
    --tabmenu-list-margin-top: 42px;
    --tabmenu-list-align: flex-start;
    --tabmenu-list-bgcolor: transparent;
    --tabmenu-btn-minh: 58px;
    --tabmenu-btn-gap-col: 48px;
    --tabmenu-btn-fname: Pretendard, "Noto Sans KR", sans-serif;
    --tabmenu-btn-fsize: 18px;
    --tabmenu-btn-fweight: 700;
    --tabmenu-btn-color: #b1b3b7;
    --tabmenu-btn-color-active: #222428;
    --tabmenu-btn-bgcolor-active: transparent;
    --tabmenu-line-color: #eeeff0;
    --tabmenu-line-color-active: transparent;
    --tabmenu-block-bgcolor: #fafafa;
    --tabmenu-block-bgimg: none;
    --tabmenu-block-bgimg-layer-color: transparent;
    --tabmenu-padding-top: 75px;
    --tabmenu-padding-bottom: 40px;
}

.cl-tabmenu[data-tabmenu-design="tabmenu-01"] .tabmenu-list-wrap::before,
.cl-tabmenu[data-tabmenu-design="tabmenu-01"] .tabmenu-list::before {
    border-bottom: 1px solid var(--tabmenu-line-color);
}

.cl-tabmenu[data-tabmenu-design="tabmenu-01"] .tabmenu-btn {
    min-height: var(--tabmenu-btn-minh-current);
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--tabmenu-btn-color);
    justify-content: flex-start;
}

.cl-tabmenu[data-tabmenu-design="tabmenu-01"] .tabmenu-btn:hover,
.cl-tabmenu[data-tabmenu-design="tabmenu-01"] .tabmenu-btn:focus,
.cl-tabmenu[data-tabmenu-design="tabmenu-01"] .tabmenu-btn.active {
    border-color: transparent;
    background: transparent;
    color: var(--tabmenu-btn-color-active);
    background-color: var(--tabmenu-btn-bgcolor-active);
}

/* tabmenu-02: monochrome table navigation */
.cl-tabmenu[data-tabmenu-design="tabmenu-02"] {
    --tabmenu-list-margin-top: 44px;
    --tabmenu-list-bgcolor: rgba(0, 0, 0, .1);
    --tabmenu-btn-col-default: 4;
    --tabmenu-btn-minh: 61px;
    --tabmenu-btn-fname: Pretendard, "Noto Sans KR", sans-serif;
    --tabmenu-btn-fsize: 16px;
    --tabmenu-btn-fweight: 700;
    --tabmenu-btn-color: rgba(255, 255, 255, .45);
    --tabmenu-btn-color-active: #fff;
    --tabmenu-btn-bgcolor-active: transparent;
    --tabmenu-line-color: rgba(255, 255, 255, .3);
    --tabmenu-line-color-active: #fff;
    --tabmenu-block-bgcolor: #181818;
    --tabmenu-block-bgimg: url("//storage.googleapis.com/i.addblock.net/template/tabmenu_02_bg.webp");
    --tabmenu-block-bgimg-layer-color: rgba(0, 0, 0, .16);
    --tabmenu-block-bgimg-size: cover;
    --tabmenu-block-bgimg-position: center center;
    --tabmenu-padding-top: 70px;
    --tabmenu-padding-bottom: 0px;
}

.cl-tabmenu[data-tabmenu-design="tabmenu-02"] .tabmenu-list-wrap::before,
.cl-tabmenu[data-tabmenu-design="tabmenu-02"] .tabmenu-list::before {
    border-top: 1px solid var(--tabmenu-line-color);
}

.cl-tabmenu[data-tabmenu-design="tabmenu-02"] .tabmenu-btn {
    position: relative;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--tabmenu-btn-color);
}

.cl-tabmenu[data-tabmenu-design="tabmenu-02"] .tabmenu-btn:hover,
.cl-tabmenu[data-tabmenu-design="tabmenu-02"] .tabmenu-btn:focus,
.cl-tabmenu[data-tabmenu-design="tabmenu-02"] .tabmenu-btn.active {
    border-color: transparent;
    background: transparent;
    color: var(--tabmenu-btn-color-active);
    background-color: var(--tabmenu-btn-bgcolor-active);
    box-shadow: inset 0 3px 0 var(--tabmenu-line-color-active);
}

/* tabmenu-03: image hero with full-bleed table navigation */
.cl-tabmenu[data-tabmenu-design="tabmenu-03"] {
    --tabmenu-list-margin-top: 94px;
    --tabmenu-list-blur: 20px;
    --tabmenu-list-bgcolor: rgba(0, 0, 0, .5);
    --tabmenu-btn-col-default: 3;
    --tabmenu-btn-minh: 76px;
    --tabmenu-btn-fname: Pretendard, "Noto Sans KR", sans-serif;
    --tabmenu-btn-fsize: 16px;
    --tabmenu-btn-fweight: 700;
    --tabmenu-btn-color: #fff;
    --tabmenu-btn-color-active: #fff;
    --tabmenu-btn-bgcolor-active: #0c2705;
    --tabmenu-line-color: transparent;
    --tabmenu-line-color-active: transparent;
    --tabmenu-block-bgcolor: #0b2713;
    --tabmenu-block-bgimg: url("//storage.googleapis.com/i.addblock.net/template/tabmenu_03_bg.webp");
    --tabmenu-block-bgimg-layer-color: rgba(0, 0, 0, .5);
    --tabmenu-block-bgimg-size: cover;
    --tabmenu-block-bgimg-position: center center;
    --tabmenu-padding-top: 50px;
    --tabmenu-padding-bottom: 0px;
}

.cl-tabmenu[data-tabmenu-design="tabmenu-03"] .tabmenu-btn {
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--tabmenu-btn-color);
}

.cl-tabmenu[data-tabmenu-design="tabmenu-03"] .tabmenu-btn:hover,
.cl-tabmenu[data-tabmenu-design="tabmenu-03"] .tabmenu-btn:focus,
.cl-tabmenu[data-tabmenu-design="tabmenu-03"] .tabmenu-btn.active {
    border-color: transparent;
    background-color: var(--tabmenu-btn-bgcolor-active);
    color: var(--tabmenu-btn-color-active);
}

/* tabmenu-04: editorial orange navigation */
.cl-tabmenu[data-tabmenu-design="tabmenu-04"] {
    --tabmenu-list-margin-top: 58px;
    --tabmenu-list-bgcolor: transparent;
    --tabmenu-btn-col-default: 4;
    --tabmenu-btn-minh: 50px;
    --tabmenu-btn-fname: Belleza, Georgia, serif;
    --tabmenu-btn-fsize: 18px;
    --tabmenu-btn-fweight: 400;
    --tabmenu-btn-color: rgba(241, 219, 174, .55);
    --tabmenu-btn-color-active: #f1dbae;
    --tabmenu-btn-bgcolor-active: transparent;
    --tabmenu-line-color: transparent;
    --tabmenu-line-color-active: #f1dbae;
    --tabmenu-block-bgcolor: #fb3c00;
    --tabmenu-block-bgimg: none;
    --tabmenu-block-bgimg-layer-color: transparent;
    --tabmenu-padding-top: 40px;
    --tabmenu-padding-bottom: 40px;
}

.cl-tabmenu[data-tabmenu-design="tabmenu-04"] .tabmenu-btn {
    position: relative;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--tabmenu-btn-color);
    text-transform: uppercase;
}

.cl-tabmenu[data-tabmenu-design="tabmenu-04"] .tabmenu-btn::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--tabmenu-line-color-active);
    transform: translateX(-50%);
    transition: width .2s ease;
}

.cl-tabmenu[data-tabmenu-design="tabmenu-04"] .tabmenu-btn:hover,
.cl-tabmenu[data-tabmenu-design="tabmenu-04"] .tabmenu-btn:focus,
.cl-tabmenu[data-tabmenu-design="tabmenu-04"] .tabmenu-btn.active {
    border-color: transparent;
    background: transparent;
    color: var(--tabmenu-btn-color-active);
    background-color: var(--tabmenu-btn-bgcolor-active);
}

.cl-tabmenu[data-tabmenu-design="tabmenu-04"] .tabmenu-btn:hover::after,
.cl-tabmenu[data-tabmenu-design="tabmenu-04"] .tabmenu-btn:focus::after,
.cl-tabmenu[data-tabmenu-design="tabmenu-04"] .tabmenu-btn.active::after {
    width: 18px;
}

/* tabmenu-05: scenic hero with top-line navigation */
.cl-tabmenu[data-tabmenu-design="tabmenu-05"] {
    --tabmenu-list-margin-top: 125px;
    --tabmenu-list-bgcolor: rgba(0, 0, 0, .3);
    --tabmenu-btn-col-default: 3;
    --tabmenu-btn-minh: 72px;
    --tabmenu-btn-fname: Pretendard, "Noto Sans KR", sans-serif;
    --tabmenu-btn-fsize: 18px;
    --tabmenu-btn-fweight: 700;
    --tabmenu-btn-color: rgba(255, 255, 255, .5);
    --tabmenu-btn-color-active: #fff;
    --tabmenu-btn-bgcolor-active: transparent;
    --tabmenu-line-color: rgba(255, 255, 255, .3);
    --tabmenu-line-color-active: #fff;
    --tabmenu-block-bgcolor: #3c3a34;
    --tabmenu-block-bgimg: url("//storage.googleapis.com/i.addblock.net/template/tabmenu_05_bg.webp");
    --tabmenu-block-bgimg-layer-color: rgba(0, 0, 0, .3);
    --tabmenu-block-bgimg-size: cover;
    --tabmenu-block-bgimg-position: center center;
    --tabmenu-padding-top: 125px;
    --tabmenu-padding-bottom: 0px;
}

.cl-tabmenu[data-tabmenu-design="tabmenu-05"] .tabmenu-list-wrap::before,
.cl-tabmenu[data-tabmenu-design="tabmenu-05"] .tabmenu-list::before {
    border-top: 1px solid var(--tabmenu-line-color);
}

.cl-tabmenu[data-tabmenu-design="tabmenu-05"] .tabmenu-btn {
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--tabmenu-btn-color);
}

.cl-tabmenu[data-tabmenu-design="tabmenu-05"] .tabmenu-btn:hover,
.cl-tabmenu[data-tabmenu-design="tabmenu-05"] .tabmenu-btn:focus,
.cl-tabmenu[data-tabmenu-design="tabmenu-05"] .tabmenu-btn.active {
    border-color: transparent;
    background-color: var(--tabmenu-btn-bgcolor-active);
    color: var(--tabmenu-btn-color-active);
    box-shadow: inset 0 3px 0 var(--tabmenu-line-color-active);
}

/* tabmenu-06: glass hero with active button panel */
.cl-tabmenu[data-tabmenu-design="tabmenu-06"] {
    --tabmenu-list-margin-top: 300px;
    --tabmenu-list-bgcolor: rgba(255, 255, 255, .1);
    --tabmenu-list-blur: 20px;
    --tabmenu-btn-col-default: 3;
    --tabmenu-btn-minh: 76px;
    --tabmenu-btn-fname: Pretendard, "Noto Sans KR", sans-serif;
    --tabmenu-btn-fsize: 16px;
    --tabmenu-btn-fweight: 700;
    --tabmenu-btn-color: #fff;
    --tabmenu-btn-color-active: #222428;
    --tabmenu-btn-bgcolor-active: #fafafa;
    --tabmenu-line-color: transparent;
    --tabmenu-line-color-active: transparent;
    --tabmenu-object-color: #fff;
    --tabmenu-block-bgcolor: #171717;
    --tabmenu-block-bgimg: url("//storage.googleapis.com/i.addblock.net/template/tabmenu_006_bg.jpg");
    --tabmenu-block-bgimg-layer-color: rgba(0, 0, 0, .2);
    --tabmenu-block-bgimg-size: cover;
    --tabmenu-block-bgimg-position: center center;
    --tabmenu-padding-top: 300px;
    --tabmenu-padding-bottom: 0px;
}

.cl-tabmenu[data-tabmenu-design="tabmenu-06"] .tabmenu-content-wrap::before,
.cl-tabmenu[data-tabmenu-design="tabmenu-06"] .tabmenu-content-wrap::after {
    content: "";
    position: absolute;
    bottom: calc(-1 * (var(--tabmenu-list-margin-top-current) - 40px));
    left: 50%;
    width: 4px;
    height: 60px;
    transform: translateX(-50%);
    pointer-events: none;
}

.cl-tabmenu[data-tabmenu-design="tabmenu-06"] .tabmenu-content-wrap::before {
    background-color: rgba(255, 255, 255, .2);
    background-color: color-mix(in srgb, var(--tabmenu-object-color) 20%, transparent);
}

.cl-tabmenu[data-tabmenu-design="tabmenu-06"] .tabmenu-content-wrap::after {
    background-color: var(--tabmenu-object-color);
    animation: tabmenuObjectScaleLine 2s cubic-bezier(.77, 0, .175, 1) infinite;
    will-change: transform;
}

@keyframes tabmenuObjectScaleLine {
    0% {
        transform: translateX(-50%) scaleY(1);
        transform-origin: 50% 100%;
    }
    50% {
        transform: translateX(-50%) scaleY(0);
        transform-origin: 50% 100%;
    }
    50.0001% {
        transform: translateX(-50%) scaleY(0);
        transform-origin: 50% 0;
    }
    100% {
        transform: translateX(-50%) scaleY(1);
        transform-origin: 50% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cl-tabmenu[data-tabmenu-design="tabmenu-06"] .tabmenu-content-wrap::after {
        animation: none;
        transform: translateX(-50%) scaleY(1);
    }
}

.cl-tabmenu[data-tabmenu-design="tabmenu-06"] .tabmenu-btn {
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--tabmenu-btn-color);
}

.cl-tabmenu[data-tabmenu-design="tabmenu-06"] .tabmenu-btn:hover,
.cl-tabmenu[data-tabmenu-design="tabmenu-06"] .tabmenu-btn:focus,
.cl-tabmenu[data-tabmenu-design="tabmenu-06"] .tabmenu-btn.active {
    border-color: transparent;
    background-color: var(--tabmenu-btn-bgcolor-active);
    color: var(--tabmenu-btn-color-active);
}

/* tabmenu-07: coastal hero with compact underline navigation */
.cl-tabmenu[data-tabmenu-design="tabmenu-07"] {
    --tabmenu-list-margin-top: 300px;
    --tabmenu-list-bgcolor: #fff;
    --tabmenu-btn-minh: 72px;
    --tabmenu-btn-gap-col: 48px;
    --tabmenu-btn-fname: Pretendard, "Noto Sans KR", sans-serif;
    --tabmenu-btn-fsize: 18px;
    --tabmenu-btn-fweight: 700;
    --tabmenu-btn-color: #b1b3b7;
    --tabmenu-btn-color-active: #4789e7;
    --tabmenu-btn-bgcolor-active: transparent;
    --tabmenu-line-color: transparent;
    --tabmenu-line-color-active: #4789e7;
    --tabmenu-object-color: #fff;
    --tabmenu-block-bgcolor: #244c70;
    --tabmenu-block-bgimg: url("//storage.googleapis.com/i.addblock.net/template/tabmenu_07_bg.webp");
    --tabmenu-block-bgimg-layer-color: transparent;
    --tabmenu-block-bgimg-size: cover;
    --tabmenu-block-bgimg-position: center center;
    --tabmenu-padding-top: 300px;
    --tabmenu-padding-bottom: 0px;
}

.cl-tabmenu[data-tabmenu-design="tabmenu-07"] .tabmenu-content-wrap::before,
.cl-tabmenu[data-tabmenu-design="tabmenu-07"] .tabmenu-content-wrap::after {
    content: "";
    position: absolute;
    bottom: calc(-1 * (var(--tabmenu-list-margin-top-current) - 50px));
    left: 50%;
    width: 2px;
    height: 150px;
    transform: translateX(-50%);
    pointer-events: none;
}

.cl-tabmenu[data-tabmenu-design="tabmenu-07"] .tabmenu-content-wrap::before {
    background-color: rgba(255, 255, 255, .2);
    background-color: color-mix(in srgb, var(--tabmenu-object-color) 20%, transparent);
}

.cl-tabmenu[data-tabmenu-design="tabmenu-07"] .tabmenu-content-wrap::after {
    background-color: var(--tabmenu-object-color);
    animation: tabmenuObjectScaleLine 2s cubic-bezier(.77, 0, .175, 1) infinite;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .cl-tabmenu[data-tabmenu-design="tabmenu-07"] .tabmenu-content-wrap::after {
        animation: none;
        transform: translateX(-50%) scaleY(1);
    }
}

.cl-tabmenu[data-tabmenu-design="tabmenu-07"] .tabmenu-btn {
    position: relative;
    min-height: var(--tabmenu-btn-minh-current);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--tabmenu-btn-color);
}

.cl-tabmenu[data-tabmenu-design="tabmenu-07"] .tabmenu-btn::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--tabmenu-line-color-active);
    transform: translateX(-50%);
    transition: width .2s ease;
}

.cl-tabmenu[data-tabmenu-design="tabmenu-07"] .tabmenu-btn:hover,
.cl-tabmenu[data-tabmenu-design="tabmenu-07"] .tabmenu-btn:focus,
.cl-tabmenu[data-tabmenu-design="tabmenu-07"] .tabmenu-btn.active {
    border-color: transparent;
    background-color: var(--tabmenu-btn-bgcolor-active);
    color: var(--tabmenu-btn-color-active);
}

.cl-tabmenu[data-tabmenu-design="tabmenu-07"] .tabmenu-btn:hover::after,
.cl-tabmenu[data-tabmenu-design="tabmenu-07"] .tabmenu-btn:focus::after,
.cl-tabmenu[data-tabmenu-design="tabmenu-07"] .tabmenu-btn.active::after {
    width: 100%;
}

@media (max-width: 767px) {
    .cl-tabmenu .tabmenu-list,
    .cl-tabmenu .tabmenu-content {
        width: 100%;
    }

    .cl-tabmenu[data-tabmenu-preview="true"] .tabmenu-list-wrap::before {
        width: calc(100vw + 2px);
    }

    .cl-tabmenu[data-tabmenu-design] {
        --tabmenu-padding-top-current: calc(var(--tabmenu-padding-top) * .8);
        --tabmenu-padding-bottom-current: calc(var(--tabmenu-padding-bottom) * .8);
        --tabmenu-list-margin-top-current: calc(var(--tabmenu-list-margin-top) * .8);
    }

    .cl-tabmenu[data-tabmenu-design="tabmenu-06"] .tabmenu-content-wrap::before,
    .cl-tabmenu[data-tabmenu-design="tabmenu-06"] .tabmenu-content-wrap::after,
    .cl-tabmenu[data-tabmenu-design="tabmenu-07"] .tabmenu-content-wrap::before,
    .cl-tabmenu[data-tabmenu-design="tabmenu-07"] .tabmenu-content-wrap::after {
        display: none;
    }

}

@media (max-width: 480px) {
    .cl-tabmenu[data-tabmenu-design] {
        --tabmenu-padding-top-current: calc(var(--tabmenu-padding-top) * .5);
        --tabmenu-padding-bottom-current: calc(var(--tabmenu-padding-bottom) * .5);
        --tabmenu-list-margin-top-current: calc(var(--tabmenu-list-margin-top) * .5);
    }
}