https://nkwjc.coj.go.th/th/content/category/articles/id/4/cid/8/ RSS Feed | ศาลเยาวชนและครอบครัวจังหวัดนครสวรรค์ th https://nkwjc.coj.go.th/th/content/category/detail/id/4/cid/8/iid/564468/ <!-- ระบบแกลเลอรีภาพมินิมอลและเรียบหรูสำหรับระบบ CMS สำนักงาน (เวอร์ชัน 100% Responsive) - รองรับการแสดงผลทุกหน้าจอ (Mobile, Tablet, Desktop) โดยไม่ต้องพึ่งพา <style> หรือ Media Queries - แสดงผล 6 หมวดหมู่ หมวดละ 1-4 ภาพ จัดสัดส่วนลงตัวอัตโนมัติ - ใช้ Inline CSS 100% ปลอดภัยต่อระบบ CMS ทุกประเภท - แสดงรูปภาพเต็มพื้นที่ (Object-fit: cover) ไร้ขอบดำ ไม่โย้เย้ --> <div style="font-family: 'Sarabun', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 1200px; margin: 0 auto; padding: 15px; background-color: #ffffff; color: #333333; box-sizing: border-box;"><!-- ส่วนหัวข้อหลักของแกลเลอรี (ปรับขนาดอัตโนมัติตามหน้าจอด้วย clamp) --> <div style="text-align: center; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid #eaeaea; box-sizing: border-box;"> <h2 style="font-size: clamp(20px, 4vw, 28px); font-weight: 400; letter-spacing: 2px; color: #1a1a1a; margin: 0 0 10px 0; text-transform: uppercase; line-height: 1.4;">คำแนะนำในการติดต่อราชการ</h2> <p style="font-size: clamp(11px, 2.5vw, 14px); color: #8c8c8c; margin: 0; letter-spacing: 1px;">ศาลเยาวชนและครอบครัวจังหวัดนครสวรรค์</p> </div> <!-- ==================== หมวดหมู่ที่ 1: แสดง 4 ภาพ (สี่ช่องเท่ากัน เรียบหรู) ==================== --> <div style="margin-bottom: 50px; box-sizing: border-box;"><!-- ชื่อหมวดหมู่ --> <div style="display: flex; align-items: center; margin-bottom: 20px;"> <h3 style="font-size: clamp(15px, 3.5vw, 18px); font-weight: 500; color: #1a1a1a; margin: 0; letter-spacing: 0.5px;">01. กลุ่มงานบริการประชาชนและประชาสัมพันธ์</h3> </div> <!-- ตารางภาพ (Grid) สำหรับ 4 ภาพ - ป้องกันการล้นหน้าจอด้วย min(100%, 220px) --> <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 20px; align-items: start;"><!-- ภาพที่ 1 --> <div style="overflow: hidden; background-color: #f5f5f5; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);"><img alt="ภาพกิจกรรม 1" src="/cms/s236//u585/picture/13.jpg?auto=format&amp;fit=crop&amp;w=800&amp;q=80" style="width: 100%; height: 100%; object-fit: cover; display: block;" /></div> <!-- ภาพที่ 2 --> <div style="overflow: hidden; background-color: #f5f5f5; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);"><img alt="ภาพกิจกรรม 2" src="/cms/s236//u585/picture/14.jpg?auto=format&amp;fit=crop&amp;w=800&amp;q=80" style="width: 100%; height: 100%; object-fit: cover; display: block;" /></div> <!-- ภาพที่ 3 --> <div style="overflow: hidden; background-color: #f5f5f5; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);"><img alt="ภาพกิจกรรม 3" src="/cms/s236//u585/picture/15.jpg?auto=format&amp;fit=crop&amp;w=800&amp;q=80" style="width: 100%; height: 100%; object-fit: cover; display: block;" /></div> <!-- ภาพที่ 4 --> <div style="overflow: hidden; background-color: #f5f5f5; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);"><img alt="ภาพกิจกรรม 4" src="/cms/s236//u585/picture/16.jpg?auto=format&amp;fit=crop&amp;w=800&amp;q=80" style="width: 100%; height: 100%; object-fit: cover; display: block;" /></div> </div> </div> <!-- ==================== หมวดหมู่ที่ 2: แสดง 4 ภาพ (สี่ช่องเท่ากัน เรียบหรู) ==================== --> <div style="margin-bottom: 50px; box-sizing: border-box;"><!-- ชื่อหมวดหมู่ --> <div style="display: flex; align-items: center; margin-bottom: 20px;"> <h3 style="font-size: clamp(15px, 3.5vw, 18px); font-weight: 500; color: #1a1a1a; margin: 0; letter-spacing: 0.5px;">02. กลุ่มงานไกล่เกลี่ยและประนอมข้อพิพาท</h3> </div> <!-- ตารางภาพ (Grid) สำหรับ 4 ภาพ - ป้องกันการล้นหน้าจอด้วย min(100%, 220px) --> <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 20px; align-items: start;"><!-- ภาพที่ 1 --> <div style="overflow: hidden; background-color: #f5f5f5; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);"><img alt="ภาพกิจกรรม 1" src="/cms/s236//u585/picture/1 - Copy 2.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block;" /></div> <!-- ภาพที่ 2 --> <div style="overflow: hidden; background-color: #f5f5f5; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);"><img alt="ภาพกิจกรรม 2" src="/cms/s236//u585/picture/2 - Copy 2.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block;" /></div> </div> </div> <!-- ==================== หมวดหมู่ที่ 3: แสดง 4 ภาพ (สี่ช่องเท่ากัน เรียบหรู) ==================== --> <div style="margin-bottom: 50px; box-sizing: border-box;"><!-- ชื่อหมวดหมู่ --> <div style="display: flex; align-items: center; margin-bottom: 20px;"> <h3 style="font-size: clamp(15px, 3.5vw, 18px); font-weight: 500; color: #1a1a1a; margin: 0; letter-spacing: 0.5px;">03. กลุ่มงานช่วยพิจารณาคดี</h3> </div> <!-- ตารางภาพ (Grid) สำหรับ 4 ภาพ - ป้องกันการล้นหน้าจอด้วย min(100%, 220px) --> <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 20px; align-items: start;"><!-- ภาพที่ 1 --> <div style="overflow: hidden; background-color: #f5f5f5; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);"><img alt="ภาพกิจกรรม 1" src="/cms/s236//u585/picture/17.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block;" /></div> <!-- ภาพที่ 2 --> <div style="overflow: hidden; background-color: #f5f5f5; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);"><img alt="ภาพกิจกรรม 2" src="/cms/s236//u585/picture/18.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block;" /></div> <!-- ภาพที่ 3 --> <div style="overflow: hidden; background-color: #f5f5f5; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);"><img alt="ภาพกิจกรรม 3" src="/cms/s236//u585/picture/19.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block;" /></div> <!-- ภาพที่ 4 --> <div style="overflow: hidden; background-color: #f5f5f5; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);">&nbsp;</div> </div> </div> <!-- ==================== หมวดหมู่ที่ 4: แสดง 4 ภาพ (สี่ช่องเท่ากัน เรียบหรู) ==================== --> <div style="margin-bottom: 50px; box-sizing: border-box;"><!-- ชื่อหมวดหมู่ --> <div style="display: flex; align-items: center; margin-bottom: 20px;"> <h3 style="font-size: clamp(15px, 3.5vw, 18px); font-weight: 500; color: #1a1a1a; margin: 0; letter-spacing: 0.5px;">04. กลุ่มงานคดี</h3> </div> <!-- ตารางภาพ (Grid) สำหรับ 4 ภาพ - ป้องกันการล้นหน้าจอด้วย min(100%, 220px) --> <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 20px; align-items: start;"><!-- ภาพที่ 1 --> <div style="overflow: hidden; background-color: #f5f5f5; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);"><img alt="ภาพกิจกรรม 1" src="/cms/s236//u585/picture/23.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block;" /></div> <!-- ภาพที่ 2 --> <div style="overflow: hidden; background-color: #f5f5f5; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);"><img alt="ภาพกิจกรรม 2" src="/cms/s236//u585/picture/24.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block;" /></div> </div> </div> <!-- ==================== หมวดหมู่ที่ 5: แสดง 4 ภาพ (สี่ช่องเท่ากัน เรียบหรู) ==================== --> <div style="margin-bottom: 50px; box-sizing: border-box;"><!-- ชื่อหมวดหมู่ --> <div style="display: flex; align-items: center; margin-bottom: 20px;"> <h3 style="font-size: clamp(15px, 3.5vw, 18px); font-weight: 500; color: #1a1a1a; margin: 0; letter-spacing: 0.5px;">05. กลุ่มงานคลัง</h3> </div> <!-- ตารางภาพ (Grid) สำหรับ 4 ภาพ - ป้องกันการล้นหน้าจอด้วย min(100%, 220px) --> <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 20px; align-items: start;"><!-- ภาพที่ 1 --> <div style="overflow: hidden; background-color: #f5f5f5; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);"><img alt="ภาพกิจกรรม 1" src="/cms/s236//u585/picture/11.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block;" /></div> <!-- ภาพที่ 2 --> <div style="overflow: hidden; background-color: #f5f5f5; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);"><img alt="ภาพกิจกรรม 2" src="/cms/s236//u585/picture/12.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block;" /></div> </div> </div> <!-- ==================== หมวดหมู่ที่ 6: แสดง 4 ภาพ (สี่ช่องเท่ากัน เรียบหรู) ==================== --> <div style="margin-bottom: 50px; box-sizing: border-box;"><!-- ชื่อหมวดหมู่ --> <div style="display: flex; align-items: center; margin-bottom: 20px;"> <h3 style="font-size: clamp(15px, 3.5vw, 18px); font-weight: 500; color: #1a1a1a; margin: 0; letter-spacing: 0.5px;">06. กลุ่มงานช่วยอำนวยการ</h3> </div> <!-- ตารางภาพ (Grid) สำหรับ 4 ภาพ - ป้องกันการล้นหน้าจอด้วย min(100%, 220px) --> <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 20px; align-items: start;"><!-- ภาพที่ 1 --> <div style="overflow: hidden; background-color: #f5f5f5; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);"><img alt="ภาพกิจกรรม 1" src="/cms/s236//u585/picture/20 - Copy 1.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block;" /></div> <!-- ภาพที่ 2 --> <div style="overflow: hidden; background-color: #f5f5f5; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);"><img alt="ภาพกิจกรรม 2" src="/cms/s236//u585/picture/21.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block;" /></div> </div> </div> <!-- ==================== หมวดหมู่ที่ 7: แสดง 4 ภาพ (สี่ช่องเท่ากัน เรียบหรู) ==================== --> <div style="margin-bottom: 50px; box-sizing: border-box;"><!-- ชื่อหมวดหมู่ --> <div style="display: flex; align-items: center; margin-bottom: 20px;"> <h3 style="font-size: clamp(15px, 3.5vw, 18px); font-weight: 500; color: #1a1a1a; margin: 0; letter-spacing: 0.5px;">07. กลุ่มงานเจ้าพนักงานตำรวจศาล</h3> </div> <!-- ตารางภาพ (Grid) สำหรับ 4 ภาพ - ป้องกันการล้นหน้าจอด้วย min(100%, 220px) --> <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 20px; align-items: start;"><!-- ภาพที่ 1 --> <div style="overflow: hidden; background-color: #f5f5f5; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);"><img alt="ภาพกิจกรรม 1" src="/cms/s236//u585/picture/22.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block;" /></div> <!-- ภาพที่ 2 --> <div style="overflow: hidden; background-color: #f5f5f5; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);">&nbsp;</div> </div> </div> <!-- ==================== หมวดหมู่ที่ 8: แสดง 4 ภาพ (สี่ช่องเท่ากัน เรียบหรู) ==================== --> <div style="margin-bottom: 50px; box-sizing: border-box;"><!-- ชื่อหมวดหมู่ --> <div style="display: flex; align-items: center; margin-bottom: 20px;"> <h3 style="font-size: clamp(15px, 3.5vw, 18px); font-weight: 500; color: #1a1a1a; margin: 0; letter-spacing: 0.5px;">08. ศูนย์ให้คำปรึกษา แนะนำ และประสานการประชุมฯ</h3> </div> <!-- ตารางภาพ (Grid) สำหรับ 4 ภาพ - ป้องกันการล้นหน้าจอด้วย min(100%, 220px) --> <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 20px; align-items: start;"><!-- ภาพที่ 1 --> <div style="overflow: hidden; background-color: #f5f5f5; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);"><img alt="ภาพกิจกรรม 1" src="/cms/s236//u585/picture/6.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block;" /></div> <!-- ภาพที่ 2 --> <div style="overflow: hidden; background-color: #f5f5f5; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);"><img alt="ภาพกิจกรรม 2" src="/cms/s236//u585/picture/7.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block;" /></div> <!-- ภาพที่ 3 --> <div style="overflow: hidden; background-color: #f5f5f5; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);"><img alt="ภาพกิจกรรม 3" src="/cms/s236//u585/picture/8.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block;" /></div> <!-- ภาพที่ 4 --> <div style="overflow: hidden; background-color: #f5f5f5; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);"><img alt="ภาพกิจกรรม 4" src="/cms/s236//u585/picture/9.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block;" /></div> </div> </div> </div>