@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
/*   
  font-family: "Crimson Text", serif;
  font-weight: 600;
  font-style: italic; 
*/

/* list.php  */
.list_button {width:100%;height:50px;padding:10px 0 10px 26px;display:flex;justify-content: flex-start;align-items: center;}
.list_button span {display:inline-block;width:20px;height:30px;margin-right:10px;line-height:30px;text-align: center;}
.sort-btn {color: #333;font-size:0.85rem;}
.sort-btn.active {color:#FF0000;}

.samo_list {width:100%;padding:10px 50px;}
.samo_list li {width:100%;padding:0 10px;}
.samo_list li:nth-child(odd) {display:flex;justify-content: space-between;align-items: flex-start;}
.samo_list li:nth-child(even) {display:flex;flex-direction: row-reverse;justify-content:space-between;align-items: flex-start;}
.samo_list li:nth-child(even) .listbox01 {padding-left:20px;}
.samo_list li:nth-child(odd) .listbox01 {text-align: right; padding-right:20px;}
.samo_list li:nth-child(even) .listbox03 {border-right:1px solid #292929;padding-right:20px; text-align:right;position:relative;}
.samo_list li:nth-child(odd) .listbox03 {border-left:1px solid #292929;padding-left:20px;margin-right:1px;position:relative;}
.samo_list li .listbox03 span {font-size:14px;position:absolute;}
.samo_list li:nth-child(even) .listbox03 span {top:20px; right:-8px;}
.samo_list li:nth-child(odd) .listbox03 span {top:20px; left:-8px;}

.listbox01 {width:25%;padding-top:10px;padding-bottom:5px;}
.listbox01 span {display:none;}
.listbox02 {width:25%;overflow:hidden;}
.listbox03 {width:50%;min-height:210px;padding-top:16px;}
.listbox03 p:nth-child(odd) {padding:5px;font-weight:700;font-size:0.85rem;}
.listbox03 p:nth-child(even) {padding:0 5px 10px 5px;font-size:0.85rem;color:#4d4c4c}
.listbox01 span.date_wr {display:inline-block;font-family: "Crimson Text", serif; font-size:1.8rem;font-weight:700;font-style: italic;color:#ff2b2b}
.listbox01 span.subject_wr {display:block;font-size:0.95rem;font-weight:500; color:#4d4c4c}
.listbox02 .thumbs {width:100%;height:100%;object-fit:cover;}
.listbox02 .tube {width:30px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.listbox02 .no_img {border:1px solid #f1f1f1;}

/* view.skin.php */
.view_content {width:100%;height:auto; margin:15px 0 50px 0;padding:12px;font-size:0.85rem;line-height:2;background-color: #f1f1f1;border-radius:10px;}
.images_box {display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:minmax(150px, auto);grid-gap:10px;margin-bottom:30px;}
.img_container {position:relative;overflow: hidden;display:flex;align-items: flex-end;background:#F4F4F4;}
.img_file {width: 100%;height: auto;object-fit:cover;}
.file_text {position:absolute;right:0;bottom:0;width:100%;height:40px;background:rgba(0, 0, 0, .8);padding-left:8px;color:#FFF;line-height:40px;}
.file_text::before {content:"•";padding:0 5px;}
.tag-item {display: inline-block;background-color: #f1f1f1;color: #333;padding: 2px 6px;border-radius: 5px;font-size: 0.75rem;margin: 3px;}
.tag-item::before {content:"#";padding:0 3px;}

/* write.skin.php */
.v_container169 {width:100%;height:auto;position:relative;margin-bottom:56.25%;}
.v_container169 video {width:100%;height:auto;position:absolute;left:0;top:0;object-fit:contain;}
.video_container43 {width:100%;height:auto;position:relative;margin-bottom:75%;}
.video_container43 video {width:100%;height:auto;position:absolute;left:0;top:0;object-fit:contain;}

.date_ul {display:flex;justify-content:flex-start;align-items: center;margin-top:20px;}
.date_ul li {padding:5px}

.youtube_id {margin-bottom:10px;}
.youtube_id p {padding:5px;margin-bottom:4px;}
.youtube_con {width:100%;margin-bottom:30px;}
textarea.sm_text {width:100%;background-color: #f2f2f2;border-radius:10px;border:1px solid rgb(152, 203, 252);padding:10px;}

.write_cate {width:100%;border:1px solid #CCC;border-radius:6px;padding:20px;position:relative;}
.write_cate div {position:absolute;top:-12px;left:30px;padding:5px 10px;background-color:#FFF;}

.info_input {padding:12px 18px; border:1px solid #DDD;background:#f2f2f2;color:#000;vertical-align:middle;border-radius:3px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    }






@media screen and (max-width:825px) {
    .samo_list {padding:10px 0 0 10px;}
    .samo_list li:nth-child(odd) {flex-direction:column;padding-left:10px}
    .samo_list li:nth-child(even) {flex-direction:column; padding-left:10px;} 
    .samo_list li .listbox01 {order:1;}
    .samo_list li .listbox02 {order:3;}
    .samo_list li .listbox03 {order:2;}
    .samo_list li div {border-left:1px solid #292929;}
    .samo_list li:nth-child(odd) .listbox01 {text-align: left; padding-left:20px;padding-right:0;}
    .samo_list li:nth-child(even) .listbox03 {border-right:none;padding-left:20px;padding-right:0; text-align:left;position:relative;}
    .samo_list li:nth-child(odd) .listbox03 {border-left:none;padding-left:20px;margin-right:0;position:relative;}
    .samo_list li .listbox03 span {display:none;}
    .listbox01 {width:100%;padding-top:10px;padding-bottom:5px;position:relative;}
    .listbox01 span.circle {display:block;position:absolute;left:-8px;top:20px;font-size:14px;}
    .listbox02 {width:80%;overflow:hidden;padding-bottom:30px;padding-left:10px;}
    .listbox03 {width:100%;min-height:80px;padding-top:10px;}
    .samo_list li:nth-child(odd) .listbox03 {border-left:1px solid #292929;}

    .listbox03 p:nth-child(odd) {padding:5px;font-weight:700;font-size:0.85rem;}
    .listbox03 p:nth-child(even) {padding:0 5px 10px 5px;font-size:0.85rem;color:#4d4c4c}
    .listbox01 span.date_wr {display:inline-block;font-family: "Crimson Text", serif; font-size:1.8rem;font-weight:700;font-style: italic;color:#ff2b2b}
    .listbox01 span.subject_wr {display:block;font-size:0.95rem;font-weight:500; color:#4d4c4c}
    .listbox02 .thumbs {width:100%;height:100%;object-fit:cover;}
    /* .listbox02 .tube {width:30px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);} */
    .listbox02 .no_img {border:1px solid #f1f1f1;}
}