@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    /*unicode-range: U+AC00-D7A3, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E, U+0041-005A, U+0061-007A;*/
    font-style: normal;
}
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');

/* 초기화 */
*{font-family: 'SUIT','Pretendard-Regular', 'Montserrat', 'Noto Sans KR', sans-serif; box-sizing: border-box}
html {overflow-y:scroll;}
body {margin:0 auto; padding:0!important; font-size: 13px; /*font-size:0.677vw;*/ letter-spacing:0;
    line-height:1.6em; color:#1a1a1c; background:#ffffff; min-width: 280px; font-weight:400; word-break:keep-all;}
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}
hr {display:none}
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: #2A2B6A;
    border-radius: 10px;
    background-clip: padding-box;
    border: 1px solid transparent;
}
::-webkit-scrollbar-track {
    background-color: #e7e7e7;
    border-radius: 10px;
}

/*설정*/
h2{font-size:1.8em; font-weight: 600; color: #232323; margin-bottom:30px;}
h2:before{width: 24px!important; height: 24px!important; margin-right: 10px!important;}
h3{font-size: 1.4em; font-weight: 600; margin:4px 0 20px 0; color: #0046ac;}
h4{font-size:1.2em; margin: 4px 0 12px 0; font-weight: 600; color: #232323;}
h5{font-size: 1.8em; line-height: 1.6em; font-weight: 600;}

a, a:link, a:visited {text-decoration:none; cursor: pointer;}
a:hover, a:focus, a:active {text-decoration:none; color: #120030;}
.panel {    margin-bottom: 20px;    background-color: none;    border: none;    border-radius: 0px;    -webkit-box-shadow:none;    box-shadow: none;}
.flex {display: flex!important;}
.flexwrap {flex-wrap: wrap}
.flex.jc-sb {justify-content: space-between}
.flex.jc-c {justify-content: center}
.flex.start {justify-content: flex-start}
.flex.end {justify-content: flex-end}
.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!important;}
.gap10{gap: 10px;}
.gap20{gap: 20px;}
.gap30{gap: 30px;}
.gap40{gap: 40px;}
.mt10{margin-top: 10px;}
.mt25{margin-top: 25px;}
.mb25{margin-bottom: 25px;}
.mb0{margin-bottom: 0px!important;}
.w50 {width: 50% !important}
.w100 {width: 100%!important;}
.wfit {width: fit-content!important;}
.w50px {width: 50px!important;}
.w100px {width: 100px!important;}
.w150px {width: 150px!important;}
.w200px {width: 200px!important;}
.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;}
.mari-auto {margin-right: auto!important;}
.male-auto {margin-left: auto!important;}
.search {display: flex; display: inline-block}
.search select{margin-bottom: 0;}

.sticky{position: -webkit-sticky; position: sticky; top: 100px;}

.bg{background: #F4F5F7;}
.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: 1300px; 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%;}
.cut3{overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; width:100%;}
.b0 {border: 0px!important;}

.cursor {cursor: pointer;}

/*아이콘*/
.icon{font-size: 12px; padding:5px 10px; border-radius: 4px; line-height: 1em; font-weight: 600; display: inline-block;
    /*display: flex;justify-content: center;align-items: center;*/}
/*.icon-color{background: #ffe6e6; border: 1px solid #f51d33; color: #f51d33;}*/
.icon-red1{background:#ff858b; color: #fff; border-radius: 50px; min-width: 85px; text-align: center; line-height: 20px;}
.icon-pink{background:#ff5b90; color: #fff; border-radius: 50px; min-width: 85px; text-align: center; line-height: 20px;}
.icon-red{background: #FF0606 ; color: #fff;}
.icon-blue{background: #d7d9ff; color: #3942e0;}
.icon-sky{background:#3AC6FF25; color: #3AC6FF!important;}
.icon-green{background: #84B77F; color: #fff;}
.icon-black{background: #232323 ; color: #fff;}
.icon-gray{background: #ECECEC ; color: #828282;}
.icon-gray3{background: #f3f3f3; color: #727272;}
.icon-gray2{background: #333333 ; color: #ffffff;}
.icon-grayblue{background-color:#DFE1E7; color: #405472;}
.icon-line{border: 1px solid #70707040; 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: #f51d33;}
.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: #f51d33; margin-top: 6px;}
.icon.circle.gray{filter:grayscale(100%); opacity: 0.6;}
.icon-mini{font-size: 9px; padding:2px 4px; font-weight: 700; letter-spacing: -0.5px; margin-left: 6px;}

/*원활주의긴급*/
.i_green,
.i_orange,
.i_red,
.i_blue,
.i_gray,
.i_black{display: flex; align-items: center; margin-right: 6px;}
.i_green:before,
.i_orange:before,
.i_red:before,
.i_blue:before,
.i_gray:before,
.i_black:before{display: inline-block; content: ""; width:14px; height: 14px; border-radius: 50%; background-color: #eee; vertical-align: middle; margin-right: 4px;}
.i_green:before{background-color: #84b77f;}
.i_orange:before{background-color: #ffdd00;}
.i_red:before{background-color: #ff6c61;}
.i_black:before{background-color: #747474;}
.i_blue:before{background-color: #007bff;}
.i_gray:before{background-color: #dddddd;}

/*버튼*/
button:disabled,
button:disabled:hover{filter:saturate(0); background: #33333315; color:#33333375; border-color: #dddddd;}

.btn{height: 40px; background: #fff; display: inline-block ; text-align:center;
    border-radius: 4px; border: 1px solid transparent; width: max-content; word-break: keep-all;
    padding: 12px 24px; line-height: 1em; cursor: pointer; font-weight: 600; font-size: 13px;
    position: relative; box-sizing: border-box; margin-bottom: 4px; vertical-align: middle; white-space: nowrap;}
.btn:hover{transition: all 0.3s;}

.btn-none{border: 0; background: transparent; font-size: 11px;}
.btn-mini{padding: 6px 14px; height: auto!important; font-size: 11px; margin: 2px}
.btn-mini2{padding: 4px 6px; height: auto!important; font-size: 9px; margin: 2px}
.btn-small{padding: 0px 16px; height: 30px;}
.btn-small2{padding: 10px 25px;}
.btn-middle{width: 50%; max-width: 400px; padding: 15px 0; font-size: 1.15em; font-weight: 600; height: auto!important; display: block; margin: 0 auto;}
.btn-wide{width: 100%; padding: 10px 0; font-size: 1.05em; height: auto!important;}
.btn-large{width: 100%; padding: 15px 0; font-size: 1.15em; font-weight: 600; height: auto!important;}

.btn img{height: 16px; vertical-align: middle; margin-top: -3px}

a.btn-green,
.btn-green{background-color: #1e7145; color: #fff;}
a.btn-green:hover,
.btn-green:hover{background-color: #0f462a; color: #fff;}

a.btn-blue,
.btn-blue{background-color: #0046AC; color: #fff;}
a.btn-blue:hover,
.btn-blue:hover{background-color: #003481; color: #fff;}

a.btn-blueline,
.btn-blueline{background-color: #fff; border-color: #0046AC56; color: #0046AC;}
a.btn-blueline:hover,
.btn-blueline:hover{background-color: #fff; border-color: #0046AC56; color: #0046AC;}

a.btn-darkblue,
.btn-darkblue{background-color: #2A2B6A; color: #fff;}
a.btn-darkblue:hover,
.btn-darkblue:hover{background-color: #2A2B6A; color: #fff;}


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: #f51d33;}
a.btn-white2:hover,
.btn-white2:hover{background-color: #f51d33; 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: #484951; 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 #616161; opacity: 0.8;}
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: #DFE1E7; color: #2A2B6A}
a.btn-gray:hover,
.btn-gray:hover{background-color: #DFE1E7; color: #2A2B6A;}

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: #E8E8E8!important; color: #C8C8CB!important;}
a.btn-gray3:hover,
.btn-gray3:hover{background-color: #1a1a1c!important;}

a.btn-grayblue,
.btn-grayblue{background-color: #2A2B6A40!important; color: #fff!important;}
a.btn-grayblue:hover,
.btn-grayblue:hover{background-color: #2A2B6A40!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 {height: 40px; line-height: unset!important;}
.mb_wrap .btn-wrap{ text-align: center; padding:28px 0;}
.btn-992 {display: none}

@media screen and (max-width: 992px) {
    .btn-992 {display: inline-block}
}

/*댓글*/
td span.new {background: #c30500;    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;}
/*상품 뱃지*/
span.pdt.newpdt {background: #c30500;    color: #fff;    font-size: 0.7em;    padding: 2px 4px;    border-radius: 4px;    margin-right: 5px;}
span.pdt.subpdt {background: #484951;    color: #fff;    font-size: 0.7em;    padding: 2px 4px;    border-radius: 4px;    margin-right: 5px;}
span.pdt.soldout {border:1px solid #c30500;    color: #f51d33;    font-size: 0.7em;    padding: 2px 4px;    border-radius: 4px;    margin-right: 5px;}

/*글자*/
.txt-color> a,
.txt-color{color: #f51d33!important;}
.txt-color2> a,
.txt-color2{color: #f1876e;}
.txt-blue> a,
.txt-blue { color: #0046ac;}
.txt-green> a,
.txt-green { color: #0f7e04;}
.txt-blue2> a,
.txt-blue2 { color: #a8bfff;}
.txt-darkblue> a,
.txt-darkblue { color: #405472;}
.txt-sky> a,
.txt-sky { color: #4aeaff;}
.txt-pink> a,
.txt-pink{color:#ff5b90;}
.txt-yellow> a,
.txt-yellow { color: #e6af53;}
.txt-brown> a,
.txt-brown { color: #95711D;}
.txt-red > a,
.txt-red { color: #ff6851;}
.txt-gray > a,
.txt-gray{color: #AFAFAF!important;}
.txt-gray2 > a,
.txt-gray2{color: #4b4b4b!important;}
.txt-dark > a,
.txt-dark{color: #7D7D7D;}
.txt-black > a,
.txt-black{color: #232323!important;}
.txt-white > a,
.txt-white{color: #ffffff!important;}
.txt-bold { font-weight: 600!important;}
.txt-bold2 { font-weight: 800!important;}
.txt-thin { font-weight: 400!important;}
.txt-under {text-decoration: underline}
.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;}

.text_center{text-align: center;}
.text_left{text-align: left;}
.text_right{text-align: right;}


.price{font-size: 1.4em; font-weight: 600;}
.title{font-size: 1.4em; font-weight: 600;}

.subtitle{font-size: 1.2em; font-weight: 600;}
span.number{display: inline-block; width: 20px; line-height: 20px; text-align: center; font-weight: 600; background: #ffe6e6; color: #f51d33; border-radius: 50%;}

/*박스디자인*/
.box{border: 1px solid #E1E1E1; padding: 14px 18px; border-radius: 10px;}
.box-sdw{    box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.06);    background-color: #FFFFFF; padding: 14px 18px;}
.box-white{background: #fff; border-radius: 10px;}
.box-white2{background: #fff;padding: 14px 18px;}
.box-color{border:0; background: #fff7f7; padding: 14px 18px;}
.box-line{border:0; background: #fff; border: 1px solid #D9D9D9; border-radius: 6px;}
.box-line2{border:0; background: #fff; border:1px solid #f1ecec; padding: 14px 18px;}
.box-color2{border:0; background: #ffe6e650; padding: 24px 24px; color: #232323;}
.box-color3{border:0; background: #c30500; padding: 35px 40px;}
.box-colorline{border:1px solid #c30500; background: #fff; padding: 20px;}
.box-colorline2{border:1px solid #c3050089; background: #ffe6e6; padding: 25px 33px;}
.box-under{border-bottom: 1px solid #DBDBDB; padding: 20px 40px;}
.box-gray{background-color: #f4f5f7; border-radius: 6px;}

.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; box-shadow: 0px 0px 6px #F3B92F29; border: 1px solid #FFC06D;}
.box-yellow .fa-triangle-exclamation{color: #FFCA7B;}
.box-red{background: #FFEFEF 0% 0% no-repeat padding-box;box-shadow: 0px 3px 6px #FF777729;border: 1px solid #FF816D;opacity: 1;}
.box-blue{background: #eff4ff20;border: 1px solid #eff4ff;opacity: 1;}
.box-red .fa-triangle-exclamation{color: #FF7B7B;}

.box-radius{border-radius:10px; }

.list_line li{border-bottom: 1px solid #DBDBDB; padding: 20px 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;}

/*폼형태*/
input{    border-radius: 6px; height: 40px;  background-color: #FFFFFF; border: 1px solid #E1E1E1; color: #1a1a1c; padding: 12px 16px; display: block; font-size: 1em!important; line-height: 1.6em!important; opacity: 1; width: 100%; margin-bottom: 8px;}
input:disabled,
input:read-only {   background-color: #E8E8E8; border: 0px ;}
textarea {    border-radius: 6px;background-color: #FFFFFF; border: 1px solid #c9c9c9; color: #1a1a1c; padding: 10px; display: block; font-size: 1em!important; line-height: 1.6em!important; opacity: 1; margin-bottom: 8px; width: 100%;}
textarea:disabled,
textarea:read-only {   background-color: #f3f3f3; border: 0px ;}
/*input:last-child{margin-bottom: 0;}*/
input::placeholder{opacity: 0.8;}

/*참고*/
.ref{margin-bottom: 12px; line-height: 1.8em; color: #7b7b7b;}

.number_controller{/* border: 1px solid #C8C8CB; */border-radius: 0px;width: auto;display: inline-block;padding: 2px 0px;}
.number_controller button{all:unset;background: #F1F1F1;color: #23232356;text-align: center;width: 25px;height: 25px; cursor: pointer}
.number_controller input[type=number]{all:unset;width: max-content;max-width: 30px;text-align: center;-moz-appearance: textfield;}
.number_controller input[type=number]::-webkit-inner-spin-button,
.number_controller input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none;margin: 0;}
.delete{all: unset; width: 20px; height: 20px; text-align: center;}

/*파일업로드*/
.filebox .upload-name {margin-bottom: 5px;}
.filebox label {margin-bottom: 12px;}
.filebox input[type="file"] {position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0; }


select {margin-bottom: 8px;padding: 10px 16px; margin-right:5px;border-radius: 6px;width: max-content;color: #1a1a1c;
    height: 40px;background: #FFFFFF; border: 1px solid #E1E1E1; font-weight: 600;}
select.purple {margin-bottom: 0px;padding: 10px 5px; margin-right:5px;border-radius: 0;width: max-content;
    height: 40px;background: transparent; border: 0; color: #f51d33; font-size: 1.1em; font-weight: 600;}
select.purple option{color: #1a1a1c;}
select:disabled,
select[readonly] {   background-color: #f3f3f3; border: 0px ;}
input[type="search"] {width: 150px;    height: 40px;    background: #FFFFFF 0% 0% no-repeat padding-box;    border: 1px solid #c9c9c9;    border-right: 0;display: inline-block; margin-bottom: 0; margin-right: 0!important; border-radius: 6px 0 0 6px;}
.btn-search {width: 40px;    height: 40px;    background: #FFFFFF 0% 0% no-repeat padding-box;    border: 1px solid #c9c9c9;    border-left: 0;display: inline-block;    padding: 0 10px; border-radius: 0 6px 6px 0;}

.area_filter .total{width: max-content; white-space: nowrap; margin-right: 15px;}

/*@media screen and (max-width: 330px){
    select {width: 50px}
    input[type="search"] {width: 100px}
}*/

dl.form_wrap{display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 4px 25px;}
.form_wrap dt{font-weight: 600;}
.form_wrap dt,
.form_wrap dd{line-height: 40px;}
.form_wrap input{margin-top: 4px;}
.form_wrap select{width: 100%;}

    /*검색 자동완성*/
.search_wrap{position: relative;}
.search_wrap input[type=search]{width: 100%;}
.search_wrap .sch_field{display: none; z-index: 4; margin-top: 20px;}
.search_wrap table{border-radius: 0; border: 0; border-top: 1px solid #C0D0EA75}
.search_wrap .sch_field_tb{    width:100%;       border-collapse: inherit;}
.search_wrap .sch_field_tb tr{    cursor:pointer;}
.search_wrap .sch_field_tb tr:nth-child(odd){    cursor:pointer;    background-color: transparent;}
.search_wrap .sch_field_tb tr:hover {    background-color: #F0F4FA;}
.search_wrap .sch_field_tb th{padding:10px 5px; text-align: left; border-bottom: 1px solid #C0D0EA75; text-align: center;}
.search_wrap .sch_field_tb td{padding:10px 5px; text-align: center; border-bottom: 1px solid #C0D0EA75}


/*@media screen and (max-width: 500px){
    .search_wrap .sch_field {        overflow-y: auto;}
    .search_wrap .sch_field table { width: 200%;}
}*/

/**/
input[type='date']::before {    content: attr(data-placeholder);    width: 100%;}
input[type='date']:focus::before,input[type='date']:valid::before {    display: none;}
input[type=radio] {    margin: 0px 5px 0 0;}
[type="radio"] {  display: inline-block;  vertical-align: middle; background: lightgray;    appearance: none;    width: 20px;    height: 20px; border-radius: 50%;}
[type="radio"] + label{margin-bottom: 0!important; margin-right: 10px;}
[type="radio"]:checked {border: 1px solid #dddddd; background-color: #fff; position: relative;}
[type="radio"]:checked:after{content: ""; display: block; width: 10px; height: 10px; background-color: #3246b8; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
[type="radio"]:focus-visible {    outline-offset: max(2px, 0.1em);    outline: max(2px, 0.1em) dotted #3246b8;}
[type="radio"]:hover {    box-shadow: 0 0 0 max(4px, 0.2em) #e8e8e8;    cursor: pointer;}
[type="radio"]:disabled {    background-color: lightgray;    box-shadow: none;    opacity: 0.7;    cursor: not-allowed;}
[type="radio"]:disabled + span {    opacity: 0.7;    cursor: not-allowed;}
[type="checkbox"] {    margin: 0px 3px 0 0!important;  position: relative;display: inline-block;  vertical-align: middle; background: #fff!important;    appearance: none;    width: 1.5em;    height: 1.5em; border: 1px solid #ddd!important;}
[type="checkbox"]::after { content: "\f00c"; display: block; font-family: "Font Awesome 6 Pro";
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
/*[type="checkbox"]::after { display: none;   color:#707070;    position: absolute;    right: 4px;    font-size: 0.8em;    cursor: pointer;    top: 2px;    left: 7px;    box-sizing: border-box;    width: 6px;    height: 12px;    transform: rotate(45deg);    border-width: 2px;    border-style: solid;    border-color: #707070;    border-top: 0;    content: " ";    border-left: 0;    transition: all 200ms ease-in;}*/
[type="checkbox"]:checked {    border-color: #42ADD9!important;background: #42ADD9!important;}
[type="checkbox"]:checked::after { display: block;  border-color: #fff; color: #fff;}
[type="checkbox"]:focus-visible {    outline-offset: max(2px, 0.1em);    outline: max(2px, 0.1em) dotted #BC2D1E;}
[type="checkbox"]:hover {    box-shadow: 0 0 0 max(4px, 0.2em) #e8e8e8;    cursor: pointer;}
[type="checkbox"]:disabled {    background-color: lightgray;    box-shadow: none;    opacity: 0.7;    cursor: not-allowed;}
[type="checkbox"]:disabled + span {    opacity: 0.7;    cursor: not-allowed;}
/*네모형 라디오*/
.select input[type=radio]{    display: none;}
.select input[type=radio]+label{  border-radius: 6px;; display: inline-block;    cursor: pointer;    height: 40px; padding: 0 10px;  background-color: #fff;    color: #373844;    line-height: 40px;    text-align: center;  font-weight:400;}
.select.v2 input[type=radio]+label{     height: fit-content!important;  padding: 2px 5px; border-radius: 4px; line-height: unset   }
.select input[type=radio]+label{    background-color: #fff;    color: #373844;  border: 1px solid #C9C9C9;}
.select input[type=radio]:disabled+label{    background-color: #c9c9c9;    color: #373844;}
.select input[type=radio]:checked+label{background-color: rgba(22, 43, 133, 0.04);    border: 1px solid #162b85;  color: #162b85; font-weight:bold;}

/*네모형 체크*/
.select input[type=checkbox]{    display: none;}
.select input[type=checkbox]+label{   border-radius: 6px;;  display: inline-block;    cursor: pointer;    height: 40px;  padding: 0 10px;    border: 1px solid #373844;    line-height: 40px;    text-align: center;    font-weight:400; }
.select.v2 input[type=checkbox]+label{     height: fit-content!important;  padding: 2px 5px; border-radius: 4px; line-height: unset   }
.select input[type=checkbox]+label{    background-color: #fff;    color: #373844; border: 1px solid #C9C9C9;}
.select input[type=checkbox]:disabled+label{    background-color: #c9c9c9;    color: #d0d0d0;}
.select input[type=checkbox]:checked+label{background-color: rgba(22, 43, 133, 0.04);    border: 1px solid #162b85;  color: #162b85; font-weight:bold;}

/*동그라미 라디오*/
.circle label{margin-right: 6px;}
.circle input[type="radio"] {    margin: 0px 5px 0 0;}
.circle input[type="radio"] { border: 1px solid #c9c9c9; display: inline-block;  vertical-align: middle; background: #fff; border-radius: 30px;  appearance: none;
    width: 1.4em;    height: 1.4em; position: relative;}
.circle input[type="radio"]:checked {  background: #fff; border: 1px solid #c9c9c9;}
.circle input[type="radio"]:checked + label{color: #333333}
.circle input[type="radio"]:checked:after{content: ""; display: inline-block;
    width: 0.7em; height: 0.7em; border-radius: 50%; background-color: #f51d33;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }

.circle input[type="radio"]:focus-visible {    outline-offset: max(2px, 0.1em);    outline: max(2px, 0.1em) dotted #f51d33;}
.circle input[type="radio"]:hover {    box-shadow: 0 0 0 max(4px, 0.2em) lightgray;    cursor: pointer;}
.circle input[type="radio"]:disabled {    background-color: lightgray;    box-shadow: none;    opacity: 0.7;    cursor: not-allowed;}
.circle input[type="radio"]:disabled + span {    opacity: 0.7;    cursor: not-allowed;}

/**/


/**/


textarea{width: 100%; background-color: #FFFFFF; border: 1px solid #c9c9c9; color: #1a1a1c; padding: 10px;}
.editor textarea{min-height: 300px;}

/*탭디자인*/
.nav-tabs{font-size: 1.1em; margin-bottom: 20px;}
.nav-tabs>li>a{border:0; border-radius: 0; color: #555; opacity: 0.6;}
.nav-tabs>li>a:hover{border:0; border-bottom: 2px solid #ddd; 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 #2A2B6A; color: #2A2B6A; opacity: 1; font-weight: 600;}

@media screen and (max-width: 550px) {
    .nav-tabs>li>a{font-size: 1em; letter-spacing: -.5px}
}

/*팝업*/
#popup {position: fixed; z-index: 9999; background: #fff;  box-shadow: 0 0 10px rgb(0 0 0 / 28%);}
#popup .btn-pop{height: 50px; display: flex;width: 100%}
#popup .btn-pop button:first-child{border-right: 1px solid #eee}
#popup .btn-pop button{height: 48px;width: 50%}
#popup.hide {display: none;}

@media screen and (max-width: 550px) {
    #popup{left: 0!important; top: 0!important; width: 100%;}
    #popup img{width: 100%;}

}

/*alert디자인(swal2)*/
.swal2-popup{max-width: 300px; width: calc(100% - 80px); min-width: 280px; font-size: 13px; padding:35px;}
.swal2-title{font-size: 1.15em; margin-bottom: 10px;}
.swal2-html-container{font-size: 1em; 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%; border-radius:0px; font-weight: 400;
    line-height: 30px; height: 30px; padding: 0; border:0; margin:0 2px;}

.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: #c30500; 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;}

/*@media screen and (max-width:550px) {
    input{width: 100%;}
}*/


/*분류태그*/
.tag{display: flex;}
.tag > span{display: inline-block; padding: 2px 4px; margin-right: 4px; background: #F1F1F1; color: #6E6E6E;}

.tagbox {    padding: 20px 24px 0;    display: flex;  width: 100%;}
.tagbox > div {    display: flex;    flex-wrap: wrap;   }
.tagbox > div > p {display: inline-block;    margin-bottom: 20px;}
.tagbox > div > p span.tag {border-radius: 0px; border: 1px solid #C8C8CB;color: #484951; padding: 5px;margin-left: 5px; display: inline-block; line-height: 1em;}
.tagbox > div > p span.tag.active {background: #FFD0CB;    border: 1px solid #f51d33;    color: #f51d33;}

/*테이블*/
.table {overflow-y: auto; margin-bottom: 20px; margin-top: 10px;
    border-radius: 6px;border: 1px solid #D9D9D9;}
.table table{width: 100%;border-spacing:0;}/*
.table th:first-child,
.table td:first-child{padding-left: 30px;}*/
.table th,
.table td{padding: 10px 15px;background: #fff;}
.table th{border-right: 1px dotted rgba(143, 143, 143, 0.5)}
.table tr th:last-child{border-right: 0px}
.table td{border-right: 1px dotted #cbcbcb80}
.table tr td:last-child{border-right: 0px}
.table.table_mini th,
.table.table_mini td{padding: 5px;}
.table th:last-child,
.table td:last-child{border-right: 0;}
.table th{font-weight: 600;font-size: 1em;color: #0046ac;background: #dfe1e7;}
.table thead th{font-size: 1.1em; padding-top: 16px; padding-bottom: 16px;}
.table tbody th{background: #FBFBFB;color: #474747;border-bottom: 0;}
.table tbody tr:nth-child(even) th{background-color:#F4F4F4; }
.table tbody tr:nth-child(even) td{background-color:#EFEFEF80; }

.table .text_center{text-align: center;}
.table .text_left{text-align: left;}
.table .text_right{text-align: right;}
.table td{line-height: 30px;}
.table td > a {display: block}

.table tr.fixed td{font-weight: 600;background-color: #ffe6e685;border-bottom: 1px solid #e7cbcb85; color:#373844; }
.table tr.collapse,
.table tr.collapsing td,
.table tr.collapse.in td{background-color: #FBFBFB; border-right: 0; border-left: 0;}

/*table2*/
.table.table_gray {}
.table.table_gray table{border-color: #C2C2C2;}
.table.table_gray th{ color: #C2C2C2; background: #fff;}
.table.table_gray th,
.table.table_gray td{border-color: #C2C2C2; border-right: 0;
.table.table_gray td{color: #373844;}}
.table.table_gray tbody th{color: #222; background: #eee;}
.table.table_gray tbody th.bg02{color: #222; background: #eeeeee65;}
.table.table_gray tbody tr:nth-child(even) td{background: #FBFBFB }

/*table2*/
.table.type2 {}
.table.type2 table{border-top:0;}
.table.type2 th{border-bottom: 0;}
.table.type2 th,
.table.type2 td{border-right: 0;}
.table.type2 tbody th{vertical-align: baseline; background: transparent; border-bottom: 1px solid #E6E6E6;}

/*모달*/
.modal-open {    overflow: unset;}
.modal-content {box-shadow: none;background: #F8FAFE;border: 0;border-radius: 6px;max-height: 90vh;}
.modal .btn-primary {background-color: #2A2B6A;color: #fff;width: 100%;height: 50px;font-size:1.2em;font-weight:600;margin: 0;border-radius: 0 0 6px 6px;}
.modal .btn-secondary {background-color: #1a1a1c; color: #fff; width: 48%; height: 35px}
.modal-title {color: #2A2B6A;font-size: 1.4em;font-weight: 600;}
.modal-header {border-bottom: 0;padding: 30px 30px 10px 30px;}
.modal-body{overflow: auto;padding: 20px 30px 30px 30px;max-height: calc(90vh - 106px); min-height: 100px;}
.modal-body > label{margin-bottom: 5px;}
.modal-body .box-gray{background: #F3F3F3; padding: 14px 18px;}
.modal-footer {padding: 0;border-top: 0;display: flex;justify-content: space-around;}
.modal-dialog{max-width: 450px;margin: 0; top: 50%;left: 50%;transform: translate(-50%, -50%)!important; }
.modal-content{}
.modal-dialog.modal-wide {    width: 90%; max-width: 900px}
.modal-dialog.modal-narrow {    max-width: 300px;}
.modal-box1 {  border-radius: 0px;    background-color: #ffffff;    padding: 20px; }

.modal.wide .modal-dialog,
.modal .modal-dialog.wide{max-width:600px;}

/*페이지네이션*/
/* border-pagination */
.paging{margin-top:40px;text-align:center;line-height:0;}
.paging a{position:relative;display:inline-block;width:28px;height:28px;margin-left:10px;font-size:1.1em;line-height:27px;color:#666;vertical-align:top;padding-top:1px;}
.paging a:nth-child(3){margin-left:5px;}
.paging a:hover{color:#222;}
.paging a:hover:after{content:'';position:absolute;left:10px;bottom:3px;width:8px;height:1px;background:#000;}
.paging a.active{font-weight:700;color:#4453e4;}
.paging a.active:after{content:'';position:absolute;left:10px;bottom:3px;width:8px;height:1px;background:#4453e4;}
.paging a.disabled{border: 1px solid #ddd; border-radius: 2px; line-height: 26px; font-size:0.9em; color: #ccc; border-radius: 6px}
.paging a.disabled:hover{background:#F7F7F7;}
.paging a.disabled:hover:after{display: none;}


/*사진첨부*/
.newpic {  display: inline-block;    margin-bottom: 10px;    margin-right: 10px;}
.newpic.after {  margin-bottom: 10px;    margin-right: 0px;}
.newpic-upload { display: inline-block;position: relative;    text-align: left;}
.newpic-upload.w100 { width: 100%;}
.newpic-upload .newpic-edit {  position: absolute;  left: 0px;  z-index: 1;  top: 0px;}
.newpic-upload .newpic-edit input {  display: none;}
.newpic-upload .newpic-edit input + label {  display: inline-block;    width: 130px;    height: 130px;    line-height: 110px;
    margin-bottom: 0;    border-radius:0;    color: #fff0;    background: #FFF0;  cursor: pointer;  font-weight: normal;  transition: all 0.2s ease-in-out;}
.newpic-upload.w100 .newpic-edit input + label {  width: 100%;   }
.newpic-upload .newpic-edit input + label:hover {  background: #ffffff69; border: 1px solid #f51d3369}
.newpic-upload .newpic-edit input + label:hover:after {  content: "\f030";  font-family: "Font Awesome 6 Pro"; color: #f51d33; font-size: 2em;
    position: absolute;  top: 10px;  left: 0;  right: 0;  text-align: center;  margin: auto; font-weight: 300;}
.newpic-upload .newpic-preview {  width: 130px;  height: 130px;  position: relative;  border: 1px solid #F8F8F8;}
.newpic-upload.w100 .newpic-preview {  width: 100%; }
.newpic-upload .newpic-preview > div {  width: 100%;  height: 100%;  background-size: cover;  background-repeat: no-repeat;  background-position: center;}

/*제품등록 이미지 업로드*/
.imageInput_wrap{}
#preview-container {display: grid;flex-wrap: wrap;gap: 10px;grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;}
.preview-item {position: relative;cursor: pointer;width: 100%; background: #eee;}
.preview-image {border: 1px solid #E1E1E1;width: 100%;/*height: 100%;*/object-fit: cover;aspect-ratio: 1/1!important;}
.delete-button, .set-representative-button {position: absolute;padding: 4px;border: none;border-radius: 4px;font-size: 12px;opacity: 0.8;transition: opacity 0.3s;}
.delete-button{z-index: 3;right: -4px; top: -4px; background: #000000; color: #fff; width: 18px; height: 18px; padding: 0; font-weight: 200; border-radius: 50%; font-size: 11px; line-height: 18px;}
.set-representative-button{bottom: 0; left: 0; display: none;}
/*.preview-item:hover .set-representative-button{display: block; background: #00000069; width: 100%; height: 100%; border-radius: 0;}*/
.delete-button:hover, .set-representative-button:hover {opacity: 1;}
.representative {}
.representative:after{content: "대표이미지"; position: absolute; top: 0; left: 0; width: 100%; background: #ffe6e6; color: #f51d33; text-align: center; font-size: 11px; padding: 2px;}

/* 이미지 선택 버튼 스타일 */
#imageInput {display: none; /* 기존의 브라우저 기본 스타일 숨김 */}
.custom-image-input { margin:0 10px 10px 0;}
.custom-image-input:hover {background-color: #f51d33;}


/*탭메뉴*/
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;}

.ready{position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; width: calc(100%); height: calc(100%); background-color: rgba(0,0,0,0.2); z-index: 1;}
.ready_page{filter:grayscale(1); opacity: 0.5;}
.ready_bubble{opacity: 0.5;}
.ready_bubble:after{content: "준비중"; display: inline-block; background: rgba(0,0,0,0.5); border-radius: 40px; color: rgba(255,255,255,1); padding: 3px 10px;
    position: absolute; top: 12px; right: 45px; font-size: 11px; line-height: 1em; font-weight: 400;}

.ready_bubble2{position: relative; display: inline-block;}
.ready_bubble2:after{content: "준비중"; display: inline-block; background: #1e2229; border-radius: 40px; color: rgba(255,255,255,1); padding: 3px 10px;
    font-size: 12px; line-height: 1em; font-weight: 400; z-index: 99;}

.empty{padding: 20% 0; text-align: center; font-size: 1em; opacity: 0.8;}
.empty.v2{padding: 10% 0; ;}
.empty.v3{padding: 5% 0; ;}
.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 .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: 0.85em;line-height: 1em;color: #f51d3368;font-family: 'SBAggro';font-weight: 600;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 */
    line-height: 1.4em;
}

/* 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;
    box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
    background: #333;
    color: #fff;
    z-index: 1; /* absurdity 2 */
    border-radius: 4px;
}
.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;}
.visualSwiper .swiper-button-next,
.visualSwiper .swiper-button-prev {box-shadow: none}
.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;}


/*게시판리스트*/
.board_search{max-width: 600px; margin: 0 auto;}
.board_search select{padding-left: 0; padding-right: 0; margin-right: 10px;}
.board_search .search{width: 100%; display: flex; background: #F9F9F9; border: 0;}
.board_search input[type="search"]{width: 100%; background: transparent; border: 0;}
.board_search .btn-search{background: transparent; border: 0;}

#board {margin: 20px auto;}
#board > .btn-wrap{margin:10px 0; justify-content: right;    display: flex;    align-items: center;    gap: 5px;}
#board .board_list > .btn-wrap{margin:10px 0; justify-content: right;    display: flex;    align-items: center;    gap: 5px;}
#board form > .btn-wrap{margin:10px 0; justify-content: right;    display: flex;    align-items: center;    gap: 5px;}
.board_list .fa-lock-keyhole{color: #333; font-size: 12px; margin-right: 6px;}
.board_list{margin-top: 20px;font-size: 1.1em;}
.board_list > ul{border-top:1px solid #eee; margin-top: 20px; }
.board_list li{/*display: grid;grid-template-columns: 60px 1fr 100px 90px;*/ align-items: center;
    border-bottom: 1px solid #eee;padding: 20px 0; position: relative;}
.board_list li:after{content: "\f054"; font-family: "Font Awesome 6 Pro"; display: block;
    position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-weight: 200; color: #AFAFAF;}
.board_list li .flex > p{font-size: 12px; margin-right: 10px; color: #959595;}
.board_list li > p .icon-mini{margin-left: 0px;   margin-right: 5px;}
.board_list li > p{margin-right: 10px;}
.board_list li > p:last-child{margin-right: 0;}
.board_list li p.p_num{font-weight: 600; display: none;}
.board_list li p.p_user{}
.board_list li p.p_date{}
.board_list li p.p_title{text-align: left; align-items: center; cursor: pointer;
    color: RGBA(35, 35, 35 ,0.8); margin-top: 4px; font-size: 1.05em; font-weight: 600}
.board_list li p.p_title span.comment {    font-size: 0.7em;    padding: 2px 5px;    background: #fff;    border: 1px solid #ccc;    border-radius: 4px  4px 0 4px ;    margin-right: 5px;    font-weight: 800;}
.board_list li.notice .flex > p.p_num{overflow: hidden; height: 20px; display: block;}
.board_list li.notice .flex > p.p_num:before{content: "공지"; line-height: 20px; font-weight: 600; display: block; /*background-color: #ffe6e6;*/ color: #f51d33; margin: 0 auto;}
.board_list li.notice p.p_title{color: #232323; font-weight: 700;}


.board_view .area_top{display: flex; align-items: center; justify-content: space-between;}
.board_view .box{padding: 40px 20px; width: 100%;}
.board_view .title{border-bottom: 1px solid #eee; margin-bottom: 10px; padding: 10px;}
.board_view .title strong{font-size: 1.3em; margin-bottom: 6px;}
.board_view .title .info{display: flex; margin-top: 16px; font-size: 13px;}
.board_view .title .info p{font-weight: 600; margin-left: 4px;}
.board_view .title .info p:after{content: ""; display: inline-block; width: 1px; height: 10px; margin: 0 6px; background: #ddd;}
.board_view .title .info p:last-child:after{display: none;}
.board_view .view{padding: 10px; line-height: 1.8em;}
.board_view .attached_file{ display: flex; align-items: center; padding: 10px 20px; margin-bottom: 10px; border: 1px dotted #eee;}
.board_view .attached_file a{display: inline-block; text-decoration: underline; margin-left:10px; font-size: 0.9em; }
.board_view .attached_file a:hover{color: #00AF63;}
.board_view .answer{background: #FBFBFB; padding: 20px 25px; margin-top: 20px; line-height: 1.8em;}
.board_view .answer dl{border-top:1px solid #eee; margin-top: 20px; padding-top: 20px;}
.board_view .answer dl:first-child{border-top:0; margin-top: 0; padding-top: 0; }
.board_view .answer dt{font-size: 0.9em; margin-bottom: 20px; display: inline-block; color:  #333333; font-weight: 600; margin-left:-5px; }
.board_view .answer dt strong:after{content: ""; display: inline-block; width: 1px; height: 10px; margin: 0 6px; background: #ddd;}
.board_view .answer dt strong:last-of-type:after{background: transparent;}


.board_view .download { font-weight:  800; text-decoration: underline; margin-bottom: 12px; padding: 10px; border-top: 1px solid #eee; margin-top: 20px; }
.board_view .download p{padding-top:10px ;}


.board_view .rqselect {background: #ffffff;border: 1px solid #dddddd;padding: 15px 20px;margin-top: 20px;}
.board_view .rqselect label { margin-right: 8px;  line-height: 40px}
.board_view .rqselect label i {color: #4453e4;}
.board_view .rqselect select { display: inline-block; width: 30%;  margin-bottom: 0px;max-width: 100px; font-weight: 800}

.board_view .answer_write{/* border-top:1px solid #eee; */margin-top: 10px;padding: 20px;background: #9da3be20;}
.board_view .answer_write textarea{margin-top: 10px; min-height: 200px;}

.board_view .img#boardFiles{display: flex; flex-wrap: wrap; position: relative; padding-top:30px; overflow-y: auto; }
.board_view .img#boardFiles > strong{position: absolute; left: 0; top: 0;}
.board_view .img#boardFiles p{width: calc(100% / 2)}
.board_view .img#boardFiles a{display: block; width: 100%; height: 150px; padding: 1px}
.board_view .img#boardFiles a img{width: 100%; height: 100%; object-fit: cover;}

.board_write .form > div:first-of-type{margin-bottom: 6px;}
.board_write .flex {margin-top: 6px;gap: 6px}
.board_write .flex input{margin-bottom: 0px;}
.board_write textarea{height: 300px;}
#returnModal .board_write textarea{height: 160px;}
.board_write .btn-wrap{}
@media screen and (max-width: 768px) {
    /*게시판*/
    .board_search,
    #board{padding: 0 10px;}
}


/*자주묻는질문*/
.faq_list{margin-top: 20px;font-size: 1.1em;}
.faq_list details:first-of-type{border-top:1px solid #eee; margin-top: 20px; }
.faq_list details{border-bottom: 1px solid #eee;}
.faq_list details > summary{/*display: grid;grid-template-columns: 60px 1fr 100px 90px;*/ align-items: center;
    padding: 20px 0; position: relative;}
.faq_list details > summary .flex > p{font-size: 12px; margin-right: 10px; color: #959595;}
.faq_list details > summary > p .icon-mini{margin-left: 6px;}
.faq_list details > summary > p{margin-right: 10px;}
.faq_list details > summary > p:last-child{margin-right: 0;}
.faq_list details > summary p.p_num{font-weight: 600; display: none;}
.faq_list details > summary p.p_user{}
.faq_list details > summary p.p_date{}
.faq_list details > summary p.p_title{text-align: left;display: flex; align-items: center;
    color: RGBA(35, 35, 35 ,0.8); margin-top: 4px; font-size: 1.05em; font-weight: 700}

.faq_list .details{background: #0046ac10; padding: 20px 22px; color: #232323; line-height: 1.6em; border-top: 0;}

@media screen and (max-width: 1400px) {
    .inner{max-width: 100%; padding-left:30px; padding-right: 30px;}
}
@media screen and (max-width: 1200px) {}
@media screen and (max-width: 992px) {}
@media screen and (max-width: 768px) {
    .inner{padding-left:20px; padding-right: 20px;}
    .button-right {right: 20px;}
}
@media screen and (max-width: 550px) {
    .inner{padding-left:15px; padding-right: 15px;}
}


/*toast*/
.toast_layer {visibility: hidden; min-width: 250px; width: max-content; max-width: 90%;
    background-color: #fff; color: #f51d33; border: 4px solid #c30500; 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;  right:10px; bottom:10px; z-index:9999;    }
.goHd {opacity: 0!important; transition: all 0.3s ease-in-out, opacity  0.3s ease-in-out;;}
body:has(.header_scroll) .goHd {opacity: 0.5!important; transition: all 0.3s ease-in-out, opacity  0.3s ease-in-out;;}
.goHd, .goFt{; opacity: 0.5;width:30px; height:30px; background:rgba(255, 255, 255, 0.6); z-index:9999; text-indent:-9999px; border:1px solid #858585; position:relative;
    transition:all 0.5s; box-shadow:0px 0px 3px RGBA(0, 0, 0, 0.1); border-radius:2px; display:block; margin-bottom:3px;}
.goHd span{position:absolute; top:60%; left:9px; display:block; width:10px; height:10px; border-left:2px solid #666; border-top:2px solid #666; border-radius:2px;
    transform:translateY(-50%) rotate(45deg);}
.goFt span{position:absolute; top:40%; left:9px; display:block; width:10px; height:10px; border-left:2px solid #666; border-top:2px solid #666; border-radius:2px;
    transform:translateY(-50%) rotate(-135deg);}
.goHd:hover, .goFt:hover{background:#333; border:1px solid #333; opacity: 1}
.goHd:hover span, .goFt:hover span{border-left:2px solid #FFF; border-top:2px solid #FFF;}



@media screen and (max-width: 550px) {
    #gobtn { bottom: 70px;}
}

/*에러페이지*/
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: 5em auto;
    padding: 2em;
    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: #ff8307;
}
.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);
}
/*공통*/
.area_top{margin-bottom: 20px;}
.area_filter{margin-bottom: 10px;}
.area_filter select,
.area_filter input[type=radio]+label,
.area_filter input{margin-right: 4px; margin-bottom: 0;}
.area_filter .btn-right{text-align: right;}
.area_filter .search{margin-left:4px; margin-right: 4px; display: flex;}

@media screen and (max-width: 768px) {
    .list .area_top > .grid{display: block;}
    .list .area_top > .grid > .box-color{margin-top: 10px;}

    .area_filter.flex{display: block;}
    .area_filter > .flex{flex-wrap: wrap;}
    .area_filter .flex > *{margin-top: 4px;}
    .area_filter .btn-right{margin-top: 4px;}
    .area_filter .search{margin-top: 4px;  margin-left: 0px; width: 100%; margin-right: 0px;}
    .area_filter input[type="search"] {width: calc( 100% - 40px );}
}

.status{padding:20px; font-size: 1.1em;}
.status .grid{gap: 20px;}
.status li,
.status p{display: flex; justify-content: space-between; align-items: center; border-right: 1px solid #ccc; padding-right: 20px;}
.status li:last-child,
.status p:last-child{border-right: 0; padding-right: 0;}

.status i{font-size: 1.2em; color: rgba(0, 0, 0, 0.25); margin-right: 6px; }
.status strong{color: #393939}

.keyword_form{display: flex; max-width: 250px; margin-bottom: 10px;/* border: 1px solid #E1E1E1;*/}
.keyword_form input[type=text]{margin: 0; width: calc(100% - 65px)}
.keyword_form button{width: 60px; margin-left: 4px;}
.keyword{display: flex; align-items: center;}
.keyword span{display: inline-block; padding: 4px 12px; background: #F3F3F3; line-height: 25px; margin-right: 4px;}
.keyword span i{display: inline-block; margin-left: 4px;}
.keyword button.btn{height: 33px; padding: 4px 12px; line-height: 1em;}

.guide{margin: 10px 0 20px 0;}
.guide h6{font-size: 1.15em; margin-bottom: 4px; font-weight: 600; display: flex; align-items: center;}
.guide p{margin-left: 14px; opacity: 0.8;}
.guide .line{border-top:1px solid rgba(0,0,0,0.05); padding-top: 15px; margin-top: 15px;}
.guide .fa-duotone{font-size: 20px; vertical-align: middle; color: #f51d33; margin-right: 4px;}

@media screen and (max-width: 768px) {
    .guide p { margin-left: 4px;}
}

.loading-overlay {position: fixed;inset: 0;background: rgba(0, 0, 0, 0.55);backdrop-filter: blur(3px);z-index: 9999;display: flex;align-items: center;justify-content: center;opacity: 0;pointer-events: none;transition: opacity 0.25s ease;}
.loading-overlay.active {opacity: 1;pointer-events: all;}
.loading-content {background: #1a1f2e;border-radius: 12px;padding: 5em 4.8em;min-width: 420px;text-align: center;box-shadow: 0 20px 70px rgba(0,0,0,0.6);border: 1px solid #2f374d;}
.spinner-large {width: 80px;height: 80px;border: 6px solid #2f374d;border-top: 6px solid #4f8bf9;border-radius: 50%;animation: spin 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;margin: 0 auto 2.4em;}
@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.loading-status {margin: 1.5em 0 2.5em;}
.current-action {color: #a5b4fc;font-size: 1.32em;font-weight: 500;margin-bottom: 1.2em;min-height: 1.8em;}
.progress-container {display: flex;align-items: center;gap: 1.2em;justify-content: center;}
.progress-bar {width: 240px;height: 10px;background: #2f374d;border-radius: 999px;overflow: hidden;}
.progress-fill {height: 100%;background: linear-gradient(90deg, #6366f1, #4f8bf9);border-radius: 999px;transition: width 0.4s ease-out;width: 0%;}
.progress-text {color: #c7d2fe;font-weight: 600;min-width: 50px;text-align: right;}
.loading-tips {display: flex;flex-direction: column;gap: 0.6em;font-size: 0.98em;color: #64748b;margin-top: 1.8em;}
.tip-active {color: #a5b4fc;font-weight: 500;}