section {margin-top:var(--section-margin)}


/* 이미지 첨부 공통영역 시작 */
.photoupload { padding: 0.75rem 0.75rem 0.5rem 0.75rem; margin-bottom: 0.5rem; border: 1px solid var(--color-gray-light); border-radius: 0.25rem; }
.photoupload.photo-invalid { border-color: #dc3545; }
.photoupload.photo-invalid .title { background: no-repeat right center; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='18' height='18' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e"); }
.photoupload .title { padding-bottom: 0.25rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--color-gray-light); }
.photoupload .body .list { display: flex; flex-wrap: wrap; }
.photoupload .body .list .item { position: relative; width: 100%; margin: 0 0.25rem 0.25rem 0; border: 1px solid var(--color-gray-light); background: no-repeat center / cover; overflow: hidden; cursor: grab; }
.photoupload .body .list .item:after { content: ""; display: block; padding-bottom: 80%; }
.photoupload .body .list .item.addnew { display: flex; justify-content: center; align-items: center; color: var(--color-gray-light); font-size: 3rem; border-style: dashed; cursor: pointer; }
.photoupload .body .list .item .trash { position: absolute; width: 100%; bottom: 0; transform: translateY(100%); padding: 0.25rem 0; text-align: center; color: var(--color-red); background-color: #000; cursor: pointer; transition: all 0.4s; }
.photoupload .body .list .item:hover .trash { transform: translateY(0); opacity: 0.5; }
.photoupload .imagefileinput { display: none; }

/* 이미지 첨부 공통영역 끝 */






/* 목록(tile) 시작 */

.board-list { display: flex; flex-wrap: wrap; }
.board-list .board-tile { position:relative; background-color: #fff; border: 1px solid var(--color-gray-light); overflow: hidden; cursor: pointer; transition: all 0.4s; }
.board-list .board-tile:nth-child(n) { width: calc(100%/3 - 0.8rem); margin-right: calc(0.8rem*3/2); margin-bottom: calc(0.8rem*3/2); }
.board-list .board-tile:nth-child(3n) { margin-right: 0; }
.board-list .board-tile:hover { transform: scale(1.02); box-shadow: 4px 12px 30px 6px rgb(0 0 0 / 9%); }
.board-list .board-tile .thumb { width: 100%; background: no-repeat center / cover; }
.board-list .board-tile .thumb::after { content: ""; display: block; padding-bottom: 80%; }
.board-list .board-tile .thumb.noimage { position: relative; border-bottom: 1px solid var(--color-gray-light); }
.board-list .board-tile .thumb.noimage i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 5rem; color: var(--color-gray-light); }
.board-list .board-tile .content { padding: 1rem; }
.board-list .board-tile .content .title { font-size: 1.1rem; font-weight: 500; /* white-space: nowrap; overflow: hidden; text-overflow: ellipsis; */ }
.board-list .board-tile .content .name { margin-top: 0.5rem; }
.board-list .board-tile .content .etc { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 300; letter-spacing: 0; color: var(--color-text-light); }

/*xl*/ @media (max-width: 1199px) {
}
/*lg*/ @media (max-width: 991px) {
    .board-list .board-tile:nth-child(n) { width: calc(100%/2 - 0.2rem); margin-right: calc(0.2rem*2/1); margin-bottom: calc(0.2rem*2/1); }
    .board-list .board-tile:nth-child(2n) { margin-right: 0; }
}
/*md*/ @media (max-width: 767px) {
    .board-list .board-tile .content { padding: 0.5rem; }
}
/*sm*/ @media (max-width: 575px) {
}

/* 목록(tile) 끝 */






/* 목록(table) 시작 */
.board-table th { white-space: nowrap; }
.board-table tbody tr { cursor: pointer; }
.board-table tbody tr:hover { background-color: var(--color-background); }
.board-table tr td.title div { max-height: 1.5rem; overflow: hidden; position: relative; color: transparent; }
.board-table tr td.title div::after { content: attr(data-text); position: absolute; top: 0; left: 0; right: 0; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-table .count { text-align: right; }
/*md*/ @media (max-width: 767px) {
    .board-table .count { display: none; }
    .board-table .insertdate { display: none; }
}
/* 목록(table) 끝 */








/* 상세 시작 */
.board-view .board-info { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px dashed var(--color-gray-light); }
.board-view .board-info .title { font-size: 1.5rem; font-weight: 300; }
.board-view .board-info .name { margin-right: 0.5rem; font-weight: 500; }
.board-view .board-info .name .username { font-size: 0.75rem; color: var(--color-text-light); }
.board-view .board-info .insertdate { margin-right: 0.5rem; font-size: 0.9rem; font-weight: 300; color: var(--color-text-light); }
.board-view .board-info .count { font-size: 0.9rem; font-weight: 300; color: var(--color-text-light); }
.board-view .board-body { overflow: hidden; }
.board-view .board-body p { margin-bottom: 0; }
.board-view .board-body table { max-width: 100%; }
/*md*/ @media (max-width: 767px) {
    .board-view .board-info .title { font-size: 1.5rem; }
}

.adminmemo { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--color-gray-light); }
.adminmemo#divAdminMemo_Admin #txtaAdminMemo { height: 200px; }
.adminmemo#divAdminMemo_Admin .button-area { text-align: right; }
.adminmemo#divAdminMemo_User .admin-badge { margin-right: 0.5rem; }
.adminmemo#divAdminMemo_User .admin-badge .name { margin-right: 0.25rem; font-size: 0.8rem; font-weight: 500; }
.adminmemo#divAdminMemo_User .insertdate { font-weight: 300; }
.adminmemo#divAdminMemo_User .adminmemo-body { margin-top: 0.5rem; white-space: pre-wrap; }
/* 상세 끝 */



/* 하단 버튼영역 시작 */
.bottombuttons { margin-top: 1rem; text-align: right; }
/* 하단 버튼영역 끝 */

#sectionCs .container { }
#sectionCs .container .header { text-align: center; }
#sectionCs .container .header .title { margin-bottom: 0; font-size: 2.5rem; font-weight: 300; }
#sectionCs .container .header .description { margin-bottom: 0; }
#sectionCs .container .body { display: flex; justify-content: space-between; padding: 2rem;  }
#sectionCs .container .body .left { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; border-right: 1px solid var(--color-gray-light); }
#sectionCs .container .body .left .block .title { margin-bottom: 0.25rem; }
#sectionCs .container .body .left .block .title span { font-size: 1rem; font-weight: 500; }
#sectionCs .container .body .left .block .big { font-size: 2rem; font-weight: 300; }
#sectionCs .container .body .left .block .description { margin-bottom: 1.5rem; color: var(--color-text-light); }
#sectionCs .container .body .right { flex: 1.3; display: flex; flex-wrap: wrap; align-items: center; }
#sectionCs .container .body .right .block { flex: 0 0 33%; margin: 0.5rem 0; text-align: center; cursor: pointer; transition: all 0.4s; }
#sectionCs .container .body .right .block:hover { transform: translateY(-5px); opacity: 0.7; }
#sectionCs .container .body .right .block .icon { margin-bottom: 0.5rem; font-size: 2rem; }
#sectionCs .container .body .right .block .title { margin-bottom: 0.2rem; font-size: 1.1rem; font-weight: 500; }
#sectionCs .container .body .right .block .description { font-size: 0.9rem; color: var(--color-text-light); }
/*xl*/ @media (max-width: 1199px) {
    #sectionCs .container .body .left .block .big { font-size: 1.75rem; }
}
/*lg*/ @media (max-width: 991px) {
    #sectionCs .container .header { padding: 1.25rem 0 2rem 0; }
    #sectionCs .container .header .title { font-size: 1.5rem; }
    #sectionCs .container .body { padding: 0; flex-direction: column; }
    #sectionCs .container .body .left { padding: 2rem 0; border: 0; border-top: 1px solid var(--color-gray-light); border-bottom: 1px solid var(--color-gray-light); }
    #sectionCs .container .body .right { padding-top: 2rem; }
}
/*md*/ @media (max-width: 767px) {
    #sectionCs .container .body .right .block { flex: 0 0 50%; }
    #sectionCs .container .body .left .block .big { font-size: 1.3rem; }
}






#sectionEstimate .row > div { margin-bottom: 1rem; }
#sectionEstimate textarea { height: 200px; }
#sectionEstimate .buttons { text-align: right; }

#sectionEstimate .people { display: flex; justify-content: flex-end; }
#sectionEstimate .people .block { display: flex; align-items: center; margin-left: 1rem; font-weight: 500; white-space: nowrap; }
#sectionEstimate .people .block .input-group { width: auto; margin: 0 0.5rem; }
#sectionEstimate .people .block .input-group button { padding: 0 0.5rem; }
#sectionEstimate .people .block .input-group button i { margin-right: 0; -webkit-text-stroke: 1px; }
#sectionEstimate .people .block .input-group input { width: 40px; padding: 0; text-align: center; font-size: 1.25rem; background-color: #fff; border-color: var(--color-gray-dark); }
/*md*/ @media (max-width: 767px) {
    #sectionEstimate .people { flex-direction: column; align-items: flex-end; }
    #sectionEstimate .people .block { margin-bottom: 0.25rem; }
    #sectionEstimate .people .block:last-child { margin-bottom: 0; }
}


#sectionLogin_Member .container { max-width: 500px; }
#sectionLogin_Member .container .form-floating { margin-bottom: 1rem; }
#sectionLogin_Member .container .form-check { margin-bottom: 1rem; }
#sectionLogin_Member .container #btnLogin { width: 100%; padding: 1rem 1.5rem; margin-bottom: 0.5rem; }
#sectionLogin_Member .container .links { display: flex; align-items: center; font-size: 1rem; }
#sectionLogin_Member .container .links a { margin: 0 0.5rem; }
#sectionLogin_Member .container .links a:first-child { margin-left: 0; }
#sectionLogin_Member .container .links a:last-child { margin-right: 0; }
#sectionLogin_Member .container .links .split { height: 0.6rem; border-left: 1px solid var(--color-gray-light); }
#sectionLogin_Member .container .snslogin { display: none; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--color-gray-light); }
#sectionLogin_Member .container .snslogin .btn { width: 100%; padding: 0.75rem; font-weight: 500; }
#sectionLogin_Member .container .snslogin #btnLogin_Sns { display: none; }

#sectionLogin_Anonymous .container { max-width: 500px; }
#sectionLogin_Anonymous .container .form-floating { margin-bottom: 1rem; }
#sectionLogin_Anonymous .container button { width: 100%; padding: 1rem 1.5rem; }





#sectionJoin_Input .container { max-width: 500px; }
#sectionJoin_Input .container .form-floating:not(.form-id) { margin-bottom: 1rem; }
#sectionJoin_Input .idtip { margin-top: 0.25rem; padding-left: 1.5rem; font-size: 0.875rem; color: var(--color-text-light); }
#sectionJoin_Input .idtip li span { position: relative; left: -0.25rem; }

#sectionJoin_Agree .container { max-width: 500px; }
#sectionJoin_Agree .container .tab-content { margin-bottom: 1rem; }
#sectionJoin_Agree .container .tab-content .tab-pane { height: 150px; padding: 0.5rem; overflow: auto; white-space: pre-wrap; border: 1px solid #dee2e6; border-top: 0;  }
#sectionJoin_Agree .container .form-check { text-align: right; cursor: pointer; }
#sectionJoin_Agree .container .form-check > * { cursor: pointer; }
#sectionJoin_Agree .container .form-check .form-check-input { float: none; margin-left: 0; margin-right: 0.25rem; }
/*sm*/ @media (max-width: 575px) {
    #sectionJoin_Agree .container .nav-tabs .nav-item .nav-link { padding: 0.5rem; }
}

#sectionJoin_Button .container { max-width: 500px; }
#sectionJoin_Button .container button { width: 100%; padding: 1rem 1.5rem; }





#sectionResetPassword .container { max-width: 500px; }
#sectionResetPassword .container .form-floating { margin-bottom: 1rem; }
#sectionResetPassword .container button { width: 100%; padding: 1rem 1.5rem; }
#sectionResetPassword .container .description { margin-bottom: 1rem; color: var(--color-text-light); }

#divFaqTitle {margin-bottom: 1rem;}


.star-rating {
  display:flex;
  flex-direction: row-reverse;
  justify-content:space-around;
  padding:0.2em;
  text-align:center;
  width:5em;
}

.star-rating input {
  display:none;
}

.star-rating label {
  color:#ccc;
  cursor:pointer;
}

.star-rating :checked ~ label {
  color:#f90;
}

.star-rating label:hover,
.star-rating label:hover ~ label {
  color:#fc0;
}

/* explanation */

article {
  background-color:#ffe;
  box-shadow:0 0 1em 1px rgba(0,0,0,.25);
  color:#006;
  font-family:cursive;
  font-style:italic;
  margin:4em;
  max-width:30em;
  padding:2em;
}