@charset "UTF-8";
/* #f0c2c9 , #ffdbe1 */
/* 모달창 색상 */
/* TODO: 본문글씨 공통클래스 */
/* @include translateY-50;
    position: absolute;top: 50%; */
    /* #1a1b1b
#444 
#b20000 wine
#F0C2C9 wht wine
#720000 wine:hover */
/* #262A2D midnight */
/* #FBF7EF (251,247,239) */
/* https://codepen.io/g1eb/pen/MpXQZN dash-array */
/* 초중고 섹션 30px 로 apis 따라하기 */
/* 말줄임표 (line-clamp) */
/* 

@include animation(fadeUp 1.5s forwards);

@-webkit-keyframes fadeUp {
  0%{opacity: 0;-webkit-transform: translateY(50px);}
  100%{opacity: 1;-webkit-transform: translateY(0px);}
}
@-moz-keyframes fadeUp {
  0%{opacity: 0;-moz-transform: translateY(50px);}
  100%{opacity: 1;-moz-transform: translateY(0px);}
}
@keyframes fadeUp {
  0%{opacity: 0;transform: translateY(50px);}
  100%{opacity: 1;transform: translateY(0px);}


@include keyframes(fadeIn) {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}

*/
/* 
태블릿크기 x 1.07(비율로 더 크게 보이도록) = ??px => vw로 환산하자
30 X 1.07 = 32.1px

770px 에서 1vw의 크기가 얼마인지??
770(해상도) / 100 = 7.7px

32.1px / 7.7px = 4.168831168831169vw

vw-calc770(태블릿 사이즈size) {
  (size * 1.07) / (770 / 100)
} 

함수 만들기
@function calc-percent($target, $container) {
  @return ($target / $container) * 100%;
}
함수 호출하기
.box {
  width: calc-percent(650px, 1000px);
}
*/
/* 쓸때는 vw-calc770(40) 이렇게 px빼고 적는다 */
/* 또는 calc(10% - 5.5584415584vw) 이렇게 적음 */
#skip a {
  position: absolute;
  top: 0;
  top: -9999px;
  z-index: 1000;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; }
  #skip a:focus {
    top: 0;
    width: 100%;
    color: #fff;
    background: #395061;
    text-align: center;
    letter-spacing: 1.5px; }

.headerTop,
.headerBtm {
  position: absolute;
  /* TODO: 모달 dim이 열리면 아래로 가야 함 */
  /* 제어 안되고있음 : 수정필요 */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between; }

.headerBtm {
  bottom: 0;
  z-index: 2; }

.headerTop {
  top: 0;
  right: 0;
  z-index: 4; }
  .headerTop .logo a {
    background: url(../images/header_logo.png) no-repeat 100% center/contain;
    /* transition: transform 1.2s ease opacity 0.3s; */ }

.search {
  /* on이 되면 스크롤 금지 */ }
  .search .btn_open {
    position: relative; }
    .search .btn_open::after {
      content: "";
      position: absolute;
      background: url(../images/SVG/search.svg) no-repeat 100%/contain;
      opacity: 0.95;
      -webkit-transition: all 0.4s;
      -moz-transition: all 0.4s;
      -o-transition: all 0.4s;
      transition: all 0.4s; }
    .search .btn_open:hover::after, .search .btn_open:focus::after {
      transform: scale(1.3, 1.3); }
  .search.on .search_slide_out {
    -webkit-flex-flow: column;
    -moz-flex-flow: column;
    flex-flow: column;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    /*  */ }
    .search.on .search_slide_out ::-webkit-input-placeholder {
      color: #fff;
      opacity: 1; }
    .search.on .search_slide_out :-moz-placeholder {
      color: #fff;
      opacity: 1; }
    .search.on .search_slide_out ::-moz-placeholder {
      color: #fff;
      opacity: 1; }
    .search.on .search_slide_out :-ms-input-placeholder {
      color: #fff;
      opacity: 1; }
    .search.on .search_slide_out ::-ms-input-placeholder {
      color: #fff;
      opacity: 1; }
    .search.on .search_slide_out ::placeholder {
      color: #fff;
      opacity: 1; }
    .search.on .search_slide_out h2 {
      font-family: "Raleway", sans-serif;
      font-weight: 300;
      color: white; }
    .search.on .search_slide_out .top {
      border: 1px solid rgba(255, 255, 255, 0.5);
      position: relative;
      font-weight: 400;
      box-sizing: border-box; }
      .search.on .search_slide_out .top label {
        position: absolute;
        left: 0;
        color: #fff; }
        .search.on .search_slide_out .top label.typing {
          animation: typing 3s steps(22), blink 0.5s step-end infinite alternate;
          white-space: nowrap;
          overflow: hidden; }
@keyframes typing {
  from {
    width: 0; }
  to {
    width: 100%; } }
@keyframes blink {
  50% {
    border-color: transparent; } }
      .search.on .search_slide_out .top input {
        position: absolute;
        height: 100%;
        background: inherit;
        border: 0;
        color: #fff;
        /* max- */
        width: 100%;
        box-sizing: border-box;
        outline: 0;
        font-weight: 400;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s; }
        .search.on .search_slide_out .top input:hover, .search.on .search_slide_out .top input:focus {
          background: rgba(255, 255, 255, 0.4); }
      .search.on .search_slide_out .top .search_button {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2; }
        .search.on .search_slide_out .top .search_button::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          margin: 0 auto;
          background: url(../images/SVG/search.svg) no-repeat 100%/contain; }
    .search.on .search_slide_out .nav_utility_search a:hover,
    .search.on .search_slide_out .nav_utility_search a:focus {
      color: #f0c2c9; }
    .search.on .search_slide_out .btn_close {
      position: absolute;
      top: 0;
      background: #b20000 url(../images/SVG/close.svg) no-repeat 50%/cover;
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      -o-transition: all 0.2s;
      transition: all 0.2s; }
      .search.on .search_slide_out .btn_close:hover, .search.on .search_slide_out .btn_close:focus {
        background-color: #720000; }

.menu {
  color: #fff; }
  .menu .menu_open,
  .menu .menu_close {
    background: #b20000;
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    color: #fff;
    text-align: center;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s; }
    .menu .menu_open:hover, .menu .menu_open:focus,
    .menu .menu_close:hover,
    .menu .menu_close:focus {
      background: #720000; }

.menuTop .sub_menu ul {
  /* 제어 안되고있음 : 수정필요 */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between; }
  .menuTop .sub_menu ul li a {
    display: block;
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase; }

.search.on .search_slide_out,
.menu.on .menu_slide_out {
  color: #fff; }

.apply_to {
  display: block;
  letter-spacing: 1px;
  border: 1px solid white;
  font: italic 16px/27px "Raleway", sans-serif;
  font-weight: 600; }

.menu_slide_out a:hover,
.menu_slide_out a:focus {
  color: #f0c2c9;
  border-color: #ffdbe1; }
.menu_slide_out a:hover svg .cls-1,
.menu_slide_out a:focus svg .cls-1 {
  fill: #f0c2c9; }

.main_menu {
  position: relative; }
  .main_menu > ul > li > a {
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    color: #fff; }
  .main_menu > ul > li > a::after {
    content: '';
    position: absolute;
    transition: transform .5s ease;
    left: 0;
    bottom: 6px;
    width: 100%;
    height: 1px;
    background: #ffffff99;
    transform: translateX(-100%); }
  .main_menu > ul > li > a:hover::after, .main_menu > ul > li.on > a::after {
    transform: translateX(0); }
  .main_menu > ul ul {
    position: absolute;
    top: 0;
    left: 100%; }
    .main_menu > ul ul li a {
      display: block;
      font-weight: 600; }
    .main_menu > ul ul li em {
      font-size: 10px;
      font-weight: 300;
      line-height: 20px; }

.sticky {
  border-radius: 5% 0 0 5%;
  background: #b20000;
  overflow: hidden; }
  .sticky li a {
    box-sizing: border-box;
    font-family: "Raleway", sans-serif;
    font-weight: 800;
    display: block;
    color: #fff;
    /* 제어 안되고있음 : 수정필요 */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    overflow: hidden; }
    .sticky li a:hover, .sticky li a:focus {
      background: #720000; }
  .sticky li .img {
    background: no-repeat 100% / cover; }
  .sticky li:nth-of-type(1) .img {
    background-image: url(../images/SVG/login_1.svg); }
  .sticky li:nth-of-type(2) .img {
    background-image: url(../images/SVG/contact_1.svg); }
  .sticky li:nth-of-type(3) .img {
    background-image: url(../images/SVG/visit_1.svg); }
  .sticky li:nth-of-type(4) .img {
    background-image: url(../images/SVG/apply_1.svg); }
  .sticky li:nth-of-type(5) .img {
    background-image: url(../images/SVG/slide_up_1.svg); }
  .sticky li span {
    padding: 10px; }

.sticky li:last-child a {
  background: #395061; }
  .sticky li:last-child a:hover, .sticky li:last-child a:focus {
    background: #5a6e7e; }

header.controller,
article.board li {
  padding: 45px 50px;
  box-sizing: border-box; }

@-webkit-keyframes upNdown {
  0%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px); } }
@keyframes upNdown {
  0%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px); } }

/*# sourceMappingURL=common.css.map */