ul,
li {
  padding: 0px;
  margin: 0px;
}

body {
  padding: 0px;
  margin: 0px;
}

/* 헤더 네비 */
.header-container {
  width: 100%;
  background-color:#C0392B;
  /* background: radial-gradient(circle, #430b0a, #000000); */
}

.header-nav {
  position: relative;
  /* z-index: 99; */
}

.header-nav ul {
  display: flex;
  justify-content: right;
  align-items: flex-end;
  height: 100px;
}

.header-nav li {
  position: relative;
  /* width: calc(1200px / 7); */
  text-align: center;
  display: inline-block;
  color: #ffffff;
  list-style: none;
  padding: 0 15px 20px 15px;
}

.logo-container {
  position: absolute;
  z-index: 2;
  top: 25px;
  left: 0px;
}

.logo-container img {
  width: 135px;
  border: #000000 inset 5px;
  border-radius: 100px;
}

.logo-container p {
  display: inline-block;
  text-align: left;
  line-height: 120%;
  position: absolute;
  bottom: -20px;
  right: -280px;
}

/* 비주얼 이미지 애니메이션 */
.visual-container {
  /* position: relative;
  width: 100%;
  padding: 50px 0;
  /* height: 800px; */
  position: relative; 
  width:100%; 
  padding:150px 0 50px 0;  
  overflow: hidden; */
}

.visual-bg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-image: url(../img/riders/visual_3.jpg); */
  background-image: url(https://images.unsplash.com/photo-1558981000-f294a6ed32b2?q=80&w=5070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
  background-size: cover;
  background-repeat: no-repeat;
  background-position:  bottom -100px;
  animation: zoomInOut 20s ease-in-out infinite;
  z-index: -1;
  /* animation: zoomInOut 1s ease-in-out; */
}
.visual-bg-filter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  .background-with-lines {
    width: 100%;
    height: 300px;
    background: 
        repeating-linear-gradient(
            45deg,            /* 대각선 각도 */
            rgba(255, 255, 255, 0.3), /* 선 색상 */
            rgba(255, 255, 255, 0.3) 2px, /* 선 두께 */
            transparent 2px,   /* 선 간격 시작 */
            transparent 10px   /* 선 간격 끝 */
        ),
        url('your-image.jpg'); /* 배경 이미지 */
    background-size: cover;
    background-position: center;
}
}

@keyframes zoomInOut {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

.visual-title-container {
  position:absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100px;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
}

.visual-title-container ul {
  display: flex; /* 가로로 나열 */
  padding: 0;
  margin: 0;
  list-style: none;
  justify-content: space-around; /* 항목 간 간격 균등 */
}

.visual-title-container ul li {
  flex-grow: 1; /* 모든 항목 동일 비율로 확장 */
  text-align: center; /* 텍스트 가운데 정렬 */
  cursor: pointer;
}

.title-container {
  position: absolute;
  top: 18px;
  left: 0;
  z-index: 99;
}

.phone-container {
  position: absolute;
  top: 50%;
  margin-top: 60px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: fit-content;
  height: fit-content;
  z-index: 99;
}

.kakao-container {
  position: absolute;
  margin-top: 18px;
  right: 0px;
  z-index: 99;
}

/* 실시간 가입자*/
.realtime-container {
  height: 100px;
  bottom: 0px;
  margin-bottom: 20px;
}

.realtime-list {
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(1px);
  /* border: #cccccc solid 2px; */
  border-radius: 10px;
  padding: 10px 20px;
}


.nav-title-small {
  position: absolute;
  top: -15px;
  left: 9px;
  background-color: ;
  padding: 0 10px;
  border-radius: 10px;
}

.visual-title-small {
  position: absolute;
  top: -15px;
  left: 24px;
  background-color: ;
  padding: 0 10px;
  border-radius: 10px;
}

.cursor-pointer {
  cursor: pointer;
}

.copy-container { 
  /* background: rgba(0, 0, 0, 0.5); */
  backdrop-filter: blur(10px);
  border: #5b5b5b solid 2px;
  /* border-radius: 10px; */
  display: flex;
  flex-direction: column; /* 텍스트를 위아래로 배치 */
  justify-content: center; /* 수직 정렬 */
  align-items: center; /* 가로 정렬 */
  height: 100px; /* 높이 설정 (필요에 따라 조정) */
  text-align: center; /* 텍스트 정렬 (선택 사항) */
}

.copy-title-container { 
  /* background: rgba(189, 194, 198, 0.5); */
  /* background: rgba(0, 0, 0, 0.3); */
  backdrop-filter: blur(10px);
  border: #5b5b5b solid 2px;
  display: flex; 
  flex-direction: column; /* 텍스트를 위아래로 배치 */
  justify-content: center; /* 수직 정렬 */
  align-items: center; /* 가로 정렬 */
}


.news-ticker {
  overflow: hidden;
  width: 100%;
}

.ticker-wrap {
  white-space: nowrap;
  display: flex;
}

.ticker-content {
  display: flex;
}

.ticker-item {
  display: inline-block;
  padding: 10px;
  /* Adjust as needed */
  /* Additional styling here */
}

/* .modal-dialog {
    max-width: 50%;
    width: fit-content;
} */

/* .motorcycle-insureance {
    max-width: 90%;
    width: fit-content;
} */