@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');



/* HTML 기본 속성값 초기화, 모든 페이지에 적용 */

*{
  font-family:'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

html, body, div, span, h1, h2, h3, p, a, img, ul, li, table, tbody, tr, td, section {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: middle;

  -webkit-font-smoothing: antialiased; /* WebKit 브라우저에서 폰트 안티앨리어싱 적용 */
  -moz-osx-font-smoothing: grayscale; /* Firefox(맥 OS X)에서 폰트 안티앨리어싱 적용 */
  text-rendering: optimizeLegibility; /* 폰트 렌더링 최적화 */
  font-smooth: antialiased;
  
}

html {width: max(var(--min-width-page), 100%); 
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
  font-family:'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
 letter-spacing:-0.03em; word-break: keep-all; word-wrap: break-word;
}
*, *::before, *::after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

body {line-height: 1.3; word-break: keep-all;}

a {background-color: transparent; color: inherit; font-size: inherit; text-decoration: none;}


ul, li {list-style: none;}
table {border-collapse: collapse; border-spacing: 0;}
td {vertical-align: middle;}

img {margin:0; border:0;}

:focus {outline: none;}
::-webkit-file-upload-button {-webkit-appearance: button; font: inherit;}
::-webkit-input-placeholder {color: #999 !important; font-family: 'Pretendard', sans-serif; font-size: inherit;}
::-moz-placeholder {color: #999 !important; font-family: 'Pretendard', sans-serif; font-size: inherit;}
:-ms-input-placeholder {color: #999 !important; font-family: 'Pretendard', sans-serif; font-size: inherit;}
:-moz-placeholder {color: #999 !important; font-family: 'Pretendard', sans-serif; font-size: inherit;}

/*******************************/

.iblock {display: inline-block;}
.block {display: block;}
.flex {display: flex;}




/* ************** 위치 추척테스트용 ************ */
.tt { border: 5px solid var(--color-ict);  }
.ttb { border: 5px solid var(--color-blue);  }
.ttl { border: 5px solid var(--color-lime);  }
.tty { border: 5px solid var(--color-gold);  }

/* ************** common ************ */
.overx {overflow: hidden;}
.br {display: block;   height: 30px;}
.br8 {display: block;   height: 80px;}
.hr2 {display: block; width: 100%; height: 1px; border: 0px;  
  background-color: var(--color-silver); margin-top: 15px; margin-bottom: 10px;}

.roll_br {display: block;   height: 100px;}
.h-100 {height: 100%;}
.ch-100 {max-height: 400px;}
.auto {margin: 0px auto;}
.center {text-align: center;}
.ict_font {color: var(--color-ict);}
.ict_blue {color: var(--color-blue);}
.ict_mint {color: var(--color-mint);}
.ict_bg{background-color: var(--color-ict);}
.ict_white {color: var(--color-white);}


/* ************** button ***************** */
.ict_btn{ margin: 0px 10px;}
.ict_btn_set{
  color: var(--color-white);
  border-radius: 5px;
  text-align: center;
  font-weight: 500;
  letter-spacing: 2px; 
  background: transparent;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow:inset 1px 1px 0px 0px var(--color-white),
   1px 1px 2px 0px rgba(0,0,0, 0.5);
  outline: none;
}

/* 14 Orange */
.btn-14 {
  background: var(--color-ict);
  background-image: linear-gradient(-45deg, var(--color-ict) 0%, var(--color-gold) 100%); 
  width: 120px;
  height: 50px;
  border: none;
  z-index: 1;
  border-radius: 5px;
  box-shadow: inset 1px 1px 5px 1px var(--color-ict-8);
  transition: all 0.3s ease;
}

.btn-14:hover {
  color: var(--color-white);
  background-image: linear-gradient(-45deg, #fea500 0%, #fea500 74%);
}

.btn-14:active {
  top: 2px;
}

/* 15 Blue */
.btn-15 {
  background: #005cfd;
  background-image: linear-gradient(-45deg, #005cfd 0%, var(#ffffff) 100%); 
  width: 120px;
  height: 50px;
  border: none;
  z-index: 1;
  border-radius: 5px;
  box-shadow: inset 1px 1px 5px 1px #005cfd;
  transition: all 0.3s ease;
}

.btn-15:hover {
  color: var(--color-white);
  background-image: linear-gradient(-45deg, #005cfd 0%, #005cfd 74%);
}

.btn-15:active {
  top: 2px;
}

.ict_formbtn {display: inline-block; width: 100px; height: 50px; 
  text-align: center; border-radius: 5px;
vertical-align: middle; box-shadow: #0A0D1C;}










/* Quick-menu ************************************/
.quick_menu2 {
	left: auto;
    right: calc((100% - 1380px) / 2); /* 오른쪽으로 1280px 만큼 이동 */
    transform: none; /* 이전의 transform 속성 제거 */
    position: fixed;
    top: 94px;
    transform: translateX(50%);
    z-index: 5000;
    padding: 0px;
    display: flex;
    flex-direction: column;
    align-items: center; /* 가로 중앙 정렬 */
    width: auto; /* 컨테이너 너비 자동 조정 */
}


.quick_menu2 .cube01, .quick_menu2 .cube02, .quick_menu2 .cube03, .quick_menu2 .cube04, .quick_menu2 .cube05	{  
	display: flex; 
	flex-direction: column; /* 열 방향으로 아이템 배치 */
	justify-content: center; /* 세로 중앙 정렬 */
	align-items: center; /* 가로 정렬 */
	position: relative;
	text-align: center; 
	background-color: rgba(24,43,112,0.8);
	border-bottom: 1px solid var(--color-white);
	font-size: 12px; color: var(--color-white); 
}

.quick_menu2 .cube02:hover, .quick_menu2 .cube03:hover,.quick_menu2 .cube04:hover, .quick_menu2 .cube05:hover	{  
background-color: var(--color-dark); cursor: pointer; } 
.quick_menu2 .q_img { width: 30px;}    
.quick_menu2 a {color: var(--color-white); text-decoration: none;} 

.quick_menu2 .q_top { text-align: center; padding: 5px 0px;}
.quick_menu2 .q_top .qtop{margin: 0 auto; width: 90px; height: 50px; background-image: url(/assets/img/icons/quick_top.svg); background-repeat: no-repeat; background-size: 50px 50px; background-position: center center; cursor: pointer;  transition: background-image 0.2s ease-in-out; } 
.quick_menu2 .q_top .qtop:hover{margin: 0 auto; width: 90px; height: 50px; background-image: url(/assets/img/icons/quick_top_hover.svg); background-repeat: no-repeat; background-size: 50px 50px; background-position: center center; cursor: pointer;  transition: background-image 0.2s ease-in-out; } 

/* End : Quick-menu */




/********** 헤더 **********/
#head {position: sticky; top: 0; width: max(var(--min-width-page), 100%); z-index:555;}

#head #head_top #head_top_nav .head_top_left .top_loca_all { display: inline-block; content:''; width: 70px; height: 25px; background-image: url(/assets/img/icons/top_loca_all.svg);background-repeat: no-repeat; background-size: 71px 21px;    background-position: left center;  color: red); cursor: pointer; }
#head #head_top #head_top_nav .head_top_left .top_loca_all:hover {background-image: url(/assets/img/icons/top_loca_all_hover.svg); background-repeat: no-repeat; }

#head #head_top #head_top_nav .head_top_left .top_loca_sinchon { display: inline-block; content:''; width: 60px; height: 25px; background-image: url(/assets/img/icons/top_loca_sichon.svg);background-repeat: no-repeat; background-size: 71px 21px;    background-position: left center;  color: var(--color-white); cursor: pointer; }
#head #head_top #head_top_nav .head_top_left .top_loca_sinchon:hover {background-image: url(/assets/img/icons/top_loca_sichon_hover.svg);background-repeat: no-repeat; }
#head #head_top #head_top_nav .head_top_left .top_loca_gangnam { display: inline-block; content:''; width: 60px; height: 25px; background-image: url(/assets/img/icons/top_loca_gangnam.svg);background-repeat: no-repeat; background-size: 71px 21px;    background-position: left center;  color: var(--color-white); cursor: pointer; }
#head #head_top #head_top_nav .head_top_left .top_loca_gangnam:hover {background-image: url(/assets/img/icons/top_loca_gangnam_hover.svg);background-repeat: no-repeat; }
#head #head_top #head_top_nav .head_top_left .top_loca_sungsu { display: inline-block; content:''; width: 80px; height: 25px; background-image: url(/assets/img/icons/top_loca_sungsu.svg);background-repeat: no-repeat; background-size: 71px 21px;    background-position: left center;  color: var(--color-white); cursor: pointer; }
#head #head_top #head_top_nav .head_top_left .top_loca_sungsu:hover {background-image: url(/assets/img/icons/top_loca_sungsu_hover.svg);background-repeat: no-repeat; }

/* 헤드 상단  */
#head #head_top {top: 0; width: max(var(--min-width-page), 100%);background-color: var(--color-white);border-bottom: 1px solid #ddd;}
#head #head_top #head_top_nav { width: 1280px; height: 32px; margin: 0px auto; cursor: default;  background-color: var(--color-white);}
#head #head_top #head_top_nav .head_top_right { height: 32px; position: relative; bottom: 3px;}
#head #head_top #head_top_nav .head_top_left {background-color: var(--color-white);}
#head #head_top #head_top_nav .head_top_left img.top_location_icon { vertical-align: -2px; margin-right:6px; background-color: var(--color-gray1);}
#head #head_top #head_top_nav .head_top_left img.top_left_line{ margin:0 4px 0 5px; }
#head #head_top #head_top_nav .head_top_left span{ color:var(--color-gray1); opacity: 0.8; background-color: var(--color-white);}
#head #head_top #head_top_nav .head_top_left { float: left; line-height: 32px; }
#head #head_top #head_top_nav .head_top_left a{ display: contents; }
#head #head_top #head_top_nav .head_top_left a, #head_top_nav .head_top_right a, #head_top_nav .head_top_right, #head_top_nav .head_top_left { color:var(--color-gray1); font-size: 13px; font-weight: 300;}
#head #head_top #head_top_nav .head_top_right { float: right; line-height: 37px; }


/* 헤드 중앙 로고영역 */
#head #head_main {width: max(var(--min-width-page),100%); background:var(--color-white); height: 88px; display: grid; place-items: center; border-bottom:1px solid #e8e8e8;}
/* 좌측 대표번호, 로고, 우측 지점 안내 */
#head #head_main .head_main_wrap { border-bottom: 1px solid var(--color-silver);  background-color: var(--color-white); position: absolute; text-align: center; width:1280px;  height:88px;  margin: 0 auto; }
#head #head_main .head_main_wrap .top_left{ width: 220px; display: inline-block; text-align: left; position:absolute;  left: 0px;}
#head #head_main .head_main_wrap .top_left .call_num{ display: inline-block; font-family: 'pretendard'; font-size: 26px; font-weight: 700; color: var(--color-black);}
#head #head_main .head_main_wrap .top_left .call_text{ display: inline-block; font-family: 'pretendard'; font-size: 13px; font-weight: 400; color: #0A0D1C;}
#head #head_main .head_main_wrap .top_center{ display: inline-block;
  left: 50%; transform: translateX(-50%); position: absolute;}
#head #head_main .head_main_wrap .top_right {display:inline-block; width:220px; height: 88px;text-align: right; position:absolute; right: 0px;}
#head #head_main .head_main_wrap .top_logo {display:inline-block; width:220px; margin-top:20px;}
#head #head_main .head_main_wrap .top_logo img {/* display:none; */width:100%;}

/* 로고 좌측 대표번호 */
#head #head_main .head_main_wrap .fixed_call {float: left; width: 290px; height: 100%; padding-top: 20px;}
#head #head_main .head_main_wrap .fixed_call .icon_wrap {overflow:hidden; float:left; width: 50px; padding: 0px 0px 0 0;}
#head #head_main .head_main_wrap .fixed_call .icon_wrap img {width: 100%;}
#head #head_main .head_main_wrap .fixed_call .icon_wrap .actionCon {position:absolute; top: 39px; left: 22px;}
#head #head_main .head_main_wrap .fixed_call ul {float:left; text-align: left; line-height: 1.2;}
#head #head_main .head_main_wrap .fixed_call ul li:first-child {color: #222; font-size: 26px; font-weight: 700;}
#head #head_main .head_main_wrap .fixed_call ul li:last-child {padding-left:2px; color:#0a0d1c; font-size:13px;}

/* 로고 우측 인증마크  */
#head #head_main .head_main_wrap .header_direction {float: right; width: 380px; margin: 20px 0 0 5px; text-align: right; height: 88px; }
#head #head_main .head_main_wrap .header_direction .icon_wrap {float: right; width: 50px; height: 50px; border-radius: 50%; margin-right: 5px; padding-top: 0px; text-align: center; }
#head #head_main .head_main_wrap .header_direction .icon_wrap img {width: 50px; height: 50px; text-align: center; }
#head #head_main .head_main_wrap .header_direction .icon_wrap2 img {width: 30px; display: inline-block; margin: 20px; position: relative; z-index: 101;}
#head #head_main .head_main_wrap .header_direction .goyong {float: left; width: 191px; border-radius: 50%; margin-right: 5px; padding-top: 0px; text-align: center; }
#head #head_main .head_main_wrap .header_direction .goyong img {width: 191px; text-align: center; margin-top: 15px; }



/* 헤드하단 GNB 풀다운메뉴 */
 #head #head_nav {width: max(var(--min-width-page), 100%); height:56px; background:#fff; position:relative; margin:0 auto; border-bottom:1px solid #001637;}

#head #head_nav>ul {overflow:hidden; position:relative; width:1280px; min-width:1280px; height:56px; margin:0 auto; line-height:3.2; cursor: pointer; z-index: 1;}
#head #head_nav>ul li {display:inline-block; text-align:center;}
#head #head_nav>ul li:nth-child(even) {/* width:118px; */width:133px; height:100%;}
#head #head_nav>ul li a {display:inline-block; /*padding: 0.1rem;*/ color:#222; font-size:16px; vertical-align:1px; cursor:pointer;}
#head #head_nav>ul li a:hover {color:var(--color-ict); text-decoration: none;}
#head #head_nav .head_nav_ul {width: 100%; text-align: center; border-bottom:1px solid #f8f8f8;
font-weight: 500;} 

#head #head_nav .head_nav_ul .mainmenu {width: 155px; border: 0px solid gray;} /* top메뉴 가로간격 */

#head #head_nav .head_nav_ul {position:absolute; width:100%; background:#fff;}
#head #head_nav .head_nav_ul li a::before {content:''; position:absolute; width:100%; 
  width:0px; left: 0; right: 0; bottom: 0; height: 1px; background:#fff;}

#head #head_nav .fulldown {overflow:hidden; z-index:0; position:absolute; width:100%;   margin: 0 auto; left: 50%; background:#fff;transform: translateX(-50%); height: 250px; height:50px; padding-top: 50px; opacity: 0.9; border-bottom:1px solid Gray;} 
#head #head_nav .fulldown .menu {position:relative; top:50px;top:0; left: 12px; width:100%; opacity:1; background:#fff;border-bottom:0px solid #dfe6f1;}
#head #head_nav .fulldown .menu>ul { width:1280px; background:#fff; margin:0 auto; text-align: center;}

#head #head_nav .fulldown .menu>ul li.submenu {float:left; /* width:125px; */width:140px; height:200px; box-sizing:border-box; padding:8px 0; margin-left: 2px; margin-right: 2px; border: 0px solid gray;}/* submenu메뉴 */

/* #head_nav .fulldown .menu>ul li.submenu:hover{ background:#f2f5fa; } */
#head #head_nav .fulldown .menu .submenu ul { width:100%; }
#head #head_nav .fulldown .menu .submenu ul li {padding:6px 0; text-align:center;}
#head #head_nav .fulldown .menu .submenu ul li a { font-size: 14px; font-weight: 400; color: var(--color-black); font-smooth: antialiased; display:inline-block; width:100%; letter-spacing:-0.07em; white-space: nowrap;}
#head #head_nav .fulldown .menu .submenu ul li a:hover { color:var(--color-ict);  font-weight: 700; text-decoration: none;}
#head #head_nav .fulldown .menu .submenu .actionCon {box-sizing:border-box; display:inline-block; position:relative; top:-4px; right:-18px; margin-left:-18px; padding:2px 3px; width:34px; height:20px; background:url("../img/icons/bottom_info_icon.png") no-repeat;}
#head #head_nav .fulldown .menu>ul li.submenu .actionType5_1 {padding-left:5px;}
#head #head_nav .fulldown .menu>ul li.submenu .actionType5_1 > div {width:auto; height:auto; color:#fff; 
background:transparent; font-size:10px; border-radius:0; -webkit-border-radius:0;
transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1); animation:lodingText ease-in-out 1.5s infinite; -webkit-animation:lodingText ease-in-out 1.5s infinite; -moz-animation:lodingText ease-in-out 1.5s infinite;}
#head #head_nav .fulldown .menu>ul li.submenu .actionType5_1 .loding1 { animation-delay:-.5s; -webkit-animation-delay:-.5s; -moz-animation-delay:-.5s; }
#head #head_nav .fulldown .menu>ul li.submenu .actionType5_1 .loding2 { animation-delay:-.3s; -webkit-animation-delay:-.3s; -moz-animation-delay:-.3s; }
#head #head_nav .fulldown .menu>ul li.submenu .actionType5_1 .loding3 { animation-delay:-.1s; -webkit-animation-delay:-.1s; -moz-animation-delay:-.1s; }
@keyframes lodingText { 0% { opacity:1; } 60%,100% { opacity:0; } }
  @-webkit-keyframes lodingText { 0% { opacity:1; } 60%,100% { opacity:0; } }

  





















/* 공통 */
.sr-only {position: absolute; overflow: hidden; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; clip: rect(0,0,0,0);} /* 스크린리더에만 읽히고, 화면에서는 제외 */

/* float을 해제할 부모요소에 .cf_2023 */
.cf {zoom:1; /* ie 6,7 */}
.cf::before {content:" "; display:table;}
.cf::after {clear:both;}


	/* 기본 구성 .content_wrap */
/* .content_wrap {overflow: hidden; margin: 0 auto; font-size: 18px;} */


.content_section {overflow: hidden; /* width: 100%; */width: var(--min-width-page); margin: 0 auto;}
.content_section .content {margin: 0 auto;}
/* 메인 */
.main_wrap .content_wrap {font-size: 16px;}
















/********** 타이틀/서브타이틀/컨텐츠타이틀 **********/
.section_title { 
	font-family: 'pretendard'; 
	font-weight: 700; font-size: 18px;
    color:var(--color-black);  
    text-align: center; line-height: 56px;
	color: #003399;
	}

.section_subtitle { font-family: 'pretendard';
   color:var(--color-gray1); font-weight: 500; font-size: 16px; text-align: center; line-height: 24px; color:#999999;}


















/* Mainpage allview Btn 공통 */



.allview_btn {display: inline-block; position: absolute;
  right: 15px; width: 108px; height: 54px; 
  font-family: 'pretendard'; color: var(--color-dark); font-weight: 400; font-size: 15px; line-height: 1.5; text-align: right;} 
.allview_btn:hover {color: var(--color-ict); text-decoration: none;}

.allview_btn::after {content: ''; display: inline-block; width: 6px; height: 12px;  margin: 0px 8px -1px 12px; 
  background: url(/assets/img/icons/btn_arrow_right_gray.svg); background-repeat: no-repeat; background-position: center; background-size: contain;
  }

.allview_btn:hover::after {content: ''; display: inline-block; width: 6px; height: 12px;  margin: 0px 8px -1px 12px; 
  background: url(/assets/img/icons/btn_arrow_right_gray.svg); background-repeat: no-repeat; background-position: center; background-size: contain;
  animation: slideArrow .75s ease-in-out infinite}


/* allview Btn 취업과정 전용*/
  .allview_btn_m {display: inline-block; position: absolute;
    right: 0px; width: 108px; height: 54px; 
    font-family: 'pretendard'; color: var(--color-dark); font-weight: 400; font-size: 15px; line-height: 1.5; text-align: right;} 
  .allview_btn_m:hover {color: var(--color-ict); text-decoration: none;}
  
  .allview_btn_m::after {content: ''; display: inline-block; width: 6px; height: 12px;  margin: 0px 8px -1px 12px; 
    background: url(/assets/img/icons/btn_arrow_right_gray.svg); background-repeat: no-repeat; background-position: center; background-size: contain;
    }
  
  .allview_btn_m:hover::after {content: ''; display: inline-block; width: 6px; height: 12px;  margin: 0px 8px -1px 12px; 
    background: url(/assets/img/icons/btn_arrow_right_gray.svg); background-repeat: no-repeat; background-position: center; background-size: contain;
    animation: slideArrow .75s ease-in-out infinite}
  


  .allview_btn_m2 {display: inline-block; position: absolute;
    right: 0px; width: 108px; height: 54px; 
    font-family: 'pretendard'; color: white font-weight: 400; font-size: 15px; line-height: 1.5; text-align: right;} 
  .allview_btn_m2:hover {color: var(--color-ict); text-decoration: none;}
  
  .allview_btn_m2::after {content: ''; display: inline-block; width: 6px; height: 12px;  margin: 0px 8px -1px 12px; 
    background: url(/assets/img/icons/btn_arrow_right_blue.svg); background-repeat: no-repeat; background-position: center; background-size: contain;
    }
  
  .allview_btn_m2:hover::after {content: ''; display: inline-block; width: 6px; height: 12px;  margin: 0px 8px -1px 12px; 
    background: url(/assets/img/icons/btn_arrow_right_blue.svg); background-repeat: no-repeat; background-position: center; background-size: contain;
    animation: slideArrow .75s ease-in-out infinite}



















/* 더보기 버튼 공통 */
@keyframes slideArrow {
  0%,  100% { transform: translate(0px, 0) }
  50% { transform: translate(5px, 0) }
}



/*  */
.content_wrap img {width:100%;}
.content_wrap table {width: 100%;}


.list_thumb_item {transition: transform .25s ease; cursor: pointer;}






  
  .content_wrap .swiper-wrapper {transition-timing-function: linear;} /* 자동으로 흐르게 할 경우 해당 클래스 추가 */


  .btn_s {display: inline-block; width: 178px; height: 54px; font-weight: 600; font-size: 15px; line-height: 54px; text-align: center;} /* 사각버튼 */















/********** 메인 css **********/

/********** 메인배너 - 395 > 470 > 524 **********/
#body_main {position:relative; overflow:initial; height:524px;}
#rolling_page {height:524px; float:left; width:100%; position:relative;}

.banner {

  width: 100%; /* 너비를 화면 크기에 맞춥니다 */
  height: 524px; /* 고정된 높이를 설정합니다 */
  background-size: cover; /* 이미지가 컨테이너를 완전히 덮도록 조정하되, 비율은 유지합니다 */
  background-position: center; /* 이미지가 컨테이너의 중앙에 위치하도록 합니다 */
  display:none; 
  box-sizing:border-box; 
  position:absolute; 
  background-repeat:no-repeat; 
  text-align:left;
}

.banner *, .banner *::before, .banner *::after {box-sizing:inherit;}
.banner .banner_text {width:1280px; height: 524px; margin:0 auto; padding:0px 50px 0 50px; color: #fff; 
border: 1px solid red;}

/* 배너 A */
.banner .banner_a_text .banner_title_01 { position: absolute; top: 50px;
  animation-name: mov1; animation-duration: 1s; animation-delay: 0.1s; opacity: 1;} 
.banner .banner_a_text .banner_title_02 { position: absolute; top: 320px;
  animation-name: mov2; animation-duration: 1s; animation-delay: 0.8s; opacity: 1;}  
.banner .banner_a_text .banner_title_03 { position: absolute; top: 50px; right: 0px; 
  animation-name: mov3; animation-duration: 1s; animation-delay: 0.5s; opacity: 1;}

.banner .banner_a_text .banner_title_04 { font-size: 20px;} 
.banner .banner_a_text .banner_image { font-size: 20px;}  
/* end : 배너 A */

 


/* 배너 B */
.banner .banner_b_text .banner_title_01 { position: absolute; top: 50px;
  animation-name: mov1; animation-duration: 1s; animation-delay: 0.1s; opacity: 1;} 
.banner .banner_b_text .banner_title_02 { position: absolute; top: 400px; 
  animation-name: mov2; animation-duration: 1s; animation-delay: 0.8s; opacity: 1;}  
.banner .banner_b_text .banner_title_03 { position: absolute; top: 0px; right: 50px; 
  animation-name: mov3; animation-duration: 1s; animation-delay: 0.5s; opacity: 1;}

.banner .banner_b_text .banner_title_04 { font-size: 20px;} 
.banner .banner_b_text .banner_image { font-size: 20px;}  
/* end : 배너 B */

 



/* 배너 C */
.banner .banner_b_text .banner_title_01 { position: absolute; top: 0px;
  animation-name: mov1; animation-duration: 1s; animation-delay: 0.1s; opacity: 1;} 
.banner .banner_b_text .banner_title_04 { font-size: 20px;} 
.banner .banner_b_text .banner_image { font-size: 20px;}   
/* end : 배너 C */

 









.banner_text .banner_title_letter {
  font-family:'pretendard', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 20px; font-weight: 400;

}
.banner_text .banner_title_header {
  font-family:'pretendard', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 48px; font-weight: 700;
}
.banner_text .banner_title_text   {
  font-family:'pretendard', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 20px; font-weight: 100;
  margin-top: 50px;
}

.banner_text .banner_title2 span {height:68px; opacity:0; color:inherit; font-weight:700; font-size:60px; line-height:68px; letter-spacing:0;}


.banner_text .banner_title2 {opacity:0; animation-name:typing; animation-fill-mode:forwards; animation-iteration-count:1;}
.banner_text .banner_title2 span {height:68px; opacity:0; color:inherit; font-weight:700; font-size:60px; line-height:68px; letter-spacing:0;}
.banner_text .banner_title2 span {animation-name:typing; animation-duration:0.5s; animation-fill-mode:forwards; animation-iteration-count:1;}
.banner_text .banner_subtitle {height:100px; padding:22px 0 47px 8px; font-weight:400; font-size:24px; letter-spacing:0;}


.banner_text .banner_button {position:relative; display:inline-block; 
  border-radius:10px; padding:0 30px; font-weight:600; font-size:18px; 
  line-height:2; letter-spacing:-0.04em;
  background-color: var(--color-light);
  color: var(--color-black);
  top: 100px;
  opacity: 0.5;
}
.banner_text .banner_button:hover {
  background-color: var(--color-ict);
  color: var(--color-light);
} 

.banner_text .banner_button::before {content:""; position:absolute; 
  top:0; left:0; width:100%; height:100%; border-radius:15px; 
  box-shadow:0px 10px 24px 0px rgba(31, 31, 31, 0.2); mix-blend-mode:multiply;}








#pager {position:absolute; left:0; right:0; width:1300px; margin:0 auto; text-align:center;}
#pager .pager_position {display:inline-block; position:absolute; top:480px; left:50%; transform:translateX(-50%); vertical-align:middle;}
#slick-pause, #slick-start {display:inline-block; width:19.5px; height:12px; text-indent:-9999px;  cursor:pointer; margin-left:5px;}
#slick-pause {background:url(../images/main/main_renewal/main_rolling_stop.png)no-repeat center center;}
#slick-start {background:url(../images/main/main_renewal/main_rolling_play.png)no-repeat center center; display:none;}
#pager .banner_left, #pager .banner_right {position:absolute; display:block; padding:0; border:none; outline:none; font-size:0; cursor:pointer;}
#pager .banner_left {left:0; top:227px; width:70px; height:70px; background: url(../images/main/main_renewal/sub/sub02/arrow_prev.png) no-repeat; cursor:pointer;}
#pager .banner_right {right:0; top:227px; width:70px; height:70px; background: url(../images/main/main_renewal/sub/sub02/arrow_next.png) no-repeat; cursor:pointer;}





#main_bigblock1_pager{ display: block; }
#main_bigblock1_pager a { display: block; float: left; width: 12px; height: 12px; cursor: pointer; background: #dfe6f1; margin: 0 4.5px; border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px 6px 6px 6px; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }
#main_bigblock1_pager a:after{ content:""; display: table; clear: both; } 


/********** 메인배너 아래 퀵메뉴 **********/


/********** 메인 공통 **********/
:root {
	--main-color-blue: #164ad0;
	--main-color-cyan: #34dcfa;
}

.main_wrap {cursor: default;}

/* 메인 section 타이틀 공통 */
.main_wrap .section_title_common {
  font-family: 'pretendard'; padding-top: 40px; padding-bottom: 40px;
}
.main_wrap .section_title {font-size: 40px;}
.main_wrap .section_subtitle {position: relative; font-weight: 400; font-size: 18px;}

.main_wrap .content_section {position: relative; overflow: visible;}
.main_wrap .btn_main {position: absolute; /* top: 120px; */bottom: 50px; right: 0; border: 1px solid var(--color-ict); background-color: transparent; color: var(--color-ict); line-height: 52px; transition: all .25s ease;}
.main_wrap .btn_main::after {content: ''; float: right; width: 6px; height: 12px; margin: 20px 15px 0 -15px; background: url(/assets/img/icons/btn_arrow_right_blue.png); background-repeat: no-repeat; background-position: center; background-size: contain; transition: all .25s ease;}
.main_wrap .btn_main:hover {background-color:  var(--color-ict); color: #fff;}
.main_wrap .btn_main:hover::after {background: url(/assets/img/icons/btn_arrow_right_blue.png);}


/* S: 취업 과정 2024.05.14 **********/
#main_curriculum_new { height: 610px;  width: 1280px; overflow: hidden; margin-bottom: 20px;}

#main_curriculum_new .swiper-slide .item .content_explain {font-family: 'pretendard', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color:var(--color-black); font-weight: 600; font-size: 15px; line-height: 1.2; margin-top: 10px; text-align: left; padding-left: 10px; padding-right: 10px; margin-top: 20px; margin-bottom: 5px;} 
    
#main_curriculum_new .swiper-slide .item .content_date {font-family:'pretendard', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color:var(--color-dark); font-weight: 300; font-size: 13px; line-height: 1.4; text-align: left; padding-left: 10px; padding-right: 10px;} 

#main_curriculum_new .curriculum_list .curriculum_item {position: relative; overflow: hidden; cursor: pointer; height: 490px; width: 300px;}

.swiper_gap {
  margin: 10px;
}

/* end : 취업 과정 2024.05.14 **********/





/********** 취업 과정 **********/
#main_curriculum {
  height: 590px; 
}

#main_curriculum .curriculum_list .curriculum_item_light img{/* 취업과정이미지 */
  
}
        
#main_curriculum .curriculum_list .content_explain {font-family: 'pretendard', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color:var(--color-black); font-weight: 600; font-size: 15px; line-height: 1.2; margin-top: 10px; text-align: left; padding-left: 10px; padding-right: 10px; margin-top: 20px; margin-bottom: 5px;} 
#main_curriculum .curriculum_list .content_date {font-family:'pretendard', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color:var(--color-dark); font-weight: 300; font-size: 13px; line-height: 1.4; text-align: left; padding-left: 10px; padding-right: 10px;} 



#main_curriculum .curriculum_list {display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 270px); gap: 14px; grid-template-areas:
"curriculum_item1 curriculum_item2 curriculum_item3 curriculum_item4" 
"curriculum_item5 curriculum_item6 curriculum_item7 curriculum_item8";
text-align: center;}
.curriculum_item1,.curriculum_item2,.curriculum_item3,.curriculum_item4{
  position: absolute;
  left: 10px;
}

#main_curriculum .curriculum_list .curriculum_item {position: relative; overflow: hidden; cursor: pointer; height: 450px; width: 300px;}



#main_curriculum .curriculum_list .curriculum_item_light {padding: 1px 1px 0;}
#main_curriculum .curriculum_list .curriculum_item_light:hover {border-width: 1px; border-color: var(--color-ict); opacity: 0.9;}

#main_curriculum .curriculum_list .curriculum_item_light .content_text {color: var(--color-silver); 
    font-family: 'Pretendard','Bahnschrift'; font-size: 14px;}



.main_curriculum .curriculum_list .curriculum_item4 .content_explain {font-weight: 600; font-size: 15px;}



/********** 띠배너 **********/
.main_band_section {width: 100%; height: 306px;}
.main_band_section .content {width: var(--min-width-page);}
.main_band_section .section_title {padding: 60px 0 38px; color: #fff;}
 


















	/* *************** 결과 수치 ****************** */
.main_wrap .main_result_section {overflow: hidden; z-index: 1; height: 600px; 
background: linear-gradient(to right, #00154c, #0F138f); color: #fff;
} 

.main_result_section .result_bg {position: absolute; top: 0; left: 0; z-index: -1; 
  width: 100%; height: 100%;  
  background: url(/assets/img/main/main_result_bg.jpg) no-repeat center/cover;
}

  .main_result_section .section_title {
    font-weight: 700; 
    font-size: var(--font-size-sectiontitle);
    color: var(--color-light);
    display: grid;
    align-items: center; /* 세로 중앙 정렬 */

    
    }

.main_result {display: flex;}
.main_result .result_item {width: -webkit-calc((1130px - 20px) / 4); width: calc((1130px - 20px) / 4); text-align: center;}
.main_result .result_item:not(:last-child)::after {content: ''; float: right; width: 1px; height: 53px; margin: -75px 0 0 0; opacity: .2; background: #fff;}
.main_result .result_item .result_item_title {font-weight: 500; font-size: 18px; text-align: left;}
.main_result .result_item .result_item_title span {padding-left: 5px; color: #a5a8be; font-weight: 400; font-size: 13px;}
.main_result .result_item .result_item_count {font-weight: 500; font-size: 30px;}
.main_result .result_item .result_item_count .count {font-family: pretendard; font-weight: 700; font-size: 22px; vertical-align: -2px; color: #34dcfa;}

.main_result .result_item1 .result_item_title {padding-left: 24%;}
.main_result .result_item2 {width: -webkit-calc((1130px - 20px) / 4 + 20px); width: calc((1130px - 20px) / 4 + 20px);}
.main_result .result_item2 .result_item_title {padding-left: 16%;}
.main_result .result_item2 .result_item_count::after {content: '+'; margin-left: 2px; vertical-align: 22px; font-size: 24px;}
.main_result .result_item3 .result_item_title {padding-left: 21%;}
.main_result .result_item4 .result_item_title {padding-left: 26%;}









/********** 취업기업 및 관계기업 **********/
.main_status_section {padding-bottom: 40px;} 

.main_status .status_list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 60px; line-height: 1.4;}
.main_status .status_list_item {display: -webkit-box; display: -moz-box; display: flex; -webkit-box-pack: justify; -moz-justify-content: space-between; justify-content: space-between; align-items: center; padding: 20px 12px 20px 0px; cursor: pointer;}
.main_status .status_list_item .name{display: inline-block; width: 30%; text-align: left; border: 1px solid red;}
.main_status .status_list_item .p{display: inline-block; width: 30%; text-align: left; border: 1px solid red;}
.main_status .status_list_item .p{display: inline-block; width: 30%; text-align: left; border: 1px solid red;}

.main_status .status_list_item:not(:nth-last-child(-n+2)) {border-bottom: 1px solid #e5e8ec;}

.main_status .status_list_item .content_subtitle_name::before {content: ''; display: inline-block; width: 34px; height: 34px; border-radius: 50%; margin-right: 12px; background-repeat: no-repeat; background-position: center; vertical-align: middle; transition: all .25s ease;background-image: url(./assets/img/icons/icon_status_new_off.gif); background-size: 34px;}
.main_status .status_list_item:hover .content_subtitle_name::before {background-image: url(/assets/img/icons/icon_status_new_on.png);}

.main_status .status_list_item .content_subtitle_name_off::before {content: ''; display: inline-block; width: 34px; height: 34px; border-radius: 50%; margin-right: 12px; vertical-align: middle;}

.main_status .status_list_item:hover .content_subtitle_name_off {color: var(--color-ict);} /* new icon 없는경우 */

.main_status .status_list_item .content_subtitle_name {display: inline-block; width: 20%; text-align: left; 
  font-family: 'pretendard'; color:var(--color-black); font-weight: 600; font-size: 16px;}
.main_status .status_list_item .content_subtitle_name_off {display: inline-block; width: 20%; text-align: left; 
    font-family: 'pretendard'; color:var(--color-black); font-weight: 600; font-size: 16px;}

.main_status .status_list_item .content_subtitle_title {display: inline-block; width: 50%; text-align: left;
  font-family: 'pretendard'; color: var(--color-gray1); font-weight: 400; font-size: 16px;}
.main_status .status_list_item .content_subtitle_date {display: inline-block; width: 30%; text-align: right;
  font-family: 'pretendard'; color:var(--color-black); font-weight: 400; font-size: 13px;}
.main_status .status_list_item .content_subtitle_date::after {content: ''; 
  display: inline-block; width: 6px; height: 12px;  margin: 0px 8px -1px 12px;  background: url(/assets/img/icons/btn_arrow_right_gray.svg); 
  background-repeat: no-repeat; background-position: center; background-size: contain;}
  .main_status .status_list_item .content_subtitle_date:hover::after {content: ''; display: inline-block; width: 6px; height: 12px; margin: 0px 8px -1px 12px; 
    background: url(/assets/img/icons/btn_arrow_right_gray.svg); background-repeat: no-repeat; background-position: center; background-size: contain;
    animation: slideArrow .75s ease-in-out infinite}





.main_status .status_list_item:hover .content_subtitle_name {color: var(--color-ict);}










/************* 성공이미지 타이틀 *******************  */

.main_wrap .main_direction_section {overflow: hidden; width: 100%; height: 300px; color: #fff; text-align:  center;
  background: url(/assets/img/banner/main_people_bg.png) no-repeat 0px/cover; background-position: center center; background-size: auto 120%; }

.main_wrap .main_direction_section .section_title {
  font-family: 'pretendard';
  font-weight: 700; 
  font-size: var(--font-size-sectiontitle);
  color: var(--color-light);
  display: grid;
  align-items: center; /* 세로 중앙 정렬 */
  height: 100%; /* 최소 높이 */
  }

  
    


/********** 교육생 후기 **********/
#main_interview {width: 100%; background-color: #f6f8fc; padding-bottom: 60px; }
#main_interview .main_interview_section {width: 1280px; margin: 0px auto;}

#main_interview .list_thumb_item {box-shadow: 0px 6px 24px 0px rgba(5, 5, 5, .05); width: 290px;}
#main_interview .content_explain_main {width: fit-content;}
#main_interview .content_explain_main::after {content: ''; display: inline-block; width: 5px; height: 9px; margin: 0 0 1px 7px; opacity: .7; 
  background: url(); background-repeat: no-repeat; background-position: center; background-size: contain;}
  
#main_interview .interview_title {
  font-family: 'pretendard'; color: var(--color-ict);   font-weight: 500; font-size: 16px;
    padding-bottom: 5px; border-bottom: 1px solid var(--color-silver);}

#main_interview .interview_subtitle {
  font-family: 'pretendard'; color: var(--color-dark); font-weight: 400; font-size: 16px;
padding-top: 10px;} 


 /* detailview Btn */
#main_interview .item_content2 .detailview_btn {font-family: 'pretendard'; font-weight: 400; font-size: 12px; line-height: 1.5; 
  position:relative; bottom: 10px var(--color-dark); text-align: right;} 

#main_interview .item_content2 .detailview_btn:hover {color: var(--color-ict);}


.double-quotation img { width: 20px; height: 15px; margin-bottom: 15px;}



#main_interview .list_thumb_4 {display: grid; grid-template-columns: repeat(4, 290px); gap: 32px; width: 100%; margin: 0px auto; border-radius: 10px; left: 10px;}
#main_interview .list_thumb_4 .list_thumb_item {background-color: #fff; border-radius: 10px;}
#main_interview .list_thumb_4 .list_thumb_item:hover {transform: translateY(-5px);}
#main_interview .list_thumb_4{ width: 1280px; margin: 0px auto; }

#main_interview .list_thumb_4 .list_thumb_item .item_content2 {
  display: flex; 
  -webkit-box-orient: vertical; -moz-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -moz-justify-content: space-between; justify-content: space-between; height: 360px; padding: 20px 18px; border-radius: 10px; border: 1px solid var(--color-silver);
}









/********** ICT스토리 **********/
.main_story_wrap {width: 1280px; padding-bottom: var(--padding-bottom-content); margin: 0px auto; background-color: #fff; }

.main_story_wrap  .section_title {font-family: 'pretendard';  font-size: 40px; color: var(--color-black);}
.main_story_wrap  .section_subtitle {font-family: 'pretendard'; position: relative;font-weight: 400; font-size: 18px; color: var(--color-black);}


.main_story_wrap .main_story_section  {width: 100%; padding-left: 10px; padding-right: 10px;} 
.main_story_wrap .main_story_section .carosuel_board { margin: 0px; padding: 0px; border-bottom: 1px solid var(--color-silver);}
.main_story_wrap .main_story_section .carosuel_board img { width: 25px; margin-bottom: 5px;} 
.main_story_wrap .main_story_section .content_explain_table_title {
    font-family: 'pretendard'; font-weight: 700;  font-size: 18px; color: var(--color-black); padding-top: 0px;
    line-height: 1.5; }
.main_story_wrap .main_story_section .content_explain_table_text {
    font-family: 'pretendard'; font-weight: 400;  font-size: 16px; color: var(--color-gray1); margin-left: 0px;
    line-height: 1.7; margin-bottom: 10px;}

.main_story_wrap .main_story_section .carousels .carousel_tbl_right .carosuel_board  {
      height: 100px; margin-bottom: 10px;
  }















@import url('///cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
/* 공통 */
* { margin: 0; padding: 0; }


 





		/* 마우스스크롤 프로그레스 바 시작 */
        /* 1-2-1 */
        .progress-container {
          position: fixed;
          top: 0px;
          width: 100%;
          height: 1px; /* height: 0px; 으로 하면 안 보임 */
          background-color: #444;
          z-index: 1500;
      }
      .progress-bar {
          position: fixed;
          top: 0px;
          width: 0%;
          height: 2px;
          background: linear-gradient(to right,rgba(87, 52, 218, 1) 0, rgba(250,180,70,1) 50vw, rgba(250,30,30,1) 100vw);
          /* background: linear-gradient(to right, white, gray 50vw, black 100vw); */
          /* background: linear-gradient(90deg, #00C9FF 10%, #92FE9D 90%); */
          /* background: #191970; */
          border-radius: 0px 10px 10px 0px;
          /* border-radius: 10px; */
    z-index: 1500;
      }
      .percent {
          /* display: none; 을 추가 하면 안 보임 */
          position: absolute;
          top: 10px;
          right: 25px;
          display: block;
          font-size: 20px;
          font-weight: 700;
          color: #000;
          text-align: center;
      }
      .percent::after {
          /* display: none; 을 추가 하면 안 보임 */
          content: "%";
          position: absolute;
          bottom: 2px;
          right: -15px;
          font-size: 12px;
          font-weight: 500;
          opacity: 0.5;
      }





























/* float을 해제할 부모요소에 .cf 혹은 .clearfix */
.cf:after { content: ""; display: block; clear: both; visibility: hidden; line-height: 1%; height: 0; }

/* 모션 - 점 3개, nav ING */
.actionType5_1 > div {
   display:inline-block;
   width:2px;
   height:2px;
   float: left;
   margin-right:2px;
   border-radius:50%;
   -webkit-border-radius:50%;
   transform:scale(0);
   -webkit-transform:scale(0);
   -moz-transform:scale(0);
   background:#222;
   animation:lodingCircle1 ease-in-out 1.5s infinite;
   -webkit-animation:lodingCircle1 ease-in-out 1.5s infinite;
   -moz-animation:lodingCircle1 ease-in-out 1.5s infinite; 
}
.actionType5_1 .loding1 {
   animation-delay:-.5s;
   -webkit-animation-delay:-.5s;
   -moz-animation-delay:-.5s;
}
.actionType5_1 .loding2 {
   animation-delay:-.3s;
   -webkit-animation-delay:-.3s;
   -moz-animation-delay:-.3s;
}
.actionType5_1 .loding3 {
   margin-right:0;
   animation-delay:-.1s;
   -webkit-animation-delay:-.1s;
   -moz-animation-delay:-.1s;
}
@keyframes lodingCircle1 {
  0% {
    transform:scale(1);
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    opacity:1;
  }
  10% {
    transform:scale(1.2);
    -webkit-transform:scale(1.2);
    -moz-transform:scale(1.2);
  }
  60%,100% {
    transform:scale(0);
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    opacity:0;
  }
}
@-webkit-keyframes lodingCircle1 {
  0% {
     transform:scale(1);
     -webkit-transform:scale(1);
     -moz-transform:scale(1);
     opacity:1;
  }
  10% {
     transform:scale(1.2);
     -webkit-transform:scale(1.2);
     -moz-transform:scale(1.2);
  }
  60%,100% {
      transform:scale(0);
      -webkit-transform:scale(0);
      -moz-transform:scale(0);
      opacity:0;
  }
}


/* head */




 
/*자바&보안 화살표 애니메이션*/

#body_main{ overflow:hidden; border-bottom: 1px solid #d5d5d5; }


/*중간 퀵메뉴 애니메이션*/

/*하단 top아이콘 애니메이션*/
@-webkit-keyframes quick-wobble-vertical2 {
  16.65% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  33.3% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  49.95% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes quick-wobble-vertical2 {
  16.65% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  33.3% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  49.95% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}