@charset "utf-8";

:root{
    --c-color01: #003c97;
    --basic-color: #283E80;
}

.blind{visibility: hidden; overflow: hidden; position: absolute;top: 0;left: 0;width: 1px;height: 1px;font-size: 0;line-height: 0;}
.dp-flex-c{display: flex; justify-content: center;}
.dp-flex-r{display: flex; justify-content: flex-end;}
/* ==========================================================================
    FORM
   ========================================================================== */
h1, h2, h3, h4, h5, h6, input, textarea, select, button{color:inherit; font-weight:inherit; letter-spacing:inherit; font-size:inherit; font-family: inherit;}
button, input, optgroup, select, textarea {font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; border-radius: 0; background-color: #fff;}
button, select {text-transform: none;}
input, textarea, select{letter-spacing:normal; outline: none}
select{appearance:menulist-text; appearance: none}
.form-ip {
    display: block;
    width: 100%;
    height: 42px;
    border: 1px solid #ddd;
    padding: 0 18px;
    font-size: 15px;
    font-weight: 500;
    color: #222;
    line-height: 22px;
    border-radius: 4px;
    &:focus{border-color: #222;}
    &:required:invalid,
    &::-webkit-input-placeholder{font-weight: 400; color: #ddd;}
    &.form-gray{border: 1px solid #f6f7f9; background-color: #f6f7f9}
    select& option{}
    select& option:hover{box-shadow: 0 0 10px 100px #ddd inset;}
    select&{background-image: url('/src/img/2024/common/arr_select01.png'); background-repeat: no-repeat; background-position: calc(100% - 11px) center; background-size: 12px auto;}
    textarea&{height: 128px; padding: 16px 18px;}
    textarea&:focus{border-color: var(--c-color01);}
    textarea&.term-box{height: 144px; font-size: 14px; font-weight: 300; color: #999; line-height: 22px;}
}
.attachment{
    display: flex;
    > label{position: relative; width: 42px; height: 42px; background: var(--basic-color) url('/src/img/2024/common/ico_file0201.png') no-repeat center; background-size: 16px auto; border-radius: 0 4px 4px 0;}
    > label > input{position: absolute; width: 0; height: 0; overflow: hidden;}
    > .form-ip{flex: 1; border-radius: 4px 0 0 4px;}
}
.searchbar01 {
    display: flex;
    gap: 6px;
    width: 100%;
    max-width: 600px;
    overflow: hidden;
    & .el-form{display: flex; align-items: center; margin-left: 20px;}
    & .txt-label{font-size: 15px; font-weight: bold; margin-right: 8px;}
    & .form-ip{width: 190px;}
    & button{width: 80px; height: 42px; line-height: 42px; font-weight: bold; color: #fff; background: #283e80; border-radius: 4px; transition: 0.25s;}
    & button:hover{color: #283e80; box-shadow: inset 0 0 0 1px #283e80; background-color: #fff;}
    @media (width <= 767px) {
        flex-direction: column;
        align-items: center;
        max-width: 400px;
        & .el-form{width: 100%; margin-left: 0;}
        & .txt-label{width: 60px; font-size: 14px;}
        & .form-ip{flex: 1; font-size: 14px;}
        & button{width: 100%;}
    }
}
.searchbar02 {
    display: flex;
    gap: 8px;
    width: 100%;
    height: 42px;
    max-width: 425px;
    overflow: hidden;
    & select{width: 150px; border: 1px solid #eaeaea; border-radius: 7px;}
    & select{background-image: url('/src/img/2024/common/arr_select02.png'); background-repeat: no-repeat; background-position: calc(100% - 11px) center; background-size: 13px auto;}
    & .searchbar {
        flex: 1;
        display: flex;
        width: 100%;
        border: 1px solid #eaeaea;
        border-radius: 7px;
        overflow: hidden;
        & input[type="text"]{flex: 1; height: 40px; font-size: 16px; padding-left: 20px; border: 0;}
        & input[type="text"]::-webkit-input-placeholder{color:#bbb}
        & button{width: 54px; font-size:0; border:0; background: url('/src/img/2024/common/ico_glass01.png') no-repeat center / 16px auto; cursor:pointer}
        &:has(input:focus){border-color: #222;}
    }
    @media (width <= 767px) {
        height: auto;
        flex-direction: column;
        align-items: center;
        max-width: 400px;
        & select{font-size: 14px; width: 100%; height: 38px; background-position: calc(100% - 20px) center}
        & .searchbar{
            & input[type="text"]{width: 100%; height: 36px; font-size: 15px;}
        }

        & .txt-label{width: 60px; font-size: 14px;}

        & button{width: 100%;}
    }
}



/* ==========================================================================
    COMPONENT
   ========================================================================== */
.button01{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--basic-color);
    width: 160px; height: 46px;
    font-size: 16px;
    font-weight: var(--fwsb);
    color: var(--basic-color);
    padding: 0 20px;
    transition: .25s;
    border-radius: 5px;
    & span{padding-right: 12px; background: url('/src/img/2024/common/arr02.png') no-repeat right calc(50% - 1px); background-size: 6px auto;}
    &:hover{color: #fff; background-color: var(--basic-color);}
    &.wa{width: auto;}
    &.c01{color: #fff; background-color: #283e80;}
    &.c01:hover{background-color: #fff; color: #283e80;}
    &.c02{color: #fff; background-color: #283e80;}
    &.c03{color: #2b384f; background-color: #f6f6f6; border-color: #ececec;}
}

.table-b {
    & .t-left{text-align: left;}
    & .t-right{text-align: right;}
    & .t-center{text-align: center;}
}
.table01 {
    overflow-x: auto;
    & table{width: 100%; min-width: 600px; table-layout: fixed; border-collapse: separate; border-top: 1px solid #becbdb;}
    & th,
    & td{height: 38px; padding: 10px 20px; font-size: 14px; font-weight: 500; line-height: 18px; border: 1px solid #e1e8f0; border-top: 0; border-right: 0; word-break: break-all; vertical-align: middle;}
    & tr:last-child td{border-bottom: 1px solid #bfcbdb;}
    & th{color: #74839b; text-align: center; background-color: #f7f8fc;}
    & td{color: #2b384f; text-align: right;}
    & th:first-child,
    & td:first-child{border-left: 0;}
    & .t-item01{text-align: left;}
    & .indent01{padding-left: 40px;}
    & .indent02{padding-left: 60px;}
    & .indent03{padding-left: 80px;}
    & .indent04{padding-left: 100px;}
    & .indent05{padding-left: 120px;}
    & .indent-l01{padding-left: 20px;}
    & .indent-l01::before{content: "ㄴ "; position: relative; top: -2px; font-size: 11px; margin-left: 4px;}
    & .empty-data{padding: 35px 25px; font-weight: 400; text-align: center;}
    & .tit-sorting{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
        & .btn-sorting{display: flex; flex-direction: column;}
        & button{width: 10px; height: 8px;}
        & .arr_up{ background: url('/src/img/2024/common/ico_sort_up.png') no-repeat center}
        & .arr_down{ background: url('/src/img/2024/common/ico_sort_down.png') no-repeat center}
    }
    & .tag01{
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        border: 1px solid #003c97;
        min-height: 32px;
        &.c01{color: #db5d5d; border-color: #db5d5d; background-color: #fff0e7;}
        &.c02{color: #fff; border-color: #08216b; background-color: #003c97;}
    }
    & .e-grade{
        font-weight: bold;
        &.c-e2{color: #4966c6;}
        &.c-e5{color: #5f9945;}
    }
    /*사업 및 재직 이력*/
    &.w01{
        & table{min-width: 820px;}
        & th,
        & td{padding: 10px 10px;}
        & td{text-align: center;}
        & .w0101{width: 100px;}
        & .w0102{width: 20%;}
        & .w0103{width: 12%;}
        & .w0104{width: 15%;}
    }
    /*직원 수 현황*/
    &.w02{
        & table{min-width: 1000px;}
        & th{padding: 10px 5px;}
        & td{padding: 10px;}
        & td.t-item01{padding: 10px 10px 10px 20px;}
        & .w0201{width: 120px;}
    }
    /*세부신용공여*/
    &.w03{
        & table{min-width: 820px;}
        & th{padding: 10px 5px;}
        & td{padding: 10px 20px 10px 10px;}
        & .t-center{padding: 10px 5px;}
    }
    /*결제정보*/
    &.w04{
        & table{min-width: 820px;}
        & th,
        & td{padding: 10px 10px;}
        & td{text-align: center;}
        & .w0401{width: 13%;}
        & .w0402{}
        & .w0403{width: 27%;}
        & .w0404{width: 10%;}
    }
    @media (width <= 1023px) {
        & th,
        & td{height: 45px; font-size: 13px; padding: 8px 10px;}
        & .indent01{padding-left: 20px;}
        & .indent02{padding-left: 30px;}
        & .indent03{padding-left: 40px;}
        & .indent04{padding-left: 50px;}
        & .indent05{padding-left: 60px;}
        &.w01{
            & th,
            & td{padding: 8px 4px;}
            & .w0101{width: 70px;}
            & .w0102{width: 20%;}
            & .w0103{width: 86px;}
            & .w0104{width: 114px;}
        }
    }
}

.table-container{
    margin-bottom: 40px;
    &:last-child{margin-bottom: 0;}
    & .tit-pop{font-size: 20px; font-weight: bold; margin-bottom: 22px;}
    & .refer01{font-size: 15px; font-weight: 500; color: #74839b; padding-left: 13px; text-indent: -13px; margin-top: 10px;}
    @media (width <= 1023px) {
        & .refer01{font-size: 13px; padding-left: 12px; text-indent: -12px;}
    }
    @media (width <= 767px) {
        margin-bottom: 30px;
        & .tit-pop{font-size: 18px; margin-bottom: 16px;}
    }
}

/*레이어 팝업 커스텀*/
.layer.c_layer{
    /* top: 50%; */
    display: flex;
    flex-direction: column;
    width: 1100px;
    /* border: 5px solid #fff; */
    & .l_head{
        color: #fff;
        padding: 24px 20px;
        padding-right: 10px;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content:space-between;
        border-bottom: 1px solid #dadada;
        background-color: #6993ff;
        & h6{font-size: 20px; font-weight: 600;}
        & .layer_closer{border: 0; border-radius: 0; background-color: transparent;}
        & .layer_closer img{width: 18px;}
        & .layer_closer::before,
        & .layer_closer::after{display: none;}
    }
    & .l_body{padding: 30px 20px 15px 20px; flex: 1; overflow-y: auto; }
    & .l_cont{padding-bottom: 30px;}
    & .l_cont .l_tit{text-align: center; font-size: 20px; font-weight: var(--fwsb); padding: 0 0 10px;}
    & .l_cont .just-bd{height: 1px; width: 100%; background-color: #ddd; margin: 20px auto;}
    & .l_cont .l_sch{margin-bottom: 15px;}
    & .l_cont .l_sch input{border-radius: 10px; border-color: #d6dfec; width: 100%; height: 35px; font-size: 14px; background: url("/src/img/2024/contents/l_sch.svg") no-repeat center right 14px; background-size: 13px auto; padding: 0 36px 0 10px;}
    & .tab-container{margin: 20px 0 0;}
    & .diagram-area{margin-bottom: 30px; text-align: center;}
    & .diagram-area.bd{border: 1px solid #ddd; padding: 20px;}
    & .diagram-area img{max-width: 100%;}
    & .diagram-area img.mobile{display: none;}
    & .sub-tit{text-align: center; font-size: 18px; line-height: 1.3;}
    & .l-chk{margin-top: 10px;}
    & .l-chk input{position: absolute; left: -9999px; width: 0; height: 0;}
    & .l-chk input + label{position: relative; display: block; padding: 0 0 0 40px;}
    & .l-chk input + label .shape{position: absolute; top: 0; left: 0; display: inline-block; width: 30px; height: 30px; border-radius: 5px; background-color: #fff; border: 1px solid #ddd;}
    & .l-chk input:checked + label .shape:before{content: ""; position: absolute; top: 9px; left: 8px; width: 13px; height: 8px; border-left: 2px solid #222; border-bottom: 2px solid #222; transform: rotate(-45deg);}
    & .l-chk input + label small{display: block;}
    & .l_form{}
    & .l_form .l_chkwrap{display: flex; flex-wrap: wrap; gap: 20px;;}
    & .l_form .uploader{position: relative; display: flex; gap: 6px;}
    & .l_form .uploader input{flex: 1; cursor: pointer;}
    & .l_form .uploader button{flex: 0 0 auto;}
    & .l_form .byState{display: none;}
    & .l_form tr.byState.on{display: table-row;}
    & .l_form .l_form_body{display: flex; flex-direction: column; gap: 8px;}
    & .l_form .l_form_tr{display: flex; flex-wrap: wrap;}
    & .l_form .l_form_tr.byState{display: none;}
    & .l_form .l_form_tr.byState.on{display: flex;}
    & .l_form .l_form_tr dt{flex: 0 0 auto; width: 140px; padding: 8px 0 0; font-weight: var(--fwm);}
    & .l_form .l_form_tr dd{flex: 1;}
    & .l_form .l_form_tr dd input{width: 100%;}
    & .l_form .l_form_tr dd .l_chkwrap{display: flex; flex-wrap: wrap; gap: 20px; padding: 5px 0;}
    & .l_print{display: flex; flex-wrap: wrap; gap: 22px;}
    & .l_print .l_print_item{flex: 1; border: 1px solid #ececec; background-color: #f9f9f9; border-radius: 10px; padding: 30px 30px 30px 40px; display: flex; flex-direction: column; flex-wrap: wrap;}
    & .l_print .l_print_item .lp_title{margin: 0 0 20px; letter-spacing: -0.04em; font-size: 22px; font-weight: var(--fwsb);}
    & .l_print .l_print_item .lp_title:before{content: ""; display: inline-block; vertical-align: middle; margin: 0 7px 0 0; width: 27px; height: 26px; background: url("/src/img/2024/contents/ico_l_print.svg") no-repeat;}
    & .l_print .l_print_item .lp_d1{display: flex; flex-direction: column; gap: 35px; width: 100%;}
    & .l_print .l_print_item .lp_d1 > li{font-size: 1em; font-weight: var(--fwsb);}
    & .l_print .l_print_item .lp_d2{display: flex; flex-direction: column; gap: 5px; width: 100%; padding: 10px 0 10px 39px; font-size: 14px; font-weight: var(--fwr);}
    & .l_print .l_print_item .lp_d2 > li{}
    & .l_print .l_print_item .lp_d3{display: flex; flex-direction: column; gap: 5px; width: 100%; padding: 10px 0 10px 39px;}
    & .l_print .l_print_item .lp_d3 > li{}
    & .l_print .l_print_item .lp_btns{margin-top: auto; display: flex; width: 100%; justify-content: center; flex-wrap: wrap; padding: 20px 0 0;}

    @media (width <= 767px) {
        /* border: 3px solid #fff; */
        & .l_head{
            padding: 15px 20px;
            & h6{font-size: 18px;}
        }
        & .l_body{padding: 20px;}
        & .diagram-area img:not(.mobile){display: none;}
        & .diagram-area img.mobile{display: inline;}
        & .sub-tit{font-size: 16px;}
        & .tab-container{margin: 35px 0 0;}
        & .l_form .table-colum tr.byState.on{display: flex;}
        & .l_form .uploader{}
        & .l_form .uploader button{min-width: auto; width: auto; padding: 0 15px;}
        & .l_form .uploader button img{display: none;}
        & .l_form .l_form_tr dt{width: 120px;}
        & .l_print{gap: 10px; flex-direction: column;}
        & .l_print .l_print_item{padding: 20px;}
        & .l_print .l_print_item .lp_title{font-size: 18px;}
        & .l_print .l_print_item .lp_title:before{width: 23px; height: 22px; background-size: contain; margin: -2px 5px 0 0;}
        & .l_print .l_print_item .lp_d1{gap: 10px;}
        & .l_print .l_print_item .lp_d2{padding: 10px 0 10px 20px;}
        & .l_print .l_print_item .lp_d3{padding: 10px 0 10px 20px;}
    }
}

.layer.c_layer:has(.l_phone_mu){
    width: auto;
    overflow: visible;
    background: transparent;
    box-shadow: none;

    & .l_phone_mu{position: relative; width: 318px; height: 100%; aspect-ratio: 318 / 550; padding: 60px 40px 45px; background: url("/src/img/2024/contents/supr_dtsm_phone.svg") no-repeat center; background-size: contain; display: flex; flex-direction: column; z-index: 1002;}
    & .l_phone_mu .lpm_top{height: calc(100% - 40px - 20px); overflow-y: auto; font-weight: var(--fwsb); line-height: 1.35;}
    & .l_phone_mu .lpm_top a{color: #3b79ed; text-decoration: underline;}
    & .l_phone_mu .lpm_bot{margin-top: auto; height: 40px; display: flex; justify-content: center;}
    & .l_phone_mu .lpm_bot a{width: 100%; display: inline-block; line-height: 40px; padding: 0 20px; color: #fff; letter-spacing: -0.05em; font-weight: var(--fwm); border-radius: 7px; background-color: #283e80; text-align: center; transition: 0.25s;}
    & .l_phone_mu .lpm_bot a:hover{color: #283e80; box-shadow: inset 0 0 0 1px #283e80; background-color: #fff;}
    & .l_phone_mu .layer_closer{position: absolute; top: 0; left: calc(100% + 10px); width: 50px; height: 50px; background-color: #fff; border-radius: 50%;}
    & .l_phone_mu .layer_closer img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 45%; filter :  brightness(0) saturate(100%)}
}
@media (width <= 640px){
    .layer.c_layer:has(.l_phone_mu){
        width: 80%;

        & .l_phone_mu{width: 100%; max-width: 300px;}
        & .l_phone_mu .layer_closer{top: auto; left: 50%; transform: translateX(-50%); bottom: calc(100% + 10px); width: 35px; height: 35px;}
    }

}


/*탭메뉴 커스텀*/
.tabs01{
    & .tab{
        & li a{display: flex; justify-content: center; align-items: center; height: 58px; padding: 0; /* border: 1px solid var(--c-color01); */ border-right: 0; font-size: 18px; font-weight: 500; color: #666; line-height: 18px; background-color: #f7f7f7; word-break: keep-all; /* transition: .3s ease-in-out; */}
        & li:last-child a{/* border-right: 1px solid var(--c-color01); */}
        & li a.on{color: #fff; background-color: #283e80; border-radius: 7px;}
        & li a.on:before{border-color: var(--c-color01) transparent transparent transparent; transition: .3s ease-in-out; display: none;}
    }
    & .tab_cont{padding: 40px 0 0;}

    @media (width <= 1023px) {
        & .tab{
            & li a{height: 50px; font-size: 16px;}
            & li a.on:before{display: none;}
        }
    }
    @media (width <= 767px) {
        & .tab{
            & li a{height: 44px; font-size: 15px;}
        }
        & .tab.transform{
            background: transparent;
            flex-wrap: wrap;
            justify-content: center;
            gap: 18px 28px;
            & li{flex: 0 1 auto;}
            & li:last-child a{border-right: 0;}
            & li a{height: auto; font-size: 16px; color: #222; border: 0; background-color: transparent;}
            & li a.on{color: var(--c-color01); background-color: transparent;}
        }
    }
}

.tabs02{
    & .tab{
        display: inline-flex;
        justify-content: flex-start;
        background-color: #f2f2f2;
        border-radius: 23px;
        overflow: hidden;
        & li{flex: 0 1 auto; width: 160px;}
        & li a{display: flex; justify-content: center; align-items: center; height: 46px; padding: 0;  border-right: 0; font-size: 16px; font-weight: 600; color: #7d7d7d; background-color: transparent; word-break: keep-all; transition: none;}
        & li a.on{color: #fff; background-color: #283e80; border-radius: 23px;}
        & li a.on:before{display: none;}
    }
    & .tab_cont{padding: 25px 0 60px;}

    @media (width <= 767px) {
        & .tab{
            & li{width: 124px;}
            & li a{height: 40px; font-size: 15px;}
            & .tab_cont{padding: 25px 0;}
        }

    }
}

.c_layer.layer2{
    & .search-area{display: flex; justify-content: center;}
}
.c_layer.layer3{
    & .search-area .searchbar01{max-width: 100%; justify-content: flex-end;}
    & .tab-container{margin: 0;}
    & .search-area{margin-bottom: 20px;}
    @media (width <= 767px) {
        & .search-area{justify-content: center;}
    }
}


/* ==========================================================================
    BOARD
    ========================================================================== */
.board01{
    color: #555; text-align: center;
    & .board-control{margin-bottom: 10px;}
    & .board-control select{width: auto; min-width: 150px; background-image: url('/src/img/2024/common/arr_select02.png'); background-repeat: no-repeat; background-size: 13px auto; background-position: calc(100% - 11px) center; border: 1px solid #eaeaea; border-radius: 7px;}
    & .board-top{display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 11px;}
    & .total{font-family: 'Poppins', sans-serif; font-size: 16px; color: #222;}
    & .num{width: 72px;}
    & .title{flex: 1; min-width: 0;}
    & .attach{width: 40px;}
    & .writer{min-width: 90px;}
    & .date{width: 120px;}
    & .board-head,
    > ul > li{display: flex; align-items: center; height: 70px;}
    & .board-head{display: none; font-size: 15px; border-top: 1px solid #222;}
    /* > ul{border-top: 1px solid #dadada;} */
    > ul > li{border-bottom: 1px solid #eaeaea;}
    & .board-list{
        & .select-tr{}
        & .num{font-size: 16px; font-weight: 400; color: #222;}
        & .date{font-size: 16px; font-weight: 500; color: #989898;}
        & .attach{text-align: center}
        & .attach img{width: 19px;}
        & .writer{font-size: 15px; color: #989898; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100px; text-align: left;}
        & .title > a{position: relative; font-size: 16px; font-weight: 600; color: #222; text-align: left; padding-right: 20px; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
        & .title strong{color: var(--point-color01);}
        & .secret > a{padding-left: 30px; background: url('/src/img/2024/common/ico_lock.png') no-repeat 0 center / 17px auto;}
        & .notice{background-color: #f9f9f9;}
        & .tag{
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 36px;
            height: 36px;
            font-family: var(--basic-font01);
            font-size: 13px;
            font-weight: bold;
            color: #fff;
            line-height: 1;
            background-color: var(--point-color01);
            border-radius: 50%;
        }
        & .post-state{}
        & .post-state button{display: inline-block; border: 1px solid #000; padding: 0 18px; line-height: 24px; font-size: 15px; vertical-align: middle; border-radius: 3px;}
        & .post-state button.post{border-color: #d6e7f9; background-color: #e4f1ff; color: #003c97;}
        & .post-state button.hide{border-color: #fcd9d9; background-color: #fff0f0; color: #f24949;}
    }
    & .btn-container{justify-content: flex-end;}
    @media (width <= 1023px) {
        & .num{width: 30px;}
        & .date{width: 100px;}
        & .attach{width: 40px;}
        & .board-head,
        > ul > li{height: 60px;}
        & .board-head{font-size: 14px;}
        & .board-list{
            & .num,
            & .date{font-size: 15px;}
            & .title{font-size: 17px;}
        }
    }
    @media (width <= 767px) {
        & .board-control{max-width: 400px; margin: 0 auto 8px;}
        & .board-control select{width: 100%; height: 38px; font-size: 14px; background-position: calc(100% - 20px) center;}
        & .num{display: none;}
        & .date{width: 74px;}
        & .attach{display: none;}
        & .total{display: none;}
        & .board-head,
        > ul > li{flex-wrap: wrap; height: auto; padding-top: 14px; padding-bottom: 14px;}
        & .board-head{display: none;}
        & .board-list{
            & .writer,
            & .date{font-size: 13px;}
            & .writer{min-width: 0; text-align: left;}
            /* & .writer::after{content: ""; position: relative; top: 1px; display: inline-block; width: 1px; height: 12px; background-color: #e8e8e8; margin-left: 12px;} */
            & .date{width: auto;}
            /* & .date::before{content: ""; position: relative; top: 2px; display: inline-block; width: 1px; height: 12px; background-color: #e8e8e8; margin-left: 10px; margin-right: 10px;} */
            & .title{flex: 1 1 100%; margin-bottom: 6px;}
            & .title > a{-webkit-line-clamp: 2; font-size: 16px; padding-right: 6px; }
            & .tag{width: auto; height: auto; font-size: 14px; color: var(--point-color01); background-color: transparent;}
            & .secret > a{background-position: 0 2px;}
        }
        & .search-area{
            display: flex;
            justify-content: center;
            width: 100%;
        }
        & .post-state{margin-left: auto;}
    }
}

.board-view01{
    border-top:1px solid #ededed;
    & .view-top{padding-top: 20px; padding-bottom: 20px; padding-left: 60px; padding-right: 60px; border-bottom: 1px solid #ededed; background-color: #f9f9f9;}
    & .view-top .title{max-width: 100%; font-size: 20px; font-weight: bold; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    & .view-top .title strong{color: var(--point-color01);}
    & .view-top .info{font-size: 14px; color: #999; letter-spacing: 0; margin-top: 15px;}
    & .view-top .info span::after{content: ""; position: relative; top: 1px; display: inline-block; width: 1px; height: 12px; background-color: #e8e8e8; margin: 0 6px 0 10px;}
    & .view-top .info span:last-child::after{display: none;}
    & .view-body{padding:30px 60px; color: #666; line-height: 28px; word-break: break-all;}
    & .view-body img{max-width: 100%;}
    & .view-attach{padding: 15px 26px; border: 1px solid #ededed; background-color: #fff; border-radius: 5px;}
    & .view-attach.bdt{border: none; margin: 0; padding: 0;}
    & .view-attach.bdt:has(.attach){border: none; border-top: 1px dashed #d1d1d1; padding: 15px 0 0; margin: 20px 0 0;}
    & .view-attach .attach{display: flex; justify-content: space-between; align-items: center; padding: 5px 0;}
    & .view-attach .attach a{position: relative; display: inline-block; max-width: 500px; padding-right: 70px; gap: 5px; font-size: 14px; line-height: 20px; padding-left: 30px; background: url('/src/img/2024/common/ico_file01.png') no-repeat 0 center / 19px auto; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
    & .view-attach .attach a:hover{text-decoration: underline;}
    & .view-attach .info{position: absolute; top: 0; right: 0; font-family:'Roboto', sans-serif; font-size: 12px; color: #999; letter-spacing: 0;}
    & .btn-container{justify-content: center;}
    @media (width <= 1023px) {
        & .view-top .title{width: 100%; max-width: 100%;}
        & .view-top .date{width: 100%; margin-top: 14px;}
        & .view-top .title{font-size: 18px; line-height: 26px; white-space: initial;}
    }
    @media (width <= 767px) {
        & .view-top{padding-left: 0; padding-right: 0;}
        & .view-top .date{margin-top: 10px;}
        & .view-top .title{font-size: 17px;}
        & .view-body{padding: 20px 0; font-size: 15px; line-height: 24px;}
        & .view-attach{padding: 15px 15px; background-color: transparent;}
        & .view-attach .attach a{max-width: 200px;}
    }
}
.board-write01{
    padding-top: 30px; border-top:1px solid #222;
    & .tit-item{font-weight: bold; margin-bottom: 8px;}
    & .row-form{display: flex; gap: 20px; margin-bottom: 20px;}
    & .row-form .item-form{flex: 1}
    & .btn-container{justify-content: center;}
    @media (width > 767px) and (width <= 1023px) {
        & .row-form{gap: 10px; margin-bottom: 10px;}
    }
    @media (width <= 767px) {
        & .row-form{flex-direction: column;}
    }
}

/* PAGING */
.pagenate{
    display: flex;
    justify-content: center;
    gap: 9px;
    & a{display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; line-height: 30px; font-size: 14px; font-weight: 500; color:#b5b5b5; transition: .2s ease-in-out;}
    & a:hover,
    & a:focus,
    & li.on a{color:#000;}
    & a.active{color:#000;}
    & .prev,
    & .start,
    & .end,
    & .next{font-size:0; border-radius: 50%;}
    & .prev:hover,
    & .start:hover,
    & .next:hover,
    & .end:hover{background-color: #ececec;}
    & .prev{background: url('/src/img/2024/common/arr0101.png') no-repeat center / auto 12px;}
    & .start{background: url('/src/img/2024/common/arr0103.png') no-repeat center / auto 12px; margin-right: -9px;}
    & .next{background: url('/src/img/2024/common/arr0102.png') no-repeat center / auto 12px;}
    & .end{background: url('/src/img/2024/common/arr0104.png') no-repeat center / auto 12px; margin-left: -9px;}

    /* type2 */
    &.type2{
        margin-top: 9px;
        margin-bottom: 20px;
        gap: 20px;
        letter-spacing: -0.05em;
        font-size: 13px;
        font-weight: var(--fwm);
        cursor:pointer;
        & a{width: auto; height: auto; line-height: 20px;}
        & .prev,
        & .start,
        & .next,
        & .end{width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px #cfcfcf; background-size: 4px auto;}
        & .start,
        & .prev{margin-right: -7px;}
        & .next,
        & .end{margin-left: -7px;}
        & .start,
        & .end{background-size: 7px auto;}
        & .start{margin-right: -16px;}
        & .end{margin-left: -16px;}
    }
}

.board-container{
    padding-bottom: 100px;
    & .btn-container{display: flex; gap: 10px; margin-top: 40px;}
    & .btn-container.center{justify-content: center;}
    & .paging{margin-top: 50px;}
    @media (width <= 1023px) {
        & .btn-container{margin-top: 30px;}
    }
    @media (width <= 767px) {
        & .btn-container .button01{width: 100%; height: 50px;}
    }
}

/*아코디언*/
.accordion.c-accordion{
    border-top: 0;
    & dl{border-color: #eaeaea; transition: .2s ease-in-out;}
    & dl dt button,
    & dl dd{background-color: transparent;}
    & dl dd{border-top: 0;}
    & dl dt button{padding: 20px 0; display: flex;}
    & dl .over{background-color: transparent;}
    & dl dt span{display: block;}
    & dl dt button:before{top: calc(50% - 5px); right: 32px; width: 13px; height: 8px; border: 0; background: url('/src/img/2024/common/arr02.png') no-repeat 0 0 / 100% auto; transform: rotate(0deg); transition: .2s ease-in-out;}
    & .circle-q{width: 113px; text-align: center;}
    & .circle-q .circle{display: inline-flex; justify-content: center; align-items: center; width: 32px; height: 32px; font-size: 16px; font-weight: 500; color: #fff; background-color: #464646; border-radius: 50%;}
    & .question{flex: 1; font-size: 16px; font-weight: 600; line-height: 1.5; word-break: break-all; padding: 4px 90px 0 0;}
    & .answer{padding: 2px 113px 30px;}
    & .answer p{font-size: 16px; line-height: 1.5;}
    & dl.on{background-color: #f9f9f9;}
    & dl.on dt button:before{transform: rotate(180deg);}
    @media (width <= 1023px) {
        & dl dt button{padding: 20px 0}
        & .circle-q{width: 70px;}
        & .question{font-size: 17px;}
        & .answer{padding: 0 70px 25px;}
        & .answer p{font-size: 15px;}
    }
    @media (width <= 767px) {
        & dl dt button{padding: 15px 0}
        & dl dt button:before{right: 15px;}
        & .circle-q{display: none;}
        & .circle-q .circle{width: 24px; height: 24px; font-size: 13px; border-radius: 50%;}
        & .question{font-size: 15px; line-height: 24px; padding-right: 50px;}
        & .answer{padding: 20px 20px; background-color: #f9f9f9;}
        & .answer p{font-size: 14px; line-height: 24px;}

        & dl.on{background-color: transparent;}
    }
}


.layer.c_layer:has(.l_sc_mu){
    width: auto;
    overflow: visible;
    background: transparent;
    box-shadow: none;

    & .l_sc_mu{position: relative; width: 400px; height: 257px; padding: 15px 14px 30px; background: #F4F8FD;border-radius: 15px; z-index: 1002;}
    & .l_sc_mu .lsc_top{display: flex;justify-content: end;}
    & .l_sc_mu .layer_closer {width: 16px; height: 16px;}
    & .l_sc_mu .lsc_titbox {width: 100%; padding: 20px 0 30px; text-align: center;}
    & .l_sc_mu .lsc_title {font-size: 18px; color: #283E80;font-weight: 500;}
    & .l_sc_mu .lsc_ctfwrap {display: flex;justify-content: center; gap: 10px;}
    & .l_sc_mu .ctfbox {display: flex;align-items: center;flex-direction: column;padding: 20px;width: 110px;gap: 10px;background: #fff;border-radius:20px;}
    & .l_sc_mu .ctfbox:hover {background: linear-gradient(180deg, #51A6FF 0%, #7A87FF 100%); box-shadow: none;}
    & .l_sc_mu .lsc_ctfwrap .ctfbox span {font-size: 16px; line-height:14px; color: #283E80; font-weight: 600; margin-bottom: 10px;}
    & .l_sc_mu .lsc_ctfwrap .ctfbox .lsc_img  {width: 30px; height: 35px; background-size: contain;}
    & .l_sc_mu .lsc_ctfwrap .ctfbox .lsc_img  {transition: .2s ease-out;}
    & .l_sc_mu .lsc_ctfwrap .ctfbox .ctf_imgbox1 {background: url('/src/img/2024/common/c_ctf01.svg') no-repeat center;}
    & .l_sc_mu .lsc_ctfwrap .ctfbox .ctf_imgbox2 {background: url('/src/img/2024/common/c_ctf02.svg') no-repeat center;}
    & .l_sc_mu .ctfbox:hover span {color: #fff;transition: .2s ease-out;}
    & .l_sc_mu .ctfbox:hover .ctf_imgbox1 {background: url('/src/img/2024/common/w_ctf01.svg') no-repeat center;}
    & .l_sc_mu .ctfbox:hover .ctf_imgbox2 {background: url('/src/img/2024/common/w_ctf02.svg') no-repeat center;}
    /* & .l_sc_mu .lpm_top a{color: #3b79ed; text-decoration: underline;}
    & .l_sc_mu .lpm_top{height: calc(100% - 40px - 20px); overflow-y: auto; font-weight: var(--fwsb); line-height: 1.35;}
    & .l_sc_mu .lpm_bot{margin-top: auto; height: 40px; display: flex; justify-content: center;}
    & .l_sc_mu .lpm_bot a{width: 100%; display: inline-block; line-height: 40px; padding: 0 20px; color: #fff; letter-spacing: -0.05em; font-weight: var(--fwm); border-radius: 7px; background-color: #283e80; text-align: center; transition: 0.25s;}
    & .l_sc_mu .lpm_bot a:hover{color: #283e80; box-shadow: inset 0 0 0 1px #283e80; background-color: #fff;}
    & .l_sc_mu .layer_closer{position: absolute; top: 0; left: calc(100% + 10px); width: 50px; height: 50px; background-color: #fff; border-radius: 50%;}
    & .l_sc_mu .layer_closer img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 45%; filter :  brightness(0) saturate(100%)} */
}
@media (width <= 640px){
    .layer.c_layer:has(.l_sd_mu){
        width: 80%;

        & .l_sc_mu{width: 100%; max-width: 300px;}
        & .l_sc_mu .layer_closer{top: auto; left: 50%; transform: translateX(-50%); bottom: calc(100% + 10px); width: 35px; height: 35px;}
    }
    
}

/* 250625*/
/* btn-primary */
.btn-com {
    display: inline-flex;
    height: 40px;
    border-radius: 7px;
    align-items: center;
    font-size: 16px;
    padding: 10px 15px;
    transition: 0.25s;
    font-weight: 500;
}
.btn-com1  {
    width: 100px;
    justify-content: center;
}
.btn-com2  {
    width: 124px;
    justify-content: space-between;
    font-weight: 500;
}
.btn-com2 img {
    width: 17px;
    height: auto;
}
.btn-primary {
    background: #486EE2;
    color: #FFF;
}
.btn-primary-line {
    background: #FFF;
    color: #283E80;
    border: 1px solid #87BBFF;
}
.btn-grey {
    background: #8F93A1;
    color: #FFF;
}
.btn-grey-line {
    background: #FFF;
    color: #555555;
    border: 1px solid #D9D9D9;
}
.btn-grey-fill {
    background: #F5F5F5;
    color: #555555;
    border: 1px solid #D9D9D9;
}
.btn-cert {
    background: #E7F1FF;
    color: #283E80;
    border: 1px solid #CCE1FA;
}