@charset "utf-8";

body,html {
    height:100%;
    padding:0;
    margin:0;
    
}
body {font-size: 0.875rem;}
body * {box-sizing: border-box; font-family: 'Noto Sans KR', '맑은 고딕', Helvetica, Arial, Lucida, sans-serif; }
a {color: #000; text-decoration: none}
a:hover {color:#8bc34a;}
.container {padding: 48px 0; width:96%; max-width:1280px; margin:0 auto;}

.al {text-align: left;}
.ac {text-align: center;}
.ar {text-align: right;}
.admin-btn-area {font-size:0.8rem; color:#9d9d9d; display:inline-block;}
.admin-btn-area a {font-size:0.9rem;}
button.btns, a.btns {display: inline-block;margin:4px 0 }
.btn-new-com {color:#8cb34a; font-weight:600}
.btn-basic {
    border-radius:8px;
    height:40px; 
    line-height:40px; 
    background:#8BC34A;  
    border:1px solid #dfdfdf; 
    padding:0 24px;
    color:#fff;
    font-size:0.9rem;
    }
.btn-basic:hover {
    background:#7AB33C;
    color:#ffffff;
    box-shadow:inset 2px 2px 5px rgba(0, 0, 0, 0.05);
    
}
.btn-gray {
    border-radius:8px;
    height:40px; 
    line-height:40px; 
    background:#efefef;  
    border:1px solid #dfdfdf; 
    padding:0 24px;
    color:#000;
    }
.btn-gray:hover {
    background:#dfdfdf;
    box-shadow:inset 2px 2px 5px rgba(0, 0, 0, 0.05);
}
.btn-sch {background:#efefef; border:1px solid #dfdfdf; height:34px; line-height:32px; padding:0 12px }
.btn-file-del {background:#efefef; border:1px solid #dfdfdf; height:28px; line-height:26px; padding:0 12px; border-radius:4px; }
.error-page {
    width:90%;
    max-width:400px;
    margin:0 auto;
    border:1px solid #dfdfdf;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding:24px 0;
    text-align: center;
    border-radius: 24px;
}
.tb-form {width:100%; border-spacing:0; padding:0; margin:0; }
.tb-form tbody tr:last-child td, .tb-form tbody tr:last-child th {border-bottom:1px solid #2d2d2d;}
.tb-form tbody tr:first-child td, .tb-form tbody tr:first-child th {border-top:1px solid #2d2d2d;}
.tb-form tbody th {background:#f6f6f6;border:1px solid #dfdfdf; font-weight:500; width:150px; padding:8px; border-left:0; border-bottom:0}
.tb-form tbody td {border:1px solid #dfdfdf; border-left:0; border-bottom:0; padding:8px;}
.tb-form tbody td:last-child {border-right:0;}

.form-input-text {border:1px solid #efefef; padding:8px; height:34px; line-height:36px;}
.form-input-text:focus {outline:none; border:1px solid #8BC34A; }

.full {width:100%;}
.btn-file {background:#efefef; border:1px solid #dfdfdf; border-radius:8px; }

#filelist {list-style:none; width:100%;padding:0; margin:0;}
#filelist li {border:1px solid #dfdfdf; padding:8px; margin-top:-1px; display:flex; justify-content:start; align-items:center;}
#filelist li:first-child {margin:0;}
#filelist .img-box {flex:0 0 100px; text-align:center; margin-right:16px;border:0; display: inline-block; overflow:hidden; vertical-align:middle}
#filelist .img-box img {width:auto; max-width:100%;height:auto;}
#filelist .image-name {flex: 1 1;}
#filelist .progress-bar {width:100%; height:12px; background:#efefef; border-radius:6px; border:0; overflow:hidden; padding:0; margin:8px 0 0 0; box-shadow:none}
#filelist .progress-bar .bar {width:0%; height:12px; background:#2d2d2d; overflow:hidden; border:0;padding:0; margin:0; box-shadow:none }

#photo .tb-list {width:100%; margin:8px 0; border-spacing:0;  }
#photo .tb-list thead th {border-top:1px solid #cfcfcf; border-bottom: 1px solid #cfcfcf; background:#f6f6f6; padding:16px 0; text-align:center; font-weight:500; }
#photo .tb-list tbody td {border-bottom: 1px solid #dfdfdf; padding:12px; text-align:center; color:#000; font-weight:400}
#photo .tb-list tbody td i {color:#aeaeae;}
#photo .tb-list tbody td.td-subject {text-align:left;}
#photo .tb-list tbody td.td-subject .point {color:#000; font-weight:500}

#photo .form-subject {padding:8px;}
#photo .subject {font-size:1.8rem; padding:8px 0; font-weight: 600}
#photo .info {color:#9d9d9d; font-size:0.875rem; padding:4px 0 8px 0; border-bottom:1px solid #cfcfcf;}
#photo .content {padding:16px 0;}
#photo .photo {padding: 0;}
#photo .tb-list span.red, #photo .tb-list span.red i {color:#ff0000; font-weight:500}

#photo .content {border-bottom:1px solid #dfdfdf; padding:24px;}

#photo .comment-wrap {padding: 24px 0;}
#photo .comment-wrap h3 {font-size: 1.2rem; border-bottom: 1px solid #efefef;}
#photo .comment-wrap h3 span {border-bottom:1px solid #9d9d9d; display:inline-block; padding:4px 8px}
#photo .photo .file {padding: 0; margin: 12px;}
#photo .photo .file span {display: inline-block; font-weight: 600; font-size: 0.9rem}
#photo .photo .file span:after {display: inline-block; height: 10px; width: 1px; background: #dfdfdf; content: ""; margin: 0 8px}
#photo .photo .file a {color:#75AB38; font-weight: 400;}
#photo .form-textarea {border:1px solid #dfdfdf; border-radius: 4px; width: 100%; height: auto; min-height: 100px; padding: 8px}
#photo .form-textarea:focus {outline:none; border: 1px solid #8bc34a;}

.comment-list ul {list-style:none; padding:24px 0; margin: 0;}
.comment-list ul li {padding:16px; border-top:1px solid #dfdfdf}
.comment-list ul li:first-child {border-top:1px solid #dfdfdf;}
.comment-list ul li.reply {border:0; background:#f6f6f6; border-radius:16px;margin:16px 24px 16px 48px}
.comment-list ul li.reply::before {display:inline-block; }
.comment-name {font-size:0.875rem; color:#9d9d9d}
.comment-name span {font-weight:600; font-size:1.1rem; color:#000}
.comment-list .btn-comment-toggle {background:transparent; border:0; padding:0; margin:12px 0 0 0; color:#8bc34a; font-weight:600}
.comment-list .btn-comment-toggle i {transform: rotate(0deg);display:inline-block;}
.comment-list .btn-comment-toggle.show i {transform: rotate(180deg);}
.comment-reply {display:none;}
.comment-form-content {width:0;height:0;border:none;padding:0; margin:0; resize:none;overflow:hidden;}

.preview {display:flex; flex-wrap:wrap; justify-content:start; align-items: start;}
.preview .img-wrap {flex:0 0 20%; padding:1%;height:auto;}
.preview .img-wrap2 {flex:0 0 100%; padding:1%;height:auto;}

.preview .img-wrap img {width:100%; height:100%; max-height:200px; object-fit:contain}
.preview .img-wrap2 img {width:100%; max-width:100%;}
.btn-comment-edit-toggle, .btn-comment-delete {background: #fff; color:#000; font-weight:400; border:0; margin:2px; padding:2px; border:1px solid #efefef;line-height:100%; border-radius:4px}
.comment-edit-wrap {display:none;}
.note-editing-area {background:#fff;}
#photo h2 {text-align:center; font-size:1.8rem;}
#photo .auth-wrap {width:80%; margin:0 auto; max-width:300px;}
#photo .auth-wrap label {display:block; font-size:1.1rem; padding-top:24px}
#photo .auth-wrap input {display:block; width:100%;}
.btn-auth-wrap {padding:8px 0;}
.btn-wrap {padding:8px 0;}
button:focus {outline:none;}

#pickfiles {margin:8px 0;}

#loading {
    display:none;
    text-align:center;
    position:fixed; 
    z-index:9999; 
    background:rgba(0, 0, 0, 0.8); 
    width:100%; height:100%; 
    left:0; 
    top:0; 
    color:#fff; 
    border-radius:0; 
    
    font-size:1.6rem;
    }
#loading.show {
    display:flex !important;
    justify-content: center; 
    align-items: center;
    }

#loading span {

    display:inline-block;
    transform: translateZ(0);
    animation: spiner 1.5s infinite cubic-bezier(0.53, 0.21, 0.57, 0.85);
    color:rgba(255, 255, 255, 0.8);
}
#loading span i {
    font-size:48px;
}

@keyframes spiner {
  0% {
    transform: rotate(0deg);
    transform-origin:center center;
  }
  100% {
    transform: rotate(720deg);
    transform-origin:center center;
  }
}

.photo-list-search {display:flex; justify-content: start; align-items: end; margin:0; padding:0}
.page-guide {flex:0 0 40%;}
.sch-wrap {flex:0 0 60%; text-align:right;}
.frm-sch {text-align:right;}
.form-text-sch {vertical-align:middle}
.btn-sch {vertical-align:middle;}
.bottom-btn-wrap {display:flex; justify-content:start; align-items:center; width:100%;}
.bottom-btn-wrap .left-wrap {flex: 0 0 30%; text-align:left;}
.bottom-btn-wrap .right-wrap {flex: 0 0 70%; text-align:right;}

.page-wrap {text-align:center;}
.page-wrap a {display:inline-block; padding:4px; min-width:38px; background:#fff; border:1px solid #efefef; text-align:center}
.page-wrap a:hover {background:#f6f6f6;}
.page-wrap a.on {border:1px solid #000}
.guide {padding:0 24px ;}
.com-cnt { font-size:0.9rem;color:#9d9d9d}

.login-wrap {width:70%; max-width:400px; margin:0 auto; padding:24px;}

.file-list {padding:0; margin:0;}
.file-list li {display:flex; justify-content:start; align-items: center; padding:8px; border-bottom:1px solid #efefef;margin:0}
.file-list li:last-child {border-bottom:0;}
.file-list li div {flex:0 0 100px;}
.dropzone {border:1px solid #8bc34a; width:100%; height:200px;}

.form-guide {padding:4px 0 0 0; margin:0; line-height:140%;}