:root {

    --fs-50: 50px; --lh-50: 59px; --ls-50: -1.5px;
    
    --fs-44: 44px; --lh-44: 52px; --ls-44: -1.5px;

    --fs-40: 40px; --lh-40: 48px; --ls-40: -1.0px;
    --fs-38: 38px; --lh-38: 48px; --ls-38: -1.0px;
    --fs-32: 32px; --lh-32: 39px; --ls-32: -0.8px;

    --fs-28: 28px; --lh-28: 34px; --ls-28: -0.6px;
    --fs-26: 26px; --lh-26: 32px; --ls-26: -0.6px;

    --fs-24: 24px; --lh-24: 30px; --ls-24: -0.5px;
    --fs-22: 22px; --lh-22: 28px; --ls-22: -0.2px;
    --fs-20: 20px; --lh-20: 25px; --ls-20: -0.2px;
    --fs-18: 18px; --lh-18: 23px; --ls-18: 0px;

    --fs-16: 16px; --lh-16: 21px; --ls-16: 0.2px;
    --fs-15: 15px; --lh-15: 20px; --ls-15: 0.2px;
    --fs-14: 14px; --lh-14: 19px; --ls-14: 0.2px;
    --fs-13: 13px; --lh-13: 18px; --ls-13: 0.3px;
    --fs-12: 12px; --lh-12: 16px; --ls-12: 0.3px;
    --fs-11: 11px; --lh-11: 13px; --ls-11: 0.3px;

    --layout-width: 1440px;

    --top-banner-height: 88px;
}

* { box-sizing: border-box; }

a { cursor: pointer; }
body { font-family: 'Pretendard', sans-serif; background: rgba(242, 242, 247, 1); }
body { overflow-x: hidden; width: 100%; }
.body-class { width: 100%; overflow: visible; }
.no-scroll { overflow: hidden; }



/* 띠 배너 스타일 */
.top-banner { position: fixed; top: 0; left: 0; width: 100%; color: white; text-align: center; padding: 0; display: flex; justify-content: space-between; align-items: center; z-index: 10; height: var(--top-banner-height); display: none; transition: transform 0.1s ease-out;}
.top-banner.hidden { transform: translateY(-100%); }
.top-banner > .banner-wrap { font-size: var(--fs-15); line-height: var(--lh-15); letter-spacing: var(--ls-15); font-weight: 400; display: flex; width: 100%; justify-content: center; align-items: center; position: relative; }
.top-banner > .banner-wrap .tem { width: 100%; margin: auto; display: flex; position: relative; overflow: hidden; justify-content: center; align-items: center; background: #111; }
.top-banner > .banner-wrap .tem > .tem_inner { width: 800px; display: flex; flex-direction: column; gap: 8px; justify-content: center; align-items: center; height: 88px; position: relative; overflow: hidden; }
.top-banner > .banner-wrap .tem .d3_1 { position: absolute; width: 130px; left: 0; bottom: -29px; }
.top-banner > .banner-wrap .tem .d3_2 { position: absolute; width: 120px; right: 0; bottom: 0; top: 0; margin: auto; }
.top-banner > .banner-wrap .tem .d3_3 { position: absolute; width: 120px; left: 0; bottom: 0; top: 0; margin: auto; }
.top-banner > .banner-wrap .tem .d3_4 { position: absolute; width: 100px; left: 0; bottom: 0; top: 0; margin: auto; display: none;}
.top-banner > .banner-wrap .tem .bi { user-select: none; font-size: var(--fs-22); line-height: var(--lh-22); letter-spacing: var(--ls-22); font-weight: 600; z-index: 1;color: #fff;  }
.top-banner > .banner-wrap .tem .ni { user-select: none; font-weight: 500; color: #fff; z-index: 1; } 
.top-banner > .banner-wrap .tem .soft { color: rgba(255, 255, 255, 0.70); }
.top-banner > .banner-wrap .swiper-wrapper { width: 100%; margin: 0 auto; }
.top-banner > .banner-wrap .tem .mobile {display: none;}

.top-banner > .banner-wrap .tem.evt01 { background: #1870F3; }

.top-banner > .banner-wrap .tem.evt02 { background: #027549; }
.top-banner > .banner-wrap .tem.evt02 .bi {color: #D4E9E2;}
.top-banner > .banner-wrap .tem.evt02 .ni {color: rgba(212, 233, 226, 0.80);}

.top-banner > .banner-wrap .tem.evt03 {background: rgb(255,205,1); color: #222;}
.top-banner > .banner-wrap .tem.evt03 .bi {color: #222;}
.top-banner > .banner-wrap .tem.evt03 .ni {color: rgba(0, 0, 0, 0.80);}
.top-banner > .banner-wrap .tem.evt03 .soft {
    color: #222;
}
.top-banner > .banner-wrap .tem.evt03 .d3_2 {display: none;}
.top-banner > .banner-wrap .tem .d3_5 { position: absolute; width: 86px; left: 0; bottom: 0; top: 0; margin: auto; display: none;}
.top-banner > .banner-wrap .tem .d3_6 { position: absolute; width: 120px; left: 0; bottom: 0; top: 0; margin: auto; }

.top-banner .mover { position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; width: 570px; height: 100%; background: #fff; }
.top-banner .mover .swiper-button-next, 
.top-banner .mover .swiper-button-prev { width: 32px; height: 32px; top: 0; bottom: 0; margin: auto; }

.top-banner .close-btn { font-size: var(--fs-15); line-height: var(--lh-15); letter-spacing: var(--ls-15); font-weight: 400; color: #fff; display: flex; align-items: center; z-index: 10; position: absolute; top: 20px; right: 8%; margin: auto; user-select: none;    }

@media only screen and (max-width: 1023px) {

    :root { 
        --top-banner-height: 77px;
    }
    .top-banner {height: var(--top-banner-height);}
    .top-banner > .banner-wrap .tem > .tem_inner {gap: 5px;}
    .top-banner > .banner-wrap .tem .bi {font-size: var(--fs-16); line-height: var(--lh-16); letter-spacing: var(--ls-16);}
    .top-banner > .banner-wrap{font-size: var(--fs-14); line-height: var(--lh-14); letter-spacing: var(--ls-14);}
    .top-banner > .banner-wrap .tem .ni {font-weight: 400;}
    .top-banner .close-btn {top: 12px; right: 12px;}
    .top-banner .mover,
    .top-banner > .banner-wrap .tem .d3_1,
    .top-banner > .banner-wrap .tem .d3_2,
    .top-banner > .banner-wrap .tem .d3_6,
    .top-banner .close-btn .t {display: none;}
    .top-banner > .banner-wrap .tem .pc {display: none;}
    .top-banner > .banner-wrap .tem .mobile {display: inline; }
    .top-banner > .banner-wrap .tem .d3_4 {display: flex;}
    .top-banner > .banner-wrap .tem .d3_3 {width: 100px;}
    .top-banner > .banner-wrap .tem .d3_5 {display: flex;}
}

/* 상단 헤더 */
.header {
    border-bottom: 1px solid rgba(84, 84, 86, 0.16); display: block; position: sticky; width: 100%;left: 0;top: 0;z-index: 101;
    background: rgba(243, 243, 243, 0.80);
    background: rgb(243, 243, 245);  backdrop-filter: blur(15px); webkit-backdrop-filter: blur(15px); position: fixed; top: 0;
    /* transition: top 0s ease-out; */
}

.header .plus-tab { width: 100%; background: #fff; position: absolute; left: 0; bottom: -51px; padding: 0 16px; display: grid; grid-template-columns: 1fr 1fr; display: none; transition: transform 0.3s ease, opacity 0.3s ease; transform: translateY(0); opacity: 1;  z-index: 1; }
.header.scrolled .plus-tab { transform: translateY(-100%);  opacity: 0; }
.header .plus-tab .tab-item { display: flex; align-items: center; color: rgba(60, 60, 67, 0.6); font-size: var(--fs-14);line-height: var(--lh-14); letter-spacing: var(--ls-14); font-weight: 600; justify-content: center; gap: 6px; padding: 16px 0; }
.header .plus-tab .tab-item > img {width: 20px; display: none;}

.header .plus-tab .tab-item.selected { color: #000; position: relative; }
.header .plus-tab .tab-item.selected img {display: flex;}
.header .plus-tab .tab-item.selected::after { height: 1px; background: #000; width: 100%;content: " ";position: absolute; bottom: 0; left: 0; }

.header .inside { width: var(--layout-width); margin: 0 auto;padding: 12px 40px; min-height: 62px; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; }
.header .mobile-side-menu {display: none;}
.header .left-container {display: flex;align-items: center;  gap: 40px;}
.header .right-container { display: flex; align-items: center; gap: 40px; }
.header .right-container .profile-box { display: flex; height: 38px; width: 38px; border: 2px solid #007AFF; border-radius: 100%; }
.header .right-container .profile-box .profile { border-radius: 32px;  width: 100%; height: 100%; border: 1px solid #fff;background-image: url('app/commons/icons/profile-1.png');background-color: lightgray;  background-position: 50% 50%; background-size: cover;  background-repeat: no-repeat;}
.header .right-container .btn-login {
    font-size: var(--fs-15); line-height: var(--lh-15); letter-spacing: var(--ls-15);
    font-weight: 600; 
}

.header img.logo { user-select: none; }
.header .navbar > ul { display: flex; gap: 32px; }
.header .navbar > ul li { display: inline-flex; }
.header .navbar > ul li > a { color: #000; font-size: var(--fs-15); line-height: var(--lh-15); letter-spacing: var(--ls-15); font-weight: 600; }
.header .navbar > ul li > a.evt { color: #F1487E; display: flex; gap: 1px; }
.header .navbar > ul li > a.review { display: flex; gap: 4px; }


/* 모바일 사이드바 */
.m-slide-bar {position: fixed;top: 0; left: 0;width: 100%; height: 100%;overflow: hidden;z-index: 200;visibility: hidden;transition: visibility 0s linear 0.3s; /* 사라질 때 delay 추가 */ }
.m-slide-bar .in { position: absolute; top: 0;left: 0; width: 299px; height: 100%; display: flex; flex-direction: column; justify-content: space-between;  background-color: #fff; transition: transform 0.3s ease; /* 부드러운 이동 효과 */ transform: translateX(-100%); /* 숨김 상태로 X축 이동 */ }
.m-slide-bar .dimd { background: rgba(0, 0, 0, 0.30); width: 100%; height: 100%; transition: background 0.3s ease; }
.m-slide-bar.active { visibility: visible; transition: visibility 0s linear 0s; /* 즉시 보이도록 설정 */ }
.m-slide-bar.active .in { transform: translateX(0); /* 보임 상태 */ }
.m-slide-bar .in .grid-box { padding: 40px 12px; display: grid; gap: 28px; }
.m-slide-bar .in .line { height: 1px; width: 100%; background: #D9D9D9; }
/* 로그아웃 상태 */
.m-slide-bar .in .grid-box .top .need-login { padding: 12px; display: flex; justify-content: space-between; align-items: center; }
.m-slide-bar .in .grid-box .top .need-login .txt {font-weight: 600;font-size: var(--fs-14); line-height: var(--lh-14); letter-spacing: var(--ls-14); color: rgba(60, 60, 67, 0.6);}
.m-slide-bar .in .grid-box .top .need-login .btn-login {display: flex;align-items: center;justify-content: center;border-radius: 8px;border: 1.5px solid #007AFF; padding: 8px 24px;font-weight: 600;font-size: var(--fs-13); line-height: var(--lh-13); letter-spacing: var(--ls-13); color: rgba(0, 122, 255, 1); }
/* 로그인 상태 */
.m-slide-bar .in .grid-box .top .accounts {padding: 0 12px;  display: flex; justify-content: left; align-items: center; gap: 20px;}
.m-slide-bar .in .grid-box .top .accounts .profile {width: 60px;height: 60px; border-radius: 100%;background-size: cover; background-position: center;}
.m-slide-bar .in .grid-box .top .accounts .info {display: grid; gap: 6px;}
.m-slide-bar .in .grid-box .top .accounts .info .name {font-size: var(--fs-14);line-height: var(--lh-14);letter-spacing: var(--ls-14); font-weight: 600; display: flex;}
.m-slide-bar .in .grid-box .top .accounts .info .etc {display: flex; gap: 4px; align-items: center; color: rgba(0, 122, 255, 1);font-weight: 400;font-size: var(--fs-12);line-height: var(--lh-12);letter-spacing: var(--ls-12);}
/* 메뉴 */
.m-slide-bar .in .grid-box .dept-1 {display: grid; font-weight: 400;font-size: var(--fs-15);line-height: var(--lh-15);letter-spacing: var(--ls-15); color: rgba(60, 60, 67, 0.6); }
.m-slide-bar .in .grid-box .dept-1 > li {display: grid; gap: 4px;}
.m-slide-bar .in .grid-box .dept-1 > li > .name {display: flex; padding: 12px;width: 100%;}   
.m-slide-bar .in .grid-box .dept-1 > li > .name.emp {  justify-content: space-between;}
.m-slide-bar .in .grid-box .dept-1 > li > .name b { font-weight: 600; color: #000; }
.m-slide-bar .in .grid-box .dept-1 > li .dept-2 { display: grid; gap: 4px; padding-bottom: 0px;}
.m-slide-bar .in .grid-box .dept-1 > li .dept-2 > li { padding: 12px 24px; display: flex; }

.m-slide-bar .in .grid-box .dept-1 .toggle-menu {display: none;}
.m-slide-bar .in .grid-box .dept-1 .dept-2 { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
/* toggle-menu가 체크되었을 때만 dept-2 표시 */
.m-slide-bar .in .grid-box .dept-1 .toggle-menu:checked ~ .dept-2 { max-height: 300px; /* 충분히 큰 값으로 설정 */ padding-bottom: 12px; }
/* 체크 상태에 따라 화살표 회전 */
.m-slide-bar .in .grid-box .dept-1 .toggle-menu:checked + .name img { transform: rotate(180deg); }
/* 맨 하단 로그아웃 버튼 */
.m-slide-bar .in .logout { width: 100%; padding: 0 12px 120px 12px;} 
.m-slide-bar .in .logout > a {display: flex; padding: 12px;justify-content: center; align-items: center;gap: 4px; border-radius: 12px;border: 1px solid rgba(60, 60, 67, 0.3);color: rgba(60, 60, 67, 0.6); font-size: var(--fs-14); line-height: var(--lh-14);letter-spacing: var(--ls-14);font-weight: 600;}






/* 하단 푸터 */
.footer { }
.footer .inside { width: var(--layout-width); margin: auto; padding: 32px 40px; display: flex; justify-content: space-between; }
.footer .left { gap: 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 0; }
.footer .links { display: flex; gap: 24px; align-items: center; }
.footer .links .nav { display: flex; font-size: var(--fs-14);line-height: var(--lh-14); letter-spacing: var(--ls-14); font-weight: 600;  gap: 32px; }
.footer .links .bar { font-weight: 400;font-size: var(--fs-13);line-height: var(--lh-13); letter-spacing: var(--ls-13);color: rgba(60, 60, 67, 0.6); }
.footer .information { display: grid;font-weight: 400; font-size: var(--fs-11); line-height: var(--lh-11); letter-spacing: var(--ls-11); color: #000; gap: 4px; }
.footer .information * span {  color: #000; text-decoration: none;}
.footer .copyright { gap: 12px; gap: 20px; text-align: right; display: flex; flex-direction: column; justify-content: space-between; gap: 20px;  }
.footer .copyright .desc {display: grid; gap: 6px; color: rgba(60, 60, 67, 0.6); text-align: right;justify-content: right;}
.footer .copyright .desc .aday {line-height: 0;}
.footer .copyright .desc .txt {font-weight: 400; font-size: var(--fs-11); line-height: var(--lh-11);letter-spacing: var(--ls-11);}
.footer .copyright .desc b {color: #000; font-weight: 400; font-family: "Tilt Warp"; text-transform: uppercase;}



main { position: relative; margin-top: 63px; }




/* 띠 배너가 사라지면 헤더를 위로 올림 */
body.header-banner .header { top: var(--top-banner-height); }
body.header-banner main { margin-top: calc(63px + var(--top-banner-height)); }
body.header-banner .sidebar { top: calc(63px + var(--top-banner-height)); }
body.header-banner .top-banner { display: flex; }

body.header-banner.scrolled .top-banner { transform: translateY(-100%); }
body.header-banner.scrolled .header { top: 0; }
body.header-banner.scrolled .sidebar { top: 63px; }


@media only screen and (max-width: 1440px) {
    :root {
        --layout-width: 100%;
    }
}

@media only screen and (max-width: 1023px) {

    .header {background-color: rgb(243,243,245);}
    .header .inside { padding: 12px 16px; height: 52px; min-height: auto; }
    .header .mobile-side-menu,
    .header .mobile-side-menu a { display: flex; align-items: center; }
    .header .mobile-side-menu a img {width: 24px;}
    .header img.logo {height: 16px;}
    .header .navbar {display: none;}
    .header .right-container { display: none; }   
    .header .plus-tab {display: grid;}


    main {margin-top: calc(52px + 53px);}
    body.header-banner main { margin-top: calc(52px + 53px + var(--top-banner-height)); }
    .hidden-plus-tab .header {overflow: hidden;}
    .hidden-plus-tab .header .plus-tab { display: none; }
    .hidden-plus-tab main { margin-top: calc(52px); }
    body.header-banner .hidden-plus-tab main { margin-top: calc(52px + var(--top-banner-height)); }


    .footer .inside {padding: 20px 24px;}
    .footer .left {gap: 14px;}
    .footer .links {gap: 20px;}
    .footer .links .nav {
        font-size: var(--fs-13);
        line-height: var(--lh-13);
        letter-spacing: var(--ls-13);
        gap: 20px;
    }
    .footer .copyright {gap: 12px;}
}
@media only screen and (max-width: 799px) {
    /* .footer {display: none;} */

    .footer .inside {
        padding: 16px 16px 20px 16px;
    }
    .footer .m-disabled {display: none !important;}
    .footer .information {display: none;}
    .footer .inside {flex-direction: column; gap: 16px;}
    .footer .left {justify-content: center;}
    .footer .links {justify-content: center;}
    .footer .copyright {justify-content: center;}
    .footer .copyright > div {justify-content: center !important; display: flex; }
    .footer .copyright > div img {width: 40px;}

}