/*** 공통 ***/
.content_wrap .c-inner {margin:0 auto; max-width:1420px;}
.contents-part+.contents-part {padding-top:100px; margin-top:100px; border-top:1px solid #e5e5e5;}

.flexwrap {display:flex;}
.gap100 {gap:100px;}
.gap50 {gap:50px;}

.course .system-wrap {display:flex;}
.course .side-wrap {display:grid; grid-template-rows:repeat(4,1fr); gap:10px; background:#E5E7F3; width:17.5%; padding:10px; box-sizing:border-box; border-radius:10px; }
.course .side-wrap p.tit {color:#000; font-weight:700; font-size:24px; line-height:1.2; text-align:center; display:flex; justify-content:center; align-items:center; flex-direction: column;}
.course .side-wrap p.tit span {display:block;}
.course .side-wrap .side-bx {border-radius:10px; display:flex; justify-content:center; align-items:center; color:#fff; text-align:center; font-weight:600; font-size:24px; line-height:1.2; padding:10px;}
.course .side-wrap .side-bx.blue {background:var(--base1);}
.course .side-wrap .side-bx.yellow {background:#C58133;}
.course .side-wrap .side-bx.black {background:#2A333B;}
.course .chink {display:flex; flex-direction:column; justify-content:center; align-items:center; width:60px; text-align:center; font-size:24px; color:#000; gap:50px; font-weight:600;}
.course .chink span {display:block; writing-mode:vertical-rl; text-orientation:upright;}
.course .middle-wrap {margin-right:20px; width:calc(65% - 80px);}
.course .middle-wrap .middle-bx {background:#E4EDFA; padding:50px; border-radius:20px;}
.course .middle-wrap .middle-bx+.middle-bx {margin-top:20px;}
.course .middle-wrap .middle-small-bx {background:#fff; text-align:center; color:#5E79AC; font-size:18px; font-weight:600; padding:10px 15px; box-sizing:border-box; letter-spacing:-1.4px; line-height:1.2; border-radius:10px; display:flex; justify-content:center; align-items:center;}
.course .middle-wrap .middle-small-bx.base2 {color:#fff; background:var(--base2);}
.course .middle-wrap .middle-small-bx small {font-size:17px;}
.course .middle-wrap .middle-bx .class-list {display:grid; /*grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));*/grid-template-columns: repeat(3,1fr); gap:10px; margin-top:30px; grid-template-rows:repeat(3, 1fr);}
.course .middle-wrap p.tit {font-size:24px; font-weight:700; color:var(--base2);}
.course .caution {font-size:16px; text-align:center; color:#000; margin-top:20px; line-height:1.2;}

/* ************************ 태블릿 이하(~1249) ************************ */
@media screen and (max-width: 1249px) { 
.contents-part+.contents-part {padding-top:80px; margin-top:80px;}

.course .middle-wrap .middle-small-bx {font-size:17px;}
.course .middle-wrap .middle-small-bx small {font-size:14px;}
.course .side-wrap p.tit {font-size:24px;}
.course .side-wrap .side-bx {font-size:20px;}
.course .chink {font-size:20px;}
.course .middle-wrap .middle-bx {padding:40px;}
.course .middle-wrap .middle-bx .class-list {margin-top:15px;}
.course .middle-wrap p.tit {font-size:20px;}

}

/* ************************ 태블릿 이하(~991) ************************ */
@media screen and (max-width: 991px) {
.contents-part+.contents-part {padding-top:50px; margin-top:50px;}

.course .system-wrap {flex-direction:column;}
.course .side-wrap {grid-template-columns:repeat(4,1fr); grid-template-rows:auto; width:100%;}
.course .chink {flex-direction:row; width:100%; margin:5px 0; gap:10px;}
.course .chink span {writing-mode:unset; text-orientation:unset;}
.course .middle-wrap {width:100%; margin-right:0; margin-bottom:20px;}
.course .middle-wrap .middle-bx+.middle-bx {margin-top:10px;}
.course .middle-wrap .middle-bx {padding:30px;}
.course .side-wrap p.tit {font-size:16px;}
.course .side-wrap .side-bx {font-size:16px;}

}

/* ************************ 태블릿 이하(~767) ************************ */
@media screen and (max-width: 767px) { 
.contents-part+.contents-part {padding-top:40px; margin-top:40px;}	
.course .side-wrap {grid-template-columns:repeat(3,1fr); column-gap:5px;}
.course .side-wrap p.tit {grid-column:1/4; flex-direction:row;}
.course .middle-wrap .middle-small-bx {font-size:14px; letter-spacing:-0.6px;}
.course .middle-wrap .middle-small-bx small {font-size:12px;}
.course .middle-wrap .middle-bx {padding:20px;}
.course .middle-wrap .middle-bx .class-list {gap:5px;}
.course .side-wrap p.tit {font-size:18px;}
.course .chink {font-size:18px;}
.course .caution {font-size:14px;}
.course .middle-wrap .middle-bx .class-list {margin-top:10px;}
.course .middle-wrap p.tit {font-size:18px;}
}

/* ************************ 태블릿 이하(~500) ************************ */
@media screen and (max-width: 500px) { 
.contents-part+.contents-part {padding-top:30px; margin-top:30px;} 
.course .middle-wrap .middle-small-bx {padding:10px 5px;}
.course .middle-wrap .middle-bx {padding:20px 15px;}
.course .side-wrap .side-bx {font-size:14px;}
.course .chink {gap:5px;}

}