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

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


/**퀵메뉴**/
.bg-line{
  background:url(./../../images/common/lineBox_bg.png);
  padding:10px;
  overflow: hidden;
}

.bg-line .inner{
  padding:25px 20px;
  overflow: hidden;
  display:table;
  background-color:#fff;
  width:100%;
  box-sizing: border-box;
}

.bg-line .quickList{
  float:left;
  display: table-cell;
  margin-right: 100px;
}

.bg-line .quickList ul li{
  float:left;
  border-right:1px solid #cbcbcb;
}

.bg-line .quickList ul li:nth-last-child(1){
  border:none;
}

.bg-line .quickList ul li a{
  color:#333;
  font-weight: 500;
  padding:0 20px;
}

.bg-line .quickList ul li a:after{
  content:'';
  width:20px;
  height:20px;
  background-color:#fff;
  background-image: url(./../../images/common/rightArrow.png);
  background-position:center;
  background-repeat: no-repeat;
  display: inline-block;
  border:1px solid #e4e4e4;
  border-radius: 15px;
  vertical-align: middle;
  margin-top:-4px;
  margin-left:20px;
}

.bg-line .quickBtn{
  float:left;
  display: table-cell;
}

.bg-line .quickBtn a{
  border:1px solid #b2b2b2;
  border-radius: 20px;
  padding:10px 15px;
  font-weight: 500;
  color:#000;
}

.bg-line .quickBtn img{
  margin-top:4px;
  margin-left:5px;
}

.bg-line .quickList ul li a:hover{
  color:#005aab;
}

.bg-line .quickList ul li a:hover:after{
  background-image: url(./../../images/common/rightArrow_w.png);
  background-color:#005aab;
}





/******학과소개 박스******/
.bg-edge{
  background: url(./../../images/common/bg-edge.png) no-repeat;
  overflow: hidden;
  padding: 20px 0;
}

.bg-edge .inner{
  padding: 30px 0 30px 40px;
  box-sizing:border-box;
  overflow: hidden;
}

.bg-edge .inner .text_box{
  float:left;
  width:47%;
  margin-right: 4%;
  padding:15px 0;
}

.bg-edge .inner .text_box strong{
  font-size:27px;
  font-weight: 500;
  color:#000;
  margin-bottom:30px;
  display:block;
  position: relative;
}

.bg-edge .inner .text_box strong:before{
  content:'';
  width:20px;
  height:22px;
  background: url(./../../images/common/introTitle.png) no-repeat center;
  position: absolute;
  top:-30px;
}

.bg-edge .inner .text_box p{
  margin-bottom:20px;
}

.bg-edge .inner .img_box{
  float:left;
  width:40%;
}


/******소개 박스******/

.majorIntro{background: url(./../../images/common/topLine.png) no-repeat left top;overflow: hidden;}
.majorIntro .intro_inner{padding-top:40px;box-sizing:border-box;overflow:hidden;}
.majorIntro strong{font-size:30px;font-weight:500;color:#000;position:relative;}
.majorIntro strong span{color:#1e5ba8;}
.majorIntro strong:after{content:'';width:65px;height:3px;background-color:#0067d4;position:absolute;top:75px;left:0; }

.majorIntro .intro_inner .major_photo{float:right;margin-right:25px;}
.majorIntro .intro_inner .major_photo img{width:100%;}
.majorIntro .intro_inner .major_text{float:left;margin-top:70px;max-width: 700px;}

.majorIntro .intro_contact{display:block;position: relative;overflow: hidden;padding:20px 0px;}
.majorIntro .intro_contact:after{content:''; width:100%; height:1px; background-color: #000; display:inline-block; position: absolute; top:30px;left: 400px;}
.majorIntro .intro_contact ul li{float:left;display:inline-block;font-size:14px;margin-right:10px;}
.majorIntro .intro_contact ul li a{font-weight:500;color:#000;border:1px solid #b2b2b2; padding:10px 15px;border-radius: 25px;}
.majorIntro .intro_contact ul li img{margin-top:2px; margin-left:7px;}

@media only screen and (max-width:600px){
.majorIntro .intro_inner .major_photo{float:none;margin:0 auto;margin-top:70px;}
.majorIntro .intro_inner .major_text{margin:30px 0;}
.majorIntro .intro_contact:after{display:none;}
.majorIntro .intro_contact ul li{display:block;margin-bottom:5px;float:none;}
.majorIntro .intro_contact ul li a{display:block;text-align:center;}

}


/******UL 아이콘 설명형******/

.ul_iconbox ul{display:table;}
.ul_iconbox ul>li{display:table-cell;width:32%;float:left;background-color:#ecf1f7;padding:25px;box-sizing:border-box;}
.ul_iconbox ul>li.first{margin-right:2%;}
.ul_iconbox ul>li.last{margin-left:2%;}
.ul_iconbox .imgbox{height:200px;margin:15px 0;}
.ul_iconbox .imgbox p.imgdes{text-align:center;color:#fff;font-size:18px;padding-top:90px;}
.ul_iconbox .imgbox p.imgdes img{margin-top:-20px;}
.ul_iconbox .imgbox.figurebg01{background: url(./../../images/common/triangle.png) no-repeat center;}
.ul_iconbox .imgbox.figurebg02{background: url(./../../images/common/polygon.png) no-repeat center;}
.ul_iconbox .imgbox.figurebg03{background: url(./../../images/common/polygon02.png) no-repeat center;}

.ul_iconbox .textbox{text-align:center;}
.ul_iconbox .textbox strong{color:#1e5ba8;font-size:20px;font-weight:500;}

@media only screen and (max-width:600px){
  .ul_iconbox ul>li {display: block; width: 100%; margin-bottom: 10px;}
  .ul_iconbox ul>li.first{margin-right:0;}
  .ul_iconbox ul>li.last{margin-left:0;}
}



/******아이콘 타입******/

.iconType{background-color:#1f477b; padding:40px;box-sizing:border-box;overflow: hidden;}
.iconType .title{width:30%;float:left;color:#fff;font-size: 30px;font-weight:600;margin-top:10px;}
.iconType .title strong{float:left;}
.iconType .title:after{content: '';width: 70%;height: 1px;background-color: #fff;display: inline-block;float: right;margin-top: 35px;}
.iconType .icons{width:70%;float:left;}
.iconType .icons ul li{display:inline-block;margin:20px;}


/******강의표******/

.timetable ul li{display:inline-block;width:49.8%;position:relative;}
.timetable ul li .titleImg{position:absolute;top:10px;left:50%; margin-left:-48.5px;}
.timetable ul li .ttInner{width:100%; margin-top:45px;padding:50px 10px 10px 10px;}
.timetable ul li.first .ttInner{background-color:#c5d7e5;}
.timetable ul li.second .ttInner{background-color:#e6ecf3;}

.timetable ul li .ttInner{text-align:center;}
.timetable ul li .ttInner strong{margin-bottom:25px;color:#1f3e79;font-size:20px;font-weight:500;display:block;}

.timetable .TtableWrap{width:97.5%;}
.timetable .TtableWrap table{min-width:200px;}
.timetable .TtableWrap table th{background-color:#6093cf; color:#fff;border-top:none;}
.timetable .TtableWrap table td{background-color: #fff;}



/******과목 소개******/

.ul_subject .wholeul li .imgbox{width:15%;text-align: center;display:inline-block;margin-right: 10%;}
.ul_subject .wholeul li .imgbox img{display:inline-block;max-width: 100%;}
.ul_subject .wholeul li .imgbox strong{display:block;font-size:20px;color:#1f3e79;font-weight: 500;margin-left:20px;}

.ul_subject .wholeul>li{margin-bottom:30px;padding:30px 0;}
.ul_subject .wholeul li .contents{display:inline-block;width:74.5%;vertical-align: top;}
.ul_subject .wholeul li .contents .detailul{width:100%;}
.ul_subject .wholeul li .contents .detailul li{float:left;width:31.3%;margin-left:2%;position: relative;}
.ul_subject .wholeul li .contents .detailul .contentsbox{border:1px solid #d1d1d1;background-color:#f3f5f7;padding:35px 20px 30px 30px;}
.ul_subject .wholeul li .contents .detailul .contentsbox dl dt{position:absolute;top:-20px;left:50%;margin-left:-60px;font-size:16px;background-color:#18bcd7;color:#fff;padding:7px 20px;}
.ul_subject .wholeul li .contents .detailul .contentsbox dl dt:before{content:''; width:13px;height:20px;background:url(./../../images//common/edge.png)no-repeat center;position: absolute;top:0px;right:-13px;}
.ul_subject .wholeul li .contents .detailul .contentsbox dl dd{position:relative;margin-bottom:5px;}
.ul_subject .wholeul li .contents .detailul .contentsbox dl dd span{font-weight:500;color:#000;}
.ul_subject .wholeul li .contents .detailul .contentsbox dl dd:before{content:'';width:3px;height:3px;background-color:#999;position:absolute;top:11px;left:-11px;}

.ul_subject .wholeul li.first{border-bottom:1px dashed #666;padding-bottom:60px;}
.ul_subject .wholeul li.first .contents .detailul .contentsbox{min-height:120px;box-sizing:border-box;}
.ul_subject .wholeul li.second .contents .detailul .contentsbox{min-height:200px;box-sizing:border-box;}



/******학년별 소개******/

.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:80px;margin-left:-18px;}
.grade .leftBox dt{font-size:22px;font-weight:500;}
.grade .leftBox dd{font-size:16px;}
.grade .rightBox{width:66.6%;display:inline-block;padding-top:40px;}
.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;}
.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 .tableWrap .imgboxwrap{text-align: center;}
.grade .rightBox .tableWrap .imgbox{border:2px solid #99b8d7;display:inline-block;width:auto;margin-top:30px;padding:10px 25px;margin-right:10px;}
.grade .rightBox .tableWrap .imgbox img{max-width:100%;}

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

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


/******학년별 프로세스******/
.process li{text-align: center;}
.process .processTitle{padding-top:30px;box-sizing: border-box;text-align:center;width:300px; height:100px;display:inline-block;margin-left:-10px;}
.process .processTitle strong{color:#fff;font-size:20px;margin-left:10px;}
.process .arrow{margin:30px 0; text-align: center;}
.process .type01 .processTitle{background:url(./../../images/common/process_box01.png) no-repeat center;}
.process .type01 ul > li > ul{border:1px solid #ddd;padding:60px 0 30px 0;margin-top: -50px;}


.process .type02 .processTitle{background:url(./../../images/common/process_box02.png) no-repeat center;}
.process .type02 > ul > li{width:31.8%;display:inline-block;vertical-align: top;}
.process .type02 > ul > li + li{margin-left:2%;}
.process .type02 > ul > li > ul{border:1px solid #ddd; min-height:370px; padding-top:50px;box-sizing: border-box; margin-top: -50px;}
.process .type02 > ul > li > ul > li{margin-bottom:5px;}

.process .type03 .processTitle{background:url(./../../images/common/process_box03.png) no-repeat center;}
.process .type03 > ul > li{width:48.8%;display:inline-block;}
.process .type03 > ul > li + li{margin-left:2%;}
.process .type03 > ul > li > ul{border:1px solid #ddd; min-height:220px; padding-top:50px;box-sizing: border-box; margin-top: -50px;}
.process .type03 > ul > li > ul > li{margin-bottom:5px;}


/******학과목표******/
.goal{text-align: center;position: relative; width:600px;margin:0 auto;}
.goal .goalbox{width:300px;height:300px;border-radius:50%;display:inline-block;vertical-align: top;color:#fff;padding-top:75px;box-sizing: border-box;}

.goal .circle01{background-color:rgba(70,200,223,0.9);margin-right:-15px;margin-bottom:-15px;}
.goal .circle02{background-color:rgba(52,147,228,0.9);margin-left:-15px;margin-bottom:-15px;}
.goal .circle03{background-color:rgba(105,126,187,0.9);margin-right:-15px;margin-top:-15px;}
.goal .circle04{background-color:rgba(72,130,210,0.9);margin-left:-15px;margin-top:-15px;}

.goal .goalbox dl{width:175px;display:inline-block;font-size:18px;}
.goal .goalbox dl dt{padding:3px 25px;border-top:1px solid #fff; border-bottom:1px solid #fff; display:inline-block;font-weight: 500;margin-bottom:20px;}

.goal .circleTitle{width:200px;height:200px;border-radius:50%;background-color: #fff;position:absolute;top:180px;left:50%;margin-left:-100px;padding-top:60px;box-sizing: border-box;box-shadow: 0 15px 10px rgba(0,0,0,0.3);}
.goal .circleTitle dl{color:#262626;}
.goal .circleTitle dl dt{font-size:24px;font-weight: 500;}
.goal .circleTitle dl dd{font-size:20px;line-height: 1.1;font-weight:300;}


/******차트******/

.chart{text-align:center;}
.chart .gray_box{background-color:#f2f2f2;width:550px;height:120px;display:inline-block;position: relative;}
.chart .gray_box:after{content: '';width:12px;height:12px;background-color:#3493e4;position:absolute;bottom:-6px;left:50%;margin-left:-6px;border-radius: 10px;}
.chart .gray_box ul{padding:20px;}
.chart .gray_box ul li{width:49%;display:inline-block;text-align: left;}
.chart .gray_box ul li:before{content:'';width:20px; height:20px; background:url(/sites/style-guide/images/common/L_arrowMark.png) no-repeat center;display: inline-block;vertical-align: top;margin-right:10px;}

.chart .dotLine{width:73.5%;height:85px;margin:0 auto;background: url(./../../images/common/dotLine.png) no-repeat center;background-size:100%;}

.chart .chart_box{margin-bottom:20px;}
.chart .chart_box ul li{width:26.4%;display:inline-block;border:1px solid #8289a7;padding:20px 15px;box-sizing:border-box;vertical-align: top;min-height: 120px;word-break: keep-all;position: relative;}
.chart .chart_box ul li:before{content: ''; width:20px; height:17px;background: url(./../../images/common/chart_edge.png)no-repeat;position: absolute;top:-7px;left:50%;margin-left: -10px;}
.chart .chart_box ul li + li{margin-left:10%;}
.chart .chartTable{margin-right: 1px;}
.chart .chartTable table{border-top:none;font-size: 20px;}
.chart .chartTable table td{border:1px solid #ddd;font-weight:400;padding:15px 0;}
.chart .chartTable table th{border:none;background-color:unset;font-weight:500;color:#fff;}

.chart .chartTable table .mL50 img{margin-left:50%;}
.chart .chartTable table .mR50 img{margin-right:50%;}

.chart .chartTable table .borderNone{border:none;background-color:unset;}
.chart .chartTable table .borderBlue{border:1px solid #1b54b7;color:#1b54b7;}
.chart .chartTable table .borderCyan{border:1px solid #1b8fb7;color:#1b8fb7;}

.chart .chartTable table .sector01{background:url(./../../images/common/bg08-1.png);}
.chart .chartTable table .sector02{background:url(./../../images/common/bg08-2.png);}


/**********ETC*************/
.marB10{margin-bottom:10px;}
.marB20{margin-bottom:20px;}
.marB30{margin-bottom:30px;}
.marB40{margin-bottom:40px;}
.marB50{margin-bottom:50px;}

.alignL{text-align:left;}
.alignC{text-align:center;}
.alignR{text-align:right;}