@charset "utf-8";
/* CSS Document */
/* 초기화 */
:root{
    --main:#5b482b;
    /*--mid: #f6f4f0;*/
    --mid: #f2e8de;
    --white:#ffffff;
    --shadow:0 4px 12px rgba(0,0,0,0.05);
    --r:14px;
}
* {
    font-family: 'SUIT';
    box-sizing:border-box
}
::selection {
    background:rgba(138,138,138,0.35);
    color:inherit;
}
html {
    overflow-y:scroll;
}
body {
    margin:0 auto;
    padding:0!important;
    font-size:17px;
    letter-spacing:0;
    line-height:1.6em;
    color:#1a1a1c;
    background:#ffffff;
    min-width:280px;
    font-weight:400;
    word-break:keep-all;
}
@media(max-width:768px){
    body {
        font-size:15px;
    }
}

html,h1,h2,h3,h4,h5,h6,form,fieldset,img {
    margin:0;
    padding:0;
    border:0
}
h1,h2,h3,h4,h5,h6 {
    font-size:1em
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,div {
    display:block;
    box-sizing:border-box;
}
ul,dl,dd {
    margin:0;
    padding:0;
    list-style:none
}
dl dt {
    font-weight:500;
}
legend {
    position:absolute;
    font-size:0;
    line-height:0;
    text-indent:-9999em;
    overflow:hidden
}
label,input,button,select {
    border-radius:4px;
    box-sizing:border-box;
}
label,input,button,select,img {
    vertical-align:middle;
    outline:none;
}
label {
    margin:0;
    font-weight:600;
}
input:focus,button:focus {
    outline:none;
}
input,button {
    margin:0;
    padding:0;
    font-size:initial;
    outline:none;
}
button {
    cursor:pointer;
}
input[type=text],input[type=password],input[type=submit],input[type=image],button {
    border-radius:;
    font-size:initial;
    -webkit-appearance:none
}
textarea,select {
    font-size:1em;
}
textarea {
    border-radius:0;
    -webkit-appearance:none;
}
select {
    margin:0;
    border-radius:4px;
}
p {
    margin:0;
    padding:0;
    word-break:keep-all
}
pre {
    overflow-x:scroll;
    font-size:1.1em
}
a,a:link,a:visited {
    color:#1a1a1c;
    text-decoration:none;
    cursor:pointer;
}
a:hover,a:focus,a:active {
    text-decoration:none;
}
/*스크롤디자인*/::-webkit-scrollbar {
              width:6px;
              height:6px;
          }
::-webkit-scrollbar-thumb {
    background-color:#888;
    border-radius:10px;
    background-clip:padding-box;
    border:1px solid transparent;
}
::-webkit-scrollbar-track {
    background-color:#e7e7e7;
    border-radius: 10px;
}
/*설정*/
h1 {
    font-size:2.5em;
}
h2 {
    font-size:2.2em;
}
h3 {
    font-size:2em;
}
h4 {
    font-size:1.8em;
}
h5 {
    font-size:1.5em;
}
h6 {
    font-size:1.25em;
}
a,a:link,a:visited {
    text-decoration:none;
    cursor:pointer;
}
a:hover,a:focus,a:active {
    text-decoration:none;
    color:#120030;
}
.inb {
    display: inline-block;
}
.inf {
    display: inline-flex;
}
.panel {
    margin-bottom:10px;
}
.nowrap {
    white-space:nowrap
}
.flex {
    display:flex!important;
}
.flex.column {
    flex-direction: column;
}
.flex.wrap {
    flex-wrap:wrap
}
.flex.nowrap {
    flex-wrap:nowrap
}
.flex.jc-sb {
    justify-content:space-between
}
.flex.start {
    justify-content:flex-start
}
.flex.end {
    justify-content:flex-end
}
.flex.center {
    justify-content:center
}
.flex.ai-c {
    align-items:center
}
.flex.ai-b {
    align-items:baseline
}
.flex.ai-e {
    align-items:flex-end
}
.flex.ai-s {
    align-items:flex-start;
}
.hide {
    display:none!important;
}
.grid {
    display:grid;
    gap:10px;
}
.grid>li,.grid>div {
    box-sizing:border-box;
    overflow:hidden;
}
.grid2 {
    grid-template-columns:repeat(2,1fr);
}
.grid3 {
    grid-template-columns:repeat(3,1fr);
}
.grid4 {
    grid-template-columns:repeat(4,1fr);
}
.grid5 {
    grid-template-columns:repeat(5,1fr);
}
.grid7 {
    grid-template-columns:repeat(7,1fr);
}
.gap5 {
    gap:5px;
}
.gap10 {
    gap:10px;
}
.gap15 {
    gap:15px;
}
.gap20 {
    gap:20px;
}
.gap25 {
    gap:25px;
}
.gap30 {
    gap:30px;
}
.gap40 {
    gap:40px;
}
.w50 {
    width:50% !important
}
.w100 {
    width:100%!important;
}
.wfit {
    width:fit-content!important;
}
.mw100 {
    max-width:100px!important;
}
.mw150 {
    max-width:150px!important;
}
.mw200 {
    max-width:200px!important;
}
.w30px {
    width:30px!important;
}
.w40px {
    width:40px!important;
}
.w50px {
    width:50px!important;
}
.w60px {
    width:60px!important;
}
.w70px {
    width:70px!important;
}
.w80px {
    width:80px!important;
}
.w90px {
    width:90px!important;
}
.w100px {
    width:100px!important;
}
.w150px {
    width:150px!important;
}
.w200 {
    width:200px!important;
}
.w120px{width:120px}
.w240px{width:240px}
.w300px{width:300px}
.w600px {
    max-width:600px;
    margin:0 auto;
}
.w900px {
    max-width:900px;
    margin:0 auto;
}
.w1200px {
    max-width:1200px;
    margin:0 auto;
}
.w1300px {
    max-width:1300px;
    margin:0 auto;
}
.max-none {
    max-width:none!important;
}
.search {
    display:flex;
}
.search select {
    margin-bottom:0;
}
.sticky {
    position:-webkit-sticky;
    position:sticky;
    top:100px;
}
.mono {
    filter:contrast(0%);
}
.img.circle {
    border-radius:50%;
    overflow:hidden;
}
.img {
    border:1px solid #ECECEC;
}
.img>.icon {
    z-index:1;
    margin:8px;
    position:absolute;
    left:0;
    top:0;
    min-width:22px;
    text-align:center;
}
.img img {
    width:100%;
    max-width:100%;
    height:100%;
    object-fit:cover;
}
.img-32 {
    width:32px;
    aspect-ratio:1/1;
    margin-right:8px;
    border:1px solid #eee;
}
.img-40 {
    width:40px;
    aspect-ratio:1/1;
    margin-right:8px;
    border:1px solid #eee;
}
.img-50 {
    width:50px;
    aspect-ratio:1/1;
    margin-right:10px;
    border:1px solid #eee;
}
.img-70 {
    width:70px;
    aspect-ratio:1/1;
    margin-right:10px;
}
.img-85 {
    width:85px;
    height:85px;
    border:1px solid #ECECEC;
    margin-right:15px;
}
.img-100 {
    width:100px;
    height:100px;
    border:1px solid #ECECEC;
    margin-right:24px;
}
.img-200 {
    width:200px;
    height:140px;
    border:1px solid #ECECEC;
    margin-right:24px;
}
.img.h80 {
    height:80px;
    overflow:hidden;
}
.inner {
    max-width:1500px;
    width:100%;
    margin:0 auto;
}
.cut {
    display:inline-block;
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    vertical-align:middle;
    word-break:break-all;
    white-space:nowrap;
}
.cut2 {
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    width:100%;
    word-break:break-all;
}
.cut3 {
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    width:100%;
    word-break:break-all;
}
.b0 {
    border:0px!important;
}
.mb0 {
    margin-bottom:0px!important;
}
.mb5 {
    margin-bottom:5px!important;
}
.mb10 {
    margin-bottom:10px!important;
}
.mb15 {
    margin-bottom:15px!important;
}
.mb20 {
    margin-bottom:20px!important;
}
.mb25 {
    margin-bottom:25px!important;
}
.mb30 {
    margin-bottom:30px!important;
}
.mt0 {
    margin-top:0px!important;
}
.mt5 {
    margin-top:5px!important;
}
.mt10 {
    margin-top:10px!important;
}
.mt15 {
    margin-top:15px!important;
}
.mt20 {
    margin-top:20px!important;
}
.mt25 {
    margin-top:25px!important;
}
.mt30 {
    margin-top:30px!important;
}
.m10 {
    margin:10px 0!important;
}
.cursor {
    cursor: pointer;
}
/*아이콘*/
.icon {
    font-size:12px;
    padding:5px 6px;
    line-height:1em;
    font-weight:600;
    display:inline-block;
    border-radius:3px;
}
.icon-pink {
    background:#ff5b90!important;
    color:#fff!important;
}
.icon-red {
    background:#FF0606!important;
    color:#fff!important;
}
.icon-red2 {
    background:#ff858b20!important;
    color:#FF0606!important;
}
.icon-brown {
    background: #fdfaf7 !important;
    color: #5a472b !important;
}
.icon-brown2 {
    background: #5a472b !important;
    color: #fff !important;
}
.icon-brownt {
    background: #fff !important;
    color: #5a472b !important;
}
.icon-brownline {
    background: #fff !important;
    color: #5a472b !important;
    border:1px solid #5a472b!important;
}
.icon-blue {
    background:#d7d9ff!important;
    color:#162b85!important;
}
.icon-blue2 {
    background: #162b85 !important;
    color:#fff!important;
}
.icon-sky {
    background:#dcf3fa!important;
    color:#2992d5!important;
}
.icon-green {
    background: #1a7a12 !important;
    color:#fff !important;
}
.icon-greenline {
    border:1px solid #1a7a12!important;
    background:#fff!important;
    color:#1a7a12 !important;
}
.icon-green2 {
    background:#c8eed6!important;
    color:#1ea44f!important;
}
.icon-black {
    background:#232323!important;
    color:#fff!important;
}
.icon-gray {
    background:#ECECEC!important;
    color:#828282!important;
}
.icon-gray3 {
    background:#f3f3f3!important;
    color:#727272!important;
}
.icon-gray2 {
    background:#333333!important;
    color:#ffffff!important;
}
.icon-line {
    border:1px solid #cccccc;
    padding:3px 5px;
    display:inline-block;
}
.icon-line2 {
    border:1px solid #919191;
    color:#828282;
    padding:3px 5px;
    display:inline-block;
}
.icon-white {
    background:#fff;
    color:#000;
}
.icon-white2 {
    background:#fff;
    color:#666;
}
.icon.h30 {
    line-height:20px;
}
.icon.circle {
    text-align:center;
    width:67px;
    height:67px;
    border-radius:50%;
    background:#ffe6e6;
    display:table;
}
.icon.circle p {
    display:table-cell;
    vertical-align:middle;
}
.icon.circle span {
    font-size:1.05em;
    color:#7D7D7D;
}
.icon.circle strong {
    display:block;
    font-size:1.25em;
    font-weight:700;
    color:#666;
    margin-top:6px;
}
.icon.circle.gray {
    filter:grayscale(100%);
    opacity:0.6;
}
.icon-mini {
    font-size:11px;
    padding:2px 4px;
    font-weight:700;
    letter-spacing:-0.5px;
}
.icon-big {
    font-size:16px;
    padding:5px 10px;
    font-weight:600;
    letter-spacing: -0.5px;
}
/*버튼*/
button:disabled,button:disabled:hover {
    filter:saturate(0);
    background:#33333315;
    color:#33333375;
    border-color:#dddddd;
}
.btn,a.btn {
    height:fit-content;
    background:#fff0;
    display:inline-block;
    text-align:center;
    border-radius:3px;
    border:1px solid transparent;
    width:max-content;
    word-break:keep-all;
    padding:8px 10px;
    line-height:1em;
    cursor:pointer;
    font-weight:600;
    position:relative;
    box-sizing:border-box;
    text-align:center;
    font-size:13px;
}
.btn:hover {
    transition:all 0.3s;
    background:#fff;
}
.btn-mini,a.btn-mini {
    padding:4px 8px!important;
    height:auto!important;
    font-size:11px!important;
    margin:2px!important;
}
.btn-mini2,a.btn-mini2 {
    padding:4px 6px!important;
    height:auto!important;
    font-size:9px!important;
    margin:2px!important;
}
.btn-small {
    padding:7px 10px!important;
    height:40px!important;
}
.btn-middle,a.btn-middle {
    width:50%!important;
    padding:15px 0!important;
    font-size:1.2em!important;
    font-weight:600!important;
    height:auto!important;
}
.btn-large,a.btn-large {
    width:100%;
    padding:15px 0!important;
    font-size:1.2em!important;
    font-weight:600!important;
    height:auto!important;
}
a.btn-green,.btn-green {
    background-color:#20b436;
    color:#fff;
}
a.btn-green:hover,.btn-green:hover {
    background-color:#348121;
    color:#fff;
}
a.btn-brown,.btn-brown {
    background-color: #5a472b;
    color:#fff;
}
a.btn-brown:hover,.btn-brown:hover {
    background-color: #362d1f;
    color:#fff;
}
a.btn-brownt,.btn-brownt {
    background-color: #fff;
    color:#5a472b;
}
a.btn-brownt:hover,.btn-brownt:hover {
    background-color: #fff;
    color:#362d1f;
}
a.btn-brownline,.btn-brownline {
    background-color: #fff;
    color:#5a472b;
    border:1px solid #5a472b;
}
a.btn-brownline:hover,.btn-brownline:hover {
    background-color: #fff;
    color:#362d1f;
    border:1px solid #362d1f;
}
a.btn-brown2,.btn-brown2 {
    background-color: #e3ded8;
    color:#5a472b;
}
a.btn-brownt2:hover,.btn-brown2:hover {
    background-color: #e3ded8;
    color:#362d1f;
}
a.btn-blue,.btn-blue {
    background-color:#008cfc;
    color:#fff;
}
a.btn-blue:hover,.btn-blue:hover {
    background-color:#5c02fa;
    color:#fff;
}
a.btn-purple,.btn-purple {
    background-color:#4900C0;
    color:#fff;
}
a.btn-purple:hover,.btn-purple:hover {
    background-color:#370093;
    color:#fff;
}
a.btn-red,.btn-red {
    background-color:#ff0606;
    color:#fff;
}
a.btn-red:hover,.btn-red:hover {
    background-color: #8e0b0b;
    color:#ffffff;
}
a.btn-redline,.btn-redline {
    border:1px solid #ff0606;
    background-color:#fff;
    color:#ff0606;
}
a.btn-redline:hover,.btn-redline:hover {
    border:1px solid #8e0b0b;
    background-color:#fff;
    color:#8e0b0b;
}
a.btn-redline2,.btn-redline2 {
    border:1px solid #ff060620;
    background-color:#fff7f7;
    color:#ff0606;
}
a.btn-redline2:hover,.btn-redline2:hover {
    border:1px solid #8e0b0b;
    background-color:#fff;
    color:#8e0b0b;
}
a.btn-red2,.btn-red2 {
    background-color:#fff7f7;
    color:#ff0606;
}
a.btn-red2:hover,.btn-red2:hover {
    background-color:#ffd4d4;
    color:#ff0606;
}
a.btn-yellow,.btn-yellow {
    background-color:#ffc25e;
    color:#000000;
}
a.btn-yellow:hover,.btn-yellow:hover {
    background-color:#ff7340;
    color:#000000;
}
a.btn-white,.btn-white {
    background-color:#fff;
    color:#484951;
}
a.btn-white:hover,.btn-white:hover {
    background-color:#484951;
    color:#fff;
}
a.btn-whiteline,.btn-whiteline {
    background-color:#fff;
    color:#484951;
    border:1px solid #1a1a1c;
}
a.btn-whiteline:hover,.btn-whiteline:hover {
    background-color:#dadada;
    color:#484951;
    border:1px solid #1a1a1c;
}
a.btn-whiteline2,.btn-whiteline2 {
    background-color:#fff0!important;
    color:#fff;
    border:1px solid #fff;
}
a.btn-whiteline2:hover,.btn-whiteline2:hover {
    background-color:#ffffff10!important;
    color:#fff;
    border:1px solid #fff10;
}
a.btn-white2,.btn-white2 {
    background-color:#fff;
    color:#666;
}
a.btn-white2:hover,.btn-white2:hover {
    background-color:#666;
    color:#fff
}
a.btn-white3,.btn-white3 {
    background-color:#ffffff20!important;
    color:#fff;
}
a.btn-white3:hover,.btn-white3:hover {
    background-color:#ffffff30!important;
    color:#fff
}
a.btn-black,.btn-black {
    background-color: #000000;
    color:#fff;
    border:1px solid transparent;
    opacity:0.8;
}
a.btn-black:hover,.btn-black:hover {
    background-color:#7f7f86;
    color:#fff;
    border:1px solid transparent;
    opacity:1;
}
a.btn-blackline,.btn-blackline {
    background-color:#ffffff;
    color:#232323;
    border:1px solid #000000;
}
a.btn-blackline:hover,.btn-blackline:hover {
    background-color:#dadada;
    color:#232323;
    border:1px solid #616161;
    opacity:1;
}
a.btn-gray,.btn-gray {
    background-color:#E8E8E8;
    color:#373844
}
a.btn-gray:hover,.btn-gray:hover {
    background-color:#373844;
    color:#fff;
}
a.btn-grayline,.btn-grayline {
    background-color:#eeeeee;
    color:#1a1a1c;
    border:1px solid #858585;
}
a.btn-grayline:hover,.btn-grayline:hover {
    background-color:#1a1a1c;
    color:#fff;
    border:1px solid #858585;
}
a.btn-gray2,.btn-gray2 {
    background-color:#1a1a1c;
    color:#fff;
}
a.btn-gray2:hover,.btn-gray2:hover {
    background-color:#84848a;
}
a.btn-gray3,.btn-gray3 {
    background-color:#565656 !important;
    color:#fff!important;
}
a.btn-gray3:hover,.btn-gray3:hover {
    background-color:#1a1a1c!important;
}
a.btn-line,.btn-line {
    border:1px solid #E8E8E8;
    background-color:#ffffff;
    color:#484951;
}
a.btn-line:hover,.btn-line:hover {
    background-color:#484951;
    border:1px solid #484951;
    color:#fff
}
a.btn-line2,.btn-line2 {
    border:1px solid #2A2A2A;
    background-color:#D4D4D4;
    color:#484951;
}
a.btn-line2:hover,.btn-line2:hover {
    background-color:#7e7e7e;
    border:1px solid #2A2A2A;
    color:#fff
}
a.btn-line3,.btn-line3 {
    border:1px solid #e3e3e3;
    background-color:#ffffff;
    color:#b5b5bb;
}
a.btn-line3:hover,.btn-line3:hover {
    background-color:#7e7e7e;
    border:1px solid #2A2A2A;
    color:#fff
}
.btn-sdw {
    box-shadow:3px 3px 6px rgba(0,0,0,0.16);
}
.btn-h40,a.btn-h40 {
    height:40px;
    line-height:22.5px;
}
.btn-h49,a.btn-h49 {
    height:47px!important;
    line-height:22.5px;
}
.mb_wrap .btn-wrap {
    text-align:center;
    padding:28px 0;
}
@media screen and (max-width: 992px) {
}
/*댓글*/
td span.new {
    background:#444;
    color:#fff;
    font-size:0.7em;
    padding:2px 4px;
    border-radius:4px 4px 0 4px;
    margin-left:5px;
}
td span.comment {
    font-size:0.7em;
    padding:2px 5px;
    background:#fff;
    border:1px solid #ccc;
    border-radius:4px 4px 4px 0;
    margin-left:5px;
    font-weight: 800;
}
/*글자*/
.txt-brown>a,.txt-brown {
    color: #5a472b!important;
}
.txt-blue>a,.txt-blue {
    color:#1E48BC!important;
}
.txt-green>a,.txt-green {
    color:#00a915!important;
}
.txt-blue2>a,.txt-blue2 {
    color: #162b85 !important;
}
.txt-sky>a,.txt-sky {
    color:#4aeaff;
}
.txt-pink>a,.txt-pink {
    color:#ff5b90;
}
.txt-yellow>a,.txt-yellow {
    color:#e6af53;
}
.txt-brown2>a,.txt-brown2 {
    color:#95711D!important;
}
.txt-red>a,.txt-red {
    color:#ff2d0d!important;
}
.txt-gray>a,.txt-gray {
    color:#AFAFAF!important;
}
.txt-gray2>a,.txt-gray2 {
    color:#4b4b4b!important;
}
.txt-dark>a,.txt-dark {
    color:#7D7D7D!important;
}
.txt-black>a,.txt-black {
    color:#232323!important;
}
.txt-white>a,.txt-white {
    color:#ffffff!important;
}
.txt-bold {
    font-weight:800!important;
}
.txt-bold2 {
    font-weight:600!important;
}
.txt-thin {
    font-weight:400!important;
}
.txt-under {
    text-decoration:underline!important;
}
.txt-under2 {
    text-decoration:none;
    opacity:1;
    border-bottom:10px solid #fff7f5;
    display:inline-block;
    line-height:0px;
}
.txt-through {
    text-decoration:line-through
}
.txt-down {
    font-size:0.9em;
    line-height:1.6em;
}
.txt-up {
    font-size:1.1em;
}
.txt-mini {
    font-size:0.85em;
}
.txt-center {
    text-align:center!important;
}
.txt-left {
    text-align:left!important;
}
.txt-right {
    text-align: right!important;
}
/*박스디자인*/
.box {
    border:1px solid #fff0;
    padding:0px;
}
.box10 {
    border:1px solid #fff0;
    padding:10px;
}
.box15 {
    border:1px solid #fff0;
    padding:15px;
}
.box20 {
    border:1px solid #fff0;
    padding:20px;
}
.box25 {
    border:1px solid #fff0;
    padding:25px;
}
.box-sdw {
    box-shadow:3px 3px 15px rgba(0,0,0,0.06);
    background-color:#FFFFFF;
}
.box-white {
    background:#fff;
}
.box-line {
    background:#fff;
    border:1px solid #e8e8e8;
}
.box-line2 {
    background:#fff;
    border:1px solid #f1ecec;
}
.box-under {
    border-bottom:1px solid #DBDBDB;
}
.box-gray {
    background-color:#fafafa;
    border-color:#fafafa
}
.box-gray2 {
    background-color:#e0e4e5;
    border-color:#e0e4e5
}
.box-grayline {
    background-color:#f4f4f4;
    border-color:#dadada
}
.box-brown {
    background-color: #f6f4f0;
    border-color:#fff0
}
.box-brownline {
    background-color:#f6f4f0;
    border-color: #c5c1b9
}
.box-green {
    background:#EFFFEF 0% 0% no-repeat padding-box;
    border:1px solid #96E140;
    opacity:1;
}
.box-green a {
    color:#8FAE8E;
}
.box-yellow {
    background:#FFFAEF;
    border:1px solid #FFC06D;
}
.box-red {
    border:1px solid #FF816D;
    opacity:1;
}
.box-red2 {
    border:0px solid #FF816D;
    opacity:1;
}
.box-blue {
    border:1px solid #6d74ff;
    opacity:1;
}
.box-radius {
    border-radius:10px;
}
.txt-line span {
    color:#9F9F9F;
}
.txt-line span:after {
    content:"";
    width:1px;
    height:10px;
    display:inline-block;
    background:#E9E9E9;
    margin:0 4px;
}
.txt-line span:last-child:after {
    display: none;
}
/*폼형태*/
select  {
    height:fit-content;
    padding:10px 12px;
    border:1px solid #e5e7eb;
    background:#ffffff;
    border-radius:8px;
    color:#111827;
    transition:all 0.15s ease;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg fill='gray' height='14' viewBox='0 0 20 20' width='14' xmlns='http://www.w3.org/2000/svg'><path d='M5.516 7.548a.625.625 0 0 1 .884-.064l3.6 3.2 3.6-3.2a.625.625 0 0 1 .82.948l-4 3.556a.625.625 0 0 1-.82 0l-4-3.556a.625.625 0 0 1-.064-.884z'/></svg>");
    background-repeat:no-repeat;
    background-position:right 12px center;
    padding-right:36px !important;
}
input {
    height:fit-content;
    max-height: 49.19px;
    padding:10px 12px;
    border:1px solid #e5e7eb;       /* Tailwind gray-300 */
    background:#ffffff;             /* 흰색 */
    border-radius:8px;              /* 둥글게 */
    color:#111827;                  /* gray-900 */
    transition:all 0.15s ease;
}
/* 🔢 Number input spin 제거 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
}

textarea  {
    height:fit-content;
    padding:10px 12px;
    border:1px solid #e5e7eb;       /* Tailwind gray-300 */
    background:#ffffff;             /* 흰색 */
    border-radius:8px;              /* 둥글게 */
    color:#111827;                  /* gray-900 */
    transition:all 0.15s ease;
}
input:hover,
select:hover,
textarea:hover {
    border-color:#d1d5db;           /* gray-300 → gray-400 */
}
input:focus,
select:focus,
textarea:focus {
    border-color:#836042;           /* indigo-500 */
    box-shadow:0 0 0 3px rgba(99,102,241,0.15);
    outline:none;
}

input::placeholder,
textarea::placeholder {
    color:#9ca3af;                  /* gray-400 */
    opacity:1;
}
input:disabled,
select:disabled,
textarea:disabled {
    background:#f3f4f6 !important;    /* gray-100 */
    border-color:#e5e7eb !important;  /* gray-300 */
    color:#9ca3af !important;         /* gray-400 */
    cursor:not-allowed;
    opacity:0.7;
}
/* =============================
   SEARCH WRAP (Tailwind 스타일)
============================= */
.search {
    display:flex;
    align-items:center;
}

/* 🔎 검색 input */
.search input[type="search"] {
    height: fit-content;
    padding: 10px 12px;
    border:1px solid #e5e7eb;      /* gray-300 */
    border-right:0;
    border-radius:8px 0 0 8px;      /* 왼쪽만 둥글게 */
    background:#fff;
    font-size: 15px;
    color:#111827;                  /* gray-900 */
    transition:all 0.15s ease;
}

/* hover */
.search input[type="search"]:hover {
    border-color:#d1d5db;          /* gray-400 */
}

/* focus */
.search input[type="search"]:focus {
    border-color:#836042;          /* indigo-500 */
    box-shadow:0 0 0 3px rgba(99,102,241,0.15);
    outline:none;
}

/* placeholder */
.search input[type="search"]::placeholder {
    color:#9ca3af;
}

/* 🔘 검색 버튼 */
.search .btn-search {
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height: 49.19px;
    padding: 10px 12px!important;
    background:#fff;
    border:1px solid #e5e7eb;
    border-left:0;
    border-radius:0 8px 8px 0;      /* 오른쪽 둥글게 */
    color:#6b7280;                  /* gray-500 */
    cursor:pointer;
    transition:all 0.15s ease;
}

/* hover */
.search .btn-search:hover {
    background:#f3f4f6;             /* gray-100 */
    border-color:#d1d5db;
}

/* active/focus */
.search .btn-search:focus,
.search .btn-search:active {
    outline:none;
    border-color:#836042;
    box-shadow:0 0 0 3px rgba(99,102,241,0.15);
}

/* disabled */
.search .btn-search:disabled,
.search input[type="search"]:disabled {
    background:#f3f4f6;
    border-color:#e5e7eb;
    color:#9ca3af;
    cursor:not-allowed;
    opacity:0.6;
}


.select input[type="checkbox"]  {
    display:none
}

.select input[type="checkbox"] + label {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height: fit-content;
    padding: 10px 12px;
    border:1px solid #d1d5db; /* gray-300 */
    background:#fff;
    color:#374151; /* gray-700 */
    border-radius:8px;
    cursor:pointer;
    transition:all .15s ease;
    user-select:none;
}
.select input[type="checkbox"] + label:hover {
    border-color:#9ca3af; /* gray-400 */
    background:#f9fafb;   /* gray-50 */
}
.select input[type="checkbox"]:checked + label {
    background:#fff;        /* indigo-500 */
    border-color:#836042;
    color:#836042;
    font-weight:600;
}
.select input[type="checkbox"]:disabled + label {
    background:#e5e7eb;  /* gray-200 */
    border-color:#d1d5db;
    color:#9ca3af;       /* gray-400 */
    cursor:not-allowed;
    opacity:0.7;
}

.select input[type="radio"]  {
    display:none
}

.select input[type="radio"] + label {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height: fit-content;
    padding: 10px 12px;
    border:1px solid #d1d5db; /* gray-300 */
    background:#fff;
    color:#374151; /* gray-700 */
    border-radius:8px;
    cursor:pointer;
    transition:all .15s ease;
    user-select:none;
}
.select input[type="radio"] + label:hover {
    border-color:#9ca3af; /* gray-400 */
    background:#f9fafb;   /* gray-50 */
}
.select input[type="radio"]:checked + label {
    background:#fff;        /* indigo-500 */
    border-color:#836042;
    color:#836042;
    font-weight:600;
}
.select input[type="radio"]:disabled + label {
    background:#e5e7eb;  /* gray-200 */
    border-color:#d1d5db;
    color:#9ca3af;       /* gray-400 */
    cursor:not-allowed;
    opacity:0.7;
}

.circle input[type="radio"] {
    display:none;
}

/* 기본 버튼 */
.circle input[type="radio"] + label {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height: fit-content;
    padding: 10px 12px;
    border:1px solid #d1d5db; /* gray-300 */
    background:#fff;
    color:#374151; /* gray-700 */
    border-radius:8px;
    cursor:pointer;
    transition:all .15s ease;
    user-select:none;
}

/* hover */
.circle input[type="radio"] + label:hover {
    border-color:#9ca3af;
    background:#f9fafb;
}

/* checked */
.circle input[type="radio"]:checked + label {
    background:#fff;        /* indigo-500 */
    border-color:#836042;
    color:#836042;
    font-weight:600;
}

/* disabled */
.circle input[type="radio"]:disabled + label {
    background:#e5e7eb;
    border-color:#d1d5db;
    color:#9ca3af;
    cursor:not-allowed;
    opacity:0.7;
}

input[type="checkbox"] {
    margin: 0;
    appearance:none;
    -webkit-appearance:none;
    width:18px;
    height:18px;
    border:2px solid #d1d5db;     /* gray-300 */
    border-radius:4px;
    background:#fff;
    cursor:pointer;
    transition:all .15s ease;
    position:relative;
}

input[type="checkbox"]:hover {
    border-color:#9ca3af;         /* gray-400 */
}

input[type="checkbox"]:checked {
    background:#836042;           /* indigo-500 */
    border-color:#836042;
}

input[type="checkbox"]:checked::after {
    content:"";
    position:absolute;
    top:2px;
    left:6px;
    width:4px;
    height:8px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

input[type="checkbox"]:disabled {
    background:#e5e7eb;           /* gray-200 */
    border-color:#d1d5db;
    cursor:not-allowed;
    opacity:0.6;
}
input[type="radio"] {
    margin: 0;
    appearance:none;
    -webkit-appearance:none;
    width:18px;
    height:18px;
    border:2px solid #d1d5db;     /* gray-300 */
    border-radius:50%;
    background:#fff;
    cursor:pointer;
    transition:all .15s ease;
    position:relative;
}

/* hover */
input[type="radio"]:hover {
    border-color:#9ca3af;         /* gray-400 */
}

/* checked */
input[type="radio"]:checked {
    border-color:#836042;         /* indigo-500 */
}

/* 내부 점(●) */
input[type="radio"]:checked::after {
    content:"";
    position:absolute;
    top:3px;
    left:3px;
    width:8px;
    height:8px;
    background:#836042;          /* indigo-500 */
    border-radius:50%;
}

/* disabled */
input[type="radio"]:disabled {
    background:#e5e7eb;           /* gray-200 */
    border-color:#d1d5db;
    cursor:not-allowed;
    opacity:0.6;
}

/**/
textarea {
    width:100%;
    background-color:#FFFFFF;
    border:1px solid #c9c9c9;
    color:#1a1a1c;
    padding:10px;
}
.editor textarea {
    min-height: 300px;
}
/*탭디자인*/
.nav-tabs {
    margin-bottom:15px;
    display:flex;
    gap:20px;
}
.nav-tabs>li {
    border:0;
    border-radius:0;
    list-style:none;
}
.nav-tabs>li>a {
    border:0;
    width:100%;
    text-align:center;
    border-radius:0;
    color:#555;
    opacity:0.6;
    font-size:1.2em;
    padding:10px 0;
    display:block;
    background: #fff0!important;
}
.nav-tabs>li>a:hover {
    border:0;
    opacity:0.8;
    background:none;
}
.nav-tabs>li.active>a,.nav-tabs>li.active>a:focus,.nav-tabs>li.active>a:hover {
    border:0;
    border-bottom:2px solid #666;
    color:#666;
    font-weight:700;
    opacity:1;
}
.tab-contents {
    display:none;
}
.tab-contents.active {
    display:block;
}
@media screen and (max-width:550px) {
    .nav-tabs>li>a {
        font-size:1em;
        letter-spacing: -.5px
    }
}
/*alert디자인(swal2)*/
.swal2-popup {
    max-width:400px;
    width:calc(100% - 80px);
    min-width:280px;
    font-size:16px;
    padding:20px;
}
.swal2-title {
    font-size:1.15em;
    margin-bottom:10px;
}
.swal2-html-container {
    font-size:16px;
    line-height:1.4em;
    margin:0;
    word-break:keep-all;
}
.swal2-actions {
    width:100%;
    margin-top:20px;
    flex-wrap:nowrap;
    flex-direction:row-reverse;
}
.swal2-actions button {
    width:100%;
    font-weight:400;
    line-height:30px;
    height:30px;
    padding:0;
    border:0;
    margin:0 2px;
    border-radius:.25em!important;
}
.swal2-input {
    width: 100%;
    margin: 0;
}
.swal2-textarea {
    width: 100%;
    margin: 0;
}
.swal2-actions button:hover,.swal2-actions button:focus {
    outline:none !important;
    box-shadow:0 0 0 0 rgba(0,0,0,0) !important;
}
.swal2-styled.swal2-confirm {
    background:#444;
    color:#fff;
    border-radius:0px;
}
.swal2-styled.swal2-deny {
    background:#C4C4C4;
    color:#fff;
    border-radius:0px;
}
.swal2-actions:not(.swal2-loading) .swal2-styled {
    opacity:0.9;
}
.swal2-actions:not(.swal2-loading) .swal2-styled:hover {
    background-image:none;
    opacity:1;
}
.swal2-html-container select {
    margin: 8px 0;
}
/*분류태그*/

/*테이블*/
.table {
   overflow-y:auto;
   margin-bottom:20px;
   margin-top:10px;
   background:#fff0;
}
.table table {
    width:100%;
    border-spacing:0
}
.table th {
    padding:12px 10px;
    background:#f8f6f2;
    border-bottom:1px solid #5a472b!important;
    color:#5a472b;
    font-weight:700;
    font-size: 15px;
    vertical-align: middle!important;
}
 .table:has(thead) thead tr:first-child > *:first-child {border-top-left-radius:8px;}
.table:has(thead) thead tr:first-child > *:last-child {border-top-right-radius: 8px;}
.table:not(:has(thead)) tr:first-child > *:first-child {border-top-left-radius:8px;}
.table:not(:has(thead)) tr:first-child > *:last-child {border-top-right-radius: 8px;}
.table td {
    padding:12px 10px;
    background:#fff;
    border-bottom:1px solid #e8e5e0;
    color: #171717;
    vertical-align: middle!important;
}
.sortable-col {
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:4px;
}
.sortable-col::after {
    content:"▽";
    font-size:10px;
    color:#5a472b;
}
.sortable-col.asc::after {
    content:"▲";
    font-size:10px;
    color:#5a472b;
}
.sortable-col.desc::after {
    content:"▼";
    font-size:10px;
    color: #5a472b;
}
.table tr:nth-of-type(even) td {
    background:#fdfcfb
}
.table .bg2 td {
    color: #fff;background:#5a472b!important
}
.table .bg3 td {
    background:#e7dfd6!important
}
.table.table_mini th,.table.table_mini td {
    padding:6px
}
.table th:last-child,.table td:last-child {
    border-right:0
}
.table .txt-center {
    text-align:center
}
.table .txt-left {
    text-align:left
}
.table .txt-right {
    text-align:right
}
.table td>a {
    display:block
}
.table tr.fixed td {
    font-weight:700;
    background:#f4ece2;
    border-bottom:1px solid #e6d9c9;
    color:#5a472b
}
.table tr.collapse,.table tr.collapsing td,.table tr.collapse.in td {
    background: #fdfbf7
}
/*모달*/
.modal-backdrop.show {
    opacity:0.45 !important;
    background:rgba(0,0,0,0.45) !important;
}

.modal-open {
    overflow:unset!important;
    padding-right:0px!important;
}
.modal-open .modal {
    padding-right:0px!important;
}.modal-backdrop.show {
     opacity:0.35 !important;
     background:rgba(0,0,0,0.35) !important;
 }

.modal-dialog {
    margin:0 !important;
    display:flex;
    align-items:end;
    justify-content:center;
    min-height:100vh;
    padding:0;
    transform:none !important;
    width: 100%;
}

.modal-dialog.modal-wide .modal-content{ max-width:900px;  }
.modal-dialog.modal-middle .modal-content{ max-width:600px; }
.modal-dialog.modal-narrow .modal-content{ max-width:360px; }

.modal-content {
    border:0 !important;
    border-radius:20px 20px 0 0!important;
    background:#ffffff !important;
    box-shadow:0 20px 45px rgba(0,0,0,0.18) !important;
    overflow: hidden;
    width: 100%;
    max-width: 450px;
}
.modal-left {
    align-items:stretch !important;
    justify-content:flex-start !important;
}

.modal-left .modal-content {
    height:100vh;
    max-width:380px;
    border-radius:0 20px 20px 0 !important;
}

.modal-header {
    padding:24px 26px 10px 26px;
    background:#ffffff;
    border-bottom:0;
}
.modal-header:has(.close) {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal-right {
    align-items:stretch !important;
    justify-content:flex-end !important;
}

.modal-right .modal-content {
    height:100vh;
    max-width:380px;
    border-radius:20px 0 0 20px !important;
}
.modal-right.wide .modal-content {
    max-width:720px;
    width: 100%;
}
.modal-top {
    align-items:flex-start !important;
    justify-content:center !important;
}

.modal-top .modal-content {
    width:100%;
    border-radius:0 0 20px 20px !important;
}
.modal-center {
    align-items:center !important;
    justify-content:center !important;
}
@media(max-width:1024px){

    .modal-left .modal-content {
        border-radius:0 !important;
    }
    .modal-right .modal-content {
        border-radius:0px !important;
    }
}

.modal-center .modal-content {
    width:90%;
    max-width:420px;
    border-radius:20px !important;
}

.modal-title {
    font-size:18px;
    font-weight:700;
    color:#111827;
}

.modal-header .btn-close {
    padding:10px;
    margin:0;
    opacity:0.5;
    filter:invert(35%);
}

.modal-header .btn-close:hover {
    opacity:0.9;
}

.modal-body {
    padding:0 26px 20px 26px;
    font-size: 16px;
    color:#4b5563;
    line-height:1.5;
    max-height: 60vh;
    overflow: auto;
}

.modal-footer {
    padding:16px 26px;
    border-top:0;
    background:#ffffff;
    gap:12px;
    display: flex;
}
.modal-footer:before {
    display: none;
}
.modal-footer:after {
    display: none;
}

.modal-footer .btn {
    border-radius:10px !important;
    padding:10px 16px !important;
    font-size:15px !important;
    font-weight:600 !important;
    width: 100% !important;
}

.btn-primary {
    background:#5B482BFF !important;
    border-color:#5B482BFF !important;
    color:#fff !important;
}

.btn-primary:hover {
    background: #493e2d !important;
}

.btn-secondary {
    background:#f3f4f6 !important;
    color:#374151 !important;
    border:0 !important;
}

.btn-secondary:hover {
    background:#e5e7eb !important;
}

@media screen and (max-width:550px) {
    .modal-header { padding:20px 20px 10px 20px; }
    .modal-body { padding:0 20px 18px 20px; }
    .modal-footer { padding:14px 20px 22px 20px; }
}


/* border-pagination */
.b-pagination-outer {
    width:100%;
    margin:20px auto 0;
    text-align:center;
    overflow:hidden;
    display:flex
}
#border-pagination {
    margin:0 auto;
    padding:0;
    text-align:center
}
#border-pagination li {
    display:inline;
}
.b-pagination-outer {
    margin-top:30px;
    justify-content:center;
    padding:15px 0;
    background:#fff;
}
.b-pagination-outer #border-pagination li a {
    border-radius:20px;
    background:#f5f6f8;
    border:1px solid #e4e5e7;
    color:#555;
    padding:6px 12px;
    margin:0 3px;
    min-width:32px;
    text-align:center;
    display: block;
}
.b-pagination-outer #border-pagination li a.active {
    background:#1d1f27;
    border-color:#1d1f27;
    color:#fff;
    font-weight:600
}
.b-pagination-outer #border-pagination li a:hover:not(.active) {
    background:#e7e9ee
}
#border-pagination li a:hover:not(.active) {
    background: #ddd;
}
.table .b-pagination-outer {
    margin-top:0px;
    justify-content:center;
    padding:15px 0;
    background:#fff;
    border:1px solid #eee;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 -10px 15px #00000005;
    border-top:0
}
/*탭메뉴*/
ul.tabs {
    margin:0px;
    padding:0px;
    list-style:none;
}
ul.tabs li {
    margin-right:5px;
    background:none;
    display:inline-block;
    cursor:pointer;
}
ul.tabs li.current {
    font-weight:800;
}
.tab-content {
    display:block;
}
.tab-content.current {
    display:inherit;
}
.page-content {
    position:relative;
}
.empty {
    padding:20% 0!important;
    text-align:center;
    font-size:1em;
    opacity:0.8;
}
.empty.v2 {
    padding:10% 0!important;
}
.empty.v3 {
    padding:5% 0!important;
}
.empty img {
    height:50px;
    margin-bottom:10px;
    filter:grayscale(100%);
    opacity: 0.5;
}
/*loading*/
#loading {
    content:"";
    display:block;
    width:100%;
    height:100vh;
    background-color:rgba(255,255,255,0.9);
    position:fixed;
    left:0;
    top:0;
    z-index:9999;
}
#loading.pdf-load {
    background-color:rgba(255,255,255) !important;
}
#loading .box-wrap {
    position:fixed;
    top:45%;
    left:50%;
    transform:translate(-50%,-50%);
    display:block;
    text-align:center;
}
#loading .box {
    display:block;
    border:0;
    border-radius:0;
    position:relative;
    padding:0;
}
#loading img {
    width:75px;
    height:auto;
    margin:0 auto 5px auto;
}
#loading p {
    font-size:1.2em;
    line-height:1em;
    color:#2d2d2d;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:-0.5px;
}
#loading .box {
    width:100%;
    animation:scale 1s infinite ease-in-out;
    animation-direction:alternate;
}
@keyframes scale {
    0% {
        transform:scale(0.9)
    }
    100% {
        transform: scale(1)
    }
}
/* 툴팁 */
.tooltip-container {
    position:relative;
    display: inline-block;
}
.tooltip {
    visibility:hidden;
    background-color:#555;
    color:#fff;
    text-align:center;
    border-radius:6px;
    padding:5px;
    position:absolute;
    z-index:1;
    bottom:110%;
    /* 위치 조정 */
    left:50%;
    margin-left:-100px;
    opacity:0;
    transition:opacity 0.3s;
    width:200px;
}
.tooltip-container:hover .tooltip {
    visibility:visible;
    opacity:1;
}
.tooltip::after {
    content:"";
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-5px;
    border-width:5px;
    border-style:solid;
    border-color: #555 transparent transparent transparent;
}
/* START TOOLTIP STYLES */
[tooltip] {
    position: relative;
    /* opinion 1 */
}
/* Applies to all tooltips */
[tooltip]::before,[tooltip]::after {
    text-transform:none;
    /* opinion 2 */
    font-size:12px;
    /* opinion 3 */
    font-weight:normal;
    line-height:1;
    user-select:none;
    pointer-events:none;
    position:absolute;
    display:none;
    opacity:0;
}
[tooltip]::before {
    content:'';
    border:5px solid transparent;
    /* opinion 4 */
    z-index:2;
    /* absurdity 1 */
}
[tooltip]::after {
    content:attr(tooltip);
    /* magic! */
    /* most of the rest of this is opinion */
    font-family:Helvetica,sans-serif;
    text-align:center;
    /* Let the content set the size of the tooltips but this will also keep them from being obnoxious */
    min-width:3em;
    max-width:21em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    padding:1ch 1.5ch;
    border-radius:.3ch;
    box-shadow:0 1em 2em -.5em rgba(0,0,0,0.35);
    background:#333;
    color:#fff;
    z-index:1;
    /* absurdity 2 */
}
.tooltip_y[tooltip]::after {
    color: #fff7f5
}
/* Make the tooltips respond to hover */
[tooltip]:hover::before,[tooltip]:hover::after {
    display: block;
}
/* don't show empty tooltips */
[tooltip='']::before,[tooltip='']::after {
    display: none !important;
}
/* FLOW:UP */
[tooltip]:not([flow])::before,[tooltip][flow^="up"]::before {
    bottom:100%;
    border-bottom-width:0;
    border-top-color:#333;
}
[tooltip]:not([flow])::after,[tooltip][flow^="up"]::after {
    bottom:calc(100%+5px);
}
[tooltip]:not([flow])::before,[tooltip]:not([flow])::after,[tooltip][flow^="up"]::before,[tooltip][flow^="up"]::after {
    left:50%;
    transform: translate(-50%,-.5em);
}
/* FLOW:DOWN */
[tooltip][flow^="down"]::before {
    top:100%;
    border-top-width:0;
    border-bottom-color:#333;
}
[tooltip][flow^="down"]::after {
    top:calc(100%+5px);
}
[tooltip][flow^="down"]::before,[tooltip][flow^="down"]::after {
    left:50%;
    transform: translate(-50%,.5em);
}
/* FLOW:LEFT */
[tooltip][flow^="left"]::before {
    top:50%;
    border-right-width:0;
    border-left-color:#333;
    left:calc(0em - 5px);
    transform:translate(-.5em,-50%);
}
[tooltip][flow^="left"]::after {
    top:50%;
    right:calc(100%+5px);
    transform: translate(-.5em,-50%);
}
/* FLOW:RIGHT */
[tooltip][flow^="right"]::before {
    top:50%;
    border-left-width:0;
    border-right-color:#333;
    right:calc(0em - 5px);
    transform:translate(.5em,-50%);
}
[tooltip][flow^="right"]::after {
    top:50%;
    left:calc(100%+5px);
    transform: translate(.5em,-50%);
}
/* KEYFRAMES */
@keyframes tooltips-vert {
    to {
        opacity:.9;
        transform:translate(-50%,0);
    }
}
@keyframes tooltips-horz {
    to {
        opacity:.9;
        transform: translate(0,-50%);
    }
}
/* FX All The Things */
[tooltip]:not([flow]):hover::before,[tooltip]:not([flow]):hover::after,[tooltip][flow^="up"]:hover::before,[tooltip][flow^="up"]:hover::after,[tooltip][flow^="down"]:hover::before,[tooltip][flow^="down"]:hover::after {
    animation:tooltips-vert 300ms ease-out forwards;
}
[tooltip][flow^="left"]:hover::before,[tooltip][flow^="left"]:hover::after,[tooltip][flow^="right"]:hover::before,[tooltip][flow^="right"]:hover::after {
    animation:tooltips-horz 300ms ease-out forwards;
}
.block[tooltip]::after,.block[tooltip]::before {
    display:inherit;
    opacity:0.9;
    animation: tooltips-vert 300ms ease-out forwards;
}
/* TOOLTIP */
[data-tooltip] {
    position:relative;
}
[data-tooltip]:before,[data-tooltip]:after {
    visibility:hidden;
    opacity:0;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    white-space:nowrap;
    transition:all .2s ease;
    font-size:11px;
    font-family:dotum;
    letter-spacing:-1px;
}
[data-tooltip]:before {
    content:attr(data-tooltip);
    line-height:1em;
    position:absolute;
    top:-18px;
    padding:5px 10px;
    border-radius:5px;
    color:#fff;
    background:#484951;
    box-shadow:0 3px 8px rgba(165,165,165,0.5);
}
[data-tooltip]:after {
    content:'';
    border-left:5px solid transparent;
    top:2px;
    border-right:5px solid transparent;
    border-top: 5px solid #484951;
}
/*접었다펼치기(리뷰)*/
details {
}
details>summary {
    cursor:pointer;
    transition:background 0.5s;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px
}
details>summary:after {
    content:"\f078";
    font-family:"Font Awesome 6 Pro";
    display:block;
}
details>summary::-webkit-details-marker {
    transform:rotate3d(0,0,1,90deg);
    transition:transform 0.25s;
}
details[open]>summary::-webkit-details-marker {
    transform:rotate3d(0,0,1,180deg);
}
details[open]>summary:after {
    content:"\f077";
}
details[open]>summary ~ * {
    animation:reveal 0.5s;
}
.details {
    padding:14px;
    border-top:1px dashed #DBDBDB;
}
@keyframes reveal {
    from {
        opacity:0;
        transform:translate3d(0,0px,0);
    }
    to {
        opacity:1;
        transform:translate3d(0,0,0);
    }
}
@media screen and (max-width:992px) {
    details>summary {
        padding:10px 0px;
    }
    .details {
        padding: 10px 0px;
    }
}
/*슬라이드*/
.swiper-button-next,.swiper-button-prev {
    background:#ffffff;
    opacity:0.9;
    width:30px;
    height:30px;
    box-shadow:0 0 10px #00000015
}
.swiper-button-next:after,.swiper-button-prev:after {
    color:#000;
    opacity:0.65;
    font-size:1.2em;
}
.button-right {
    position:absolute;
    right:0;
    bottom:0px;
    display:flex;
    width:60px;
}
.button-right .swiper-button-next,.button-right .swiper-button-prev {
    position:relative;
    left:0;
    right: 0;
}
/*toast*/
.toast_layer {
    visibility:hidden;
    min-width:250px;
    width:max-content;
    max-width:90%;
    background-color:#fff;
    color:#666;
    border:4px solid #444;
    text-align:center;
    border-radius:2px;
    padding:16px 26px;
    position:fixed;
    z-index:9999;
    font-weight:600;
    box-shadow:0 5px 10px #00000056;
    left:50%;
    bottom:50%;
    transform:translateX(-50%);
    font-size:1.2em;
}
.toast_layer.show {
    visibility:visible;
    -webkit-animation:fadein 0.5s,fadeout 0.5s 2.5s;
    animation:fadein 0.5s,fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
    from {
        bottom:45%;
        opacity:0;
    }
    to {
        bottom:50%;
        opacity:1;
    }
}
@keyframes fadein {
    from {
        bottom:45%;
        opacity:0;
    }
    to {
        bottom:50%;
        opacity:1;
    }
}
@-webkit-keyframes fadeout {
    from {
        bottom:50%;
        opacity:1;
    }
    to {
        bottom:45%;
        opacity:0;
    }
}
@keyframes fadeout {
    from {
        bottom:50%;
        opacity:1;
    }
    to {
        bottom:45%;
        opacity:0;
    }
}
.rotate-up {
    transform:rotate(0deg);
    transition:transform 0.3s ease;
}
.rotate-down {
    transform:rotate(180deg);
    transition: transform 0.3s ease;
}
/*브라우저 상하단이동버튼*/
#gobtn {
    position:fixed;
    left:1.8em;
    bottom:1.6rem;
    z-index:9999;
}
.gohd,.goft {
    opacity:0.5;
    width:40px;
    height:40px;
    background:#ffffff;
    z-index:9999;
    border:1px solid #858585;
    position:relative;
    transition:all 0.5s;
    box-shadow:0 0 3px RGBA(0,0,0,0.1);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:3px;
    text-align:center;
    border-radius:50%;
}
.gohd {
    opacity:0!important;
    display: none!important;
    transition:all 0.3s ease-in-out,opacity 0.3s ease-in-out;
}
body:has(.on) .gohd {
    opacity:0.5!important;
    display: flex!important;
    transition:all 0.3s ease-in-out,opacity 0.3s ease-in-out;
}
.gohd:hover,.goft:hover {
    background:#555;
    border:1px solid #333;
    opacity:1;
    color: #fff;
}
/*에러페이지*/
body.error-wrap {
    height:100%;
    background:#fafafa;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    color:#777;
    font-weight:300;
}
.error-wrap .box {
    max-width:1024px;
    margin:5rem auto;
    padding:2rem;
    background:#fff;
    text-align:center;
    border:1px solid #efefef;
    position:relative;
}
.error-wrap h1 {
    letter-spacing:normal;
    font-size:2.5em;
    margin-top:10px;
    margin-bottom:10px;
    color:#222;
}
.error-wrap p {
    margin-top:1.5em;
    font-size:1.2em;
    margin-bottom:1.5em;
}
.error-wrap i {
    font-size:3em;
    margin-bottom:16px;
    color:#ff0707;
}
.error-wrap button {
    height:40px;
    all:unset;
    display:inline-block;
    text-align:center;
    padding:7px;
    line-height:1em;
    font-size:18px;
    cursor:pointer;
    font-weight:800;
    position:relative;
    box-sizing:border-box;
    margin:1px;
    background-color:#000000;
    color:#fff;
    border:1px solid #000000;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.16);
}
/**/
/**/
.mb-wrap {
    width:100%;
    height:100vh;
    position:relative;
    display:table;
}
.mb-wrap .signup {
    margin: 50px auto;
    max-width:700px;
    width:100%;
    padding:30px;
    border-radius:20px;
    background: #fff;
}
.mb-wrap .login {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    padding:30px;
    max-width:500px;
    width:100%;
    border-radius:20px;
    background: #fff;
}
.mb-wrap .signup .title {
    margin-top: 15px;
    border-bottom: 1px solid #f4f2ee;
}
.mb-wrap .signup .form_wrap > div{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mb-wrap .signup .form_wrap dd{
    background: #f4f2ee;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 5px;
}
.mb-wrap .signup .form_wrap > div > label{
    margin-bottom: -5px;
}
.mb-wrap input:not([type="checkbox"]) {
    width:100%;
}
.mb-wrap hr {
    display:block;
    margin:0;
    border:0;
    border-bottom:1px solid #dddddd;
    width:100%
}
.mb-wrap span {
    white-space:nowrap;
    margin:0 10px;
}
.mb-wrap ul {
    margin:10px 0;
}
.mb-wrap .login a,.mb-wrap .login button,.mb-wrap .login input {
    margin-top:5px;
}
.mb-wrap .logo {
    text-align:center;
    vertical-align:middle;
    padding:50px 0;
}
.mb-wrap .logo img {
    height:40px
}
.mb-wrap p {
    font-size:0.9em;
    margin-bottom:10px;
    opacity:0.5;
}
.form-wrap dt {
    color:#7b7b7b;
    margin:2px 0 4px 0;
    display:block;
    font-size:1.1em;
}
.form-wrap dd:not(:last-child) {
    margin-bottom:8px;
}
.form-wrap dd.grid {
    gap:4px;
}
.form-wrap select {
    width:100%;
    margin-bottom:0;
}
.form-wrap .select.grid {
    gap:4px;
}
.form-wrap .grid select {
    margin-bottom:0;
}
@media screen and (max-width:768px) {
    .mb-wrap .signup {
        width:90%;
    }
    .mb-wrap .login {
        width:90%;
    }
}
hr {
    margin-top:20px;
    margin-bottom:20px;
    border:0;
    border-top: 1px solid #eee;
}
.faq-wrap {
    padding:20px
}
.faq-search {
    margin-bottom:15px
}
.faq-search-input {
    flex:1;
    height:40px;
    padding:0 10px;
    border:1px solid #ddd;
    border-radius:6px
}
.faq-btn-search {
    height:40px;
    padding:0 15px
}
.faq-btn-reset {
    height:40px;
    padding:0 15px;
    margin-left:5px
}
.faq-list {
    border-top:1px solid #ddd
}
.faq-empty {
    text-align:center;
    padding:40px 0;
    color:#999
}
.faq-item {
    border-bottom:1px solid #eee
}
.faq-question {
    width:100%;
    background:none;
    border:0;
    text-align:left;
    padding:15px 5px;
    cursor:pointer;
    font-size:16px
}
.faq-title {
    flex:1;
    margin-left:10px
}
.faq-arrow {
    transition:0.25s;
    border:solid #333;
    border-width:0 2px 2px 0;
    display:inline-block;
    padding:4px;
    transform:rotate(45deg)
}
.faq-arrow.active {
    transform:rotate(-135deg)
}
.faq-answer {
    padding:15px;
    background:#fafafa;
    border-top:1px solid #eee
}
.txt-q {
    color:#b45f00;
    font-weight:bold;
    margin-right:10px
}
.txt-a {
    color:#295f98;
    font-weight:bold;
    margin-right:10px
}
.faq-content {
    margin-bottom:10px;
    line-height:1.6;
    font-size:16px
}
.faq-info {
    font-size:13px;
    color:#888;
    margin-top:5px
}
@media(max-width:768px) {
    .faq-search {
        flex-wrap:wrap
    }
    .faq-btn-search,.faq-btn-reset {
        margin-top:5px
    }
}
#board {
    padding:0px
}
#board .btn-wrap {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-bottom:20px
}
#board .board-view {
    background:#fff;
    border:1px solid #e9e4dd;
    border-radius:12px;
    padding:25px
}
#board .board-view .box-line {
    border-top:1px solid #f0ede9;
    padding-top:20px
}
#board .board-view .title strong {
    font-size:22px;
    line-height:1.4;
    color:#3c3327;
    font-weight:600
}
#board .board-view .title .icon-line {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 8px;
    height:24px;
    font-size:12px;
    border:1px solid #bfa98c;
    border-radius:4px;
    color:#856c3d;
    margin-right:4px
}
#board .board-view .info {
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    margin-top:10px;
    font-size: 15px;
    color:#8c857a
}
#board .board-view .info p {
    display:inline-block;
    margin:0 4px 0 4px;
    color:#5a4b36
}
#board .board-view .view {
    margin-top:25px;
    font-size:16px;
    line-height:1.7;
    color:#3d3a36;
    word-break:break-all;
    min-height:100px
}
#board .board-view .attached-file {
    margin-top:30px;
    padding-top:20px;
    border-top:1px solid #f0ede9
}
#board .board-view .attached-file label {
    display:block;
    font-weight:600;
    color:#5a4b36;
    margin-bottom:8px
}
#board .board-view .attached-file a {
    display:inline-block;
    margin-bottom:6px;
    font-size: 15px;
    color:#3c3327;
    text-decoration:none
}
#board .board-view .attached-file a i {
    margin-right:5px;
    color:#856c3d
}
.btn, a.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 14px;
    height:40px;
    border-radius:6px;
    font-size: 15px;
    cursor:pointer
}
.btn-line {
    background:#fff;
    border:1px solid #c9c4ba;
    color:#5a4b36
}
.btn-gray {
    background:#f1efeb;
    border:1px solid #dcd7ce;
    color:#5a4b36
}
.btn-brown {
    background:#856c3d;
    border:1px solid #745c32;
    color:#fff
}
.btn i {
    margin-left:3px
}
@media(max-width:768px) {
    #board .board-view {
        padding:18px
    }
    #board .board-view .title strong {
        font-size:19px
    }
    #board .board-view .info {
        flex-direction:column;
        gap:6px;
        font-size:13px
    }
    #board .btn-wrap {
        justify-content:flex-start
    }
}
#board .answer {
    margin-top:40px;
    border-top:1px solid #e9e4dd;
    padding-top:25px
}
#board .answer dl {
    margin:0;
    padding:15px 0;
    border-bottom:1px solid #f0ede9
}
#board .answer dl:last-child {
    border-bottom:none
}
#board .answer dt {
    display:flex;
    align-items:center;
    gap:10px;
    font-size: 16px;
    color:#5a4b36;
    font-weight:600
}
#board .answer dt i {
    color:#856c3d;
    font-size: 15px;
}
#board .answer dt strong {
    color:#3c3327;
    font-weight:600
}
#board .answer .edit-btn,#board .answer .delete-btn {
    margin-left:auto;
    padding:0 12px;
    height:32px;
    font-size:13px
}
#board .answer .comment-form {
    margin-top:15px
}
#board .answer .answer-write {
    margin-top:10px;
    display:flex;
    flex-direction:column;
    gap:10px
}
#board .answer .answer-write textarea {
    width:100%;
    height:110px;
    border:1px solid #ccc;
    border-radius:6px;
    padding:10px;
    font-size: 15px;
    line-height:1.5;
    color:#333
}
#board .answer .answer-write button {
    align-self:flex-end;
    height:36px;
    padding:0 14px;
    border-radius:6px;
    font-size: 14px
}.grade-icon{
     display:inline-flex;
     align-items:center;
     white-space:nowrap;
     position:relative;
 }
.grade-icon:before{
    font-family:"Font Awesome 6 Pro Solid";
    font-weight:500;
    padding:4px 12px;
    font-size:13px;
    border-radius:4px;
    color:#fff;
    gap:6px;
    line-height:1;
}

.grade-1:before{
    content:"\e256"; /* FA 왕관 */
    color:#2c3e50;
}

.grade-2:before{
    content:"\e257"; /* 사용자 의사 */
    color:#8e44ad;
}

.grade-3:before{
    content:"\e258"; /* 건물-의료 */
    color:#2980b9;
}

.grade-4:before{
    content:"\e259"; /* 사용자 */
    color:#27ae60;
}

.grade-5:before{
    content:"\e25a"; /* 사용자 그룹 */
    color:#7f8c8d;
}

.mari-auto {
    margin-right:auto!important;
}
.male-auto {
    margin-left:auto!important;
}

/* 페이지네이션 가로 정렬 */
#border-pagination {
    text-align: center !important;
}

#border-pagination li {
    display: inline !important;
}

#border-pagination li a {
    display: inline-block !important;
}