@import url('sub.css');

/* STATUS — CLASS */
.class_chart { --chartGap:80px; --cardGap:30px; display:flex; flex-direction:column; align-items:center; gap:var(--chartGap); }
.class_circle { position:relative; padding:6px; border:3px solid transparent; border-radius:50%; background:linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(135deg, #FA6600 0%, #F08300 100%) border-box; }
.class_circle::after { content:''; position:absolute; left:50%; bottom:-8px; z-index:1; width:10px; height:10px; border:2px solid transparent; border-radius:50%; background:linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(135deg, #FA6600 0%, #F08300 100%) border-box; box-sizing:border-box; transform:translateX(-50%); }
.class_circle .in { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; width:200px; height:200px; border-radius:50%; background:linear-gradient(135deg, #FA6600 0%, #F08300 100%); }
.class_circle img { display:block; width:60px; }
.class_circle h3 { font-weight:700; color:var(--white); }
.class_list { position:relative; display:flex; gap:var(--cardGap); width:100%; }
.class_list::before { content:''; position:absolute; top:calc(var(--chartGap) / -2); left:calc((100% - var(--cardGap) * 2) / 6); right:calc((100% - var(--cardGap) * 2) / 6); height:1px; background:var(--border); }
.class_list li { position:relative; flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px; padding:25px 15px 20px; border:1px solid var(--border); border-radius:var(--borderR10); background:var(--white); box-sizing:border-box; text-align:center; }
.class_list li::before { content:''; position:absolute; left:50%; bottom:100%; width:1px; height:calc(var(--chartGap) / 2); background:var(--border); }
.class_list li:nth-child(2)::before { height:var(--chartGap); }
.class_list li::after { content:''; position:absolute; left:50%; top:-6px; z-index:1; width:10px; height:10px; border:2px solid transparent; border-radius:50%; background:linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(135deg, #FA6600 0%, #F08300 100%) border-box; box-sizing:border-box; transform:translateX(-50%); }
.class_list .grade { font-weight:600; color:var(--main); }
.class_list .count { font-weight:600; }

/* STATUS — TABLE */
.class_status .dep-tit { display:flex; flex-wrap:wrap; align-items:flex-end; gap:0 15px; }
.class_status .dep-tit .date { padding-bottom:3px; font-weight:400; color:rgba(42,38,35,0.5); }
.status_table { border-top:2px solid var(--main); position: relative;}
.status_table table { width:100%; border-collapse:separate; border-spacing:0px; table-layout:fixed; }
.status_table th, .status_table td { padding:16px 18px; border-bottom:1px solid var(--border); border-right:1px solid var(--border); text-align:center; word-break:keep-all; }
.status_table th:last-child, .status_table td:last-child { border-right:0; }
.status_table th { height:62px; background:var(--grayBg); font-weight:600; color:var(--black); box-sizing:border-box; }
.status_table td { background:var(--white); color:var(--basic); }
.status_table td.tit { color:var(--black); }
.status_table td.left { text-align:left; }
.class_status .status_table td { color:rgba(42,38,35,0.65); }
.status_table .dot-list { gap:2px; }

/* STATUS — SCHOLARSHIP */
.scholarship { display:flex; flex-direction:column; gap:40px; }
.scholarship_tbl { display:flex; flex-direction:column; gap:20px; }
.scholarship col:nth-child(-n+3) { width:13.07%; }
.scholarship col:nth-child(4) { width:26.14%; }
.scholarship_info { display:flex; gap:6px; color:var(--basic); }
.scholarship_info::before { content:"\e88e"; flex-shrink:0; width:20px; height:20px; margin-top:4px; font-family:var(--icon); font-size:20px; line-height:20px; color:var(--main); }

/* STATUS — CONTACT */
.status_contact { display:flex; align-items:center; justify-content:space-between; gap:15px 30px; padding:20px; border-radius:var(--borderR30); background:var(--grayBg); }
.status_contact .tit { display:flex; align-items:center; gap:15px; font-weight:600; }
.status_contact .tit::before { content:''; flex-shrink:0; width:60px; height:60px; border-radius:var(--borderR10); background:var(--white) url('/status/img/contact-icon.svg') no-repeat center / 36px; }
.status_contact .list { display:flex; flex-wrap:wrap; align-items:center; gap:5px 18px; }
.status_contact .list li { display:flex; align-items:center; gap:6px; }
.status_contact .list li + li::before { content:''; width:1px; height:14px; margin-right:12px; background:var(--border); }
.status_contact .list b { font-weight:600; color:var(--main); }
.status_contact .list a, .status_contact .list span { color:var(--basic); }
.status_contact .list a { letter-spacing:0; }


/* 교직원 안내 — LIST */
.organ-list article { display:flex; flex-direction:column; gap:30px; width:100%; }
.organ-list article:first-of-type{padding-top: 0 !important;}
.organ-list h3 { margin-bottom:0; }
.organ-list table { width:100%; border-collapse:collapse; table-layout:fixed; border-top:2px solid var(--main); }
.organ-list thead tr { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); }
.organ-list tbody { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); }
.organ-list tbody tr { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); }
.organ-list th { background:var(--grayBg); color:var(--black); font-weight:600; text-align:center; vertical-align:middle; padding:16px 18px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); box-sizing:border-box; }
.organ-list td { text-align:center; vertical-align:middle; padding:16px 18px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); box-sizing:border-box; color:var(--basic); }
.organ-list thead th:last-child { border-right:none; }
.organ-list tbody tr:nth-child(odd) td:last-child { border-right:1px solid var(--border); }
.organ-list tbody tr:nth-child(even) td:last-child { border-right:none; }
.organ-list td.tit { color:var(--black); }

/* 학교시설 */
.facility { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:120px 60px; align-items:start; }
.facility_item { min-width:0; }
.facility_tit { display:flex; align-items:flex-end; justify-content:space-between; gap:5px 20px; margin-bottom:25px; }
.facility_tit .dep-tit { margin-bottom:0px; }
.facility_tit .desc { flex-shrink:0; padding-bottom:6px; color:rgba(42,38,35,0.65); }
.facility_slide { position:relative; width:100%; aspect-ratio:3/2; border-radius:var(--borderR20); overflow:hidden; background:var(--grayBg); }
.facility_slide .swiper-slide img { display:block; width:100%; height:100%; object-fit:cover; }
.facility_arrows { position:absolute; left:20px; right:20px; top:50%; z-index:2; display:flex; justify-content:space-between; transform:translateY(-50%); pointer-events:none; }
.facility_arrows button { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid rgba(255,255,255,0.3); border-radius:var(--borderR100); background:rgba(0,0,0,0.3); backdrop-filter:blur(1px); -webkit-backdrop-filter:blur(1px); color:var(--white); cursor:pointer; pointer-events:auto; transition:background 0.3s linear, border-color 0.3s linear; }
.facility_arrows button::before { font-family:var(--icon); font-size:22px; line-height:100%; }
.facility_arrows .facility_prev::before { content:"\e314"; }
.facility_arrows .facility_next::before { content:"\e315"; }
.facility_arrows button:hover { border-color:var(--main); background:var(--main); }
.facility_arrows button.swiper-button-disabled { opacity:0.4; cursor:default; }
.facility_arrows button.swiper-button-disabled:hover { border-color:rgba(255,255,255,0.3); background:rgba(0,0,0,0.3); }
.facility_table { margin-top:30px; border-top:2px solid var(--main); }
.facility_table table { width:100%; border-collapse:separate; border-spacing:0px; table-layout:fixed; }
.facility_table th, .facility_table td { height:62px; padding:16px 18px; border-bottom:1px solid var(--border); text-align:center; word-break:keep-all; box-sizing:border-box; }
.facility_table th { background:var(--grayBg); font-weight:600; color:var(--black); border-right:1px solid var(--border); }
.facility_table td { background:var(--white); color:rgba(42,38,35,0.65); }
.facility_table td:not(:last-child) { border-right:1px solid var(--border); }
.facility_empty { grid-column:1 / -1; padding:80px 0px; text-align:center; color:rgba(42,38,35,0.5); }

/*******************************************************************************
    @media 1680px
*******************************************************************************/
@media all and (max-width:1680px){




}
/*******************************************************************************
    @media ~1500px
*******************************************************************************/
@media all and (max-width:1500px){

/* 학교시설 */
.facility { gap:100px 40px; }

}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){


/* 교직원 안내 — LIST */
.organ-list th { padding:16px 10px;}
.organ-list td { padding:16px 10px;}

/* 학교시설 */
.facility { gap:80px 30px; }
.facility_table th, .facility_table td { padding:14px 10px; }

}
/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

/* STATUS — CLASS */
.class_chart { --chartGap:60px; --cardGap:15px; }
.class_circle .in { width:170px; height:170px; gap:8px; }
.class_circle img { width:50px; }


/* STATUS — TABLE */
.status_table th, .status_table td { padding:14px 10px; }
.status_table th { height:auto; }

/* STATUS — SCHOLARSHIP */
.status_table.scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.status_table.scroll .responsive-dim.show{display: block;}
.status_table.scroll table { min-width:900px; }


/* STATUS — CONTACT */
.status_contact{gap: 15px; padding: 20px 30px 20px 20px;}
.status_contact .tit::before{width: 50px; height: 50px; background-size:30px;}



/* 교직원 안내 — LIST */
.organ-list { }
.organ-list article { gap:20px;}
.organ-list thead tr { grid-template-columns:repeat(3, minmax(0,1fr)); }
.organ-list thead th.th-duo { display:none; }
.organ-list thead th:nth-child(3) { border-right:none; }
.organ-list tbody { grid-template-columns:1fr; }
.organ-list tbody tr:nth-child(odd) td:last-child { border-right:none; }
.organ-list tbody tr.empty { display:none; }
.organ-list th { padding:10px 5px;}
.organ-list td { padding:10px 5px;}

/* 학교시설 */
.facility { grid-template-columns:minmax(0,1fr); gap:60px; }
.facility_tit { margin-bottom:20px; }
.facility_tit .desc { padding-bottom:4px; }
.facility_table { margin-top:25px; }
.facility_table th, .facility_table td { height:auto; }

}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

/* STATUS — CLASS */
.class_chart { --chartGap:50px; --cardGap:8px; }
.class_circle { padding:4px; border-width:2px; }
.class_circle .in { width:130px; height:130px; gap:6px; }
.class_circle img { width:40px; }
.class_list li { gap:2px; padding:20px 5px 15px; }


/* STATUS — TABLE */
.class_status .dep-tit { gap:0 8px; }
.class_status .dep-tit .date { padding-bottom:1px; }
.status_table th, .status_table td { padding:10px; }

/* STATUS — SCHOLARSHIP */
.status_table.scroll table { min-width:760px; }
.scholarship { gap:30px; }
.scholarship_tbl { gap:15px; }
.scholarship_info::before { margin-top:2px; }

/* STATUS — CONTACT */
.status_contact { flex-direction:column; align-items:flex-start; gap: 10px; padding:15px; border-radius:var(--borderR20); }
.status_contact .tit { gap:10px; }
.status_contact .tit::before { width:45px; height:45px; background-size:24px; }
.status_contact .list { flex-direction:column; align-items:flex-start; gap:2px; }
.status_contact .list li + li::before { display:none; }



/* 교직원 안내 — LIST */
.organ-list article { gap:10px;}
.organ-list td { word-break:break-all;}

/* 학교시설 */
.facility { gap:50px; }
.facility_tit { flex-wrap:wrap; margin-bottom:15px; }
.facility_tit .desc { padding-bottom:0px; }
.facility_arrows { left:12px; right:12px; }
.facility_arrows button { width:32px; height:32px; }
.facility_arrows button::before { font-size:18px; }
.facility_table { margin-top:20px; }
.facility_table th, .facility_table td { padding:10px 5px; }

}