/*
Custom Css
*/
.kkm1:hover{
  background-color: rgba(245, 245, 245, 0.6);
  border-radius: 10px;
}
.kkm2{
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.kkm3 {
  box-shadow: 0 0 .6rem rgba(0, 0, 0, .6) !important;
  transition: all .2s;
}
.kkm3:hover {
  box-shadow: 0 0 .6rem rgba(0, 0, 0, 0) !important;
  transition: all .2s;
}
.kkm3::before {
  content: "";
  width: 100%;
  height: 100%;
  /* z-index: 1; */
  position: absolute;
  background-color: rgb(0, 0, 0,.4);
}
.kkm4{
  transition: all .2s;
}
.kkm4:hover{
  transform: scale(1.1);
  transition: all .2s;
}

.kkm5{
  height: 22px;
  width: 30px;
  margin-bottom: 5px;
}

.kkm6{
  height: 40px
}
.m-card{
  height: 40px;
}
.kkm7{
  /* height: 200px; */
  overflow: hidden;
}
.kkm8{
  height: 404px;
}
.kkm8 img{
  height: 100%;
  object-fit: cover; 
}

.bg-footer{
  background-color: #dee2e6;
}
.bg-button{
  background-color: rgba(255, 255, 255, 0.5);
}
.bg-button:hover{
  background-color: rgba(255, 255, 255);
  margin-top: -10px;
}
.text-footer{
  color: #dee2e6;
}
.bg-footer1{
  background-color: #474544;
}
.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-.5 * var(--bs-gutter-x));
  margin-left: calc(-.5 * var(--bs-gutter-x))
}

.container{
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-right: auto;
  margin-left: auto
}

.col {
  flex: 1 0 0%
}
.text-decoration-none {
  text-decoration: none !important
}
.d-flex {
  display: flex !important
}
.justify-content-center {
  justify-content: center !important
}
.bg-kkm{
  background-color: #f0eff0;
  padding: 10px 0;
}
.bg-kkm1{
  background-color: #747474;
  padding: 10px 0;
}
.tab-kkm{
  border: 1px solid #d7d7d7;
}

.icon{
  height: 30px;
  width: 30px;
}
.snsicon{
  height: 24px;
  width: 24px;
  margin: 0 3px;
}
.nav-active:active{
  background-color: #eeeeee;
}
.nav-active:hover{
  background-color: #eeeeee;
}
.nav-logo{
  width: 114px;
}
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail img {
  height: 700px;
}
.facility img {
  height: 800px;
}
.notice_text{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
tr td{
  text-align: center;
}
/* 시설 스와이퍼 */
.swiper-facility {
  width: 100%;
}

.img-cover{
  height: 350px !important;
}
.text-shadow{
  text-shadow: 2px 2px 4px rgb(0, 0, 0);
}

.hover:hover::before{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  transition: all .3s;
}
.hover-text{
  position: absolute;
  display: none;
  color: white;
  transition: all .3s;
}
.hover:hover .hover-text{
  display: block;
  transition: all .3s;
}

.more:hover::before{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  transition: all .3s;
  z-index: 2;
}
.more-text{
  display: none;
}
.more:hover .more-text{
  display: block;
  transition: all .3s;
}

.cursor-pointer{
  cursor: pointer;
}
.play img:first-child{
  opacity: 0;
}
.play:hover img:first-child{
  opacity: .8;
}
.play:hover::before{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.1);
  transition: all .3s;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* 메인 유튜브 커스텀 */
.ytp-title-channel{
  display: none;
}

/* 메인 테스트 ui */
.bg-header{
  background-color: rgba(71, 69, 68, 0.6);
}
.bg-header-scroll{
  background-color: rgba(255, 255, 255, 0.8);
}
#scrollHeader{
  animation: action .3s ease-in;
}
@keyframes action{
  from{
    top: -72px;
    opacity: 0;
  }
  to{
    top: 0px;
    opacity: 1;
  }
}
.video-wrap{
  position:relative;
  padding-bottom:56.25%;
  margin-top: -110px;
  height:0px;
  overflow:hidden;
}
.video-wrap-m{
  position:relative;
  padding-bottom:56.25%;
  margin-top: 43.6px;
  height:0px;
  overflow:hidden;
}
.video-wrap iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.video-wrap-m iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.slide-animation01{
  position: absolute;
  left: 0px;
  animation: slide01 1s ease-out;
}
.slide-animation02{
  position: absolute;
  right: 0px;
  animation: slide02 .8s ease-out;
}
.slide-animation03{
  animation: slide03 .8s ease-out;
}
.slide-animation04{
  animation: slide03 .8s ease-out;
}
.slide-animation05{
  animation: slide03 .8s ease-out;
}
@keyframes slide01{
  from{
    left: -50%;
    opacity: 0;
  }
  to{
    left: 0;
    opacity: 1;
  }
}
@keyframes slide02{
  from{
    right: -50%;
    opacity: 0;
  }
  to{
    right: 0;
    opacity: 1;
  }
}
@keyframes slide03{
  from{
    margin-top: 100px;
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

/* 사이드메뉴 스크롤바 커스텀 */
.offcanvas-body::-webkit-scrollbar{
  width: 4px;
}
.offcanvas-body::-webkit-scrollbar-thumb{
  height: 30%;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}
.offcanvas-body::-webkit-scrollbar-track{
  background-color: white;
}

.ytp-watermark svg{
  display: none;
}
.modal-video {
  --bs-modal-width: 1500px;
}

.ytp-chrome-top, .ytp-chrome-bottom{
  display: none !important;
  opacity: 0;
}
.top_hidden{
  position: absolute;
  top: 0px;
  background-color: #000000;
  width: 100%;
  height: 7.5%;
  max-height: 120px;
  min-height: 53px;
  z-index: 99999;
}
.bottom_hidden{
  position: absolute;
  top: 100%;
  /* transform: translateY(-100%); */
  background-color: #000000;
  width: 100%;
  height: 7.5%;
  max-height: 120px;
  min-height: 53px;
  z-index: 99999;
}
/* .bottom_hidden:hover{
  display: none;
} */

.mypage_detail_table{
  width: 200px;
}

.dim{
  position: absolute;
  width: 96.3%;
  height: 50px;
  background-color: #ffffffb4;
  z-index: 1;
}

.dim_off{
  display: none;
}