@charset "utf-8";

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');


ul {
    padding-left: 0 !important;
    margin-bottom: 0 !important;
}

:is(a, h1, h2, h3, h4, h5, h6, td, th, li, span, strong, dl, dd, div, section, button) {
    font-family: 'pretendard', sans-serif !important;

}

a {
    color: #333 !important;
    text-decoration: none !important;
}

a:hover {
    color: #333 !important;
}

p {
    margin-bottom: 0;
}


/* layout */
#container {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
}

#hd_pop, #hd_wrapper, #tnb .inner, #gnb .gnb_wrap, #container_wr, #ft_wr {
    width: 100% !important;
}


footer {
    background-color: #F6F8F9;
    padding: 46px 0;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;

    .footer-wrap {
        .footer-top-box {
            padding: 10px 10px 35px 10px;
            border-bottom: 1px solid #68686866;

            .footer-top-right {
                text-align: end;

                & span {
                    text-align: start;
                    color: #222 !important;
                }

                .rel-site-select {
                    .ant-select-selector {
                        width: 300px !important;
                        height: 53px !important;
                        padding: 0 48px 0 25px !important;
                        border-radius: 9999px !important;
                        background: #fff;
                        border: none !important;
                        letter-spacing: -0.5px;

                        .ant-select-selection-placeholder,
                        .ant-select-selection-item {
                            color: #222;
                            font-size: 16px;
                            font-weight: 600;
                            line-height: 53px !important;
                        }
                    }

                    .ant-select-arrow {
                        display: flex;
                        align-items: center;
                        padding-right: 10px;
                    }

                    .plus-icon {
                        font-size: 25px;
                        line-height: 1;
                        color: #222;
                    }

                    &.ant-select-open .plus-icon {
                        transform: rotate(45deg);
                    }

                }

                .ant-select-dropdown {
                    border-radius: 16px;
                    overflow: hidden;
                }
            }
        }

        .footer-md-box {
            color: v . $ white-primary-color;
            padding: 30px 0 35px 0;
            line-height: 32px;
            border-bottom: 1px solid #68686866;

            .footer-info-box {
                color: #686868;

                & p {
                    font-size: 17px;
                }

                & span {
                    font-weight: 700;
                    margin-right: 5px;
                }

                .contact {
                    display: flex;
                    column-gap: 40px;
                }
            }

            .footer-md-right {
                .sns-wrap {
                    height: 100%;
                    display: flex;
                    justify-content: flex-end;
                    align-items: flex-end;

                    .sns-title {
                        line-height: 20px;
                    }
                }
            }
        }

        .footer-bottom-box {
            padding: 26px 0 0 0;

            .footer-bottom-link-box {
                & a {
                    font-weight: 500;
                    font-size: 17px;
                    margin-right: 30px;
                    color: #68686880 !important;
                }
            }

            .copyright-box {
                text-align: right;

                & p {
                    color: #686868;
                    font-weight: 400;
                    font-size: 17px;
                }
            }
        }
    }
}


.main-header, .sub-header {
    position: absolute;
    width: 100%;
    z-index: 1;
    .hedaer-box {
        background: transparent;

        .header-wrap {
            .header-top {
                .gnb-box {
                    & nav {
                        & ul {
                            & li {
                                & a {
                                    color: #fff !important;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

}




.sub-bg-box {
    display: flex;
    align-items: center;
    justify-content: center;

    & h2 {
        color : v.$white-primary-color;
        font-size: 43px;
        font-weight: 800;
        letter-spacing: -0.5px;
        line-height: 130%;
    }
}


header {

    .sub-depth {
        display: none;
    }
    .hedaer-box {
        background: #fff;
        .header-wrap {
            position: relative !important;
            overflow: visible;
            .head-top{
                padding: 12px 60px;
                background-color: #F0F0F0;
                display: flex;
                justify-content: flex-end;
                column-gap: 50px;
                .search-box{
                    display: flex;
                    align-items: center;
                    column-gap: 28px;
                }
                .logo.uctf{
                    width: 106px;
                    & a{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        column-gap: 3px;
                        width: 100%;
                        height: 100%;
                        margin: 0 0 0 10px;
                        padding: 2px 0 9px 0;
                        background-color: transparent;
                        & img:first-child{
                            height: 41px;
                            width: 208px !important;
                        }
                        & img:last-child{
                            height: 27px;
                            width: 27px;
                            margin-top: 10px !important;
                        }
                    }
                }
            }
            .header-top {
                padding: 17px 50px;
                display: grid;
                grid-template-columns: 1fr auto 1fr;
                align-items: center;

                .logo {

                    display: flex;
                    flex-direction: column;
                    row-gap: 5px;
                    a{
                        img{
                            width: 270px;
                            height: 51px;
                        }
                    }
                }


                .gnb-box {
                    display: flex;
                    flex-basis: auto;
                    align-items: center;

                    & nav {
                        & ul {
                            display: flex;
                            flex-wrap: wrap;
                            column-gap: 76px;
                            padding-right: 100px !important;
                            padding-left: 80px !important;

















                            & li {

                                & a {
                                    font-size: 20px;
                                    font-weight: 700;
                                    color: #000 !important;
                                }
                            }
                        }
                    }
                }

                .gnb-menu {
                    text-align: end;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    column-gap: 15px;
                }

                .header-top-btn-box {
                    display: flex;
                    justify-self: end;
                    column-gap: 70px;
                    align-items: center;
                    padding-right: 28px;
                }
            }

            .header-inner {
                width:100%;
                margin-right:auto;
                margin-left:auto;
                --gutter-x : 3.75rem;
                --gutter-y  : 0;
                padding: 25px calc(var(--gutter-x) * .5);
                display: flex;
                align-items: center;
                justify-content: space-between;

                .site-map-box {
                    & button {
                        background-color: transparent !important;
                    }
                }
                .header-info-wrap {
                    display: flex;
                    flex-basis: auto;
                    column-gap: 28px;
                    align-items: center;
                }
            }
        }
    }
    /* 퀵메뉴 */
    .sidebar{
    //position: fixed;
    //top: 85%;
        right: 0;
        z-index: 1002;
        .bar-wrap{
            height: 650px;
            display:flex;
            flex-direction: column;
            align-items: center;

            .top-area{
                max-height: 1000px;
                background-color: rgba(255,255,255,1);
                padding: 40px 18px;
                border-radius: 30px 0 0 30px;
                display: flex;
                flex-direction: column;
                align-items: center;
                row-gap: 80px;
                box-shadow: 0px 4px 15px 0px #00000017;
                margin-bottom: 31px;

                transition: max-height 0.3s ease, opacity 0.3s ease;
                overflow: hidden;
                &.collapsed {
                    max-height: 0;
                    opacity: 0;
                }
            }
            .bottom-area{
                margin-top: auto;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 0px 18px;
                row-gap: 80px;
                .toggle{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                    background-color: #fff;
                    box-shadow: 1px 2px 11px 0px #0000002E;
                    cursor: pointer;
                }
                .scroll-up{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                    background-color: #58595B;
                    box-shadow: 1px 2px 11px 0px #0000002E;
                    cursor: pointer;
                }
            }
            .menus{
                display: flex;
                flex-direction: column;
                align-items: center;
                row-gap: 41px;
                .icon-box{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    position: relative;
                    row-gap: 5px;
                    img {
                        display: block;
                        transition: opacity 0.3s ease;
                    }
                    img.hov {
                        position: absolute;
                        top: 0;
                        opacity: 0;
                    }
                    &:hover {
                        img.base { opacity: 0; }
                        img.hov  { opacity: 1; }
                        p { color: #00A0E9; transition: color 0.3s ease; }
                    }
                    & p{
                        font-weight: 600;
                        font-size: 16px;
                        line-height: 130%;
                        letter-spacing: -0.5px;
                        text-align: center;
                        color: #444444;
                        transition: color 0.3s ease;
                    }
                }
            }
        }
    }
}

.all-menu-navbar {
    display: none;
    position: fixed;

    left: 0;
    z-index: 1000;
    width: 100%;
    border-top: solid 1px #d8d8d8;


    .all-menu-navbar-wrapper {
        width: 100%;
        background: #fff;
        padding: 24px 0 50px 0;

    }

    .all-menu-navbar-empty {
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.3);
    }

    .all-menu-navbar-nav {
        max-width: 1280px;
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .all-menu-nav-item {
            .all-menu-nav-link {
                font-weight: 800;
                font-size: 25px;
                line-height: 150%;
                color: #00AD1D !important;
                display: inline-block;
                margin-bottom: 27px;
            }

            .all-menu-sub-depth {
                .all-menu-pc-sub-menu {
                    display: flex;
                    flex-direction: column;
                    gap: 20px;

                    .all-menu-sub-item a {
                        font-weight: 600;
                        font-size: 17px;
                        line-height: 150%;
                        letter-spacing: -0.01em;
                    }

                    .all-menu-sub-item a:hover {
                        color: #00AD1D !important;
                    }
                }
            }
        }
    }
}

.all-menu-navbar.active {
    display: block;
}

.all-menu-header-navbar {
    top: 207px;
}

.all-menu-footer-navbar {
    bottom: 275px;
}


.sub-box {
    height: 305px;
    padding: 120px 0;

    .navi-box {
        display: none;
        /*display: flex;*/
        align-items: center;
        column-gap: 12px;
        justify-content: flex-end;
        & img {
            position: relative;
            top: -1px;
        }

        & span {
            font-size: 16px;
            font-weight: 600;
            color: #fff;
        }
    }

    .sub-nav-title {
        & h2 {
            color: #fff;
            font-size: 43px;
            font-weight: 700;
            margin-bottom: 0;
        }
    }

    .sub-nav-box {
        margin-top: 30px;
        display: none;
        .nav-col {
            background: #00000036;
            border-radius: 30px;

            .nav-item {
                /*line-height: 50px;*/
                line-height: 100%;
                text-align: center;
                height: 67px;
                align-content: center;

                & a {
                    font-size: 18px;
                    font-weight: 600;
                    margin: 0 12px;
                    color: #fff !important;
                    border-radius: 300px;
                    align-content: center;
                }

                a.active {
                    background: #000;
                    height: 47px;

                }
            }

        }
    }

}


.sub-box.sub1 {
    background: url('/theme/basic/img/sub/sub1.png') no-repeat center;
    background-size: cover;

    .nav-item:nth-child(6) {
        flex: 0 0 17%;
    }
}

.sub-box.sub2 {
    background: url('/theme/basic/img/sub/sub1.png') no-repeat center;
    background-size: cover;
}

.sub-box.sub3 {
    background: url('/theme/basic/img/sub/sub4.png') no-repeat center;
    background-size: cover;
}

.sub-box.sub4 {
    background: url('/theme/basic/img/sub/sub4.png') no-repeat center;
    background-size: cover;
}

.sub-box.sub5 {
    background: url('/theme/basic/img/sub/sub5.png') no-repeat center;
    background-size: cover;
}

.sub-box.sub6 {
    background: url('/theme/basic/img/sub/sub1.png') no-repeat center;
    background-size: cover;
}

.sub-box.sub7 {
    background: url('/theme/basic/img/sub/sub7.png') no-repeat center;
    background-size: cover;
}

.sub-box.sub8 {
    background: url('/theme/basic/img/sub/sub7.png') no-repeat center;
    background-size: cover;
}

.sub-box.sub9 {
    background: url('/theme/basic/img/sub/sub7.png') no-repeat center;
    background-size: cover;
}

.sub-box.sub10 {
    background: url('/theme/basic/img/sub/sub7.png') no-repeat center;
    background-size: cover;
}


.offcanvas.offcanvas-end {
    display: none;
}

/*
    갤러리 스킨 (Gallery Skin) Style
    파일: style.css
*/

/* ------------------------------------------- */
/* 1. 전체 레이아웃 및 기본 스타일 */
/* ------------------------------------------- */

#bo_gall {
    padding: 20px 0;
}

#bo_list_total {
    font-size: 14px;
    color: #888;
    margin-bottom: 10px;
}

/* 카테고리 스타일 */
#bo_cate {
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
}

#bo_cate h2 {
    display: none;
}

#bo_cate_ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

#bo_cate_ul li {
    margin-right: 10px;
    margin-bottom: 10px;
}

#bo_cate_ul a {
    display: block;
    padding: 8px 15px;
    border: 1px solid #ddd;
    border-radius: 20px;
    text-decoration: none;
    color: #555;
    transition: all 0.2s;
}

#bo_cate_ul a:hover,
#bo_cate_ul li.bo_cate_on a {
    background-color: #5d5d5d; /* 메인 컬러 */
    border-color: #5d5d5d;
    color: #fff;
}

/* ------------------------------------------- */
/* 2. 상단 버튼 및 옵션 */
/* ------------------------------------------- */

#bo_btn_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.btn_bo_user {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 5px; /* 버튼 간격 */
}

.btn_bo_user li {
    position: relative;
}

.btn_bo_user .btn {
    padding: 8px 12px;
    background: #4a4a4a;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.btn_bo_user .btn:hover {
    background: #333;
}

/* 리스트 옵션 버튼 (선택 삭제/이동/복사) */
.more_opt {
    position: absolute;
    right: 0;
    top: 35px;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
    list-style: none;
    padding: 5px 0;
    margin: 0;
    display: none; /* 기본 숨김 */
}

.more_opt li button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 15px;
    background: none;
    border: none;
    font-size: 13px;
    color: #333;
    cursor: pointer;
}

.more_opt li button:hover {
    background: #f5f5f5;
}

/* ------------------------------------------- */
/* 3. 갤러리 목록 (그리드 레이아웃) */
/* ------------------------------------------- */

#gall_ul {
    list-style: none;
    padding: 0;
    margin: 0 -10px; /* 좌우 마이너스 마진으로 전체 간격 보정 */
    display: flex;
    flex-wrap: wrap;
}

.gall_li {
    padding: 10px; /* 아이템 간격 */
}

/* 그리드 컬럼 설정 */
.gall_li.col-gn-2 { width: 50%; }
.gall_li.col-gn-3 { width: 33.333%; }
.gall_li.col-gn-4 { width: 25%; }
.gall_li.col-gn-5 { width: 20%; }

.gall_box {
    border: 1px solid #eee;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s;
    position: relative;
    height: 100%; /* 전체 박스 높이 유지 */
}

.gall_box:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 체크박스 */
.gall_chk {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
}
.gall_chk label span {
    background-color: #fff;
}

/* 이미지 영역 */
.gall_img {
    overflow: hidden;
    position: relative;
    background: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.gall_img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 박스를 채우도록 설정 */
    display: block;
    transition: transform 0.3s ease;
}

.gall_box:hover .gall_img img {
    transform: scale(1.05);
}

.gall_img .no_image,
.gall_img .is_notice {
    text-align: center;
    font-size: 16px;
    color: #999;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
}
.gall_img .is_notice {
    background-color: #3f51b5;
    color: #fff;
}

/* 내용 영역 */
.gall_con {
    /*padding: 15px;*/
}

.gall_text_href {
    margin-bottom: 10px;
}

.bo_cate_link {
    display: inline-block;
    font-size: 12px;
    color: #8bc34a; /* 카테고리 컬러 */
    margin-bottom: 5px;
    font-weight: bold;
}

.bo_tit {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
    line-height: 1.4;
}

.bo_tit:hover {
    text-decoration: underline;
    color: #5d5d5d;
}

.bo_tit .cnt_cmt {
    font-size: 12px;
    color: #ff5722;
    margin-left: 5px;
}

.bo_cnt {
    display: block;
    font-size: 13px;
    color: #777;
    margin-top: 5px;
    line-height: 1.5;
    height: 3em; /* 2줄 정도 표시 */
    overflow: hidden;
    text-overflow: ellipsis;
}

.gall_info {
    font-size: 12px;
    color: #999;
    border-top: 1px solid #f5f5f5;
    padding-top: 10px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}

.gall_info > span {
    margin-right: 10px;
}
.gall_info i {
    margin-right: 3px;
}

/* ------------------------------------------- */
/* 4. 검색창 및 기타 */
/* ------------------------------------------- */

/* 검색창 팝업 스타일 */
.bo_sch_wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    display: none; /* 기본 숨김 */
}

.bo_sch {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.bo_sch h3 {
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 15px;
}

.bo_sch .sch_bar {
    display: flex;
    gap: 5px;
    margin-top: 10px;
}

.bo_sch .sch_input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.bo_sch .sch_btn {
    background: #5d5d5d;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
}

.bo_sch_cls {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
}



/* 회원가입 폼 */

.register-wrap {
    background: #F8FAFB;
    padding: 105px 0;

    .register-title {
        & h2 {
            font-size:40px !important;
            font-weight:700 !important;
            color:#000;
            line-height:100%;
            margin-bottom:30px !important;
            border-bottom:0 !important;
            text-align:center !important;
            padding:0 !important;
        }
    }

    & h2 {
        border-bottom:0 !important;
    }

    .accordion-item {
        border:0;
        border-bottom:solid 1px #d9d9d9;
        padding-bottom:20px;
        margin-bottom:20px;

        & h2 {
            padding:0 !important;
        }
    }

    .register-content {
        background:#fff;
        padding:60px 50px;
        width:740px;
        margin:0 auto;

        .all-check-box {
            margin-bottom:30px;
        }

        & h3 {
            font-size:33px;
            font-weight:700;
            line-height:130%;
            color:#000;
            margin-bottom:40px;

        }

        & input[type='checkbox'] {
            width:24px;
            height:24px;
            margin-top:0 !important;
            box-shadow:none !important;
        }
        .form-check-input:checked {
            background-color:#e60012;
            border:solid 1px #e60012;
        }

        & label {
            font-size:16px;
            font-weight:500;
            line-height:160%;
            color:#000;
        }

        .form-check {
            min-height:auto !important;
            display:flex;
            align-items:center;
            column-gap:10px;
        }

        .accordion-button:not(.collapsed) {
            box-shadow:none !important;
            background-color:transparent;
        }

        .text-box {
            background: #F8FAFB;
            padding:20px 8px;
            min-height:210px;
            border-radius:10px;
        }

        .aggre-btn-box {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top:80px;
            column-gap: 10px;

            & button {
                height: 48px;
                width:180px;
                text-align: center;
                font-size: 15px;
                font-weight: 500;
                border-radius: 500px;
            }

            .cancle-button {
                border:solid 1px #d9d9d9;
            }
            .submit-button {
                background: #e60012;
                color:#fff;
            }
        }
    }

}


/* 회원가입정보 */

.register-form-wrap {
    background: #F8FAFB;
    padding: 105px 0;

    .register-form-inner {
        background:#fff;
        width:740px;
        margin:0 auto;
        padding:60px 0;

        .title {
            padding:0 50px;
            margin-bottom:40px;

            & h3 {
                font-size:32px;
                font-weight:600;
                line-height:130%;
                color:#222;
            }
        }

        .name-input-box {
            padding:0 50px;
            margin-bottom:80px;
        }

        .id-input-box {
            padding:0 50px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            column-gap:10px;

            & button {
                height:48px;
                width:100px;
                background:#F4F4F4;
                margin-top:35px;
                color:#000;
                font-size:14px;
                font-weight:400;
                border-radius:8px;
                border:0 !important;

            }
        }

        .notice-p {
            margin-bottom:50px;
            padding:0 50px;
            margin-top:15px;
            color:#757575;
            font-size:14px;
            font-weight:400;
            line-height:160%;
        }

        .left-col {
            padding-left:50px;
        }

        .right-col {
            padding-right:50px;
        }

        .common-disc-ul {
            margin-bottom:50px !important;
            margin-top:15px;

            & li {
                color:#757575;
                font-size:14px;
                font-weight:400;
                line-height:160%;
            }
        }

        .address-input-box {
            padding:0 50px;
            margin-bottom:50px;

            .address-1 {
                display:flex;
                align-items:center;
                justify-content:space-between;
                column-gap:10px;
                margin-bottom:15px;

                & button {
                    height:48px;
                    width:100px;
                    background:#F4F4F4;
                    color:#000;
                    font-size:14px;
                    font-weight:400;
                    border-radius:8px;
                    border:0 !important;
                }
            }

            .address-2 {
                margin-bottom:15px;
            }
        }

        .email-input-box {
            padding:0 50px;
            margin-bottom:50px;
        }

        .tel-input-box {
            padding:0 50px;
            margin-bottom:50px;
        }


        .col-xl-12.col-12 {
            border-bottom:solid 1px #F5F5F5;
        }
        .col-xl-6.col-12 {
            border-bottom:solid 1px #F5F5F5;
        }
    }

    & input {
        height: 48px;
        border-radius: 8px !important;;
        width:100% !important;
        max-width:100%;
        box-shadow:none !important;
    }

    .row {
        row-gap:30px;
    }

    .input-group {
        display:block;
    }

    & label {
        color:#757575;
        font-size:16px;
        font-weight: 500;
        line-height:160%;
        display:block;
        margin-bottom:10px;

        & span {
            color:#e60012;
            margin-left:3px;
        }
    }

    .aggre-btn-box {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top:80px;
        column-gap: 10px;

        & button {
            height: 48px;
            width:180px;
            text-align: center;
            font-size: 15px;
            font-weight: 500;
            border-radius: 500px;
        }

        .cancle-button {
            border:solid 1px #d9d9d9;
        }
        .submit-button {
            background: #e60012;
            color:#fff;
        }
    }
}

/* ------------------------------------------- */
/* 5. 반응형 디자인 (모바일) */
/* ------------------------------------------- */

@media (max-width: 992px) {
    /* 3열 이하 유지 */
    .gall_li.col-gn-4, .gall_li.col-gn-5 { width: 33.333%; }
}

@media (max-width: 768px) {
    /* 태블릿 세로 및 작은 화면 */
    #bo_btn_top {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* 2열 고정 */
    .gall_li.col-gn-2,
    .gall_li.col-gn-3,
    .gall_li.col-gn-4,
    .gall_li.col-gn-5 {
        width: 50%;
    }
}

@media (max-width: 576px) {
    /* 모바일 화면 */
    #bo_gall {
        padding: 10px 0;
    }

    /* 1열 고정 */
    .gall_li.col-gn-2,
    .gall_li.col-gn-3,
    .gall_li.col-gn-4,
    .gall_li.col-gn-5 {
        width: 100%;
        padding: 5px;
    }

    #gall_ul {
        margin: 0 -5px;
    }
}



@media (max-width:1599px) {
    header {
        .hedaer-box {
            .header-wrap {
                .header-top {
                    .gnb-box {
                        nav {
                            & ul {
                                column-gap:70px;
                                padding-right:30px !important;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width:1453px) {
    header {
        .hedaer-box {
            .header-wrap {
                .header-top {
                    padding:15px 25px !important;
                    .gnb-box {
                        nav {
                            & ul {
                                column-gap:60px;
                                padding-right:30px !important;
                                padding-left:30px !important;
                            }
                        }
                    }
                }
            }
        }
    }
}


@media (max-width:1293px) {
    header {
        .hedaer-box {
            .header-wrap {
                .header-top {
                    padding:15px!important;
                    .gnb-box {
                        nav {
                            & ul {
                                column-gap:45px;
                                padding-right:10px !important;
                                padding-left:50px !important;
                            }
                        }
                    }
                }
            }
        }
    }
}