@charset "utf-8";
html,body{width:100%;height: 100%;overflow: hidden;}
html *{font-family: Noto Sans KR,sans-serif;font-weight: 400;}
html{font-size: 10px;height: 100%;}
img{display: block}
body{background-color: var(--background-color);height: 100%;}
.img-box{}
.img-box > img{display: block;width: 100%;height: auto;}

.mt10{margin-top: 1rem;}
.mt30{margin-top: 3rem;}
.flexBox{display: flex}
.justifyBetween{justify-content: space-between}
.alignCenter{align-items: center}

.wrap {display: flex;position: relative;height: 100%;min-height: 700px;}
/*사이트 메뉴 스타일*/
.side-bar{background-color: var(--main-color);width: 20rem;min-height: 100vh;position: relative;}
.side-bar .container{padding:0 2rem;box-sizing: border-box;}
.side-bar::before{content:'';display: block;width: 100%;height: 0.5rem;}
.side-bar .level-box{display: flex;width: 100%;height: 4.5rem;justify-content: center;align-items: center;}
.side-bar .level-box .level-text{display: flex;width: 8rem;height: 2rem;border-radius: 1rem;justify-content: center;align-items: center;}
.side-bar .level-box .level-text::before{content:'';font-size: 1.2rem;line-height: 2rem;}
.side-bar.admin{--level-color:var(--level_admin);}
.side-bar.admin .level-box .level-text::before{content:'관리자';}
.side-bar.staff{--level-color:var(--level_staff);}
.side-bar.staff .level-box .level-text::before{content:'담당자';}
.side-bar.client{--level-color:var(--level_client);}
.side-bar.client .level-box .level-text::before{content:'고객사';}
.side-bar .level-box .level-text::before{color:var(--level-color);}
.side-bar::before{background-color: var(--level-color);}
.side-bar .level-box .level-text{border:1px solid var(--level-color);}

.side-bar .site-symbol{width: 10rem;height: 10rem;border-radius: 1.5rem;overflow: hidden;margin: 0.5rem auto 0;background-color: var(--symbol-bg-color);background-image: url("../images/user-bg.png");overflow: hidden;}
.side-bar .site-symbol > img{object-fit: contain;width: 100%;height: 100%;object-position: center;    background-color: var(--white-color);}
.side-bar .site-name{font-size: 1.2rem;color:var(--font-color1);text-align: center;margin-top: 0.5rem;}
.side-bar nav{}
.side-bar nav .menu-list{display: flex;flex-direction: column;}
.side-bar nav .menu-list .menu-item{display: flex;flex-direction: column;width: 100%;min-height: 3rem;margin-top: 1.5rem;}
.side-bar nav .menu-list .menu-item:first-of-type{margin-top: 2rem;}
.side-bar nav .menu-list .menu-item a{font-size: 1.4rem;color:var(--white-color);display: flex;width: 100%;height: 100%;justify-content: flex-start;align-items: center;cursor: pointer;transition-duration: 0.2s;transition-property: color;}
.side-bar nav .menu-list .menu-item a > svg {margin-right: 0.8rem;}
.side-bar nav .menu-list .menu-item.active > a,
.side-bar nav .menu-list .menu-item a:hover {color:var(--level-color);}
.side-bar nav .menu-list .menu-item .submenu-list{display: flex;flex-direction: column;row-gap: 0.5rem;margin-top: 1.5rem;}
.side-bar nav .menu-list .menu-item .submenu-list .submenu-item{display: flex;width: 100%;min-height: 2.5rem;}
.side-bar nav .menu-list .menu-item .submenu-list .submenu-item >  a{color:var(--font-color);}
.side-bar nav .menu-list .menu-item .submenu-list .submenu-item >  a::before{content:"-";margin-right: 1em;padding-left: 1em;}
.side-bar nav .menu-list .menu-item .submenu-list .submenu-item.active > a,
.side-bar nav .menu-list .menu-item .submenu-list .submenu-item > a:hover{color:var(--white-color);}
.side-bar .version-box{width: 100%;position: absolute;bottom:2rem;left:0;padding:0 2rem;}
.side-bar .version-box .site-logo{height: 20px;}
.side-bar .version-box .site-logo img {height: 100%;display: block;margin: 0 auto;}
.side-bar .version-box .version-text{font-size: 1rem;color:var(--white-color);text-align: center;height: 3rem;line-height: 3rem;}

main{width: calc(100% - 20rem);height: 100%;}
.scroll-wrapper{height: calc(100% - 5.3rem);overflow-x: hidden;overflow-y:auto;}

header{display:block;width:100%;background-color: var(--white-color);}
header .top-box{padding:0 3rem;display: flex;justify-content: space-between;align-items: center;width: 100%;font-size: 1.2rem;height: 5.3rem;border-bottom:1px solid var(--line-color1);color: var(--font-color2);}
header .title-box {display: flex;align-items: center;width: 100%;height: 6rem;padding:0 3rem;}
header .title-box h1 {font-size: 1.6rem;font-weight: 700;color: var(--default-font-color);}
header .site-logo{height: 20px;}
header .site-logo img {height: 100%;display: block;margin: 0 auto;}
header .breadcrumb-box{display: flex;}
header .breadcrumb-box li:nth-of-type(n+2):before{content:'/';display: inline-block;margin:0 1rem;}
header .member-box {display: flex;align-items: center;position: relative;}
header .member-box .info-link {margin-right: 1.5rem;font-size: 2rem;line-height: 1em;color:var(--white-color)}
header .member-box .member-img {display: flex;width: 40px;height:35px;cursor: pointer;color:var(--bg-color);overflow: hidden;padding:7px 8px;}
header .member-box .member-img .bars{width:26px;height: 21px;position: relative;}
header .member-box .member-img .bars .bar{position: absolute;background-color: var(--button-color1);width: 26px; height: 4px;border-radius: 4px;transition-duration: 0.3s;}
header .member-box .member-img:hover .bar{background-color: var(--main-color)}
header .member-box .member-img .bars .bar:nth-last-of-type(1){top:0;}
header .member-box .member-img .bars .bar:nth-last-of-type(2){top:50%;transform: translateY(-50%);}
header .member-box .member-img .bars .bar:nth-last-of-type(3){bottom:0;}
header .member-box .member-menu{position: absolute;width:13rem;right: -.5rem;bottom: -0.5rem;background-color:var(--white-color);border:1px solid var(--line-color1);border-radius: 0.3rem;padding:1.5rem;/*overflow: hidden;*/opacity: 0;-webkit-transform: scale(0.8) translateY(100%);-ms-transform: scale(0.8) translateY(100%);;transform: scale(0.8) translateY(100%);;-webkit-transition: all 250ms cubic-bezier(0.24, 0.22, 0.015, 1.56);transition: all 250ms cubic-bezier(0.24, 0.22, 0.015, 1.56);-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;backface-visibility: hidden;pointer-events: none;box-shadow: 0.4rem 0.4rem 1rem 0 rgba(0,0,0,0.2);    z-index: 1;}
header .member-box .member-menu .name-box{color:var(--default-font-color);font-size:1.2rem;line-height:1em;padding:1rem 0;border-bottom: 1px solid var(--line-color1);}
header .member-box .member-menu .name-box .name-text{color:var(--main-color);font-weight: 700;}
header .member-box .member-menu .menu-list{margin-top: 1rem;}
header .member-box .member-menu .menu-list .menu-item{margin:1rem 0;}
header .member-box .member-menu .menu-list .menu-item a{color:var(--default-font-color);display:block;width:100%;font-size: 1.2rem;}
header .member-box.open .member-menu{opacity: 1;-webkit-transform: scale(1) translateY(100%);-ms-transform: scale(1) translateY(100%);transform: scale(1) translateY(100%);-webkit-backface-visibility: visible;-moz-backface-visibility: visible;backface-visibility: visible;pointer-events: auto;}
header .member-box.open .member-img .bars .bar:nth-last-of-type(1){transform: rotate(45deg);transform-origin: left top;}
header .member-box.open .member-img .bars .bar:nth-last-of-type(2){transform: translate(100%,-50%);opacity: 0;}
header .member-box.open .member-img .bars .bar:nth-last-of-type(3){transform: rotate(-45deg);transform-origin: left bottom;}

header .member-info{border-radius: 0.3rem;padding:1.5rem;width:40rem;position: absolute;left:0;top:2rem;transform: translate(-90%,0);background-color: var(--white-color);box-shadow: 0.4rem 0.4rem 1rem 0 rgba(0,0,0,0.2);opacity: 0;pointer-events: none;transition-duration: 0.3s;display: flex;column-gap: 2rem;}
header .member-info .user-img{width: 8rem;height: 8rem;border:1px solid var(--line-color);border-radius: 1.5rem;overflow: hidden;background-image: url(../images/user-bg.png);background-size: cover;}
header .member-info .user-img > img {object-fit: contain;width: 100%;height: 100%;object-position: center;background-color: var(--white-color);}

header .member-info .info-list{display: flex;flex-direction: column;row-gap: 1rem;}
header .member-info .info-item{color:var(--default-font-color);display:block;width:100%;font-size: 1.4rem;}
header .member-info .info-item em{font-weight: 700;font-style: normal;width: 4.5rem;display: inline-block;}
header .member-info .info-item .t-box::after{content:':';margin-right: 0.5rem;}
header .member-box.info_open .member-info {opacity: 1;transform: translate(-100%,0);pointer-events: auto;}


/*layer style*/
#ie-black-layer{display: none;}
body.isIE #ie-black-layer{display: flex;}
#ie-black-layer{position: fixed;background-color: rgba(0,0,0,0.8);top: 0;left: 0;width: 100%;height: 100vh;justify-content: center;align-items: center;}
#ie-black-layer .content-box{background-color: #ee7202;color: #fff;padding: 60px 30px;border-radius: 15px;}
#ie-black-layer .content-box h1{font-size: 20px;line-height: 40px;font-weight: 700;margin-bottom: 20px;}
#ie-black-layer .content-box h2{font-size: 16px;margin-top: 20px;}
#ie-black-layer .content-box li{font-size: 12px;font-weight: 300;}
#ie-black-layer .content-box li.blod{font-weight: 600;}
#ie-black-layer .content-box a{color: #fff;text-decoration: underline;}


.content-wrap{padding:3rem 3rem 6rem;width: 100%;}
.content-wrap .content-box{font-size: 1.6rem;width: 100%;background-color: var(--white-color);display: flex;justify-content: center;align-items: center;}
.content-wrap .content-box.row3 {align-items: flex-start;column-gap: 20px;padding: 50px;}


.search-box{background-color: var(--white-color);padding:2rem;margin-bottom: 3rem;font-size: 1.2rem;color:var(--default-font-color);}
.search-box .info{font-size: 1.2rem;}
.search-box .info em{font-weight: 700;font-style: normal;color:var(--main-color)}
.search-box .info em.admin{color:var(--level_admin)}
.search-box .info em.staff{color:var(--level_staff)}
.search-box .info em.client{color:var(--level_client)}
.search-box .h-title{font-size: 1.8rem;font-weight: 700;width: 7rem;display: flex;align-items: center;margin-bottom: 2rem;}
.search-box .row-box{display: flex;min-height:4rem;padding: 1rem 0;justify-content:space-between;align-items:center;}
.search-box .row-box .title-box{font-size: 1.2rem;font-weight: 700;min-width: 7rem;display: flex;align-items: center;}
.search-box .row-box .title-box:before{content:'*';color:transparent;}
.search-box .row-box .title-box.required:before{color:var(--error-color);}
.search-box .row-box .title-box.w120{width: 12rem;}
.search-box .row-box .input-box{min-width: 37rem;margin-right: 2.4rem;display: flex;align-items: center;column-gap: 1rem;flex-wrap: wrap;row-gap: 1rem;}
.search-box .row-box .input-box.nowrap{flex-wrap: nowrap;}
.search-box .row-box .input-box.full{width: 100%;}
.search-box .row-box .input-box:nth-of-type(n+2){margin-left: 4rem;}
.search-box .row-box .file-input {display: flex;align-items: flex-end;column-gap: 1rem;}
.search-box .row-box .file-input .error-text{font-size:1.2rem;color:var(--error-color);margin-top: 0.5rem;opacity: 0;}
.search-box .row-box .file-input.error .error-text{opacity: 1;}
.search-box .row-box .left-box{display: flex;align-items: center;}
.search-box .row-box .left-box i{font-size: 12px;color:royalblue;}
.search-box .row-box .right-box{display: flex;}
.search-box .row-box .user-img{display:block;width: 10rem;height: 10rem;border-radius: 1.5rem;overflow: hidden;background-color: var(--symbol-bg-color);background-image: url("../images/user-bg.png");overflow: hidden;border:1px solid var(--line-color);cursor: pointer;    position: relative;}
.search-box .row-box .user-img > img{object-fit: contain;width: 100%;height: 100%;object-position: center;}
.search-box .row-box .user-img .image-view {display:block;width: 100%;height: 100%;background-size: contain;background-position: center;background-repeat: no-repeat;}
.search-box .row-box .user-img .del-button{position: absolute;bottom:0;width: 100%;height: 20px;
    z-index: 1;
    background-color: var(--main-color);
    color:var(--white-color);
    transition-duration: 0.3s;
    transform: translateY(100%);
    font-size: 1.2rem;
    pointer-events: none;
;}

.search-box .row-box .user-img:hover input.file_id:not([value=""]) + .del-button {
    pointer-events: auto;
    transform: translateY(0);
}

.form-box{background-color: var(--white-color);padding:2rem;margin-bottom: 3rem;font-size: 1.2rem;color:var(--default-font-color);display: flex;flex-direction: column;row-gap: 1rem;position: relative;}
.form-box .info{font-size: 1.2rem;}
.form-box .info em{font-weight: 700;font-style: normal;color:var(--main-color)}
.form-box .h-title{font-size: 1.8rem;font-weight: 700;width: 7rem;display: flex;align-items: center;margin-bottom: 2rem;}
.form-box .row-box{display: flex;min-height:4rem;justify-content:space-between;align-items:center;}
.form-box .row-box .title-box{font-size: 1.2rem;font-weight: 700;width: 15rem;display: flex;align-items: center;margin-top: 0.5em;}
.form-box .row-box .title-box:before{content:'*';color:transparent;}
.form-box .row-box .title-box.required:before{color:var(--error-color);}
.form-box .row-box .title-box.w120{width: 12rem;}
.form-box .row-box .input-box{width: 100rem;margin-right: 2.4rem;display: flex;align-items: center;}
.form-box .row-box .input-box.full{width: 100%;}
.form-box .row-box .input-box:nth-of-type(n+2){margin-left: 4rem;}
.form-box .row-box .left-box{display: flex;align-items: flex-start;}
.form-box .row-box .left-box i{font-size: 12px;color:royalblue;}
.form-box .row-box .right-box{display: flex;}


.form-box .row-box .file-upload .file-input-wrapper{display: flex;flex-direction: column;align-items: flex-start;}
.form-box .row-box .file-upload .file-label {display: inline-block;padding: 8px 15px;background: #555;color: #fff;cursor: pointer;border-radius: 3px;}
.form-box .row-box .file-upload .current-file {display: flex;align-items: center;padding: 10px 15px;background: #f5f5f5;border-radius: 5px;margin-top: 10px;font-size: 14px;column-gap: 10px;}
.form-box .row-box .file-upload .delete-file-btn {margin-left: auto;background: #989696;color: white;border: none;padding: 5px 12px;border-radius: 3px;cursor: pointer;font-size: 13px;transition: background 0.2s;}
.form-box .row-box .file-upload .delete-file-btn:hover {background: #ff3333;}
.form-box .row-box .file-upload .delete-file-btn i {margin-right: 5px;}
.form-box .row-box .file-upload .file-input-wrapper.error .current-file{border:1px solid var(--error-color)}
.form-box .row-box .editor{width: 100rem;}
.form-box .row-box .cke{width: 100%;}
.form-box .row-box .dat{font-size: 18px;display: inline-block;padding:0 10px;}

.icon-state{display:block;width: 1.5rem;height: 1.5rem;background-color: var(--state-ready);border-radius: 100%;margin: 0 auto;}
.icon-state.close{background-color: var(--state-close);}
.icon-state.open{background-color: var(--state-open);}
.icon-state.wait{background-color: var(--state-open);}
.icon-state.complete{background-color: var(--state-ready);}

.language-tabs {display: flex;border-bottom: 1px solid #ddd;margin-left: 10px}
.tab-button {padding: 10px 20px;border: 1px solid #ddd;border-bottom: none;background: #f5f5f5;margin-right: 5px;border-radius: 5px 5px 0 0;cursor: pointer;position: relative;top: 1px;}
.tab-button.active {background: #fff;border-bottom: 1px solid #fff;}
.tab-button:hover {background: #fff;}
.tab-content{display: none;}
.tab-content.active{display: block;;}

.add-table {width: 100rem;}
.add-table .data-input-row {display: flex;gap: 10px;margin-bottom: 15px;}
.add-table .data-input-row input {flex: 1;}
.add-table .data-list {display: flex;flex-direction: column;row-gap: 10px;border: 1px solid #ddd;padding: 10px;min-height: 10rem;}
.add-table .data-item {display: flex;justify-content: space-between;align-items: center;column-gap: 10px;}
.add-table .data-item .add-item {width: 100%;display: flex;align-items: center;border: 1px solid #ddd;}
.add-table .data-item .add-item .v-box {flex:1 1 0;font-weight: 400;color: #666666;padding: 10px;}
.add-table .data-item .add-item .v-box:nth-of-type(n + 2){border-left: 1px solid #ddd;}
.add-table .data-item .add-item .v-box.title{background-color: #F8F8F8;font-weight: 600;color: #333333;}
.add-table .data-item .button {width: 5rem;min-width: auto;display: flex;align-items: center;justify-content: center;background-color: var(--error-color);}


.button-box {padding: 2rem 0;width: 100%;display: flex;gap: 1rem 2rem;justify-content: space-between;flex-wrap: wrap;}


/**
파일 스타일
*/

.img-box.upload-image{    display: block;position: relative;width: 12rem;height: 12rem;border:1px solid var(--line-color);cursor: pointer;background-size: cover;}
.img-box.upload-image.ratio_2_1 {width: 40rem;height: auto;aspect-ratio: 2 / 1;}
.img-box.upload-image.ratio_3_2 {width: 40rem;height: auto;aspect-ratio: 370 / 275;}
.img-box.upload-image.ratio_3_4 {width: 52rem;height: auto;aspect-ratio: 520 / 600;}
.img-box.upload-image.ratio_5_3 {width: 21.4rem;height: auto;aspect-ratio: 5 / 3;}
.img-box.upload-image.ratio_13_7 {width: 26.6rem;height: auto;aspect-ratio: 133 / 74;}
.img-box.upload-image .image-view {width: 100%;height: 100%;overflow: hidden;position: absolute;background-size: contain;background-position: center;background-repeat: no-repeat;background-color: var(--bg-color3);}
.img-box.upload-image .image-view > img{width: 100%;height: 100%;display: block;object-fit: cover;object-position: center;}
.img-box.upload-image::before{content:'';opacity: 0.5;display:block;width: 100%;height: 100%;background-color: rgba(0,0,0,0.4);position: absolute;left: 0;top:0;background-image: url("../images/icon-image.svg");background-size: 3.3rem 2.85rem;background-position: center;background-repeat: no-repeat;cursor: pointer;transition-duration: .3s;transition-property: opacity;}
.img-box.upload-image::after{content:'';display:block;width: 100%;height: 100%;border: .4rem solid var(--main-color);box-sizing: border-box;transition-duration: .3s;transition-property: opacity;opacity: 0;}
.img-box.upload-image.drop_over::after{opacity: 1;}
.img-box.upload-image:hover::before{opacity: 1;z-index: 1;}
.img-box.upload-image .progress-box {position: absolute;width: 100%;height:0.2rem;left: 0;bottom:0;display: block;background-color: var(--bg-color2);transition-duration: 0.3s;transition-property: opacity;opacity: 0;}
.img-box.upload-image .progress-box.run {opacity: 1;}
.img-box.upload-image .progress-box .progress-bar{width: 0;height:100%;display: block;background-color: var(--main-color);transition-duration: 0.3s;transition-property: width;}

.file-multiple-input {width: 100%;}
.file-multiple-input .image-list{width: 100%;min-height:14rem;display: flex;gap: 1rem;flex-wrap: wrap;border:1px solid var(--line-color);margin-top: 1rem;padding:1rem;}
.file-multiple-input .image-list .image-item{display: flex;flex-direction:column;align-items: center;width: 14rem;height: 15rem;overflow: hidden;position: relative;border:1px solid var(--line-color);padding:1rem;}
.file-multiple-input .image-list .image-item .image-view{width: 100px;height: auto;aspect-ratio: 1 / 1;background-size: contain;background-position: center;background-repeat: no-repeat;}
.file-multiple-input .image-list .image-item .file-name{width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: inline-block;}
.file-multiple-input .image-list .image-item .file-name:before{content:'';color:var(--main-color);font-weight: 700; font-size: 1.6rem;margin-right: 1rem;}
.file-multiple-input .image-list .image-item .progress-wrapper{width:100%;display: flex;justify-content:center;align-items: center;position: absolute;top:100px;left: 0;}
.file-multiple-input .image-list .image-item .progress-wrapper.error{font-size: 1.2rem;color:var(--error-color)}
.file-multiple-input .image-list .image-item .progress-box{width:90px;height: 6px;overflow: hidden;border-radius: 5px;background-color: var(--bg-color2);opacity: 0;}
.file-multiple-input .image-list .image-item .progress-box.run{opacity: 1;}
.file-multiple-input .image-list .image-item .progress-box .progress-bar{background-color: var(--main-color);width: 0;height: 100%;border-radius: 5px;transition-duration: 0.3s;}
.file-multiple-input .image-list .image-item .del-button{position: absolute;top:50%;left: 50%;width: 6rem;height: 3rem;border-radius: 5px;background-color: #333333;display: flex;justify-content: center;align-items:center;opacity: 0;transition-duration: 0.3s;pointer-events: none;transform: translate(-50%,-50%);}
.file-multiple-input .image-list .image-item .del-button::before{content:'삭제';font-size: 1.2rem;color:var(--white-color);}

.file-multiple-input .image-list .image-item.error{border:1px solid var(--error-color);}
.file-multiple-input .image-list .image-item.error .image-view{display: flex;justify-content: center;align-items: center;padding: 1rem;word-break: keep-all;text-align: center;color: var(--error-color);}

.file-multiple-input .image-list .image-item:hover .del-button{opacity: 0.3;pointer-events: auto;}
.file-multiple-input .image-list .image-item:hover .del-button:hover{opacity: 1;}



.file-multiple-input .image-list .image-item .image-view.icon-file {background:#acc0c7 url('../images/mimetype.png') 0 0 no-repeat; background-size:100% auto;}
.file-multiple-input .image-list .image-item .image-view.icon-file.hwp {background-color:#5bb4e5; background-position:0 -100px;}
.file-multiple-input .image-list .image-item .image-view.icon-file.doc {background-color:#3a7dda; background-position:0 -200px;}
.file-multiple-input .image-list .image-item .image-view.icon-file.docx {background-color:#3a7dda; background-position:0 -300px;}
.file-multiple-input .image-list .image-item .image-view.icon-file.ppt {background-color:#ff6f20; background-position:0 -400px;}
.file-multiple-input .image-list .image-item .image-view.icon-file.pptx {background-color:#ff6f20; background-position:0 -500px;}
.file-multiple-input .image-list .image-item .image-view.icon-file.xls {background-color:#009a49; background-position:0 -600px;}
.file-multiple-input .image-list .image-item .image-view.icon-file.xlsx {background-color:#009a49; background-position:0 -700px;}
.file-multiple-input .image-list .image-item .image-view.icon-file.pdf {background-color:#fe4819; background-position:0 -800px;}
.file-multiple-input .image-list .image-item .image-view.icon-file.csv {background-color:#77b800; background-position:0 -900px;}
.file-multiple-input .image-list .image-item .image-view.icon-file.txt {background-color:#575a5d; background-position:0 -1000px;}
.file-multiple-input .image-list .image-item .image-view.icon-file.jpg {background-color:#cf7600; background-position:0 -1100px;}
.file-multiple-input .image-list .image-item .image-view.icon-file.jpeg {background-color:#cf7600; background-position:0 -1200px;}
.file-multiple-input .image-list .image-item .image-view.icon-file.bmp {background-color:#0d9b8c; background-position:0 -1300px;}
.file-multiple-input .image-list .image-item .image-view.icon-file.png {background-color:#007770; background-position:0 -1400px;}
.file-multiple-input .image-list .image-item .image-view.icon-file.gif {background-color:#5a8e22; background-position:0 -1500px;}
.file-multiple-input .image-list .image-item .image-view.icon-file.ico {background-color:#bc34ba; background-position:0 -1600px;}
.file-multiple-input .image-list .image-item .image-view.icon-file.psd {background-color:#485dc5; background-position:0 -1700px;}
.file-multiple-input .image-list .image-item .image-view.icon-file.ai {background-color:#ef8200; background-position:0 -1800px;}
.file-multiple-input .image-list .image-item .image-view.icon-file.eps {background-color:#ffb60f; background-position:0 -1900px;}
.file-multiple-input .image-list .image-item .image-view.icon-file.mp3 {background-color:#a74dc3; background-position:0 -2000px;}
.file-multiple-input .image-list .image-item .image-view.icon-file.mp4 {background-color:#b22873; background-position:0 -2100px;}
.file-multiple-input .image-list .image-item .image-view.icon-file.wav {background-color:#502d7f; background-position:0 -2200px;}
.file-multiple-input .image-list .image-item .image-view.icon-file.mpeg {background-color:#d53044; background-position:0 -2300px;}
.file-multiple-input .image-list .image-item .image-view.icon-file.mpg {background-color:#d53044; background-position:0 -2400px;}
.file-multiple-input .image-list .image-item .image-view.icon-file.mov {background-color:#0096db; background-position:0 -2500px;}
.file-multiple-input .image-list .image-item .image-view.icon-file.avi {background-color:#e23b30; background-position:0 -2600px;}
.file-multiple-input .image-list .image-item .image-view.icon-file.gz {background-color:#95774c; background-position:0 -2700px;}
.file-multiple-input .image-list .image-item .image-view.icon-file.tar {background-color:#856343; background-position:0 -2800px;}
.file-multiple-input .image-list .image-item .image-view.icon-file.tgz {background-color:#a47700; background-position:0 -2900px;}
.file-multiple-input .image-list .image-item .image-view.icon-file.zip {background-color:#af9a00; background-position:0 -3000px;}

footer {bottom: 0;right: 0;width: 100%;height: 5rem;justify-content: flex-end;align-items: center;display: flex;padding-right: 2rem;pointer-events: none;}
footer .office-name{font-weight: 500;color:var(--billible-color);}

@media screen and (max-width: 1200px) {
    .side-bar {display: none}
    main {width: 100%;}

    header .member-box .member-menu {width: 18rem;}
    header .member-box .member-menu .name-box {font-size: 1.4rem;}
    header .member-box .member-menu .menu-list .menu-item {margin: 1.5rem 0;}
    header .member-box .member-menu .menu-list .menu-item a {font-size: 1.4rem;}

}

@media screen and (max-width: 720px) {
    .wrap {min-height: auto;}
    header .top-box {padding: 0 1.5rem;}
    .content-wrap {padding: 1.5rem 1.5rem 6rem;}
    .search-box .info {font-size: 1.2rem;display: flex;flex-direction: column;row-gap: 0.5rem;}
    .search-box .row-box .left-box {width: 100%;flex-direction: column;align-items: flex-start;row-gap: 0.5rem;}
    .search-box .row-box {min-height: 7rem;}
    .search-box .row-box .input-box {width: 100%;}



}