/* ------------------------------------------------------------------------------------------- */
/* 홈페이지 메뉴 영역에 사용하는 CSS */
.submenu-hidden {
  display: none;
}

.submenu-visible {
  display: block;
}

/* 애니메이션 효과 */
.animate-slide-up {
  animation: slide-up 0.5s ease-in-out forwards;
}

@keyframes slide-up {
  from {
      transform: translateY(20px);
      opacity: 0;
  }

  to {
      transform: translateY(0);
      opacity: 1;
  }
}

/* 마우스 오버 언더라인 효과 */
.hover-underline:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* 숨김 상태 초기화 */
.hidden-item {
  opacity: 0;
}

body.active {
  overflow: hidden;
}


/* ------------------------------------------------------------------------------------------- */
/* 홈페이지 Footer 영역에 사용하는 CSS */


/* ######## Footer 공통 CSS ######## */
footer {
  /* background-color: #555555; */
  background-color: #676767;
  padding: 60px 0;
  font-size: 13px;
}

footer * {
  color: #BDBDBD;
}

footer .footer-inner .lnb-wrap {
  display: flex;
  gap: 100px;
  border-bottom: 1px solid #ddddff;
  padding-bottom: 20px;
}

footer .footer-inner .lnb-wrap .lnb {
  display: flex;
  justify-content: space-between;
  flex: 1;
}

footer .footer-inner .lnb-wrap .lnb .link-item .link-item-title {
  color: #ffffff;
  pointer-events: none;
}

footer .footer-inner .lnb-wrap .lnb .link-item .link-item-content a {
  display: block;
}

footer .footer-inner .lnb-wrap .lnb .link-item .link-item-content a:hover {
  text-decoration: underline;
}

footer .footer-inner .copyright-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
}

footer .footer-inner .copyright-wrap .company-info-trigger {
  display: none;
}

footer .footer-inner .copyright-wrap address {
  font-style: normal;
}


/* responsive-tablet+mobile CSS 참조 */
/* Responsive for Mobile */
@media (max-width: 767px) {

  /* Footer */
  footer {
    padding: 30px 0;
  }

  footer .footer-inner {
    padding: 0 20px;
  }

  footer .footer-inner .lnb-wrap {
    flex-direction: column;
    border: none;
    gap: 50px;
  }

  /* footer .footer-inner .lnb-wrap .footer-slogan h2 {
    text-align: center;
    font-size: 1.8em;
    color: #FFFFFF;
  } */

  footer .footer-inner .lnb-wrap .lnb {
    flex-direction: column;
  }

  footer .footer-inner .lnb-wrap .lnb .link-item .link-item-title {
    padding: 10px 0;
    border-bottom: 1px solid #ddddff;
    pointer-events: all;
  }

  footer .footer-inner .lnb-wrap .lnb .link-item .link-item-title:after {
    content: "\f282";
    font-family: bootstrap-icons;
    float: right;
    margin-right: 5px;
  }

  footer .footer-inner .lnb-wrap .lnb .link-item .link-item-title.active:after {
    transform: rotateX(180deg);
  }

  footer .footer-inner .lnb-wrap .lnb .link-item .link-item-content {
    padding: 5px 0;
    display: none;
  }

  footer .footer-inner .lnb-wrap .lnb .link-item .link-item-content a {
    padding: 3px 0;
  }

  footer .footer-inner .copyright-wrap {
    flex-direction: column;
    text-align: center;
    padding-top: 10px;
  }

  footer .footer-inner .copyright-wrap .company-info-trigger {
    display: block;
  }

  footer .footer-inner .copyright-wrap address {
    display: none;
  }

  footer .footer-inner .copyright-wrap .sns {
    margin-top: 10px;
  }
}



/* Responsive for Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
/* Footer */
  footer {
    padding: 30px 20px;
  }

  footer .footer-inner .lnb-wrap {
    gap: 40px;
  }

  footer .footer-inner .copyright-wrap .sns {
    width: 200px;
    text-align: right;
  }
}

/* MDS 어플 배경이미지 #1 */
@keyframes slideInRight {
  from {
      /* transform: translateX(-100%); */
      transform: translateY(-100%);
      opacity: 0;
  }
  to {
      /* transform: translateX(0); */
      transform: translateY(-50%);
      opacity: 1;
  }
}

/* MDS 어플 배경이미지 #2 */
@keyframes slideInRight2 {
  from {
      /* transform: translateX(-100%); */
      transform: translateY(-100%);
      opacity: 0;
  }
  to {
      /* transform: translateX(0); */
      transform: translateY(-20%);
      opacity: 1;
  }
}

.animate-slideInRight {
  animation: slideInRight 1s ease-in-out;
}

.animate-slideInRight2 {
  animation: slideInRight2 1s ease-in-out;
}

#animated-image2 {
  top: -50%;
  transform: translateY(-50%);
  /* transform: translateY(0%); /* Adjust this value to fine-tune the vertical position */
}

#animated-image3 {
  top: 50%;
  transform: translateY(-20%);
}




/* ---------------------------------------------------------------------------------------- */
/* PHP 업체에서 사용한 CSS */

/*3.이용약관*/

.terms_of_use {margin-top:50px;}

.terms_of_use_join {margin-top:50px;}

.s_title {font-weight: bold;}

.terms_of_use_join_con {margin-top:20px; width:100%; height:190px; box-sizing: border-box; padding:15px; border:1px solid #ccc; overflow-y:scroll; color:#999;}

.consent_txt {margin-top:10px; text-align:right;}



/*3.이용약관-체크박스*/

.check_wrap_input {width:100%;margin:0 auto;display: flex;align-items: center;flex-wrap: wrap;}

.check_wrap_input input { float: left; }





/*3.이용약관-체크박스 첫번째(회원 가입 약관)*/

input[type="checkbox"]#chkAll_05 + label { background: url('../img/chk_off.gif') no-repeat left center;}

input[type="checkbox"]#chkAll_05:checked + label {background: url('../img/chk_on.gif') no-repeat left center;}





/* ---------------------------------------------------------------------- */
/* HOME Index 페이지의 Content 내용 디스플레이 애니메이션 키프레임즈 설정 */
/* ---------------------------------------------------------------------- */

/* View Point 위치에서 위로 스크롤될때 점점 커지면서 100% 크기로 보여지는 효과 */
@keyframes appear {
  from {
      opacity: 0;
      scale: 0.5;
  }

  to {
      opacity: 1;
      scale: 1;
  }
}

.disview {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 0% cover 20%;
}


/* View Point 위치에서 위로 스크롤될때 왼쪽에서 오른쪽으로 이동하면서 100% 크기로 보여지는 효과 */
@keyframes appear2 {
  from {
      opacity: 0;
      transform: translateX(-100px);
  }
  to {
      opacity: 1;
      transform: translateX(0px);
  }
}

.disview2 {
  opacity: 0; /* 초기 상태를 숨김 */
}

.animate {
  animation: appear2 1s forwards; /* 애니메이션 실행 */
}