/* 학습도움사이트 */
.site_box { overflow:hidden;}
.site_box dl { float:left; width:29%; margin:2%; }
.site_box dl dt {text-align:center; }
.site_box dl dd.tit { background:#1963d1; margin:.5rem 0 0; padding:.5rem; border-radius:1rem 1rem 0 0; color:#fff; text-align:center; font-weight:600; ;}
.site_box dl dd.tit span {display:block; }
.site_box dl dd.txt { background:#f1f1f1; padding:1rem 1rem 1rem; border-radius:0 0 1rem 1rem;  }
.site_box dl a {display:block;}
.site_box dl a dd { border:1px solid #fff; }
.site_box dl a:hover dd { border:1px solid #1963d1; }

@media screen and (max-width:580px){ 
	
	/* 학습도움사이트 */
	.site_box dl { width:100%; margin:2% 0;}
	
}


/* ���뱳�� */
.president{ display:flex; flex-wrap:wrap; }
.president .wrap{ position:relative; width:48%; min-height: 6rem;margin:.75rem 0; z-index:1; border-radius:0 0 1.25rem 0; background:#fff; border:2px solid #e7e7e7;}
.president .wrap:before{ content:""; position:absolute; left:-2px; top:-2px; width:40%; height:40%; max-width:6rem; max-height:3rem; background:#fff; z-index:0;}
.president .wrap:after{ content:""; position:absolute; left:0; top:0; width:30%; height:30%; max-width:5rem; max-height:3rem; border-left:2px solid #2964bd; border-top:2px solid #2964bd; z-index:1;}
.president .wrap:nth-of-type(even){ margin-left:4%;}
.president ul{ position:relative; padding: 1rem 1rem 1rem 1rem;}
.president li{ position:relative; display:flex; line-height:1.5rem; font-weight:600; font-size:.8rem;}
.president li span { display:block; min-width:4rem; height:1.5rem; color:#fff; text-align:center; padding:0 1rem; margin-right:.75rem; margin-bottom:.75rem; border-radius:1rem; background:#2964bd;}
.president li p {position: relative; padding-left: 10px;}
.president li p:before {content: ''; position: absolute; top: 0.5rem; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #1161bc;}




@media screen and (max-width:900px){ 
	/* ���뱳�� */
	.president ul { padding:1.5rem 1.5rem 1.5rem; float:none; }
}

@media screen and (max-width:680px){ 
    /* ���뱳�� */
    .president{ display:block; }
    .president .wrap{ width:100%; }
    .president .wrap:nth-of-type(even){ margin-left:0%; }
    .president ul{ position:relative; padding: 1.5rem 1.5rem 1.5rem 1.5rem;}
   
}


@media screen and (max-width:640px){
	/* ���뱳�� */
	.president{ display:block; }
    .president .wrap{ width:100%; }
    .president .wrap:nth-of-type(even){ margin-left:0%;}
}


@media screen and (max-width:480px){
	/* ���뱳�� */
	.president ul { padding:1.5rem 1.5rem 1.5rem; float:none; }
}

@media screen and (max-width:340px){ 
    /* ���뱳�� */
    .president li {  display: inline-block;}
}