*:focus-visible{outline-color:#1a73e8!important;} /* 흰 배경 4.5:1, 검정 배경 4.66:1 */
strong { font-weight: 700; }
body {
  font-family: "NanumSquareR", "NanumGothicR", "Helvtica Neue", Helvetica, "돋움", Arial, sans-serif;
}
#shortcut {
  position: absolute;
  width: 1px; height: 1px; overflow: hidden; padding: 0; margin: -1px; border: 0; clip: rect(0, 0, 0, 0);
  text-align: center;
}
#shortcut:focus,
#shortcut:hover,
#shortcut:active {
  position: relative;
  display: inline-block;
  width: auto;
  height: auto;
  padding: 8px 12px;
  background-color: #fff;
}
#app,
.header,
.footer,
.section {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  color : #333;
  background: transparent scroll 0 0;
}

.header {
  background-color: #fff;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);
  padding-top: 18px;
  padding-bottom: 17px;
  margin-bottom: 10px;
  z-index: 9;
}
.footer {
  background-color: #333;
  color: #fff;
  padding: 6px 0;
}
.footer > .wrap_inner { color: inherit; }

.section {
  margin-bottom: 20px;
}

.wrap_inner {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  max-width: 850px;
  margin: 0 auto;
}

.header-title { 
  font-size: 1.175rem; font-weight: 700; line-height: 1.6; 
}
.header-title_small { font-size: smaller; }

.page__title, .content__title {
  margin:  20px 0;
  font-size: 1.125rem;
  letter-spacing: 1px;
  line-height: 1.4em;
}

.content__title,
.section__title {
  font-size: 1.111rem;
  line-height: 1.4;
  margin-bottom: 20px;
}

.page__content {
  position: relative;
  background-color: #fff;
  box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

.header:after,
.footer:after,
.section:after,
.page__content:after,
.cols:after {
  display: block;
  content: '';
  clear: both;
}

.page__video {
  position: relative;
  width: 230px;
  float: right;
  z-index: 2;
  display:none;
}

.content__group {
  position: relative;
  /* width: 520px;
  float: left; */
  z-index: 2;
}

.content__section {
  position: relative;
  width: 100%;
  margin-bottom: 30px;
}

.content__section + .content__section:before {
  display: block;
  content: '';
  height: 0;
  border-top: 1px dashed #999;
  margin-top: 30px;
  margin-bottom: 30px;
}
.timeline__wrap { margin: 20px 0 20px; }
.timeline { display: flex; align-items: center; justify-content: flex-end; overflow: hidden; }
.timeline__item { margin-left: 30px; }
.timeline__item.fix__width_20,
.timeline__item.fix__width_16,
.timeline__item.fix__width_12,
.timeline__item.fix__width_10 { margin-left: 22px; }

.wrap_flex { display: flex; align-items: center; justify-content: space-between; }
.btn_pagination { 
  flex: 2; order: 1;
  display: flex; align-items: center; justify-content: flex-end;
}
.copyright { flex: 1; }
.pagination { margin-left: 20px; }
.pagination_current,
.pagination_last { font-size: 1.125rem; }

.layer-popup { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 11; overflow: hidden; visibility: hidden; }
.layer-popup__in { visibility: inherit; }
.layer-popup__bg { position: relative; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, .6); z-index: 1; }
.layer-popup__inner { 
  position: absolute; 
  bottom: 61px;
  width: 100%;
  z-index: 2;
  transform: translateY(100%);
  transition: transform .5s ease-out;
}
.layer-popup__in > .layer-popup__inner { transform: translateY(0); }
.layer-popup__title { font-size: 1.5625rem; font-weight: 700; margin-bottom: 20px; }
.layer-popup__title > .text_small { font-size: 1rem; }

.layer-section + .layer-section:before {
  display: block;
  content: '';
  height: 0;
  border-top: 1px dashed #999;
  margin-top: 20px;
  margin-bottom: 20px;
}

.layer-section .section__title { 
  padding-left: 36px; font-weight: 700; background: transparent no-repeat 0 3px;
}
.section__title.career { background-image: url(../images/careerIcon.png); }
.section__title.career-school { background-image: url(../images/edulevelIcon.png); }

.layer-popup__content {
  position: relative;
  width: 64.647%;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

.cols dt,
.cols dd { float: left; box-sizing: border-box; }

.cols dt { width: 22%; }
.cols dd { min-width: 70%; }
.text_small {
  font-size: smaller;
}
.text_big {
  font-size: 1.3em;
}
.text_center {
  text-align: center;
}
.list-type_decimal {
  list-style-type: decimal;
  /* padding-left: 20px; */
}
.group-list { max-height: 110px; overflow-y: auto; }
.group-list__summary { max-height: 290px; }
.group-list__item { position: relative; line-height: 1.6em; margin-bottom: .625rem; }
.list-type_decimal .group-list__item { margin-left: 20px; }

.btn { 
  display: inline-block;
  cursor: pointer;
  text-decoration: none; 
  border-radius: 5px;
  padding: 5px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: .875rem;
  line-height: 1.5625rem;
}
.btn__timeline { background-color: #fff; border: 1px solid #333; color: #444; border-radius: 0; padding: 10px; width: 100%; text-align: center; display: none; }
.btn__timeline__link { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding: 0; }
.fix__width_20 > .btn__timeline__link { max-width: 20rem; }
.fix__width_16 > .btn__timeline__link { max-width: 14rem; }
.fix__width_12 > .btn__timeline__link { max-width: 12rem; }
.fix__width_10 > .btn__timeline__link { max-width: 7rem; }
.btn__popup__close { position: absolute; right: 30px; top: 30px; width: 19px; height: 19px; z-index: 9; padding: 0; }
.footer__btn { color: #fff; line-height: 1.4em; }
.footer__btn > .icon { vertical-align: bottom; }
.tab-menu { position: absolute; right: 0; top: -71px;  z-index: 10; }
.tab-menu__item,
.frm__btn { 
  border: 1px solid #ccc; padding: 8px 24px; background-color: #fff; 
  font-size: .875rem;
  font-family: "NanumSquareR", "NanumGothicR", "Helvtica Neue", Helvetica, "돋움", Arial, sans-serif;
  line-height: 1;
}
.tab-menu__item + .tab-menu__item { margin-left: 10px; }
.tab-menu__item_actived,
.frm__btn__actived { background-color: #969696; color: #fff; border-color: transparent; }

.tab-panel__item { min-height: 540px; }

.btn__icon { line-height: 1.2;}

.scratch { padding: 0; border-radius: 0; background-color: #ddd; color: #ddd; margin: 0 2px; cursor: pointer; display: inline-block; transition: all .6s ease-out; }
.scratch_actived { background-color: transparent; color: #a92121; }
.scratch-info { display: inline-block; padding: 3px 6px; margin: 0 3px; color: inherit; line-height: 1.0em; background-color: #ddd; }
.bullet {display: inline-block; 
  position: absolute; left: 0; top: 0; 
  width: 20px; height: 20px; line-height: 20px; text-align: center; color: #fff; background-color: #ccc;}

.memo { width: 100%; height: 150px; border: 1px solid #999; padding: 9px; box-sizing: border-box; line-height: 1.4em; }

.fixed { position: fixed }
.p30 { padding: 30px; }
.pl30 { padding-left: 30px; }
.pr30 { padding-right: 30px; }
.mb20 { margin-bottom: 20px; }
.h450 { min-height: 450px; }
.h490 { min-height: 490px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; padding: 0; margin: -1px; border: 0; clip: rect(0, 0, 0, 0); }

.animate-item {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display:none;
}

.slide-fade-enter-active {
  transition: all 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to  {
  transform: translateX(20%);
  opacity: 0;
}

@media (max-width: 860px) {
  .header {
    padding-bottom: 58px;
  }
  .header-title { text-align: center; }
  .wrap_inner { padding: 0 10px; }
  .tab-menu {
    width: 100%;
    text-align: center;
  }
  .page__video { margin-left: 20px; }
  .content__group { width: calc(100% - 230px - 20px) }
  .footer > .wrap_flex { display: block; }
  .btn_pagination { justify-content: space-between; margin-bottom: .5rem; }
  .copyright { text-align: center; }
  .cols dt,
  .cols dd { width: 100%; }
  .layer-popup__inner { bottom: 96px; }
  .layer-popup .group-list { max-height: 100%; }
  .group-list, .group-list__summary { max-height: 100%; }

  
  /* .fix__width > .btn__timeline__link { max-width: 10rem; } */
  .fix__width_20 > .btn__timeline__link,
  .fix__width_16 > .btn__timeline__link { max-width: 10rem; }
  .fix__width_12 > .btn__timeline__link,
  .fix__width_10 > .btn__timeline__link { max-width: 6rem; }
}

@media (max-width: 767px) {
  .header-title_small { display: block; }
  .tab-menu { top: -61px; }
  .page__title { position: absolute; width: 1px; height: 1px; overflow: hidden; padding: 0; margin: -1px; border: 0; clip: rect(0, 0, 0, 0); }
  .page__video { float: none; margin: 0 auto 20px; width: 100%; max-width: 300px; }
  .content__group { float: none; width: 100%; }
  .layer-popup__content { width: 100%; }
  .tab-menu__item { padding: 8px; }
  .btn__timeline { display: block }
  .timeline__wrap { margin-bottom: 10px; }
  .timeline { display: block; margin-left: 0; margin-top: 10px; }
  .timeline__item { margin-left: 30px !important; }
  .btn__timeline__link { max-width: 100%; }
  .fix__width_20 > .btn__timeline__link,
  .fix__width_16 > .btn__timeline__link,
  .fix__width_10 > .btn__timeline__link { max-width: inherit; }

  .timeline__hide { display: none; }
  .animate-item { visibility: hidden; }
}