@font-face {
    font-family: 'payboocMedium';
    font-weight: normal;
    font-style: normal;
    src: local('payboocMedium'),
    url('../fonts/paybooc/payboocOTFMedium.otf') format('opentype'),
    url('../fonts/paybooc/payboocMedium.ttf') format('truetype');
}
@font-face {
    font-family: "설립체";
    font-weight: normal;
    font-style: normal;
    src: local('설립체'),
    url("../fonts/establishRetrosans/establishRetrosansOTF.otf") format("opentype"),
    url("../fonts/establishRetrosans/establishRetrosans.ttf") format("truetype");
}
@font-face {
  font-family: 'Stylish';
  src: url('../fonts/Stylish/Stylish-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.slfont {
  font-family: 'Stylish', sans-serif;
  font-weight: bold;
}

body, a, p, h1, h2, h3, h4, h5, h6 {
    font-family: 'payboocMedium', sans-serif;
}
p, h1, h2, h3, h4, h5, h6 {
    line-height: 150%;
}
.logo-text {
  font-family: '설립체', sans-serif;
  font-size: 1.8rem;
}
p {
    line-height: 2rem;
}
nav a, nav li a {
  color: #212121;
}
.nav-text {
    font-size: 1.4rem;
}
.shadow-txt {
  text-shadow: 1px 1px rgba(0, 0, 0, 0.8), 3px 3px 5px #000, 5px 5px 10px #000 ;
}
.vth3{
  font-size: 3.3vw;
}
.vth5{
  font-size: 2.5vw;
}
main {
  padding-top: 65px;
}
@media only screen and (max-width: 760px){
  .container {
      width: 98%;
  }
}
/* 스크롤바 */
::-webkit-scrollbar { display: none;}
/* 디테일 페이지 설명이미지 */
.fullimg {
  width: 100%;
  height: auto;
}

.navbar-fixed {position: absolute;z-index:999999999;}
/* page.parallax */
.parallax-container {
    min-height: 540px;
    line-height: 0;
    height: auto;
    color: rgba(255,255,255,.9);
}
.parallax-container .section {
    width: 100%;
}
@media only screen and (max-width : 992px) {
  .parallax-container .section {
    position: absolute;
    top: 0;
  }
}




.colltext {
  padding-left: 30px;
}



/* page.banner.iconbox */



/* page.footer */
footer.page-footer {
  margin: 10px 0 0 0;
  bottom: 0;
}


/* page.video */
.video-container {
    display: block;
    margin: 4px;
}
video:-webkit-full-page-media {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    max-height: 100%;
    max-width: 100%;
    margin: auto;
}
video {
    object-fit: contain;
}
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  /* if your video is 4:3 ratio then use the padding-bottom below:*/
  /*padding-bottom: 75%;*/ /* 4:3 */

  padding-top: 25px; /* may need to adjust depending on the size of the player controls of the service you use */
  height: 0;
}
.videoWrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* page.card.list */
.fitbox{
  width: 320px; 
  height: 320px;
  object-fit: cover;
}
.cardbtns{
  max-width: 245px;
  overflow: hidden;
}

/* fit card */
.fit-box {
  width: 100%;
  height: 100px;
  overflow: hidden;
}
.fit-img {
  min-width: 100%;
  max-width: 120%; 
  min-height: 100%;
  object-fit: cover;
}

/* banner Video */
.banner{
  overflow: hidden;
  position: relative;
  width: 100%;
  min-height: 100px;
  max-height: 540px;
  background-size: cover;
}
.banner_main{
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 540px;
  background-size: cover;
}
.banner-content{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);                                                                   
  font-size:5rem;
  color: white;
  z-index: 2;
  text-align: center;
}
.cover-video {
  z-index: 0;
  width: 100%;
}
.cover-img {
  z-index: 0;
  width: 100%;
}
/* glow */
.glow-box {
  box-shadow: 0 0 2px #fff;
  animation: boxblink 0.7s infinite alternate;
}

.glow-text {
  color: #fff;
  animation: textblink 1.7s infinite alternate;
}
.glow-link:hover {
  color: #fff;
  animation: textblink 0.7s infinite alternate;
}

@keyframes boxblink {
  100% {
      box-shadow: 0 0 3px #fff, 0 0 10px #fff, 0 0 20px #0ba9ca, 0 0 50px #0ba9ca;
  }
}
@keyframes boxblink-orang {
  100% {
      box-shadow: 0 0 3px #fff, 0 0 10px #fff, 0 0 20px #ca7e0b, 0 0 30px #ca7e0b;
  }
}
@keyframes textblink {
  100% {
      text-shadow: 0 0 3px #fff, 0 0 10px #fff, 0 0 20px #0ba9ca, 0 0 50px #0ba9ca;
  }
}



.dropdown-content {
  background-color: #FFFFFF;

  margin: 0;
  top: -64px;
  display: none;
  min-width: 300px;
  /* Changed this to accomodate content width */
  
  max-height: auto;
  overflow: hidden;
  /* Changed this from overflow-y:auto; to overflow:hidden; */
  
  opacity: 0;
  position: absolute;
  white-space: nowrap;
  z-index: 999;
  will-change: width, height;
}

.respone-text {
  word-spacing: .4vw;
  word-break: keep-all;
  text-shadow: 1px 1px #fff, 1px 1px 5px #fff, 1px 1px 10px #fff ;
}

@media only screen and (min-width: 993px) {
  .respone-text.h2 {
    font-size: 3vw;
  }
  .respone-text.h5 {
    font-size: 2vw;
  }
}
@media only screen and (max-width: 992px) {
  .respone-text.h2 {
    font-size: 9vw;
  }
  .respone-text.h5 {
    font-size: 5vw;
  }
  .respone-text.h2 span {
    display: block;
  }
}





/* 데스크탑에서 사이드바가 항상 보이도록 고정 */
.sidenav.sidenav-fixed {
  transform: translateX(0); /* 사이드바 기본 위치로 설정 */
}

.content {
  margin-left: 300px; /* 사이드바의 너비만큼 콘텐츠를 오른쪽으로 밀어냄 */
}


.gallery-card img {
  height: 200px; /* 이미지 높이 고정 */
  object-fit: cover; /* 이미지 크기에 맞게 자르기 */
}


.flex {
  display: flex;             /* Flexbox 사용 */
  flex-wrap: wrap;          /* 래핑 가능 */
  justify-content: center;   /* 중앙 정렬 */
  align-items: center;       /* 세로 중앙 정렬 */
}
.adbox {
  width: 240px;             /* 고정된 너비 */
  height: 240px;            /* 고정된 높이 */
  margin: 10px;              /* 카드 간격 */
}
.adbox img {
  width: 100%;              /* 이미지 너비 100% */
  height: 100%;             /* 이미지 높이 100% */
  object-fit: cover;        /* 이미지 비율 유지 */
}


.collapsible-header {
  height: 80px;  /* 각 collapsible 헤더의 높이를 설정합니다. */
  line-height: 80px; /* 텍스트를 중앙에 배치하기 위해 line-height를 설정합니다. */
  padding: 0 20px;  /* 좌우 여백을 설정하여 내용과의 간격을 조정합니다. */
  border-left: none; /* 왼쪽 보더 제거 */
  border-right: none; /* 오른쪽 보더 제거 */
  border-top: 1px solid #e0e0e0; /* 상단 보더 추가 (선택 사항) */
  border-bottom: 1px solid #e0e0e0; /* 하단 보더 추가 (선택 사항) */
  box-shadow: none; /* 그림자 제거 */
  display: flex; /* Flexbox를 사용하여 아이콘과 텍스트를 정렬합니다. */
  align-items: center; /* 아이콘과 텍스트를 수직 중앙 정렬합니다. */
}

.collapsible-header i {
  margin-right: 15px; /* 아이콘과 텍스트 사이의 간격 조정 */
  flex-shrink: 0; /* 아이콘이 줄어들지 않도록 설정 */
}

.collapsible-body {
  padding: 20px;  /* collapsible 바디의 패딩을 추가하여 내용을 더 여유 있게 표시합니다. */
}

.collapsible li {
  border: none; /* 리스트 항목의 기본 보더 제거 */
}
.collapsible {
  border: none;
  box-shadow: none; /* 그림자 제거 */
}