@charset "utf-8";
/********************
메인페이지 및 서브페이지 동시 적용.
가장 마지막에 불러오는 CSS 파일입니다.
※ 공통영역 CSS에서 부분별 개별 적용시 사용하시면 됩니다.
********************/


/*서브비주얼****************************************/
.eQ01 .wrap-sub-visual{background:url(/sites/ai-security/images/common/sub_visual_1.jpg) no-repeat center top;background-size: cover;}
.eQ02 .wrap-sub-visual{background:url(/sites/styleguide/images/common/sub_visual_2.jpg) no-repeat center top;background-size: cover;}
.eQ03 .wrap-sub-visual{background:url(/sites/styleguide/images/common/sub_visual_3.jpg) no-repeat center top;background-size: cover;}
.eQ04 .wrap-sub-visual{background:url(/sites/styleguide/images/common/sub_visual_4.jpg) no-repeat center top;background-size: cover;}
.eQ05 .wrap-sub-visual{background:url(/sites/styleguide/images/common/sub_visual_5.jpg) no-repeat center top;background-size: cover;}

/*학과소개, 졸업후 진로 이미지****************************************/
.majorWrap, .graduWrap {background: url(/sites/ai-security/images/common/major_bg.png) no-repeat top center;}


.most-complete-inner{margin-top: 15px;}
.most-complete-inner > ul > li{position: relative; padding: 0px 40px;  margin-bottom: 10px; cursor: pointer; }
.most-complete-inner > ul > li::after {content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; border: 1px solid #d2d3d5; z-index: -1;}
.most-complete-inner > ul > li:last-child{margin-bottom: 0;}
.most-complete-inner > ul > li.on::after{border: 3px solid #6a6a6a;}
.most-complete-inner li:nth-child(2) .complate-table .complate-table-inner>ul{float: left; width: 50%;}
.most-complete-inner li:nth-child(2) .complate-table .complate-table-inner .sub02Img{float: left; width: 50%;}
.complete-title{font-size: 18px; cursor: pointer;  position: relative; padding: 19px 25px 19px 0px;}
.complete-title>p{font-family: 'Noto Medium'; font-size: 20px;}
.complete-title::after{content:""; display: block; position: absolute; width: 16px; height: 16px; background: url(../../images/sub/complete_more.png); right: 0px; top: 50%; margin-top: -8px;}
.most-complete-inner > ul > li.on .complete-title::after{background: url(../../images/sub/complete_min.png);}
.complate-table{max-height: 0; overflow: hidden; transition: all .3s;}
.complate-table .complate-table-inner {overflow: hidden; overflow-y: auto; max-height: 900px; padding-top: 20px; padding-bottom: 1px; margin-bottom: 30px; }
.complate-table .complate-table-inner p.subTit{font-size: 18px; margin-bottom: 10px; font-family: 'Noto Medium';}
.most-complete-inner > ul > li.on .complate-table{max-height: 1000px; border-top: 1px solid #6a6a6a;}

@media all and (max-width: 1023px) {
  .most-complete-inner > ul > li {padding: 0 30px;}
}

@media all and (max-width: 768px) {
  .most-complete-inner > ul > li {padding: 0 15px;}
  .complete-title {font-size: 16px;}
  .most-complete-inner li:nth-child(2) .complate-table .complate-table-inner>ul{width: 100%;}
  .most-complete-inner li:nth-child(2) .complate-table .complate-table-inner .sub02Img{width: 100%;}
}