@charset "utf-8";

.art_grid_wrap { display: flex; padding: 0px; box-sizing: border-box;width: 100%;} 

.art_grid_box {  width: 100%;}
.art_grid_wrap:only-of-type .art_grid_box { width: 100%;}/* 한 개의 아이템이 있는 경우 */
/* .art_grid_wrap:has(> .art_grid_box:nth-of-type(2):nth-last-of-type(1)) .art_grid_box:first-child { width: 65%;} 두 개의 아이템이 있는 경우 */
.art_grid_wrap:has(> .art_grid_box:nth-of-type(2):nth-last-of-type(1)) .art_grid_box{ width: 40%;} /* 두 개의 아이템이 있는 경우 */
.art_grid_wrap:has(> .art_grid_box:nth-of-type(2):nth-last-of-type(1)) .art_grid_box:last-child { width: 60%;} 
.art_grid_wrap:has(> .art_grid_box:nth-of-type(3)) .art_grid_box { width: 33%; }  /* 세 개의 아이템이 있는 경우 */

@media (max-width: 991px) {
	.art_grid_wrap:has(> .art_grid_box:nth-of-type(2):nth-last-of-type(1)) .art_grid_box:first-child,
	.art_grid_wrap:has(> .art_grid_box:nth-of-type(2):nth-last-of-type(1)) .art_grid_box:last-child ,
	.art_grid_wrap:has(> .art_grid_box:nth-of-type(3)) .art_grid_box{ width: 100%;} 
}

.submit {   }	
.submit_dell {   }	
.art_grid_wrap2 {   } 
.hidden_item2 {   }
.art_grid_wrap2 {   }
.submit2 {   }


/*s_grid 수정버튼*/
.hidden_item_btn { position: absolute;top: 50px;left: 50%; transform: translate(-50%, 0%);
    border: none;
    border-radius: 54px;
    white-space: nowrap;
    color: white;
    cursor: pointer;
    background-color: #555;
    font-size: 12px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 5px;
    z-index: 4;
    width: 40px;
    height: 40px;
    transition: width 0.3s ease, height 0.3s ease;
}
.hidden_item_btn:hover { width: 50px; height: 50px;}
.hidden_item { position: relative;  }
.hidden_item_btn { display: none;} 
.edit_hover .hidden_item_btn { display: block;} 

@media (min-width: 786px) {
    .hidden_item_btn { width: 60px; height: 60px; }
	.hidden_item_btn:hover { width: 70px; height: 70px; }
}
/* Modal CSS */
.grid_modal { display: none; position: fixed; z-index: 5; left: 0;top: 0;width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); }
.grid_modal_content { background-color: #fefefe; margin: 15% auto;padding: 20px; border: 1px solid #888; width: 80%; max-width: 600px; border-radius: 20px;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);animation: animateModal 0.4s;}
@keyframes animateModal {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}
.grid_modal .close { color: #aaa; float: right; font-size: 28px; font-weight: bold;}
.grid_modal .close:hover,
.grid_modal .close:focus { color: black; text-decoration: none; cursor: pointer;}





.edit_hover .s_grid_switch { display: flex;}
.s_grid_switch { display: none;}
.s_grid_switch {
    cursor: pointer;
    justify-content: center;
    z-index: 2;
    background: #6666667d; 
    border-radius: 10px;
    width: 100%;
    padding: 20px 10px; 
	margin-left: 0px;
}
.s_grid_switch select { height: 30px; border-radius: 4px; border: none; font-size: 14px;}
.s_grid_switch input { height: 30px; border-radius: 4px; border: none; font-size: 14px; width: 50px; padding: 5px;}
.s_grid_switch .s_grid_switch_bottom { text-align: right; margin-top:8px; border-bottom: 0px solid #e5ecee;}
.s_grid_switch .submit { background: var(--color-main); border: 1px solid var(--color-main); color:#fff; font-size: 12px; font-weight: 700; }
.s_grid_switch .submit:hover { background: #ccc; color:var(--color-main); border: 1px solid var(--color-main);font-size: 12px;font-weight: 700;}
.s_grid_switch .submit_dell { background: red; border: 1px solid red; color:#fff; font-size: 12px; font-weight: 700; }
.s_grid_switch .submit_dell:hover { background: #ccc; color:red; border: 1px solid red;font-size: 12px;font-weight: 700;cursor: pointer;}

.s_grid_switch_top{ display: flex; flex-wrap: wrap; gap: 5px;}

.edit_hover .s_grid_switch2 { display: flex;}
.s_grid_switch2 { display: none;}
.s_grid_switch2 {
    cursor: pointer;
    z-index: 2;
    background: #e9e9e9; 
    border-radius: 10px;
    width: 100%;
    padding: 20px 20px; 
}
.s_grid_switch2 select {
    height: 35px;
    border-radius: 4px; margin: 2px; border: none; font-size: 14px;
}
.s_grid_switch2 input {
    height: 35px;
    border-radius: 4px; margin: 2px; border: none; font-size: 14px; width: 50px; padding: 5px;
}
.s_grid_switch2 .submit2 {margin-left:10px; background: #000; border: 1px solid #000; color:#fff; font-size: 12px; font-weight: 700; }
.s_grid_switch2 .submit2:hover { background: #ccc; color:#000; border: 1px solid #000;font-size: 12px;font-weight: 700;}


@media (max-width: 991px) {
    .art_grid_wrap { flex-wrap: wrap; }
    .art_grid_box { width: 100%; }	
	.art_grid_wrap:has(> .art_grid_box:nth-of-type(3)) .art_grid_box { width: 49%;}
}
@media (max-width: 798px) {
	.art_grid_wrap:has(> .art_grid_box:nth-of-type(2):nth-last-of-type(1)) .art_grid_box {  width: 100%; }
	.art_grid_wrap:has(> .art_grid_box:nth-of-type(3)) .art_grid_box { width: 100%; }
	.s_grid_switch2 { flex-wrap: wrap;   }
}