@charset "utf-8";
@import url("layout.css");
@import url("main.css");

/* 템플릿별로 개별 정의해야하는 CSS는 이 밑으로 작성하시면 최종적으로 적용 됩니다. **********/
/* 레이아웃은 같은 타입의 템플릿은 공통으로  적용되어 있습니다.**********/
/* 레이아웃 변경시에는 같은 템플릿은 같이 변경되오니 유의하여 주시고 변경하실 CSS는 각 템플릿의 샘플 템플릿의 layout.css를 수정하시면 됩니다.**********/
/* 개별적인 변경을 하실 경우에는 새로운 템플릿으로 추가해서 작업하시거나 style.css에서 !important처리로 작업하시기 바랍니다.**********/

#multipleContentsDiv_tamplate01_1519 {max-width: 1200px; margin: 0 auto;}



.li-listBox > li .thum {background-repeat: repeat-y;}
.li-listBox > li .text p {padding-left: 0;}
.li-listBox > li .text p:before {display: none;}
.quickbox_blue .inner.ea2 li {width: 100%;}
/*학회,동아리*/
.li-listWrap.type1 li .thum {width: 30%;}
.li-listWrap.type1 li .text {width: 70%;}
@media only screen and (max-width:600px){
  .li-listWrap.type1 li .thum,
  .li-listWrap.type1 li .text {width: 100%;}
}

/*인사말*/
.proIntro .imgBox {position: relative;}
.proIntro .imgBox .imgbg {display: inline-block;}
.proIntro .imgBox .name {top: auto; left: auto; bottom: 10px; right: -100px;}
.proIntro .imgBox .name dl {padding: 80px 0 20px 25px;}
@media only screen and (max-width: 1200px){
  .proIntro .imgBox {display: inline-block;}
}
@media only screen and (max-width:1023px) and (min-width:601px){
  .proIntro .imgBox {padding-bottom: 100px;}
  .proIntro .imgBox .name {right: -20px;}
}
@media only screen and (max-width:460px){
  .proIntro .imgBox {display: block;}
  .proIntro .imgBox .name {right: 0;}
}

/**찾아오시는길**/
.map_detail{background-color:#edf1f4;padding:25px;}
.map_detail .adress,
.map_detail .tel{display:inline-block;}
.map_detail dl{display:inline-block;margin:5px 50px 0 20px;}
.map_detail dl dt{font-size:14px;color:#333;font-weight:600;}
.map_detail dl dd{color:#333;}


.grade ul li{width:100%;}
.grade .leftBox{width:30%;height:220px;display:inline-block;vertical-align: top;margin-right:3%;color:#fff;}
.grade .leftBox dl{text-align:center;padding-top:100px;margin-left:-18px;}
.grade .leftBox dt{font-size:22px;font-weight:500;}
.grade .leftBox dd{font-size:16px;}
.grade .rightBox{width:63.6%;display:inline-block;padding-top:40px;}
.grade .rightBox .tableWrap table{min-width:auto;}
.grade .rightBox .tableWrap th{border:1px solid #d1d1d1;color:#fff;}
.grade .rightBox .tableWrap td{text-align: left;border:1px solid #d1d1d1;padding:15px 15px 20px 15px;vertical-align:top;}
.grade .rightBox .tableWrap dl strong{font-weight: 500; color:#222;}
.grade .rightBox .tableWrap dl dd:before{content:'';display: inline-block;width:3px; height:3px; background-color:#808080;margin-right:5px;vertical-align: top;margin-top:12px;}
.grade .rightBox .imgboxwrap{text-align: center;margin-top: 20px;}
.grade .rightBox .imgbox{border: 3px solid #99b8d7;display:inline-block;width: 14%;margin-top:30px;padding: 10px;margin-right:10px;vertical-align: top;min-height: 38px;line-height: 1.2;font-weight: 500;}
.grade .rightBox .imgbox img{max-width:100%;}
.grade.mindle .rightBox table{border-top:none;}

.grade .imgboxwrap.imgadjust01 img{width:30%;}
.grade .imgboxwrap.imgadjust02 img{width:18%;}

.grade ul li:nth-child(1) .leftBox{background:url(./../../images/sub/icon_bg01.png) no-repeat center;}
.grade ul li:nth-child(2) .leftBox{background:url(./../../images/sub/icon_bg02.png) no-repeat center;}
.grade ul li:nth-child(3) .leftBox{background:url(./../../images/sub/icon_bg03.png) no-repeat center;}
.grade ul li:nth-child(4) .leftBox{background:url(./../../images/sub/icon_bg04.png) no-repeat center;}

.grade ul li:nth-child(1) .rightBox .tableWrap th{background:url(./../../images/sub/th_bg01.png);}
.grade ul li:nth-child(2) .rightBox .tableWrap th{background:url(./../../images/sub/th_bg02.png);}
.grade ul li:nth-child(3) .rightBox .tableWrap th{background:url(./../../images/sub/th_bg03.png);}
.grade ul li:nth-child(4) .rightBox .tableWrap th{background:url(./../../images/sub/th_bg04.png);}


@media only screen and (max-width:1024px){
  .grade .leftBox{width:100%;text-align: center;}
  .grade .rightBox{width:100%;}
  .grade.single .tableWrap table{min-width: auto;}
}

@media all and (max-width: 768px){
  .grade.mindle .rightBox .tableWrap::before {display: none;}
}

@media only screen and (max-width:600px){
  .grade .imgboxwrap.imgadjust01 img{width:55%;margin-bottom:10px;}
  .grade .imgboxwrap.imgadjust02 img{width:35%;margin-bottom:10px;}
  .grade .rightBox .tableWrap .imgbox{width:80%;}

  .grade.mindle .rightBox .tableWrap::before {display: none;}
  .grade.mindle .rightBox .tableWrap td{display:block;margin-bottom:10px;}
}