@charset 'utf-8';

:root{
    --bs-body-bg: #f5f7fa;
    --bs-primary: #3182f6;
    --bs-primary-hover :#3f78eb;
    --bs-primary-focus: #e8f0fe;
    --bs-danger: #c3180f;
    --bs-gray-light:#f7f7f7;
    --bs-gray:#eee;
    --table-border-color:rgba(203, 208, 221, 0.54)
}

*::-webkit-scrollbar {width:8px !important; height:8px !important}
*::-webkit-scrollbar-track{background-color:transparent}
*::-webkit-scrollbar-thumb{background: rgba(135, 139, 144, 0.5); border-radius:5px}
*::-webkit-scrollbar-thumb:hover{background: rgba(135, 139, 144, 0.5); width:8px}


html {margin:0; padding:0}
body {font-family:'Malgun Gothic', '맑은 고딕', '나눔고딕', 'NanumGothic', sans-serif, 'Gothic', '고딕'; font-size:13px; /*background-color:var(--phoenix-body-bg)*/ background-color:var(--bs-gray-light)}
ul {margin-bottom:0; padding-left:0}
ul li {list-style:none}
img {width:100%}
a {display:inline-block; cursor:pointer; color:inherit}
a:not(.link){text-decoration:none}
a.link:hover {text-underline-position:under; text-decoration:underline}
a.link-primary {color:var(--bs-primary) !important; text-decoration-color:var(--bs-primary) !important}
input,
textarea {border:none; background-color:transparent}


input[readonly='readonly']:not(.date){background-color:var(--bs-secondary-bg) !important}
input[type=text]:read-only:focus{box-shadow:inherit; border-color:var(--phoenix-border-color)}
input[type=file] {display:none}
/*
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {-webkit-appearance:none; margin:0}
*/
input:disabled + label {color:var(--bs-gray-500)}

input[type='file'] {display:none}
textarea {resize:none; min-height:11rem !important}
textarea:focus-visible {outline:none}
button {outline:none; border:none}

.form-control {height:35px; padding:5px 10px; font-weight:normal; border-color:var(--bs-gray)}
.form-select{font-weight:normal}
.form-select, 
.form-check-input {border-color:var(--bs-gray)}
.form-control:read-only,
.form-control:read-only:focus {background-color:var(--phoenix-body-bg)}
.form-control:focus,
.form-select:focus {box-shadow:none; background-color:var(--bs-primary-focus); border-color:var(--bs-primary-focus)}
.form-check-input:checked {background-color:var(--bs-primary); border-color:var(--bs-primary)}



.btn-primary {background-color:var(--bs-primary)}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:focus-visible{background-color:var(--bs-primary-hover); border-color:var(--bs-primary-hover) !important}
.btn-outline-primary{border-color:var(--bs-primary); color:var(--bs-primary); background-color:var(--phoenix-white)}
.btn-outline-primary:hover {background-color:var(--bs-primary); border-color:var(--bs-primary)}
.btn-light {border-color:var(--phoenix-border-color); color:var(--phoenix-body-color)}
.btn-outline-tertiary{border-color:var(--phoenix-tertiary-color); color:var(--phoenix-tertiary-color); background-color:var(--phoenix-white)}
.btn-outline-tertiary:hover {background-color:var(--phoenix-tertiary-color); color:var(--phoenix-white)}

.text-primary {color:var(--bs-primary) !important}



.w-15 {width:15%}
.w-20 {width:20%}
.w-35 {width:35%}
.w-40 {width:40%}
.w-45 {width:45%}
.w-55 {width:55%}
.w-65 {width:65%}
.w-80 {width:80%}
.w-85 {width:85%}
.w-90 {width:90%}

.w-20px {width:var(--bs-s20)}
.w-100px {width:var(--bs-s100)}
.w-200px {width:var(--bs-s200)}
.w-250px {width:var(--bs-s250)}
.w-300px {width:var(--bs-s300)}

.h-100px {height:var(--bs-s100)}
.mh-200px {min-height:var(--bs-s200)}

.table {background-color: var(--phoenix-white); position:relative; table-layout:fixed}
.table thead {position:sticky; top:0; background-color:var(--phoenix-white); height:39px}
.table tfoot {position:sticky; bottom:0; background-color:var(--phoenix-white); height:39px}
.table th {text-align:center; border-bottom:1px solid var(--phoenix-table-border-color)}
.table td {padding-top:5px; padding-bottom:5px}
.table td,
.table td a{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle}
.table td:not(:first-child) {padding-right:25px !important}
.table .btn_arrow {border:none; outline:none; background-color:transparent; display: inline-block}
.table .btn_arrow:after {display: inline-block; font-family: bootstrap-icons !important; font-style: normal; font-weight: normal !important; font-variant: normal; text-transform: none; line-height: 1; vertical-align: -.125em; -webkit-font-smoothing: antialiased; color:var(--phoenix-secondary-light)}
.table .btn_arrow.up:after{content:'\f235'}
.table .btn_arrow.down:after{content:'\f229'}
.table .btn_arrow.active:after {color:var(--bs-primary)}
.table .link-primary {text-decoration:underline; text-underline-position:under}

.info .tit {display:block; width:100%}
.info .depth {color:var(--phoenix-secondary-color); font-size:var(--bs-s12)}
.info .cate {color:var(--phoenix-tertiary-color); font-size:var(--bs-s12)}
.info .price_txt {font-size:var(--bs-s16); font-weight:bold; color:var(--bs-primary)}

.price_txt {position:relative; padding-right:var(--bs-s17)}
.price_txt:after {content:'\c6d0'; position:absolute; right:0}

.tag_list {position:relative; display:inline-block}
.tag_list:not(:first-child) {margin:0 var(--bs-s3)}
.tag_list input {width:calc(100% - var(--bs-s40)); padding-right:var(--bs-s30); float:right}
.tag_list a {position:absolute; right:var(--bs-s10); top:var(--bs-s8)}


.list_area.img li {display:inline-block; width:100%; padding:var(--bs-s20); border-radius:var(--bs-s5)}
.list_area.img li:not(:first-child) {margin-top:-5px}
.list_area.img a {width:100%;}
.list_area.img .img_bg {width:var(--bs-s80); float:left; padding-top:var(--bs-s12)}
.list_area.img .info {width:calc(100% - var(--bs-s100)); padding-left:var(--bs-s20); float:right}
.list_area.img .info > div:not(:last-child) {padding-bottom:var(--bs-s5); white-space:normal}
.list_area.img .info .tit {text-overflow:ellipsis; white-space:nowrap; overflow:hidden; padding-bottom:var(--bs-s10);}
.list_area.img a:hover .tit {text-decoration:underline; text-underline-position:under}


.file_area {display:inline-block; width:calc(100% + 15px); margin:-15px 0 0 -15px}
.file_area .file_list.no_bg {position:relative}
.file_area .file_list.no_bg .f_img {width:30px; height:30px; margin-right:5px; float:left; border:1px solid var(--phoenix-border-color); overflow:hidden}
.file_area .file_list.no_bg .f_name {margin-bottom:0; padding-right:30px; display:inline-block; width:calc(100% - 35px); line-height:30px}
.file_area .file_list.no_bg .btn_del {color:var(--phoenix-danger); position:absolute; right:0; top:7px}
.file_area .file_list.no_bg .btn_down {color:var(--phoenix-info); position:absolute; right:35px; top:7px}
.file_area .file_list.no_bg .btn_down i {font-size:16px}
.file_area .file_list.no_bg + .file_list.no_bg {border-top:1px solid var(--phoenix-border-color)}
.file_area .file_list.bg {width:110px; float:left; position:relative; margin:15px 0 0 15px}
.file_area .file_list.bg .bg_img {width:100%; height:110px; background-color:var(--phoenix-gray-200); border:1px solid var(--phoenix-border-color); position:relative; overflow:hidden}
.file_area .file_list.bg .btn_down {width:100%; height:25px; line-height:25px; position:absolute; left:0; bottom:0; right:0; text-align:center; background-color:rgba(0, 0, 0, 0.5); color:var(--phoenix-white); display:none}
.file_area .file_list.bg .btn_del {position:absolute; right:0; top:0; width:25px; height:25px; line-height:25px; border-radius:5%; text-align:center; color:var(--phoenix-white) ;background-color:var(--phoenix-danger)}
.file_area .file_list.bg .f_name {width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; height30px; margin-bottom:0; padding:5px}
.file_area .file_list.bg .bg_img:hover .btn_down {display:block}

.paging_area {text-align:center}
.paging_area .p_row {width:120px; float:left}
.paging_area select {height:35px}
.paging_area ul {display:inline-block; height:35px}
.paging_area li {display:inline-block}
.paging_area li + li {padding-left:5px}
.paging_area a {width:30px !important; height:30px; line-height:30px; border-radius:5px; overflow:hidden}
.paging_area a.active {background-color:var(--bs-primary); color:var(--phoenix-white)}
.paging_area p{ display:inline-block; float:right; margin-bottom:0; padding-right:10px; line-height:40px}