* {
 box-sizing: border-box;
}

html,
body {
 width: 100%;
 height: 100%;
}

body {
 margin: 0;
 background-color: #111318;
 color: #fffffff0;
 position: relative;
 overflow: hidden;
 font-family: "Malgun Gothic", "Segoe UI", Arial, sans-serif;
}

.card {
 position: absolute;
 left: 0;
 top: 0;
 overflow: hidden;
 background-position: center;
 background-size: cover;
 background-color: #171a20;
 box-shadow: 6px 6px 10px 2px rgba(0, 0, 0, 0.6);
}

.card::after {
 content: "";
 position: absolute;
 inset: 0;
 pointer-events: none;
 background:
  linear-gradient(90deg, rgba(8, 10, 15, 0.82) 0%, rgba(8, 10, 15, 0.54) 36%, rgba(8, 10, 15, 0.14) 66%, rgba(8, 10, 15, 0.38) 100%),
  linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.08) 42%, rgba(0, 0, 0, 0.46) 100%);
}

.card-content {
 position: absolute;
 left: 0;
 top: 0;
 color: #fffffff0;
 padding-left: 16px;
 text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
}

.content-place {
 margin-top: 6px;
 font-size: 13px;
 font-weight: 600;
}

.content-title-1,
.content-title-2 {
 font-weight: 600;
 font-size: 20px;
 line-height: 1;
 letter-spacing: 0;
 font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
}

.content-start {
 width: 30px;
 height: 5px;
 border-radius: 99px;
 background-color: #fffffff0;
}

.details {
 z-index: 22;
 position: absolute;
 top: 220px;
 left: 60px;
 max-width: min(540px, calc(100vw - 120px));
 text-shadow: 0 3px 18px rgba(0, 0, 0, 0.75);
}

.details .place-box {
 height: 46px;
 overflow: hidden;
}

.details .place-box .text {
 padding-top: 16px;
 font-size: 19px;
 font-weight: 700;
 position: relative;
}

.details .place-box .text::before {
 top: 0;
 left: 0;
 position: absolute;
 content: "";
 width: 34px;
 height: 4px;
 border-radius: 99px;
 background-color: #1f6fa8;
}

.details .title-1,
.details .title-2 {
 font-weight: 600;
 font-size: clamp(58px, 6vw, 82px);
 line-height: 0.94;
 letter-spacing: 0;
 font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
}

.details .title-box-1,
.details .title-box-2 {
 margin-top: 4px;
 height: 82px;
 overflow: hidden;
}

.details > .desc {
 margin-top: 18px;
 width: min(540px, calc(100vw - 120px));
 color: #fffffff0;
 font-size: 16px;
 font-weight: 500;
 line-height: 1.7;
 word-break: keep-all;
}

.details > .cta {
 width: min(540px, calc(100vw - 120px));
 margin-top: 24px;
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 12px 14px;
}

.details > .cta > .bookmark {
 text-decoration: none;
 border: none;
 background-color: #1f6fa8;
 width: 38px;
 height: 38px;
 border-radius: 99px;
 color: white;
 display: grid;
 place-items: center;
 box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.details > .cta > .bookmark svg {
 width: 20px;
 height: 20px;
}

.details > .cta > .discover {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 text-decoration: none;
 border: 1px solid #ffffffd0;
 background-color: rgba(5, 8, 12, 0.2);
 height: 38px;
 border-radius: 99px;
 color: #ffffff;
 padding: 4px 24px;
 font-size: 13px;
 font-weight: 700;
 margin-left: 0;
 backdrop-filter: blur(8px);
}

.details > .cta > .social-links {
 flex-basis: 100%;
 display: flex;
 gap: 10px;
 margin-left: 52px;
 flex-wrap: wrap;
}

.details > .cta > .social-links a {
 color: #ffffff;
 text-decoration: none;
 border: 1px solid #ffffff70;
 border-radius: 99px;
 padding: 5px 12px;
 font-size: 12px;
 font-weight: 700;
 background-color: rgba(5, 8, 12, 0.24);
 backdrop-filter: blur(8px);
}

nav {
 position: fixed;
 left: 0;
 top: 0;
 right: 0;
 z-index: 50;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 20px 36px;
 font-weight: 700;
 color: #fffffff0;
 text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
 background: linear-gradient(180deg, rgba(6, 8, 12, 0.45), rgba(6, 8, 12, 0));
}

nav svg {
 width: 20px;
 height: 20px;
}

nav .svg-container {
 width: 20px;
 height: 20px;
}

nav .nav-phone {
 color: inherit;
 display: grid;
 place-items: center;
 text-decoration: none;
 cursor: pointer;
}

nav > div {
 display: inline-flex;
 align-items: center;
 font-size: 14px;
}

nav > div:first-child {
 gap: 10px;
 letter-spacing: 0;
}

nav > div:last-child {
 gap: 24px;
}

nav > div:last-child > .active {
 position: relative;
}

nav > div:last-child > .active::after {
 bottom: -8px;
 left: 0;
 right: 0;
 position: absolute;
 content: "";
 height: 3px;
 border-radius: 99px;
 background-color: #1f6fa8;
}

.indicator {
 position: fixed;
 left: 0;
 right: 0;
 top: 0;
 height: 5px;
 z-index: 60;
 background: linear-gradient(90deg, #1f6fa8, #42b7a5, #f0b34f);
}

.pagination {
 position: absolute;
 left: 0;
 top: 0;
 display: inline-flex;
 align-items: center;
}

.pagination > .arrow {
 z-index: 60;
 width: 50px;
 height: 50px;
 border-radius: 999px;
 border: 2px solid #ffffff66;
 display: grid;
 place-items: center;
 background-color: rgba(5, 8, 12, 0.22);
 backdrop-filter: blur(8px);
 cursor: pointer;
}

.pagination > .arrow:nth-child(2) {
 margin-left: 20px;
}

.pagination > .arrow svg {
 width: 24px;
 height: 24px;
 stroke-width: 2;
 color: #ffffffd8;
}

.pagination .progress-sub-container {
 margin-left: 24px;
 z-index: 60;
 width: 500px;
 height: 50px;
 display: flex;
 align-items: center;
}

.pagination .progress-sub-container .progress-sub-background {
 width: 500px;
 height: 3px;
 background-color: #ffffff38;
}

.pagination .progress-sub-container .progress-sub-background .progress-sub-foreground {
 height: 3px;
 background: linear-gradient(90deg, #1f6fa8, #42b7a5);
}

.pagination .slide-numbers {
 width: 50px;
 height: 50px;
 overflow: hidden;
 z-index: 60;
 position: relative;
}

.pagination .slide-numbers .item {
 width: 50px;
 height: 50px;
 position: absolute;
 color: white;
 top: 0;
 left: 0;
 display: grid;
 place-items: center;
 font-size: 32px;
 font-weight: 700;
 text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.cover {
 position: absolute;
 left: 0;
 top: 0;
 width: 100vw;
 height: 100vh;
 background-color: #fff;
 z-index: 100;
}

@media (max-width: 820px) {
 nav {
  padding: 16px 20px;
 }

 nav > div:last-child {
  gap: 0;
 }

 nav > div:last-child > div:not(.svg-container) {
  display: none;
 }

 .details {
  top: 96px;
  left: 24px;
  right: 24px;
  max-width: calc(100vw - 48px);
 }

 .details .place-box {
  height: 36px;
 }

 .details .place-box .text {
  padding-top: 12px;
  font-size: 15px;
 }

 .details .place-box .text::before {
  width: 28px;
  height: 3px;
 }

 .details .title-1,
 .details .title-2 {
  font-size: 44px;
  line-height: 0.95;
 }

 .details .title-box-1,
 .details .title-box-2 {
  height: 48px;
 }

 .details > .desc {
  width: calc(100vw - 48px);
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.62;
 }

 .details > .cta {
  width: calc(100vw - 48px);
  margin-top: 18px;
 }

 .details > .cta > .bookmark {
  width: 34px;
  height: 34px;
 }

 .details > .cta > .discover {
  height: 34px;
  padding: 4px 16px;
  font-size: 12px;
 }

 .details > .cta > .social-links {
  margin-left: 0;
  gap: 8px;
 }

 .details > .cta > .social-links a {
  padding: 5px 10px;
  font-size: 11px;
 }

 .card-content {
  display: none;
 }

 .pagination > .arrow {
  width: 42px;
  height: 42px;
 }

 .pagination > .arrow:nth-child(2) {
  margin-left: 12px;
 }

 .pagination .progress-sub-container {
  margin-left: 14px;
  width: 150px;
 }

 .pagination .progress-sub-container .progress-sub-background {
  width: 150px;
 }

 .pagination .slide-numbers,
 .pagination .slide-numbers .item {
  width: 38px;
  height: 42px;
 }

 .pagination .slide-numbers .item {
  font-size: 24px;
 }
}