/*----------------header----------------*/
/* 스크롤을 막는 클래스 정의 */
body.scroll-lock {
    overflow: hidden;
}


header {
    position: fixed;
    z-index: 98;
    width: 100%;
    height: var(--header-h);
    margin: 0 auto;
    top: 0;
    background: #fff;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    border-bottom: 1px solid #fff;
}

.logo-wrap {
    position: relative;
    height: 100%;
}

.nav-wrap {
    height: 100%;
    padding: 0 var(--side-space);
    width: 100%;
    box-sizing: border-box;
    z-index: 20;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.logo {
    width: 360px;
    height: var(--header-h);
    background: var(--logo);
    z-index: 1111;
    position: absolute;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.logo a {
    display: block;
    width: 100%;
    height: 100%;
}



/* pc menu */
.menu_wrap {
    text-align: center;
}

.d_menu {
    display: flex;
    justify-content: center;

    &>li {
        display: inline-block;
        padding: 0 40px;
        height: var(--header-h);
        line-height: var(--header-h);
        text-align: center;
        position: relative;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -ms-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;

        &>a {
            font-size: var(--text-lg);
            font-weight: 600;
            position: relative;
            text-transform: uppercase;
        }

        &:hover ul {
            opacity: 1;
            pointer-events: auto;
            margin-left: calc((var(--menu-width)/2) * -1);
        }
    }

    & ul {
        --menu-width: 210px;
        position: absolute;
        top: calc(var(--header-h) - 20px);
        left: 50%;
        margin-left: calc((var(--menu-width)/2 + 20px) * -1);
        border-radius: 5px;
        opacity: 0;
        pointer-events: none;
        overflow: Hidden;
        -webkit-transition: 0.5s all 0.1s;
        -moz-transition: 0.5s all 0.1s;
        -ms-transition: 0.5s all 0.1s;
        -o-transition: 0.5s all 0.1s;
        transition: 0.5s all 0.1s;
        background: var(--secondary);
        padding: 6px 0;

        & li {
            position: relative;
            font-size: var(--txt-s);
            text-align: center;
            min-width: var(--menu-width);
            --padding: 10px;
            line-height: 2;

            &::before {
                content: '';
                position: absolute;
                left: 20px;
                right: 20px;
                bottom: 0;
                height: 1px;
                opacity: 0.3;
                background: rgb(255, 255, 255);
                background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.05) 100%);
                background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.05) 100%);
                background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.05) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1);
            }

            &:last-child:before {
                display: none;
            }

            a {
                color: rgb(255 255 255 / 60%);
                display: block;
                width: 100%;
                font-weight: 500;
                position: relative;
                z-index: 1;
                padding: 10px;

                &:hover {
                    color: #fff;
                }
            }
        }
    }
}


/* mobile menu */

.burger_box {
    position: fixed;
    top: 0;
    right: var(--side-space);
    z-index: 111;
    width: 20px;
    height: var(--header-h);
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.sideOpen .burger_box {
    right: 50px;
}

.menu-icon-container {
    width: 100%;
    height: 100%;
}

.menu-icon {
    display: inline-block;
    float: none;
    opacity: 1;
    z-index: 100;
    color: #000;
    font-size: 1.3rem;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-align: center;
}

.menu-icon_box {
    --ham-width: 20px;
    display: inline-block;
    width: var(--ham-width);
    height: calc(var(--ham-width) - 4px);
}

.menu-icon_line {
    background: #000;
    display: inline-block;
    height: 2px;
    position: absolute;
    left: 0;
    width: 100%;

    &.menu-icon_line--1 {
        top: 0;
        transition: top 200ms 250ms, transform 200ms;
        -webkit-transition: top 200ms 250ms, -webkit-transform 200ms;
    }

    &.menu-icon_line--2 {
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        transition: opacity 0ms 300ms;
        -webkit-transition: opacity 0ms 300ms;
    }

    &.menu-icon_line--3 {
        bottom: 0;
        transition: bottom 100ms 300ms, transform 200ms;
        -webkit-transition: bottom 100ms 300ms, -webkit-transform 200ms;
    }
}

.menu-icon.opened .menu-icon_box {
    transform: scale3d(0.9, 0.9, 0.9);
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    margin-top: calc(var(--ham-width)/2 * -1);
    margin-left: calc(var(--ham-width)/2 * -1);
}

.menu-icon.opened .menu-icon_line {
    top: 13px;
    background: #fff;

    &.menu-icon_line--1 {
        transform: rotate3d(0, 0, 1, 45deg);
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transition: top 100ms, transform 200ms 250ms;
        -webkit-transition: top 100ms, -webkit-transform 200ms 250ms;
    }

    &.menu-icon_line--2 {
        opacity: 0;
        transition: opacity 200ms;
        -webkit-transition: opacity 200ms;
    }

    &.menu-icon_line--3 {
        transform: rotate3d(0, 0, 1, -45deg);
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transition: top 200ms, transform 200ms 250ms;
        -webkit-transition: top 200ms, -webkit-transform 200ms 250ms;
    }
}

.side_menu {
    background: #131313;
    height: 100%;
    right: -400px;
    position: fixed;
    top: 0;
    width: 400px;
    z-index: 1000;
}

.sd-menu-con {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow-y: auto;



}

.lnb {
    position: absolute;
    right: 40px;
    ;
}

.lnb a {
    background: #eee;
    padding: 8px 12px;
    border-radius: 100px;
    color: #7D7D7D;
    transition: all 0.3s ease;
}

.lnb a:hover {
    background: var(--dark);
    color: #fff;
}




.profile-container {
    position: relative;
    color: #595959;
    ;
}


.profile-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.2s;
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #bec1e1, #446acf);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: var(--text-xs);
}

.profile-info {
    text-align: left;
}

.lnb .profile-info {
    max-width: 50px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.profile-name {
    font-weight: 600;
    font-size: var(--text-xs);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    ;
}

.member-dropdown-items {
    border-bottom: 1px solid #eee;
}

.member-dropdown-items:last-child {
    border-bottom: none;
}

.member-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 5px;
    width: 160px;
    border: 1px solid rgb(0 0 0/ 5%);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
    overflow: hidden;
}

.member-dropdown-menu i {
    font-size: 1rem;
    opacity: 0.5;
}

.member-dropdown-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.member-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    background: #fff;
    font-weight: 500;
}

.member-dropdown-item:hover {
    background: #f2f3f6;
}

.member-dropdown-menu:hover i {
    opacity: 0.6;
}





/*모바일메뉴 오픈 시*/
.sideOpen:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgb(0, 0, 0, 0.4);
    width: 100%;
    height: 100vh;
    z-index: 900;
}

.sideOpen .side_menu {
    right: 0;
    transition: cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
}



.sideOpen .sd-menu-wrap {
    transition: transform .55s cubic-bezier(.65, .05, 0, 1);
}


.sideOpen .sd-menu-con:before {
    transition-delay: 0.2s;
    transform: translateX(0%) translateY(0%);
}

.sideOpen .sd-menu-con:after {
    transition-delay: 0.1s;
    transform: translateX(0%) translateY(0%);
}

/*모바일 1차메뉴*/
.sd-menu-wrap {
    width: 100%;
    position: relative;
    z-index: 1;
    padding: 0 50px;
    height: 100%;
}


.sd-menu-w {
    padding-top: calc(var(--header-h) + 20px);
    width: 100%;
}

.wheel-st {
    overflow-x: hidden;
    overflow-y: auto;

    &::-webkit-scrollbar {
        width: 0px;
    }

    &::-webkit-scrollbar-thumb {
        background: rgb(255 255 255 / 10%);
        border-radius: 10px;
    }

    &::-webkit-scrollbar-track {
        background: none;
    }
}

.sd-menu-list {
    --sd-space: 30px;
    position: relative;
    cursor: pointer;
    padding-left: 20px;
    border-left: 2px solid var(--gray);
}

.sd-menu-list:before {
    content: '';
    position: absolute;
    left: -2px;
    width: 2px;
    background-color: var(--primary);
    top: 0;
    height: 0;
    transition: 0.3s;
}

.sd-menu-list.on:before {
    height: calc(100% - var(--sd-space) - 15px);
}

.sd-menu-list> :is(a, span) {
    font-size: 24px;
    font-weight: 700;
    padding-bottom: var(--sd-space);
    color: rgb(255 255 255 / 40%);
    display: block;
    cursor: pointer;
    text-transform: uppercase;
    cursor: pointer;
}

.sd-menu-list:last-child> :is(a, span) {
    padding-bottom: 0;
}

.sd-menu-list:last-child .sd-smenu {
    margin-top: var(--sd-space);
    padding-bottom: 0 !important;
}

.sd-menu-list:last-child.on:before {
    height: 100% !important;
}

.sd-menu-list:hover> :is(a, span) {
    color: var(--primary);
}

.sd-menu-list span::after {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,1)'%3E%3Cpath d='M12 15.0006L7.75732 10.758L9.17154 9.34375L12 12.1722L14.8284 9.34375L16.2426 10.758L12 15.0006Z'%3E%3C/path%3E%3C/svg%3E");
    position: absolute;
    background-size: 100%;
    width: 24px;
    height: 24px;
    top: 7px;
    right: 0;
    transition: .4s;
    border: 1px solid rgb(255 255 255 / 30%);
    border-radius: 100px;
    opacity: 0.5;
}

.sd-menu-list.on span {
    color: var(--primary);
}

.sd-menu-list.on span::after {
    transition: .4s;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(360deg);
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(10,142,255,1)'%3E%3Cpath d='M12 15.0006L7.75732 10.758L9.17154 9.34375L12 12.1722L14.8284 9.34375L16.2426 10.758L12 15.0006Z'%3E%3C/path%3E%3C/svg%3E");
    border: 1px solid rgb(var(--primary-rgb)/50%);
    opacity: 1;
}

.logo-menu {
    position: absolute;
    width: 90px;
    right: 50px;
    bottom: 0;
    opacity: 0.1;
}

/*모바일 2차메뉴*/
.sd-smenu {
    position: relative;
    z-index: 1;
    display: none;
    padding-bottom: calc(var(--sd-space) + 5px);
    transform: translateY(-10px);
    padding-left: 20px;
}

.sd-smenu li {
    font-size: 1.2rem;
    position: relative;
    text-align: left;
    margin-bottom: 10px;
    color: #fff;
}

.sd-smenu li:last-child {
    margin-bottom: 0;
}

.sd-smenu li:hover a {
    color: var(--primary) !important;
}

.sd-smenu li a {
    font-weight: 400 !important;
    -webkit-transition: all 0.15s;
    -moz-transition: all 0.15s;
    -o-transition: all 0.15s;
    -ms-transition: all 0.15s;
    transition: all 0.15s;
    line-height: 32px !important;
}

.sd-smenu li a:hover {
    color: var(--secondary);
}


/*스크롤했을때 변화*/
.scroll header {
    height: var(--header-h-s);
    border-bottom: 1px solid #eee;
}

.scroll .logo {
    width: 320px;
    height: var(--header-h-s);
}

.scroll .d_menu ul {
    top: var(--header-h-s);
}

.scroll .d_menu>li {
    height: var(--header-h-s);
    line-height: var(--header-h-s);
}

.scroll .burger_box {
    height: var(--header-h-s);
}

.scroll :is(.d_menu>li, .logo, .lang) {
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}


.menu-sns {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px 50px;
}

.menu-sns li {
    margin-right: 10px;
    opacity: 0.5;
}

.menu-sns li:hover {
    opacity: 1;
}

.menu-sns li img {
    width: 36px;
}

/* 반응형 */
@media screen and (max-width:1700px) {

    .logo {
        width: 320px;
    }
}

@media screen and (max-width:1500px) {
    .d_menu li {
        padding: 0 20px;
    }
}

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

    .logo,
    .scroll .logo {
        width: 240px;
    }
}

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

    .d_menu {
        display: none;
    }

    .sidenav {
        display: block;
    }

    .logo {
        height: var(--header-h-s);
    }

    .logo,
    .scroll .logo {
        width: 280px;
    }

    .d_menu li a {
        font-size: var(--txt-s);
    }

    .d_menu li {
        padding: 0 10px;
    }
}

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

    .logo {
        height: var(--header-h-s);
    }

    .sd-menu-wrap {
        padding: 0 var(--side-space);
    }

    .menu-sns {
        padding: 20px 30px
    }
}


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

    .logo,
    .scroll .logo {
        width: 240px
    }

    .sideOpen .burger_box {
        right: var(--side-space);
    }

    .side_menu {
        right: -100%;
        width: 100%;
    }

    .profile-btn {
        gap: 4px;
    }

    .profile-info {
        display: none;
    }

    .lnb {
        right: 35px;
    }

    .lnb a {
        display: flex;
        padding: 0;
        height: 32px;
        width: 32px;
        justify-content: center;
        align-items: center;
    }

    .postcode-layer {
        width: 100%; /* 모바일에서는 부모 너비에 맞춤 */
        height: 400px;
        left: 0;
    }
}

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

    .logo,
    .scroll .logo {
        width: 210px
    }
}




#tothetop {
    cursor: pointer;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;

    display: flex;
    width: 50px;
    text-align: center;
    background: rgb(255 255 255 / 20%);
    border-radius: 8px;
    margin-left: 20px;
}

#tothetop img {
    width: 50%;
    margin: 0 auto;
}

#tothetop:hover {
    background: var(--primary)
}

/*footer*/
footer {
    background: #131313;
    padding: 80px 0;
    color: #fff;
}

.footer-wrap {
    width: var(--con-w);
    margin: 0 auto;
}

.footer-logo {
    gap: 10px;
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 40px;
}

.footer-logo i {
    opacity: 0.3;
}

.footer-logo img {
    height: 42px;
}

.footer-info {
    font-weight: 300;
    color: rgb(255 255 255 / 60%);
}

.footer-info b {
    font-weight: 600;
    color: #fff;
    display: block;
    margin-bottom: 5px;
}

.footer-info p {
    opacity: 0.3;
    margin-top: 20px;
    font-weight: 300;
    font-size: var(--text-xs)
}

.footer-info span {
    padding: 0 15px;
    position: relative;
}

.footer-info span::before {
    content: '';
    position: absolute;
    top: 20%;
    bottom: 20%;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: rgb(255 255 255 / 10%);
}

.footer-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.footer-terms {
    gap: 24px;
    justify-content: end;
}

.footer-terms a:hover {
    opacity: 0.8;
}

.related-sites-wrap {
    position: relative;
    width: 170px;
    z-index: 11;
}

.site-links-menu {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background-color: #2a2a2a;
    border: 1px solid #444;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.site-links-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.site-link {
    display: block;
    width: 100%;
    padding: 8px 20px;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
    color: #e0e0e0;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.site-link:last-child {
    border-bottom: none;
}

.site-link:hover {
    background-color: #3a3a3a;
    color: #fff;
}

.related-sites-button {
    width: 100%;
    padding: 7px 20px;
    border: 1px solid #444;
    border-radius: 8px;
    color: rgb(255 255 255 / 50%);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    font-size: var(--text-sm);
}

.related-sites-button:hover {
    background-color: #333;
    border-color: #555;
    color: #fff;
}

.plus-icon {
    font-size: 28px;
    font-weight: 300;
    transition: transform 0.3s ease;
}

.related-sites-button.active .plus-icon {
    transform: rotate(45deg);
}

@media screen and (max-width:900px) {
    .footer-wrap>div {
        width: 100%;
    }

    .footer-btn {
        margin-top: 20px;
        flex-direction: row;
    }
}

@media screen and (max-width:600px) {
    footer {
        padding: 40px 0;
    }

    .footer-logo img {
        height: 28px;
    }

    .footer-btn {
        flex-wrap: wrap;
    }

    .footer-btn>* {
        width: 100%;
    }

    .footer-terms {
        justify-content: start;
        order: -1;
        margin-bottom: 20px;
    }

    .related-sites-wrap {
        width: calc(100% - 70px);
    }
}

/*공통*/
.con {
    width: var(--con-m-w);
    margin: 0 auto;
    max-width: 90%;
}

.con.wide {
    width: var(--con-w);
}

.main-pad {
    padding: var(--main-padding) 0;
}

.bgG {
    background: #f2f3f6;
}

/*메인 비쥬얼*/
.main-visual-wrap {
    margin-top: var(--header-h);
    padding: 0 var(--side-space);
    margin-bottom: var(--main-padding);
    display: flex;
    gap:40px
}

.main-visual {
    position: relative;
    overflow: hidden;
    background: #ddd;
    border-radius: 24px;
    flex:2.8;
}

.main-visual .swiper-slide {
    width: 100%;
    min-height: 500px;
    height: calc(100vh - (var(--header-h) + (var(--side-space))));
    position: relative;
}

/* swiper 이미지를 보여주기 위해 추가 */
.main-visual .swiper-slide > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
}

/* swiper 이미지 위에 Text를 보여주기 위해 추가 */
.main-visual .swiper-slide .slid-txt {
    position: absolute;
    left: 50%;
    bottom: 100px;
    transform: translateX(-50%);
    z-index: 2;
}

.bg-01 {
    background: url(/images/main/main_visual01.jpg) no-repeat center;
    background-size: cover
}

.bg-02 {
    background: url(/images/main/main_visual02.jpg) no-repeat center;
    background-size: cover
}

.slid-txt {
    position: absolute;
    color: #fff;
    width: 100%;
    bottom: 140px;
}

.slid_w {
    width: var(--con-w);
    max-width: var(--con-m-w);
    margin: 0 auto;
    line-height: 1.25;
}

.slid_w p {
    font-size: var(--text-5xl);
    font-weight: 700;
    text-shadow: 0 0 40px rgb(0 0 0 / 10%);
}

.slid_w span {
    font-size: var(--text-5xl);
    font-weight: 300;
}

.slid_w button {
    font-size: var(--text-base);
    background: rgb(0 0 0 / 60%);
    padding: 13px 20px;
    border-radius: 8px;
    display: flex;
    gap: 40px;
    margin-top: 24px;
    transition: 0.3s;
}

.slid_w button:hover {
    background: rgb(0 0 0 / 100%);
}


.main-visual .swiper-progress-bar {
    position: relative;
    width: calc(100% - 165px);
    height: 100%;
    display: block;
    z-index: 1;
}

.main-visual .swiper-progress-bar .slide_progress-bar {
    position: absolute;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    width: auto;
    clear: both;
    opacity: 0;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -1px;
}

.main-visual .swiper-progress-bar .slide_progress-bar:after {
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    height: 100%;
    width: 0;
    content: "";
}

.main-visual .swiper-progress-bar.active .slide_progress-bar {
    opacity: 1;
}

.main-visual .swiper-progress-bar.animate .slide_progress-bar:after {
    transition: width linear;
    transition-delay: unset;
    width: 100%;
    transition-duration: 5s;
}

.pgbW {
    bottom: 70px;
    z-index: 1;
    position: relative;
    width: calc(100% - var(--side-space)*2);
    max-width: var(--con-m-w);
    margin: 0 auto;
}

.pgbW .swiper-button-next,
.pgbW .swiper-button-prev {
    background: url(../images/common/arrow-w.svg) no-repeat center/100%;
    width: 27px;
    height: 28px;
    margin-top: -14px;
}

.pgbW .swiper-button-prev {
    right: 0;
    left: auto;
    -webkit-transform: scale(-1);
    -moz-transform: scale(-1);
    -ms-transform: scale(-1);
    -o-transform: scale(-1);
    transform: scale(-1);
}

.pgbW .swiper-button-prev {
    left: auto;
    right: 55px;
}

.main-visual-wrap .swiper-navigation-icon {
    display: none
}


.main-quick {
    flex:1;
}

.main-quick ul {
    gap: 20px;
    flex-direction: column;
    height: 100%;
}

.main-quick li a {
    display: flex;
    padding: 40px;
    justify-content: space-between;
    font-size: 28px;
    font-weight: 700;
    transition: 0.3s;
    position: relative;
    height: 100%;
    flex-direction: column;
}
.main-quick li {
    background: rgb(var(--quick-bg)/10%);
    flex: 1;
    border-radius: 16px;
    transition: 0.3s;
    border: 1px solid rgb(var(--quick-bg)/8%)
}

.main-quick li:hover {
    background: #000;
    background: rgb(var(--quick-bg)/5%);
    border: 1px solid rgb(var(--quick-bg)/100%)
}

.main-quick li:hover a {
    color: rgb(var(--quick-bg)/100%);
}

.quick-arrow {
    width: 40px;
    height: 40px;
    border-radius: 100px;
    background: #fff;
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 10px rgb(var(--quick-bg)/20%);
    color: rgb(var(--quick-bg)/100%);
    transition: all 0.3s;
}

.main-quick li:hover .quick-arrow {
    background: rgb(var(--quick-bg)/100%);
    color: #fff;
    transform: rotate(45deg);
}

@media screen and (min-width:1001px) {
    .main-quick li a img {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }
}

@media screen and (max-width:1000px) {
   .main-visual-wrap {
        flex-direction: column;
        gap: 0;
        margin-bottom: 0;
    }

    .main-quick {
        padding: 60px 0;
    }

    .main-quick ul {
        gap: 20px
    }

    .main-quick li a {
        padding: 10px 20px;
        flex-direction: row;
        font-size: var(--text-xl);

        align-items: center;
    }

    .main-quick li img {
        width: 80px;
    }

    .quick-arrow {
        display: none;
    }
}

@media screen and (max-width:768px) {
    .main-quick {
        padding: 60px 0;
    }
}

@media screen and (max-width:600px) {
    .pgbW {
        bottom: 30px;
    }

    .visual-arrow {
        display: none
    }

    .slid-txt {
        bottom: 80px;
    }

    .main-visual .swiper-progress-bar {
        width: 100%;
    }

    .main-quick ul {
        gap: 10px
    }

    .main-quick li {
        flex: inherit;
        width: 100%;
    }

    .main-quick li img {
        width: 70px;
    }

    .main-quick {
        padding: 40px 0;
    }

    .slid_w span, .slid_w p {font-size: var(--text-4xl);}

    .main-quick li a {
        padding: 4px 20px;
    }

    .main-visual .swiper-slide {
        min-height: auto !important; /* 기존 500px 강제 해제 */
        height: 60vh !important;     /* 화면 높이의 60%만 사용 */
    }
}

/*메인 달력*/
.main-cld {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.main-diagnosis-wrap {
    background: url(../images/main/diagnosis_bg.jpg) no-repeat center/cover;
    border-radius: 16px;
    color: #fff;
    padding: var(--box-padding);
    flex-direction: column;
    justify-content: space-between;
}

.main-diagnosis-wrap img {
    width: 54px;
}

.main-txt {
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.4;
}

.main-txt i {
    font-weight: 300;
}

.dgn-btn {
    background: #fff;
    border-radius: 12px;
    color: var(--secondary);
    font-size: var(--text-lg);
    font-weight: 700;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 20px;
    transition: all 0.3s ease;
}

.dgn-btn:hover {
    transform: translateX(4px);
}

.main-calendar {
    display: flex;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    grid-column: 2 / span 2;
}

.calendar-wrapper {
    padding: 30px;
    width: 50%;
}

.detail-panel {
    width: 50%;
    background: rgb(var(--primary-rgb)/ 20%);
    border-radius: 16px;
    padding: var(--box-padding);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.detail-date {
    color: var(--primary);
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: 25px;
    text-align: center;
}

.course-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 25px;
    max-height: 270px;
    overflow-x: hidden;
    overflow-y: auto;
}

.course-item.no-course,
.course-item.no-course:hover {
    min-height: 240px;
    background: rgb(255 255 255 / 50%);
}

.course-item {
    background: white;
    padding: 13px 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    cursor: pointer;
}

.course-item:hover {
    background: rgb(255 255 255 / 60%);
}

.course-bullet {
    width: 5px;
    height: 5px;
    background: var(--primary);
    border-radius: 50%;
    flex-shrink: 0;
}

.more-btn {
    width: 100%;
    padding: 14px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(30, 136, 229, 0.3);
}

.more-btn:hover {
    background: #1565c0;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(30, 136, 229, 0.4);
}

.main-calendar {
    background: #fff;
}

.main-calendar .tc .fc-toolbar-title {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--dark);
}

.main-calendar .tc .fc-button {
    background: #f8f9fa !important;
    border: none !important;
    color: #666 !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    border-radius: 0.25em !important;
}

.main-calendar .tc .fc-button:hover {
    background: #e9ecef !important;
    color: var(--dark) !important;
}

.main-calendar .fc .fc-button-primary:not(:disabled).fc-button-active {
    background: var(--primary) !important;
    color: white !important;
}

.main-calendar .fc .fc-col-header-cell {
    padding: 12px 0;
    font-weight: 600;
    color: #B5BEC6;
}

/* 캘린더 날짜(일자)에 마우스 올리면 손가락 모양 표시 */
.fc .fc-daygrid-day {
    cursor: pointer;
    transition: background-color 0.2s; /* 배경색 변경 시 부드럽게 */
}

/* (선택사항) 마우스 올렸을 때 배경색을 살짝 바꿔서 클릭 가능함을 강조 */
.fc .fc-daygrid-day:hover {
    background-color: rgba(0, 115, 228, 0.05); /* 연한 파란색 배경 */
}

.main-calendar .fc .fc-daygrid-day-number {
    color: var(--dark) !important;
    font-weight: 600 !important;
    padding: 7px !important;
}

.main-calendar .fc-day-sat .fc-daygrid-day-number,
.main-calendar .fc-day-sun .fc-daygrid-day-number {
    color: rgb(var(--dark-rgb)/50%) !important;
    ;
}

.main-calendar .fc .fc-daygrid-day-top {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.main-calendar .fc .fc-daygrid-day-frame {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.main-calendar .fc .fc-daygrid-day.fc-day-today {
    background: rgb(var(--primary-rgb)/ 0%) !important;
}

.main-calendar .fc .fc-daygrid-day.fc-day-today a.fc-daygrid-day-number:before,
.main-calendar .fc .fc-daygrid-day.selected-date a.fc-daygrid-day-number:before {
    content: '';
    position: absolute;
    width: 44px;
    height: 44px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 12px;
}


.main-calendar .fc .fc-daygrid-day.fc-day-today a.fc-daygrid-day-number:before,
.main-calendar .fc .fc-daygrid-day.fc-day-today.selected-date a.fc-daygrid-day-number:before {
    background: var(--primary) !important;
}

.main-calendar .fc .fc-daygrid-day.selected-date .fc-daygrid-day-number {
    color: var(--primary) !important;
}

.main-calendar .fc .fc-daygrid-day.selected-date a.fc-daygrid-day-number:before {
    background: #f2f3f6 !important;
}

.main-calendar .fc .fc-daygrid-day.fc-day-today .fc-daygrid-event-dot {
    background: #fff !important;
}

.main-calendar .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    color: #fff !important;
}

.main-calendar .fc-event {
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

.main-calendar .fc-event-main {
    color: transparent !important;
}

.main-calendar .fc-daygrid-day-events {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4px;
    position: absolute !important;
    margin-left: -16px;
    margin-top: -3px;
}

.main-calendar .fc-daygrid-event-dot {
    width: 6px !important;
    height: 6px !important;
    background: var(--primary) !important;
    border-radius: 50% !important;
    border: none !important;
}

.main-calendar .fc-theme-standard td,
.main-calendar .fc-theme-standard th,
.main-calendar .fc-theme-standard .fc-scrollgrid {
    border: none !important
}

.main-calendar .fc .fc-toolbar-title {
    font-size: var(--text-xl)
}

.main-calendar .fc .fc-button-primary {
    background: none;
    color: #000;
    border: none;
    padding: 0.2em 0.3em;
}

.main-calendar .fc .fc-button-primary.fc-today-button {
    background: #eee;
    border-radius: 4px;
    position: absolute;
    left: 40px;
}

.main-calendar .fc-daygrid {
    min-height: 325px;
}

.main-calendar .fc-daygrid>table {
    height: 100% !important;
    ;
}


@media screen and (max-width:1200px) {
    .main-cld {
        display: block;
    }

    .main-diagnosis-wrap {
        width: 100%;
        margin-bottom: 20px;
    }

    .main-diagnosis-wrap img {
        margin-bottom: 10px;
    }
}


@media screen and (max-width:768px) {
    .calendar-wrapper {
        width: 100%;
    }

    .detail-panel {
        width: 100%;
    }

    .main-calendar {
        flex-wrap: wrap;
    }

    .course-list {
        height: auto;
    }

    .course-item.no-course,
    .course-item.no-course:hover {
        min-height: auto;
    }

    .main-diagnosis-wrap img {
        width: 34px;
    }

    .main-calendar .fc-daygrid {
        min-height: auto;
    }
}







.main-community {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px
}

.main-board {
    --title-mb: 24px;
    grid-column: 1 / span 2;
    position: relative;
}

.main-board-title {
    padding-right: 60px;
    margin-bottom: var(--title-mb);
}

.main-board .tab {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    margin-left: 32px;
    gap: 8px;
}

.board-more-btn {
    position: absolute;
    right: 0;
    margin-top: calc((var(--title-mb)*-1) - 46px);
}

.main-board .tab button {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 16px;
    transition: 0.3s;
    border-radius: 8px;
    font-size: var(--text-base);
    background: #f2f3f6;
    color: rgb(var(--dark-rgb)/50%);
}

.main-board .tab button:hover {
    background-color: #ddd;
}

.main-board .tab button.active {
    background-color: var(--dark);
    color: #fff;
}

.main-board .tabcontent {
}

.main-board-list {
    border-top: 1px solid var(--dark);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.main-board-list li {
    border-bottom: 1px solid #ddd;
    padding: 32px 0;
}

.main-board-list li:nth-child(2n-1) {
    padding-right: 20px;
}

.main-board-list li:nth-child(2n) {
    padding-left: 20px;
}

.main-tit {
    font-size: var(--text-4xl);
    line-height: 1;
}

.main-board-list li span {
    color: rgb(var(--primary-rgb)/80%);
    font-weight: 600;
}

.main-board-list li p {
    margin: 4px 0 20px 0;
    font-weight: 700;
    font-size: var(--text-xl);
}

.main-board-list li:hover p {
    text-decoration: underline;
    text-underline-offset: 3px
}

.main-board-list li div {
    color: #999;
    font-weight: 500;
}



.main-data {
    background: url(../images/main/main_data.jpg) no-repeat center/cover;
    padding: var(--box-padding);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.main-data p {
    color: #fff;
}

.data-btn button {
    width: 100%;
    padding: 28px 20px;
    text-align: center;
    background: #fff;
    margin-top: 12px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    font-size: var(--text-lg);
    font-weight: 700;
    transition: all 0.3s ease;
}

.data-btn button:nth-child(1) {
    background: var(--primary);
    color: #fff;
    ;
}

.data-btn button:nth-child(2) {
    background: #C9E4FF;
    color: var(--primary);
    ;
}

.data-btn button:hover {
    transform: translateX(8px);
}



@media screen and (max-width:1000px) {
    .main-community {
        display: block;
    }

    .main-data {
        margin-top: 20px;
    }

}

@media screen and (max-width:600px) {
    .main-board .tab {
        width: 100%;
        margin-left: 0;
        margin-top: 20px;
    }

    .main-board-list {
        grid-template-columns: repeat(1, 1fr);
    }

    .main-board-list li:nth-child(2n-1) {
        padding-right: 0px;
    }

    .main-board-list li:nth-child(2n) {
        padding-left: 0px;
    }

    .main-board-list li {
        padding: 12px 0;
    }

    .main-board-list li p {
        margin: 4px 0 8px 0;
    }

    .data-btn button {
        padding: 20px;
    }

    .board-more-btn img {
        width: 30px;
    }

    .board-more-btn {
        margin-top: 0;
        top: -5px;
    }

    .main-board-title {
        padding-right: 0;
    }
}


.main-company {
    --cp-padding: 80px;
    text-align: center;
    position: relative;
    padding: var(--cp-padding) 0;
    margin-bottom: 40px;
    overflow: hidden;

}

.main-company .main-tit {
    margin-bottom: var(--cp-padding);
    color: #fff;

}

.main-company::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--side-space);
    right: var(--side-space);
    bottom: 0;
    background: #0073E4;
    background: linear-gradient(0deg, rgba(0, 115, 228, 0) 0%, rgba(0, 115, 228, 1) 100%);
    opacity: 0.8;
    border-radius: 24px 24px 0 0;
    z-index: -1;
}

.cp-swiper {
    width: 109%;
    margin-left: -4.5%;
}

.cp-swiper .swiper-slide {
    height: auto;
    align-self: stretch;
    background: #fff;
    box-shadow: 0 0 40px rgb(0 0 0 / 10%);
    border-radius: 24px;
    padding: 48px;
}

.company-logo {
    width: 110px;
    height: 110px;
    border: 1px solid #eee;
    background: var(--c-logo) no-repeat center/cover;
    margin: 0 auto;
    border-radius: 100%;
    margin-bottom: 28px;
}

.company-name {
    font-size: var(--text-base);
    color: var(--dark);
    font-weight: 700;
}

.cp-swiper-btn {
    position: relative;
    margin-top: 0;
    background-image: url(../images/main/arrow-right-long-line-white.svg);
    opacity: 0.6;
}

.cp-swiper-btn:hover {
    opacity: 1;
}

.cp-swiper-btn .swiper-navigation-icon {
    display: none;
}

.cp-swiper-btn.swiper-button-prev {
    transform: scaleX(-1);
}


@media screen and (max-width:1500px) {
    .cp-swiper .swiper-slide {
        padding: 24px;
    }
}

@media screen and (max-width:600px) {
    .main-company {
        --cp-padding: 40px;
    }

    .company-logo {
        width: 80%;
        height: 0;
        padding-bottom: 80%;
    }

    .cp-swiper-btn {
        transform: scale(0.8);
    }

    .cp-swiper-btn.swiper-button-prev {
        transform: scaleX(-1) scale(0.8);
    }
    .cp-swiper .swiper-slide {
        padding: 12px;
    }
    .main-company::before {left: 0; right: 0; border-radius: 16px 16px 0 0;}
    .main-company {margin-bottom: 0;}
    .company-logo {margin-bottom: 12px;}
}

/*---------------- sub ----------------*/
.sub-top-wrap {
    margin-top: var(--header-h);
    padding: 0 var(--side-space);
}

.sub-top {
    background: var(--sub-visual) no-repeat center/cover;
    border-radius: 24px;
    padding: 100px 0;
    color: #fff;
    overflow: hidden;
    position: relative;
}

.sub-top::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 40%;
    background: #0073E4;
    background: linear-gradient(270deg, rgba(0, 115, 228, 0) 0%, rgba(0, 115, 228, 1) 100%);
}

.sub-top-con {
    position: relative;
    z-index: 1;
}

.sub-top h2 {
    font-size: var(--text-5xl)
}

.sub-top p {
    opacity: 0.3;
    font-size: var(--text-lg);
    font-weight: 600;
}


.sub-pad {
    padding: 60px 0 160px 0;
}


.breadcrumb {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: end;
    flex-wrap: wrap;
}

.breadcrumb-item {
    position: relative;
}

.home-btn {
    display: flex;
    align-items: center;
    padding: 10px;
    ;
    cursor: pointer;
    font-size: 24px;
}

.separator {
    color: #d1d5db;
    margin: 0 6px;
    font-weight: 300;
}

.dropdown-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: var(--text-base);
    color: #1f2937;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 150px;
    justify-content: space-between;
}

.dropdown-btn:hover,
.dropdown-btn.active {
    background: #f2f3f6
}

.dropdown-btn i {
    transition: transform 0.3s ease;
}

.dropdown-btn.active i {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    min-width: 100%;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    overflow: hidden;
}

.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu ul {
    padding: 10px;
}

.dropdown-menu a {
    display: block;
    padding: 6px 12px;
    color: #818181;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s ease;
    border-radius: 8px;
}

.dropdown-menu a:hover {
    background: #f2f3f6;
    color: #000;

}

.overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
}

.overlay.show {
    display: block;
}

.sub-pt {
    color: var(--primary);
    text-transform: uppercase;
    font-weight: 600;
    font-size: var(--text-lg);
    margin-bottom: 5px;
}

.sub-tit {
    font-size: var(--text-4xl);
    line-height: 1.4;
    margin-bottom: 60px;
}

.sub-tit2 {
    font-size: var(--text-2xl);
    margin-bottom: 24px;
    font-weight: 800;
    color: #000;
}

.sub-tit3 {
    font-size: var(--text-lg);
    font-weight: 700;
}

.mb0 {
    margin-bottom: 0 !important;
}

@media screen and (max-width:768px) {
    .sub-pad {
        padding: 40px 0 80px 0;
    }
}

@media screen and (max-width:600px) {
    .sub-top {
        padding: 50px 0;
        border-radius: 16px;
    }

    .breadcrumb>li:nth-child(1),
    .breadcrumb>li:nth-child(2) {
        display: none
    }

    .breadcrumb>li:nth-child(3),
    .breadcrumb>li:nth-child(5) {
        width: calc(50% - 10px);
    }

    .breadcrumb>li:nth-child(4) {
        width: 20px;
        text-align: center;
    }

    .dropdown-menu {
        min-width: 100%;
    }

    .separator {
        margin: 0;
    }

    .dropdown-btn {
        width: 100%;
    }

    .con.sub-bc {
        max-width: 100%;
    }

    .breadcrumb {
        margin-top: 10px;
    }

    .sub-pad {
        padding: 40px 0 60px 0;
    }

    .sub-tit {
        font-size: var(--text-3xl);
        margin-bottom: 30px;
    }

    .sub-tit br {
        display: none;
    }

    .sub-top::before {
        right: 0;
        background: linear-gradient(270deg, rgba(0, 115, 228, 0.2) 0%, rgba(0, 115, 228, 0.9) 100%);
    }

    .sub-top h2 {
        font-size: var(--text-4xl);
    }

    .sub-top-con.con {
        width: 80%;
        text-align: center;
    }
}


.greeting-img {
    width: calc(50% - 50px);
    background: url(../images/sub/greeting_bg.jpg) no-repeat center/cover;
    border-radius: 16px;
}

.center-img01 {
    background: url(../images/sub/center_bg02.jpg) no-repeat center/cover !important
}

.center-img02 {
    background: url(../images/sub/center_bg01.jpg) no-repeat center/cover !important
}

.greeting-con {
    width: calc(50% - 50px);
    padding: 50px 0;
    font-size: var(--text-lg);
    color: var(--dark);
}

.bgGd {
    background: linear-gradient(180deg, #fff 0, #fff 52px, #f3f5f7 202px, #f3f5f7);
}

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

    .greeting-img,
    .greeting-con {
        width: calc(50% - 20px);
    }
}

@media screen and (max-width:768px) {
    .greeting-img {
        height: 240px;
    }

    .greeting-con {
        padding: 30px 0 0 0;
    }

    .greeting-img,
    .greeting-con {
        width: 100%;
    }

    .center-img01 {
        order: -1
    }
}


/*----------------mypage----------------*/
.side-nav-con-wrap {
    /* max-width: 1000px; */
    margin: 0 auto;
    gap: 10%;
}

.side-nav-menu {
    width: 200px;
}

.side-nav-con {
    flex: 1;
}

.side-nav-menu ul {
    position: sticky;
    top: var(--header-h);
    background: var(--secondary);
    border-radius: 20px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 5px
}

.side-nav-menu ul li a {
    border-radius: 8px;
    padding: 8px 16px;
    color: rgb(255 255 255 / 50%);
    display: block;
    transition: all 0.3s ease;
}

.side-nav-menu ul li.active {
    background: #fff;
    border-radius: 8px;
}

.side-nav-menu ul li.active a {
    background: #fff !important;
    color: var(--secondary);
    font-weight: 600;
}

.side-nav-menu ul li a:hover {
    background: rgb(255 255 255 / 10%);
}


@media screen and (max-width:1200px) {
    .side-nav-con-wrap {
        gap: 0;
    }

    .side-nav-menu {
        width: 100%;
    }

    .side-nav-con {
        flex: 1;
    }

    .side-nav-menu ul {
        position: relative;
        top: auto;
        flex-direction: row;
        gap: 5px;
        border-radius: 12px;
        padding: 4px;
        margin-bottom: 20px;
    }

    .side-nav-menu ul li {
        flex: 1;
        text-align: center;
    }

}


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

    .side-nav-menu ul li a {
        padding: 8px 4px;
    }
}

.table-table-row {
    background-color: rgb(var(--secondary-rgb)/12%) !important;
    border: 1px solid #e5e7eb;
    display: table-row;
}

.table-table-row .table-cell {
    padding: 12px 8px;
    font-weight: 600;
    text-align: center;
    border-right: 1px solid #fff;
    vertical-align: middle;
    color: var(--dark);
    font-size: var(--text-xs);
}

.table-table-row .table-cell:last-child {
    border-right: none;
}

.table-basic {
    /* border: 1px solid #e5e7eb; */
    border-top: none;
    display: table;
    width: 100%;
}

.nowrap {
    white-space: nowrap;
}

.table-cell.tb-title {
    font-weight: 500;
    color: #000;
}

.table-row {
    display: table-row;
}

.table-row:hover {
    background-color: #f7f8f9;
}

.table-cell {
    display: table-cell;
    padding: 16px 5px;
    text-align: center;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #ddd;
    vertical-align: middle;
    color: #595959;
}

.table-cell:last-child {
    border-right: none;
}

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
}

.status-complete {
    background-color: #dbeafe;
    color: var(--primary);
}

.status-pending {
    background-color: #d5d7db;
    color: #4b5563;
}

.btn-print {
    padding: 6px 16px;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-print:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

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


    .table-table-row {
        display: none !important;
    }

    .table-basic {
        border: none;
    }

    .table-row,
    .table-row:hover {
        display: block;
        background: #fff;
        box-shadow: 0 0 30px rgb(0 0 0 / 5%);
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 12px 20px;
        margin-bottom: 15px;
    }

    .table-row:nth-child(even) {
        background-color: white;
    }

    .table-cell {
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        border: none;
        border-bottom: 1px solid #f3f4f6;
        color: #000;
    }

    .table-cell:last-child {
        border-bottom: none;
    }

    .table-cell::before {
        content: attr(data-label);
        font-weight: 600;
        color: #999;
        flex: 0 0 100px;
        text-align: left;
    }

    .table-cell:first-child {
        padding-bottom: 15px;
        border-bottom: 1px solid;
        margin-bottom: 10px;
    }

    .tb-title {
        font-size: var(--text-lg);
        display: block
    }

    .tb-title::before {
        display: block;
        font-size: clamp(14px, 0.5vw + 0.4rem, 20px);
    }
}

@media screen and (max-width: 600px) {
    .table-cell::before {
        flex: 0 0 90px;
    }

}


/*이수증 발급*/
.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    justify-content: center;
    align-items: center;
    /* z-index: 100000; */
    z-index: 4000;
}

.popup-content {
    background: white;
    padding: 0px 40px;
    max-width: 600px;
    width: 90%;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    text-align: center;
    max-height: 90%;
    overflow-y: auto;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #999;
    font-weight: 600;
}

.close-btn:hover {
    color: #000;
}

.print-btn {
    margin-top: 25px;
    background: var(--primary);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    min-width: 30%;
    font-size: var(--text-sm)
}

.print-btn:hover {
    background: #005fa3;
}

/* =========================
   			이수증
   ========================= */

.edu-certificate-wrap {
  border: none;
  padding: 0;
  border-radius: 0;
}

.edu-certificate-a4 {
  width: 190mm;
  margin: 0 auto;
  background: #fff;
  color: #000;
  font-family: Malgun Gothic;
}

.cert-issue-date {
  font-size: 14px;
  font-weight: 700;
  padding: 12mm 0 6mm 0;
}

.cert-paper {
  border: 1px solid #444;
  padding: 6mm 18mm;
  box-sizing: border-box;
  min-height: 250mm;
  display: flex;
  flex-direction: column;
}

.cert-no {
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  margin-bottom: 12mm;
}

.cert-title {
  margin: 0 0 18mm 0;
  text-align: center;
  font-family: Malgun Gothic;
  font-size: 60px;
  font-weight: 700;
  letter-spacing: 0.55em;
  padding-left: 0.55em;
}

.cert-fields {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 18mm;
}

.cert-field-table {
  border-collapse: collapse;
  font-size: 15px;
  font-weight: 700;
}

.cert-field-table td {
  padding: 2.5mm 0;
  vertical-align: top;
}

.cert-field-table .label {
  text-align: left;
  white-space: nowrap;
}

.cert-field-table .colon {
  width: 6mm;
  text-align: center;
}

.cert-field-table .value {
  width: 95mm;
  text-align: left;
  font-weight: 600;
}

.cert-body {
  text-align: center;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.7;
  margin: 0 0 16mm 0;
}

.cert-award-date {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}

.cert-footer {
  margin-top: 8mm;
}

.cert-footer-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* 좌/중/우 3등분 */
.cert-left,
.cert-center,
.cert-right {
  vertical-align: middle;
}


.cert-left  { width: 30%; }
.cert-center{ width: 40%; text-align: center; }
.cert-right { width: 30%; }

.cert-org {
  font-size: 28px;
  font-weight: 700;
  white-space: nowrap;
}

.cert-stamp {
  width: 25mm;
  height: auto;
}

.eduCert-content{
  	font-size: 18px;
  	line-height: 1.8;
  	color:#111;
}
.eduCert-content table{
	border-collapse: collapse;
}
.eduCert-content td{
	padding: 0;
	vertical-align: top;
}

.eduCert-content-label{
	width: 120px;
	text-align: left;
}
.eduCert-content-colon{
	width: 16px;
	text-align: left;
	padding-right: 10px;
}
.eduCert-content-value{
	min-width: 320px;
	text-align: left;
}

.page {
    margin-top: 20px;
}

.page img {
    width: 24px;
}

.page .next img,
.page .last img {
    transform: rotate(180deg);
}

.page a {
    display: flex;
    width: 2rem;
    height: 2rem;
    text-align: center;
    align-items: center;
    line-height: 2rem;
    justify-content: center;
    font-size: var(--txt-l);
    margin: 4px;
    color: rgb(0 0 0 / 50%);
}

.page a:hover {
    color: #000;
}

.page .on a {
    color: #000;
    background-color: #f2f3f6;
    border-radius: 100%;
    font-weight: 600;
}

.page .arrow {
    opacity: 0.2;
}

.page .arrow:hover {
    opacity: 1;
}

.sort-wrap {
    margin-bottom: 10px;
}

.select-basic {
    min-width: 100px;
    height: var(--sort-height);
    border-radius: var(--radius-s);
    font-size: 1rem;
    border: 1px solid #ddd;
    padding: 0 32px 0 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    appearance: none;
    cursor: pointer;
    font-size: var(--text-xs);
}

.excel-btn {
    background: #127c45;
    color: #fff;
    height: var(--sort-height);
    padding: 0 12px;
    border-radius: var(--radius-s);
    font-size: var(--text-xs);
}


.excel-btn i {
    font-size: 1rem;
    font-weight: 300;
}

.excel-btn:hover {
    background: #0f6438;
}

.search-wrap {
    margin-bottom: 40px;
    background: #f2f3f6;
    padding: 20px;
    border-radius: var(--radius-s)
}

.search-wrap form {
    width: 100%;
}

.search-tit {
    width: 100px;
    font-weight: 600;
    color: #000;
}

.search-form {
    width: 100%;
}

.search-form .search-con {
    flex: 1;
}

.search-input {
    flex: 1;
    height: var(--input-height);
    border-radius: var(--radius-s);
    border: 1px solid #ddd;
    padding: 12px;
}

.search-submit {
    width: var(--input-height);
    height: var(--input-height);
    background: var(--secondary);
    border-radius: var(--radius-s);
    color: #fff;
}

.search-submit i {
    color: #fff;
    font-size: 1.1rem
}

.search-con {
    width: 100%;
    gap: 5px;
    --input-height: 40px;
}

.search-con .select-basic {
    height: var(--input-height);
}

.search-result-con {
    background: #fff;
    max-height: 189px;
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 20px;
    padding: 12px;
    border-radius: var(--radius-s);
    box-shadow: 0 0 30px rgb(0 0 0 / 6%);
}

.search-result-list {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px dashed #ddd;
    padding: 8px 12px;
    color: #777;
    font-size: var(--text-xs);
    border-radius: var(--radius-s);
}

.search-result-list:hover {
    background: #f2f3f6;
}

.search-result-list.active {
    background: #e8eaf0;
    font-weight: bold;   /* 글씨 굵게 (선택사항) */
    color: #333;
}

.search-result-list:last-child {
    border-bottom: none;
}

.search-result-list div:nth-child(1) {
    flex: 1;
    color: var(--primary);
}

.search-result-list div:nth-child(2) {
    width: 300px;
    border: 1px solid #eee;
    border-bottom: none;
    border-top: none;
}

.search-result-list div:nth-child(3) {
    width: 300px;
}

.search-result-list div:nth-child(2),
.search-result-list div:nth-child(3) {
    padding: 0 16px;
    display: flex;
    flex-wrap: warp;
    align-items: center;
    justify-content: space-between;
}

.search-result-list div:nth-child(2)>span:first-child,
.search-result-list div:nth-child(3)>span:first-child {
    opacity: 0.7;
}


.no-data {
    text-align: center;
    width: 100%;
    padding: 10% 0;
}



.popup-tb {
    display: flex;
    flex-wrap: wrap;
    /* align-items: center; */
    border-top: 1px solid;
    /* font-size: var(--text-xs); */
}

.popup-tb-row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.popup-tb-row.w50 {
    width: 50% !important;
}

.popup-tb-tit {
    width: 140px;
    padding: 12px 4px;
    font-weight: 600;
    background: rgb(var(--secondary-rgb)/12%) !important;
    text-align: center;
    border-bottom: 1px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup-tb-con {
    flex: 1;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
}

.popup-tb.w100 .popup-tb-row,
.popup-tb-row.w100 {
    width: 100% !important;
}

.pop-tit {
    text-align: left;
    margin-bottom: 10px;
    font-size: var(--text-lg);
    font-weight: 700;
    color: #000;
    /* background: #f2f3f6; */
}



@media screen and (max-width:768px) {
    .search-tit {
        width: 100%;
        margin-bottom: 8px;
    }

    .popup-tb-row,
    .popup-tb-row.w50 {
        width: 100% !important;
    }

    .popup-content {
        padding: 24px;
    }

    .search-result-list>div {
        width: 100% !important;
    }

    .search-result-list div:nth-child(2),
    .search-result-list div:nth-child(3) {
        padding: 0;
        border: none;
        margin-top: 4px;
    }
}

@media screen and (max-width:600px) {
    .search-wrap {
        padding: 8px;
    }

    .search-con .select-basic {
        width: 100%;
    }

    .select-basic {
        min-width: 80px;
    }

    .popup-tb-tit {
        width: 90px;
    }

    .search-result-con {
        margin-top: 10px;
        min-height: 180px;
    }

    .page {
        margin-top: 40px;
    }

    .info-table th {
        width: 90px;
    }
}


.file-group {
    width: 100%;
}

.file-upload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.file-upload input[type="file"] {
    display: none;
}

.upload-btn {
    background-color: rgb(var(--secondary-rgb)/80%);
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    border: none;
    transition: all 0.2s ease;
}

.upload-btn:hover {
    background-color: rgb(var(--secondary-rgb)/100%);
}

.file-name {
    font-size: 14px;
    color: #334155;
    max-width: 500px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.tb-basic {
    width: 100%;
    margin-top: 10px;
    border-top: 1px solid var(--secondary);
}

.tb-basic tr th {
    width: 160px;
    background: rgb(var(--secondary-rgb)/12%) !important;
    border-bottom: 1px solid #fff;
    padding: 12px 8px;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    color: var(--dark);
    font-size: var(--text-xs);
}

.tb-basic tr td {
    display: table-cell;
    padding: 12px 16px;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #ddd;
    vertical-align: middle;
    color: #595959;
}

.tb-basic tr td:last-child {
    border-right: none;
}

.tb-basic .input-wrap>*:last-child {
    width: 100% !important;
}

.tb-basic .input-wrap input {
    --input-h: 45px;
}

.mt-m {
    margin-top: 40px;
}

.mt-s {
    margin-top: 16px;
}

.mt-xs {
    margin-top: 4px !important;
}


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

    .tb-basic,
    .tb-basic tbody {
        display: block;
        width: 100%;
        ;
    }

    .tb-basic tr th,
    .tb-basic tr td {
        display: block;
        width: 100%;
        padding: 0;
        border: none;
    }

    .tb-basic tr {
        display: block;
        width: 100%;
        padding: 10px 0;
        ;
    }

    .tb-basic tr th {
        text-align: left;
        background: #FFF !important;
        margin-bottom: 4px;
    }

    .tb-basic tr td {
        background: #f2f3f6;
        min-height: var(--input-h);
        border-radius: var(--radius-s);
        padding: 8px;
        display: flex;
        align-items: center;
    }

    .upload-btn {
        font-size: 12px;
        width: 90px;
    }

    .file-upload>div {
        width: calc(100% - 100px)
    }
}


/*만족도 조사*/

.course-select-con {
    background: #f2f3f6;
    padding: 1.5rem;
    border-radius: var(--radius-s);
    margin-bottom: 2.5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    border: 1px solid #e5e7eb;
}

.course-label {
    font-weight: 600;
    font-size: var(--text-lg);
    white-space: nowrap;
}

.course-select-con select {
    width: 100%;
    height: 50px;
    font-size: var(--text-base)
}


.question {
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}

.question:last-of-type {
    border-bottom: none;
}

.question-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.question-number {
    width: 2.5rem;
    height: 2.5rem;
    background: rgb(var(--primary-rgb)/10%);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--primary);
    flex-shrink: 0;
}

.question-text {
    font-size: var(--text-lg);
    font-weight: 600;
    color: #1f2937;
    padding-top: 0.5rem;
}

.options {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-left: 4rem;
}

.q-option {
    flex: 1;
}

.q-option input[type="radio"] {
    display: none;
}

.q-option label {
    display: block;
    padding: 1.5rem 0.5rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
    height: 100%;
}

.q-option label:hover {
    border-color: rgb(var(--primary-rgb)/ 20%);
    background: #f9fafb;
}

.q-option input[type="radio"]:checked+label {
    border-color: var(--primary);
    background: #eef2ff;
    color: var(--primary);
}

.q-option-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.q-radio-circle {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.q-option input[type="radio"]:checked+label .q-radio-circle {
    border-color: var(--primary);
    background: var(--primary);
}

.q-radio-circle::after {
    content: '✓';
    color: white;
    font-size: 0.875rem;
    display: none;
}

.q-option input[type="radio"]:checked+label .q-radio-circle::after {
    display: block;
}

.q-option-label {
    font-size: 0.875rem;
    text-align: center;
    font-weight: 500;
}

.submit-container {
    margin-top: 2.5rem;
    display: flex;
    justify-content: flex-end;
}

.submit-btn {
    padding: 0.75rem 2rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 6px rgba(79, 70, 229, 0.2);
}


.success-screen {
    display: none;
    text-align: center;
    padding: 4rem 2rem;
    background: #f2f3f6;
    border-radius: var(--radius-s)
}

.success-screen.show {
    display: block;
}

.success-icon {
    width: 5rem;
    height: 5rem;
    background: #10b981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 3rem;
    color: white;
}

.success-title {
    font-size: 2rem;
    color: #1f2937;
    margin-bottom: 1rem;
}

.success-message {
    font-size: 1.125rem;
    color: #6b7280;
    margin-bottom: 2rem;
}

.back-btn {
    padding: 0.75rem 2rem;
    background: white;
    color: var(--primary);
    border: 2px solid var(--primary);
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.back-btn:hover {
    background: var(--primary);
    color: white;
}

#surveyForm.hide {
    display: none;
}

@media screen and (max-width:768px) {
    .options {
        margin-left: 0;
    }

    .course-select-con {
        flex-wrap: wrap;
        gap: 10px
    }

    .course-label {
        width: 100%;
    }
}

@media screen and (max-width:600px) {
    .course-select-con {
        padding: 12px;
        gap: 4px;
        margin-bottom: 20px;
    }

    .course-label {
        text-align: center;
    }

    .options {
        flex-wrap: wrap;
    }

    .edu-certificate-wrap {
        padding: 2rem
    }

    .q-option label {
        padding: 12px 12px;
        border: 1px solid #ddd;
    }

    .q-radio-circle {
        width: 1rem;
        height: 1rem;
        ;
    }

    .q-option-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        justify-content: flex-start;
    }

    .q-option {
        width: 100%;
        flex: auto;
    }
}

/*교육과정*/

.edu-category {
    margin-bottom: 20px;
    border: 1px solid var(--secondary);
    border-radius: var(--radius-s);
    overflow: hidden;
}

.edu-category-header {
    background: rgb(var(--primary-rgb)/8%);
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.edu-category-header:hover {
    background: rgb(var(--primary-rgb)/12%);
}

.edu-category-tit {
    font-size: var(--text-xl);
    font-weight: bold;
    color: var(--secondary);
    max-width: calc(100% - 100px)
}

.edu-category-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.edu-course-count {
    color: #666;
    font-size: 14px;
}

.edu-category-info .toggle-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 20px;
    transition: transform 0.3s;
}

.edu-category-info .toggle-icon.open {
    transform: rotate(180deg);
}

.edu-category-con {
    /* max-height: 280px; */
    overflow: hidden;
    transition: max-height 0.3s;
    overflow-x: hidden;
    overflow-y: auto;
}

.edu-category-con.closed {
    max-height: 0;
    transition: max-height 0.3s;
}

.edu-course-list-wrap {
    padding: 20px;
}

.edu-course-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.edu-course-item {
    display: grid;
    /* [비율 설정 설명]
       1fr: 과정명 (남은 공간 모두 사용)
       210px: 교육기간
       210px: 신청기간
       80px: 정원
       80px: 상태 (텍스트)
       100px: 신청 (버튼)
    */
    grid-template-columns: 1fr 210px 210px 80px 80px 100px;
    gap: 10px;
    align-items: center;
    padding: 20px 10px;
    border-bottom: 1px solid #eee;
    background-color: #fff;
    text-align: center; /* 기본 가운데 정렬 */
    font-size: 15px;
    color: #555;
    transition: background-color 0.2s;
}

.edu-course-item:hover {
    background-color: #f9faff; /* 호버 효과 */
}

/* 2. 헤더 스타일 (Sticky) */
.edu-course-item.sticky {
    background-color: #f4f6f9;
    font-weight: 700;
    color: #333;
    border-top: 2px solid #333;
    border-bottom: 1px solid #ddd;
}
.edu-course-item.sticky:hover {
    background-color: #f4f6f9; /* 헤더는 호버 효과 제거 */
}

/* 3. 과정명 (왼쪽 정렬 & 말줄임 처리) */
.edu-course-name {
    text-align: left;
    padding-left: 10px;
    font-weight: 600;
    color: #333;

    /* 긴 제목 말줄임 (...) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.edu-course-period,
.edu-apply-period,
.edu-course-period,
.edu-capacity,
.edu-status {
    color: #999;
    text-align: center;
}

.status-text {
    font-weight: 500;
}

/* 5. 신청 버튼 스타일 (알약 모양) */
.btn-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 32px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

/* 신청 가능 (파란색) */
.btn-status.ing {
    background-color: var(--primary);
    color: #fff;
}
.btn-status.ing:hover {
    background-color: #004e9b;;
    transform: translateY(-1px);
}

/* 신청 마감 (회색) */
.btn-status.end {
    background-color: #bfbfbf;
    color: #fff;
    cursor: default;
}

/* =========================================
   [Mobile Responsive] 모바일 반응형 (1024px 이하)
   ========================================= */
@media screen and (max-width: 1024px) {

    /* 헤더 숨김 */
    .edu-course-item.sticky { display: none; }

    /* 리스트 아이템을 카드 형태로 변경 */
    .edu-course-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        gap: 8px;
        text-align: left;
        position: relative;
    }

    /* 과정명 */
    .edu-course-name {
        width: 100%;
        font-size: 18px;
        margin-bottom: 10px;
        white-space: normal; /* 줄바꿈 허용 */
        padding-left: 0;
    }

    /* 나머지 항목들 (라벨 추가하여 표시) */
    .edu-course-item > div:not(.edu-course-name):not(.edu-course-btn-wrap) {
        display: flex;
        align-items: center;
        width: 100%;
        font-size: 14px;
        color: #666;
    }

    /* 모바일용 가상 라벨 (CSS content로 처리하거나 HTML span으로 처리) */
    .edu-course-period::before { content: "교육기간 : "; font-weight: 600; margin-right: 5px; color: #333; }
    .edu-course-apply-date::before { content: "신청기간 : "; font-weight: 600; margin-right: 5px; color: #333; }
    .edu-course-capacity::before { content: "정원 : "; font-weight: 600; margin-right: 5px; color: #333; }
    .status-text::before { content: "상태 : "; font-weight: 600; margin-right: 5px; color: #333; }

    /* 버튼 위치 (우측 상단 또는 하단 고정) */
    .edu-course-btn-wrap {
        right: 20px;
        top: 20px;
		width: 100%;
    }
	
	.btn-status {
	    width: 100%;
	}
}




#calendarWrap {
    display: flex;
    gap: 40px;
}

#calendar {
    flex: 1;
    background: #fff;
    border-radius: 8px;
}

#rightPanel {
    width: 440px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgb(var(--primary-rgb)/50%);
    overflow: hidden;
    background: linear-gradient(0deg, rgba(0, 115, 228, 0.5) 0%, rgba(0, 115, 228, 1) 100%);
}


#yearCalendarWrap {
    display: none;
}

.year-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5em;
}

.year-title {
    font-size: var(--text-4xl);
    font-weight: 700;
}

.year-title::after {
    content: '교육과정';
}


/* 연도별 달력 스타일 */
#yearCalendar .fc-list-day-cushion {
    display: block !important;
    visibility: visible !important;
}

#yearCalendar .fc-list-day-side-text,
#yearCalendar .fc-list-day-text {
    display: inline !important;
    visibility: visible !important;
}

#yearCalendar .fc-list-event-time {
    display: table-cell !important;
    width: 200px;
}

.selected-date-title {
    color: white;
    padding: 16px;
    border-radius: 0;
    text-align: center;
    font-size: var(--text-xl);
    font-weight: bold;
}

.selected-date-value::before {
    font-family: remixicon !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    content: "\eb27";
    margin-right: 8px;
    font-weight: 300;
}

.selected-date-label {
    opacity: 0.5;
    font-size: var(--text-sm);
}

.selected-list-wrap {
    height: 100%;
    max-height: 759px;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
}

.selected-list {
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
}

.event-item {
    border-radius: 12px;
    padding: 16px;
    background: #f2f3f6;
    width: 100%;
    position: relative;
}

.year-nav-buttons .fc-today-button,
.edu-calendar .fc-today-button {
    opacity: 0.65 !important;
}

.year-nav-buttons .fc-toolbar-chunk {
    gap: 0.75em !important;
    display: flex;
}


.event-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.event-status {
    padding-left: 10px;
    padding-right: 100px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    position: relative;
    color: rgb(0 0 0 / 50%);
}

.event-status::before {
    content: '';
    position: absolute;
    width: 5px;
    height: 10px;
    margin-top: -5px;
    left: 0;
    top: 50%;
    border-radius: 100px;
}

.status-green::before {

    background: #00C0E8;
}

.status-orange::before {
    background: #FFB300;
}

.status-red::before {
    background: #E11D48;
}

.status-gray::before {
    background: #888888;
}

.event-capacity {
    font-size: 13px;
    color: #999;
    position: absolute;
    right: 0;
    ;
    top: 0;
    padding: 16px;
}

.event-title {
    font-size: var(--text-base);
    font-weight: bold;
    margin-bottom: 4px;
    color: #333;
    line-height: 1.4;
}

.event-date {
    color: #7C7C7C;
    margin-bottom: 12px;
}

.event-info {
    font-size: 12px;
    color: #999;
    padding-right: 100px;
}

.event-button {
    background: var(--primary);
    color: white;
    border: none;
    padding: 5px 18px;
    border-radius: 100px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s;
    position: absolute;
    right: 16px;
    bottom: 16px;
}

.event-button.waiting {
    background: #2fb344;
    color: white;
    border: none;
    padding: 5px 18px;
    border-radius: 100px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s;
    position: absolute;
    right: 16px;
    bottom: 16px;
}

.event-button.waiting:not(:disabled):hover {
    background: #2fb344;
    transform: scale(1.05); /* 살짝 커짐 */
    box-shadow: 0 4px 12px rgba(0, 64, 152, 0.2)
}

.event-button.close {
    background: #e03131;
    color: white;
    border: none;
    padding: 5px 18px;
    border-radius: 100px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s;
    position: absolute;
    right: 16px;
    bottom: 16px;
}

.event-button.close:not(:disabled):hover {
    background: #e03131;
    transform: scale(1.05); /* 살짝 커짐 */
    box-shadow: 0 4px 12px rgba(0, 64, 152, 0.2)
}

.event-button.end {
    background: #BDBDBD;
    color: white;
    border: none;
    padding: 5px 18px;
    border-radius: 100px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s;
    position: absolute;
    right: 16px;
    bottom: 16px;
}

.event-button.end:not(:disabled):hover {
    background: #BDBDBD;
    transform: scale(1.05); /* 살짝 커짐 */
    box-shadow: 0 4px 12px rgba(0, 64, 152, 0.2)
}

.event-button:not(:disabled):hover {
    background: #004e9b;
    transform: scale(1.05); /* 살짝 커짐 */
    box-shadow: 0 4px 12px rgba(0, 64, 152, 0.2)
}

.event-button:disabled,
.event-button.waiting:disabled {
    background: #2fb344;
    cursor: not-allowed !important;
    transform: none;
    box-shadow: none;
    pointer-events: auto;
}

.event-button:disabled,
.event-button.close:disabled {
    background: #e03131;
    cursor: not-allowed !important;
    transform: none;
    box-shadow: none;
    pointer-events: auto;
}

.event-button:disabled,
.event-button.end:disabled {
    background: #BDBDBD;
    cursor: not-allowed !important;
    transform: none;
    box-shadow: none;
    pointer-events: auto;
}

.year-style {
    font-size: var(--text-2xl);
    color: rgb(0 0 0 / 20%);
    font-weight: 700;
}

.year-scd-list {
    display: flex;
    align-items: center;
    border-bottom: 1px solid#ddd;
    padding: 16px 24px;
    background: white;
    position: relative;
}

.year-scd-list:last-child {
    border-bottom: none;
}

.year-scd-date {
    width: 180px;
    flex-shrink: 0;
    padding-right: 10px;
    border-right: 1px solid #e0e0e0;
}

.year-scd-info {
    flex: 1;
    padding-left: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.year-scd-list .event-button {
    width: auto;
    padding: 10px 30px;
    flex-shrink: 0;
}

.edu-calendar .fc-day.selected-day {
    background-color: rgb(var(--primary-rgb) / 5%) !important;
}

.edu-calendar .fc-day.selected-day .fc-daygrid-day-frame {
    background-color: rgb(var(--primary-rgb) / 5%) !important;
}

/* 일정 줄 표시 때문에 주석처리
.edu-calendar .fc-h-event {
    background: transparent !important;
    border: none !important;
} */

.edu-calendar {

    --fc-button-bg-color: var(--secondary) !important;
}

.edu-calendar .fc .fc-daygrid-day.fc-day-today {
    background: #f2f3f6 !important;
}

.edu-calendar .fc-h-event span {
    color: #000 !important;
}

.edu-calendar .fc .fc-daygrid-day-frame {
    min-height: 120px;
}

.edu-calendar .fc .fc-daygrid-body-natural .fc-daygrid-day-events {
    margin-bottom: 0;
}

.edu-calendar .fc .fc-view-harness {
    border: 1px solid var(--secondary);
    border-radius: 12px;
    overflow: hidden;
    ;
}

.edu-calendar .fc-scroller-harness thead {
    background: var(--dark);
    display: #fff;
    ;
}

.edu-calendar .fc-scroller-harness thead th {
    border-right: 1px solid #fff !important;
    color: #fff;
}

.edu-calendar .fc-theme-standard .fc-scrollgrid {
    border: none !important
}

.edu-calendar .fc-theme-standard th:last-child {
    border-right: none !important
}

.edu-calendar .fc .fc-toolbar-title {
    font-size: var(--text-4xl);
    font-weight: 700;
}

.edu-calendar .fc .fc-daygrid-more-link {
    font-weight: 300;
    margin-top: 2px;
    font-size: 12px;
    margin-left: 4px;
}

.edu-calendar .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    color: var(--primary);
    ;
}

.edu-calendar .fc .fc-day-sun .fc-daygrid-day-number,
.edu-calendar .fc .fc-day-sat .fc-daygrid-day-number {
    color: rgb(0 0 0 / 40%)
}

.cld-tit {
    display: flex;
    align-items: center;
    font-size: 12px;
    padding: 1px 6px;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 500;
}

.year-nav-buttons .fc-prev-button {
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}

.year-nav-buttons .fc-next-button {
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    margin-left: -1px;
}

.year-scd-box {
    display: flex;
    flex-direction: column;
}

.year-scd-box-wrap {
    border: 1px solid rgb(var(--secondary-rgb)/ 50%);
    margin-bottom: 20px;
    border-radius: 12px;
    overflow: hidden;
}

.year-scd-tit {
    background: rgb(var(--primary-rgb) / 8%);
    text-align: center;
    padding: 20px 24px;
    font-size: var(--text-xl);
    font-weight: bold;
    color: var(--secondary)
}

.year-scd-list .event-title {
    font-size: var(--text-lg);
    padding-right: 100px;
}

.no-scd {
    text-align: center;
    color: #999;
    padding: 40px;
    width: 100%;
}

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

    #rightPanel {
        width: 300px;
    }
}

@media screen and (max-width:1000px) {
    #calendarWrap {
        flex-wrap: wrap
    }

    #calendar {
        flex: auto;
        width: 100%;
    }

    #rightPanel {
        width: 100%;
    }

    .selected-list-wrap {
        max-height: auto;
    }

    .edu-calendar .fc .fc-daygrid-day-frame {
        min-height: auto;
    }

    #calendarWrap {
        gap: 8px;
    }

    .cld-event-tit {
        display: none
    }

    .edu-calendar .fc-daygrid-day-events .fc-daygrid-event-harness {
        display: none;
    }

    .edu-calendar .fc-daygrid-day-events .fc-daygrid-event-harness:first-child {
        display: block !important;
        position: absolute;
        bottom: 5px;
        left: 0;
        right: 0;
    }

    .edu-calendar .fc-daygrid-day-events .fc-daygrid-event-harness:first-child .cld-event-dot {

        background: var(--primary) !important;
        margin: 0 auto !important;

    }

    .edu-calendar .fc .fc-daygrid-day-number {
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        top: 50%;
        transform: translateY(-50%);
        text-align: center;
    }

    .edu-calendar .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {
        min-height: 0;
        padding-bottom: 100%;
    }

    .year-scd-list {
        flex-wrap: wrap;
        width: 100%;
    }

    .year-scd-date {
        width: 100%;
    }

    .year-scd-info {
        width: 100%;
        flex: auto;
        padding-left: 0;
    }

    .year-scd-date {
        border-right: none;
        margin-bottom: 4px;
    }

    .year-scd-list .event-title {
        font-size: var(--text-xl);
        padding-right: 0;
        margin-bottom: 20px;
    }

    .year-scd-list .event-button {
        padding: 8px 16px;
    }

    .event-title {
        font-size: var(--text-lg);
    }
}


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

    .selected-date-label {
        display: none;
    }

    .selected-date-title {
        padding: 8px;
    }

    .selected-list {
        padding: 8px;
    }

    .mbN,
    .year-title::after {
        display: none
    }

    .year-scd-tit {
        padding: 8px;
    }

    .year-scd-list {
        padding: 12px;
    }

    .edu-tab {
        padding: 6px;
    }

    .year-scd-list .event-button {
        padding: 6px 16px;
    }

    .event-item {
        padding: 12px;
    }

    .selected-list {
        gap: 4px;
    }
}

/*협약기업*/
@media screen and (min-width:1000px) {

    .tb-flex,
    .tb-flex tbody {
        width: 100%;
    }

    .tb-flex,
    .tb-flex tbody,
    .tb-flex tr,
    .tb-flex th,
    .tb-flex td {
        display: flex;
        flex-wrap: wrap;
    }

    .tb-flex tr {
        width: 50%;
    }

    .tb-flex tr.w100 {
        width: 100%;
    }

    .tb-flex tr td {
        flex: 1;
    }

    .tb-basic tr th {
        align-items: center;
        justify-content: center;
    }
}

@media screen and (max-width: 600px) {
    .tb-flex tr td {
        padding: 0;
        background: none;
    }

}


.popup-overlay.test-popup .popup-content {
    max-width: 800px !important;
    padding: 0;
    text-align: left;
}



.test-exp {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    padding: 30px 12px;
    text-align: center;
    position: relative;
}

.test-exp h2 {
    font-size: var(--text-2xl);
    margin-bottom: 10px;
    font-weight: 700;
}

.test-exp p {
    font-size: var(--text-xs);
    opacity: 0.65;
}

.test-popup .close-btn {
    color: white;
    z-index: 1;
}

.test-popup .close-btn:hover {
    color: white;
    opacity: 0.7;
}

.test-list {
    padding: 40px;
    overflow-y: auto;
}

.test-section {
    margin-bottom: 30px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    background: #f2f3f6;
}

.test-section:last-child {
    margin-bottom: 0;
}

.test-header {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.test-num {
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    background: #4a90e2;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
}

.test-text {
    flex: 1;
    font-size: var(--text-base);
    font-weight: 700;
    color: #000;
    padding-top: 0.3rem;
}

.answer-list {
    margin-left: 50px;
}

.answer-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    /* padding: 10px;
    margin-bottom: 8px; */
    background: white;
    border-radius: 6px;
    transition: all 0.2s;
    cursor: pointer;
}

.answer-item:last-child {
    margin-bottom: 0;
}

.answer-item:hover {
    background: #f0f7ff;
}

.answer-item input[type="checkbox"],
.answer-item input[type="radio"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #4a90e2;
}

.answer-label {
    flex: 1;
    color: #555;
    cursor: pointer;
    margin-left: -3px;
    font-size: var(--text-xs);
}

.answer-number {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}


.test-btn {
    padding: 20px 25px;
    background: #eee;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: center;
    gap: 10px;
    height: 80px;
}

.test-btn .print-btn {
    margin-top: 0 !important;
    background: var(--secondary);
}

.test-btn .print-btn:hover {
    background: rgb(var(--secondary-rgb)/90%);
}


.test-con-wrap {
    display: flex;
    flex-direction: column;
    justify-content: start;
    height: 100%;
}

.test-list {
    flex: 1;
}

.c-info {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 80px;
    gap: 80px;
}

.b-info {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 80px;
    gap: 80px;
}

.c-info h3 {
    width: 260px;
}

.c-info .c-info-con {
    flex: 1;
}

.c-info-con {
    padding: 30px;
    background: #f2f3f6;
    border-radius: var(--radius-s);
}

.c-info-con.bsn-direction {
    background: none;
    padding: 0;
}

.bsn .sub-tit {
    margin-bottom: 30px;
}

.direction-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.direction-list li {
    border-radius: var(--radius-s);
    background: #fff;
    padding: 36px;

}

.direction-list li h4 {
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: var(--text-lg);
    margin-bottom: 28px;
    color: var(--primary);
}

.direction-list li span:first-child {
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 100px;
    text-align: center;
    background: rgb(var(--primary-rgb)/50%);
    font-size: var(--text-sm);
    color: #fff;
    display: block;
}

.direction-list li span:last-child {}

.direction-list li p {
    padding-left: 12px;
    position: relative;
    margin-top: 8px;
}

.direction-list li p::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 4px;
    border-radius: 100px;
    height: 4px;
    background: #ddd;
}

.sub-banner {
    background: var(--sub-banner-bg) no-repeat center/cover;
    position: relative;
    padding: 100px;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 160px;
}

.sub-banner div {
    position: relative;
    color: #fff;
    font-size: var(--text-xl)
}

.sub-banner b {
    font-size: var(--text-2xl)
}

.sub-banner::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0%;
    background: #0073E4;
    background: linear-gradient(270deg, rgba(0, 115, 228, 0) 0%, rgba(0, 115, 228, 1) 100%);
}

.c-info:last-child {
    margin-bottom: 0;
}


.c-info .sub-tit2 {
    font-weight: 600;
    color: #000;
    border-top: 1px solid;
    padding-top: 20px;
}

.comapny-list ul {
    display: grid;
    gap: 40px;
    grid-template-columns: repeat(4, 1fr);
}

.comapny-list ul li {
    border: 1px solid #e0e0e0;
    padding: 20px;
    border-radius: var(--radius-s)
}

.cpn-logo {
    width: 100%;
    background: var(--cpn-logo) no-repeat center/cover;
    height: 0;
    padding-bottom: 60%;
    border-radius: var(--radius-s);
}

.cpn-info {
    margin-top: 20px;
}

.cpn-name {
    display: flex;
    gap: 4px;
}

.cpn-name i {
    color: var(--primary);
}

.cpn-location {
    color: #999;
    font-size: var(--text-xs)
}


@media screen and (max-width:1000px) {
    .c-info {
        gap: 0;
        margin-bottom: 40px;
    }

    .c-info .c-info-con {
        flex: inherit;
        width: 100%;
    }

    .c-info .sub-tit2 {
        padding-top: 0;
        border-top: none;
    }

    .c-info h3 {
        width: 100%;
    }

    .comapny-list ul {
        gap: 24px;
        grid-template-columns: repeat(3, 1fr);
    }

    .comapny-list ul li {
        padding: 12px;
    }

    .sub-banner {
        padding: 50px;
    }
}

@media screen and (max-width:768px) {
    .answer-list {
        margin-left: 0;
    }

    .direction-list {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .sub-banner {
        margin-top: 80px;
    }
}

@media screen and (max-width:600px) {
    .c-info .sub-tit2 {
        margin-bottom: 8px;
    }

    .c-info-con {
        padding: 20px;
    }

    .c-info {
        margin-bottom: 24px;
    }

    .comapny-list ul {
        gap: 12px;
        grid-template-columns: repeat(2, 1fr);
    }

    .cpn-info {
        margin-top: 12px;
    }

    .test-list {
        padding: 20px 12px;
    }

    .test-num {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .test-header {
        gap: 8px
    }

    .test-section {
        padding: 16px;
        margin-bottom: 15px;
    }

    .test-text {
        padding-top: 0.1em;
    }

    .answer-item {
        gap: 6px;
        padding: 8px;
        margin-bottom: 8px;
    }

    .answer-item input[type="checkbox"],
    .answer-item input[type="radio"] {
        width: 14px;
        height: 14px;
    }
    .test-btn {
        padding: 10px;
        height: 60px;
    }

    .test-btn button {
        width: 100%;
    }

    .test-exp p br {
        display: none
    }

    .direction-list li {
        padding: 20px;
    }

    .sub-banner {
        padding: 24px;
    }

    .bsn .sub-tit {
        margin-bottom: 20px;
    }

    .direction-list li span:first-child {
        width: 30px;
        height: 30px;
        line-height: 30px;
    }

    .direction-list li h4 {
        gap: 8px;
        margin-bottom: 20px;
    }

    .direction-list li p {
        margin-top: 5px;
    }

    .direction-list li p::before {
        top: 8px;
    }

    .sub-banner b {
        font-size: var(--text-xl)
    }

    .sub-banner div {
        font-size: var(--text-base);
    }

    .sub-banner:before {
        background: linear-gradient(270deg, rgba(0, 115, 228, 0.3) 0%, rgba(0, 115, 228, 1) 100%)
    }

    .sub-banner {
        margin-top: 60px;
    }
}


/*사업소개*/
.c-info-wrap {
    background: #fff;
    padding: 80px;
    border-radius: 16px;
    box-shadow: 0 2px 60px 0 rgba(0 0 0 / 3%), 0 0 6px 0 rgb(0 0 0 / 3%);
}

.practice-list {
    gap: 20px
}

.practice-list li {
    flex: 1;
    padding: 20px;
    border: 2px solid rgb(var(--primary-rgb) / 50%);
    border-radius: 12px;
    text-align: center;
    background: rgb(var(--primary-rgb) / 3%)
}

.practice-list li h4 {
    margin-bottom: 20px;
    font-size: var(--text-lg)
}

.practice-list li h4 span {
    font-size: var(--text-xs);
    padding: 2px 20px;
    background: var(--primary);
    color: #fff;
    display: inline-block;
    border-radius: 100px;
    margin-bottom: 12px;
}

.practice-list li p {
    border-bottom: 1px dashed rgb(var(--primary-rgb) / 20%);
    padding: 4px 2px;
    color: #666
}

.practice-list li p:last-child {
    border-bottom: 0;
}

.business-info-w {
    margin-top: -80px;
}

.business-info-w>div {
    padding: 80px;
    font-size: var(--text-lg);
    color: var(--dark);
}

.business-info-bg {
    width: 90%;
    height: 70vh;
    margin: 0 auto;
    border-radius: 24px;
    background: url(../images/sub/business_info_bg.jpg) #ddd no-repeat center/cover;
}

.bsn-info1 {
    background: #00396e;
    background: linear-gradient(309deg, rgba(0, 57, 110, 1) 0%, rgba(0, 42, 80, 1) 100%);
    color: #fff !important;
    border-radius: 16px
}

.bsn-info1 * {
    color: #fff !important;
}

.bsn-info2 {
    padding-bottom: 0 !important;
}

.bsn-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 20px;
    position: relative;
    border-right: 1px solid #ddd
}

.bsn-detail:last-child {
    border-right: none;
}

.bsn-detail dt {
    width: 100%;
    margin-bottom: 20px;
    font-weight: 500;
    opacity: 0.5;
    ;
}

.bsn-detail dd {
    font-weight: 500;
    ;
    color: #000;
    font-size: var(--text-base);
}

.c-info-con.bsn-dt {
    padding: 30px 10px !important;
}


@media screen and (max-width:1500px) {
    .bsn .c-info h3 {
        width: 100%;
    }

    .bsn .c-info {
        gap: 0
    }

}

@media screen and (max-width:1000px) {
    .business-info-w>div {
        padding: 40px;
    }

    .c-info-wrap {
        padding: 40px;
    }

    .business-info-bg {
        height: 400px;
    }
}

@media screen and (max-width:768px) {
    .bsn-detail {
        flex: inherit;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #ddd;
        padding: 12px 0;
    }

    .bsn-detail:last-child {
        border-bottom: none;
    }

    .c-info-con.bsn-dt {
        padding: 8px 20px !important;
    }

    .practice-list li {
        flex: inherit;
        width: 100%;
    }

    .bsn-detail dt {
        margin-bottom: 10PX;
    }

    .bsn-detail dd br {
        display: none
    }
}

@media screen and (max-width:600px) {
    .business-info-w>div {
        padding: 20px;
    }

    .c-info-wrap {
        padding: 20px;
    }

    .business-info-bg {
        height: 300px;
    }

    .business-info-bg {
        border-radius: 16px;
    }

    .practice-list li {
        border-radius: var(--radius-s)
    }
}





/*게시판 관리*/
.board-select select {
    --sort-height: 50px;
    margin-bottom: 30px;
    min-width: 200px;
    font-weight: 600;
    color: #000;
    font-size: inherit;
    border-color: #000;
}

.tbNum {
    width: 80px;
}

.tbWriter {
    width: 200px;
}

.tbDate {
    width: 200px;
}

.board-tb .table-cell {
    border-right: none !important
}

.board-tb .table-row .tbNum {
    color: #999;
}

.bd-notice {
    background: var(--secondary);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 13px;
}


.board-con-tit h2 {
    font-size: var(--text-2xl);
    font-weight: 700;
}

.board-con-tit span {
    font-weight: 500;
    display: block;
    color: #999;
}

.board-con-tit b {
    color: var(--primary);
    display: block;
}

.board-con-tit {
    padding: 20px 0;
    border-top: 2px solid #000;
    border-bottom: 1px solid #ddd;
}

.board-con {
    margin: 40px 0;
}

.list-direction {
    border-top: 1px solid #ddd;
}

.list-direction a {
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.list-direction div {
    --list-d-padding: 10px;
    padding: var(--list-d-padding) 30px;
    position: relative;
}

.list-direction div:first-child {
    width: 110px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center;
    color: #999;
}

.list-direction div:last-child {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: 0.3s;
}

.list-direction div:last-child:hover {
    color: #999;
}


.list-direction li {
    border-bottom: 1px solid #ddd;
}

.list-direction div:first-child:before {
    content: '';
    position: absolute;
    right: -0.5px;
    top: var(--list-d-padding);
    bottom: var(--list-d-padding);
    width: 1px;
    background: #000;
    opacity: 0.4;
}

/*쓰기*/

.board-write>div {
    width: 48%;
    margin-bottom: 20px;
}

.board-write>div.w100 {
    width: 100%;
}

.board-write dt {
    margin-bottom: 4px;
    font-weight: 600;
}

.notice-type-list {
    width: 100%;
    gap: 10px
}

.notice-check .check-item {
    color: #000;
    font-size: inherit;
    font-weight: 700;
    padding: 8px 16px;
    max-width: 160px;
    border-radius: 8px;
    position: relative;
    z-index: 1;
}

.notice-check .check-item .checkbox-custom::before {
    content: '';
    background: #fff;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    transition: all 0.2s;
    position: absolute;
    z-index: -1;
    border-radius: var(--radius-s);
    border: 1px solid #ddd;
}

.notice-check .check-item input[type="checkbox"]:checked+.checkbox-custom::before {
    background: rgb(var(--primary-rgb)/10%);
    border: 1px solid var(--primary)
}



.bd-view-file-w {
    width: 100%;
    /* padding-bottom: 40px; */
    font-size: var(--txt-xs);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.bd-view-file-w a {
    display: block;
    width: 100%;
    min-width: 100px;
}

.bd-file {
    max-width: 100%;
    background: rgb(var(--primary-rgb)/10%);
    padding: 8px 10px;
    border-radius: var(--radius-s);
}

.bd-file i {
    vertical-align: middle;
    font-size: 20px;
}

.bd-file1 {
    width: 34px;
    height: 34px;
    text-align: center;
    line-height: 34px;
    border-radius: var(--radius-xs);
    background: #fff;
    color: var(--primary);
}

.bd-file2 {
    width: calc(100% - 64px);
    padding: 0 15px;
    font-weight: 500;
    line-height: 1.2;
}

.bd-file2 span {
    opacity: 0.5;
    font-size: 12px;
    display: block;
    font-weight: 400;
}

.bd-file3 {
    width: 30px;
    height: 30px;
    opacity: 0.3;
}

.bd-view-file-w a:hover .bd-file {
    background: rgb(var(--primary-rgb)/20%);
}

.bd-view-file-w a:hover .bd-file3 {
    opacity: 1;
}

.b-file {
    position: relative;
    gap: 10px;
}

.b-file .file__input {
    padding: 0 !important;
}

.file__input_w {
    position: relative;
    width: 150px;
    cursor: pointer;
}

.file__input {
    width: 100%;
    position: relative;
    height: var(--input-height);
}

.file__value {

    border-radius: var(--radius-s);
    color: #000;
    padding: 0.75rem 1rem;
}

.file__value {
    background-color: rgb(var(--secondary-rgb) / 10%);
}

.file__input--file {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.file__input--label {
    display: flex;
    cursor: pointer;
    text-align: center;
}

.file__input--label:after {
    content: attr(data-text-btn);
    border-radius: var(--radius-s);
    background-color: var(--secondary);
    color: #fff;
    padding: 0 2rem;
    cursor: pointer;
    height: 48px;
    line-height: 48px;
    width: 100%;
}

.file__input--label:hover {
    opacity: 0.9;
}

.file__value {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: var(--text-xs);
}

.file__value:hover:after {
    color: var;
}

/*.file__value:after {
    content: "×";
    cursor: pointer;
    width: 20px;
    height: 20px;
    color: #fff;
    opacity: 0.5;
    text-align: center;
    border-radius: 100px;
    background: rgb(var(--secondary-rgb) / 50%);
}

.file__value:hover:after {
    opacity: 1;
}
*/

/* 3. 삭제 버튼 스타일 (기존 after 스타일을 여기로 이동) */
.btn-file-del {
    width: 20px;
    height: 20px;
    border-radius: 50%;         /* 원형 */
    background: rgb(var(--secondary-rgb) / 50%); /* 기존 색상 유지 */
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s;
    flex-shrink: 0;             /* 글자가 길어도 버튼이 찌그러지지 않게 함 */
}

/* 아이콘 크기 미세 조정 */
.btn-file-del i {
    font-size: 14px;            /* 아이콘 크기 */
    font-weight: bold;
}

/* 호버 효과 */
.btn-file-del:hover {
    background: rgb(var(--secondary-rgb) / 80%); /* 마우스 올렸을 때 진하게 */
}

.file__remove {
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid #000;
}

.file__value--text {
    margin-right: 10px;
}


@media screen and (max-width:1000px) {
    .bd-view-file-w {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width:768px) {
    .board-category {
        width: 100%;
    }

    .board-write>div {
        width: 100%;
    }

    .tbNum,
    .tbWriter,
    .tbDate {
        width: 100%;
    }

    .board-tb .table-row {
        position: relative;
    }

    .board-tb .table-cell {
        border-bottom: none !important;
        padding: 0;
        color: #999;
        font-size: var(--text-xs)
    }

    .board-tb .table-cell::before {
        display: none
    }

    .board-tb .table-cell.t-left {
        color: #000;
        font-size: var(--text-lg);
        font-weight: 700;
        margin-bottom: 12px;
    }

    .board-tb .table-cell:last-child {
        position: absolute;
        top: 12px;
        right: 20px;
    }

    .board-tb .table-cell:first-child {
        margin-bottom: 5px !important;
    }

    .bd-notice {
        padding: 2px 6px;
    }
}

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

    .file__input_w {
        width: 100px;
    }

    .file__input--label:after {
        padding: 0;
    }

    .file__input--label:after,
    .file__input {
        height: 40px;
        line-height: 40px;
    }

    .bd-view-file-w {
        grid-template-columns: repeat(1, 1fr);
        padding-bottom: 20px;
    }

    .bd-file {
        border-radius: var(--radius-8)
    }

    .list-direction div:first-child {
        width: 60px;
        text-align: center;
    }

    .list-direction div {
        --list-d-padding: 10px;
        padding: var(--list-d-padding) 10px;
    }

    .board-con {
        margin: 20px 0;
    }

    .board-con-tit h2 {
        margin-top: 5px;
    }


    .bd-file1 {
        width: 24px;
        height: 24px;
        line-height: 24px;
    }

    .bd-file2 {
        width: calc(100% - 54px);
        padding: 0 10px;
    }

    .bd-file2 span {
        font-size: 10px;
    }

    .list-direction a {
        padding: 5px 0;
    }
}

/* ==========================================
   [긴급 수정] 모바일 Breadcrumb 강제 표시
   ========================================== */

/* 1. PC 화면 (769px 이상): 무조건 숨김 */
@media screen and (min-width: 769px) {
    .sub-bc {
        display: none !important;
    }
}

/* 2. 모바일 화면 (768px 이하): 무조건 보임 */
@media screen and (max-width: 768px) {
    .sub-bc {
        display: block !important;
        position: relative;
        z-index: 50;
        margin-top: 10px;
        padding: 0 20px; /* 좌우 여백 확보 */
    }

    /* (참고) 만약 상단 메뉴(.d_menu)가 안 사라진다면 아래 코드도 추가 */
    .d_menu {
        display: none !important;
    }

    /* Breadcrumb 아이템들이 잘 보이도록 스타일 조정 */
    .breadcrumb {
        display: flex !important;
        justify-content: flex-end; /* 오른쪽 정렬 */
    }
}

/* 필수 항목 표시 (*) 스타일 */
th.required::after {
    content: " *";
    color: #e74c3c; /* 붉은색 */
    font-weight: bold;
    margin-left: 4px;
    display: inline-block;
}

/* (선택사항) 우측 상단에 필수입력 설명 문구용 */
.required-desc {
    text-align: right;
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
}
.required-desc span {
    color: #e74c3c;
    font-weight: bold;
    vertical-align: middle;
}

/* 팝업 테이블 필수 항목 (*) 표시 스타일 */
.popup-tb-tit.required span {
    content: " *";
    color: #e74c3c; /* 붉은색 */
    font-weight: bold;
    margin-left: 4px;
    display: inline-block;
}

.custom-textarea {
    resize: vertical; /* 가로 크기만 조절 가능 */
    overflow: auto;     /* 스크롤바 처리 */
    min-width: 200px;       /* 최소 이만큼은 작아질 수 없음 */
    /* max-width: 600px; */       /* 최대 이만큼까지만 늘어날 수 있음 */
	width:100%;
    padding: 10px;
    box-sizing: border-box;
    border: 0px solid #ccc;
}

.error-msg {
    color: red;
    font-size: 12px;
    margin-top: 5px;
    display: block; /* 에러 메시지를 줄바꿈하여 표시 */
    width: 100%;
}

/* 아이콘이 포함된 버튼 스타일 */
.btn-link-icon {
    background: none;
    border: none;
    color: var(--dark); /* 기본 검정색 유지 */
    font-size: inherit; /* 폰트 크기 상속 */
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px; /* 글자와 아이콘 사이 간격 */
    padding: 0;
}

.btn-link-icon i {
    color: #999; /* 아이콘은 연한 회색 */
    font-size: 14px;
    transition: all 0.2s;
}

/* 마우스 올렸을 때 효과 */
.btn-link-icon:hover {
    color: var(--primary); /* 글자가 파란색으로 변함 */
    text-decoration: underline;
}

.btn-link-icon:hover i {
    color: var(--primary); /* 아이콘도 파란색으로 변함 */
}

.zipcode-wrap {
    width: 100%;
    display: flex;
    margin-bottom: 12px;
    gap: 4px;

    /* [핵심] 이 속성이 있어야 자식인 레이어 팝업이 이 박스를 기준으로 위치를 잡습니다. */
    position: relative;
}

/* 주소 검색 레이어 (기존 코드 확인용) */
.postcode-layer {
    display: none;
    position: absolute;
    top: 100%;       /* zipcode-wrap의 바로 아래 */
    left: 0;
    width: 100%;     /* zipcode-wrap의 너비와 동일하게 */
    height: 400px;   /* 높이 설정 */
    background: #fff;
    border: 1px solid #333;
    z-index: 1000;   /* 다른 요소보다 위에 뜨도록 */
    margin-top: 5px; /* 버튼과의 간격 */
}

/* 닫기 버튼, 모바일 대응 등 나머지는 기존 유지 */
#btnCloseLayer {
    cursor: pointer;
    position: absolute;
    right: -3px;
    top: -3px;
    z-index: 1;
    width: 25px;
    height: 25px;
}

/* 로딩 오버레이 (화면 전체 덮기) */
.loading-overlay {
    display: none; /* 기본 숨김 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 반투명 검은 배경 */
    z-index: 9999; /* 가장 위에 뜨도록 */
    align-items: center;
    justify-content: center;
}

/* 로딩 박스 스타일 */
.loader-box {
    text-align: center;
    color: #fff;
}

/* 아이콘 스타일 및 회전 애니메이션 */
.loader-box i {
    font-size: 50px;
    display: inline-block;
    animation: spin 1s linear infinite; /* 1초마다 무한 회전 */
    margin-bottom: 10px;
    color: var(--primary); /* 기존에 정의된 파란색 사용 가능 */
}

.loader-box p {
    font-size: 16px;
    font-weight: 600;
}

/* Select2 디자인 커스터마이징 (기존 input 스타일과 통일) */

/* 1. 메인 컨테이너 (높이 및 테두리 설정) */
.select2-container .select2-selection--single {
    height: 40px !important; /* 기본 input 높이 변수 사용 (없으면 50px) */
    border: 1px solid #ddd !important;       /* 테두리 색상 */
    border-radius: var(--radius-s, 8px) !important; /* 둥근 모서리 */
    display: flex !important;
    align-items: center !important;
}

/* 2. 텍스트 영역 (수직 정렬 및 패딩) */
.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 12px !important;
    padding-right: 30px !important; /* 화살표 공간 확보 */
    line-height: normal !important; /* 높이에 맞게 자동 정렬 */
    color: #000 !important;
    font-size: 1rem !important;
    width: 100%;
}

/* 3. 화살표 영역 (위치 및 모양 변경) */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    right: 10px !important;
    width: 20px !important;
}

/* 기본 화살표(삼각형) 숨기기 */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

/* 커스텀 화살표 아이콘 추가 (SVG 배경 이미지 사용) */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}

/* 4. 포커스(클릭) 시 테두리 색상 변경 */
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--primary, #0073E4) !important;
}

/* 5. 드롭다운(펼쳐진 목록) 스타일 */
.select2-dropdown {
    border: 1px solid var(--primary, #0073E4) !important;
    border-radius: 8px !important;
    overflow: hidden;
    margin-top: 4px; /* 입력창과 약간 띄우기 */
    z-index: 9999 !important; /* 팝업 위로 올라오게 */
}

/* 검색창 스타일 (드롭다운 내부) */
.select2-search--dropdown .select2-search__field {
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    padding: 8px !important;
}

/* 옵션 항목들 스타일 */
.select2-results__option {
    padding: 10px 12px !important;
    font-size: 14px;
}

/* 선택된 항목 하이라이트 */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary, #0073E4) !important;
    color: white !important;
}

/* Select2 삭제(X) 버튼 위치 수정 */
.select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute !important;   /* 위치 강제 지정 */
    right: 35px !important;          /* 오른쪽 끝에서 35px 떨어짐 (화살표 옆) */
    top: 50% !important;             /* 수직 중앙 */
    transform: translateY(-50%) !important; /* 수직 중앙 정렬 보정 */

    margin-right: 0 !important;      /* 기존 마진 초기화 */
    float: none !important;          /* float 속성 무시 */
    z-index: 2;                      /* 텍스트보다 위에 오도록 */

    /* (선택사항) X 버튼 디자인 다듬기 */
    color: #999;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    height: auto;
}

/* X 버튼이 있을 때 텍스트가 겹치지 않도록 오른쪽 여백 추가 */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-right: 50px !important; /* 화살표 공간(30px) + X버튼 공간(20px) */
}


/* 목록 영역 높이 조절 (기존 max-height: 270px -> 줄임) */
.course-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 25px;
    max-height: 240px; /* 2개 정도 들어갈 높이로 조절 */
    overflow: auto;  /* 넘치면 숨김 */
}
/* 회전 키프레임 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 팝업 */
.popup-con {
    --pop-radius: 12px;
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 99;
    max-width: 380px;
    overflow: hidden;
    box-shadow: 0 0 80px rgb(0 0 0 / 50%);
    border-radius: var(--pop-radius);
    border: 1px solid var(--dark);
    background: var(--dark);
}

.popSwiper {
    background: #fff;
}

.pop-content {
    background: #fff;
    max-height: 510px;
    overflow-y: auto;
    padding: 24px;
    color: #333;
    line-height: 1.6;
}

.pop-content img {
    max-width: 100%;
    height: auto;
    display: block;
}

.pop-btn {
    border-top: none;
    border-radius: var(--pop-radius);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background: var(--dark);
}

.popup-con .swiper-pagination {
    width: inherit;
    padding: 0 10px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 80px;
    right: 8px;
    left: auto;
    font-size: 12px;
    bottom: auto;
    top: 8px;
}

.popup-con .checkbox-con {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 4px 16px;
}

.popup-con input[type="checkbox"] {
    display: none;
}

.popup-con .custom-checkbox {
    width: 20px;
    height: 20px;
    background: rgb(255 255 255 / 20%);
    border-radius: 6px;
    position: relative;
    flex-shrink: 0;
}

.popup-con input[type="checkbox"]:checked+.custom-checkbox {
    background: linear-gradient(135deg, var(--primary) 0%, #2eb3b9 100%);
    border-color: var(--primary);
}

.popup-con input[type="checkbox"]+.custom-checkbox::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 4px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
    opacity: 0.4;
}

.popup-con input[type="checkbox"]:checked+.custom-checkbox::after {
    opacity: 1;
}

.popup-con .checkbox-label {
    margin-left: 8px;
    font-size: var(--text-xs);
    color: rgb(255 255 255 / 60%);
    user-select: none;
    padding-top: 2px;
}

.popup-con .checkbox-label:hover {
    color: rgb(255 255 255 / 70%);
}

.popup-con input[type="checkbox"]:checked~.checkbox-label {
    color: rgb(255 255 255 / 90%);
}

.pop-btn button {
    height: 100%;
    padding: 16px 24px;
    font-size: var(--text-sm);
    color: #fff;
}

.pop-btn button:hover {
    color: rgb(255 255 255 / 80%);
}

.popup-con .swiper-button-prev,
.popup-con .swiper-button-next {
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    color: #fff;
    padding: 8px;
}

.popup-con .swiper-button-prev:after,
.popup-con .swiper-button-next:after {
    font-size: 16px;
    font-weight: bold;
}

.popup-con .swiper-button-prev:hover,
.popup-con .swiper-button-next:hover {
    background: rgba(0, 0, 0, 0.2);
}

.popup-con .swiper-button-prev {
    left: 8px;
}

.popup-con .swiper-button-next {
    right: 8px;
}

.popup-con .swiper-button-disabled {
    display: none;
}



@media screen and (max-width:500px) {
    .popup-con {
        max-width: 100%;
        width: calc(100% - 40px);
        left: 20px;
        bottom: 50%;
        transform: translateY(50%);
    }

    .pop-btn button {
        font-size: var(--text-lg);
        padding: 12px 24px;
    }

    .pop-content {
        max-height: 450px;
    }
}