@import url("../font/pretendard/pretendard-subset.css");
/* font-family: "Pretendard"; */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
/* font-family: "Inter", sans-serif; */
@import url("./reset.css");
@import url("./layout.css");
@import url("./keyframes.css");
@import url("./index/index.css");
@import url("./pages/reminisce/reminisce.css");
@import url("./pages/ray/ray.css");
@import url("./pages/moments/moments.css");
@import url("./pages/welcome/welcome.css");
@import url("./pages/record/record.css");

@font-face {
  font-family: "JSArirang-Regular";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/JSArirang-RegularA1.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}
/* font-family: "JSArirang-Regular"; */

html {
  font-family: "Pretendard";
}

/* 인트로 */
.intro {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 99999;
  pointer-events: none;
}

.intro .u,
.intro .d {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.intro .u {
  clip-path: inset(0% 0% 50% 0%);
}

.intro .d {
  clip-path: inset(50% 0% 0% 0%);
}

@media screen and (max-width: 820px) {
  .intro .u img,
  .intro .d img {
    width: 152px;
  }
}

/* 서브 비주얼 */
.sub-visual {
  text-align: center;
  position: relative;
  padding-bottom: 80px;
  border-bottom: 1px solid #cccccc;
  box-sizing: border-box;
  z-index: 22;
  padding-top: 170px;
  background: url(/asset/sub_visual.png) no-repeat;
  background-size: "auto";
  background-position: 98% 90%;
}

.sub-visual .back-tit {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.sub-visual .back-tit h3 {
  opacity: 0.05;
  position: absolute;
  right: 0;
  bottom: 0;
  margin-bottom: -0.15em;
  margin-right: -0.05em;
  font-size: 200px;
  font-family: "Inter", sans-serif;
  font-weight: bold;
}

.sub-visual p {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.04em;
  opacity: 0.7;
  word-break: keep-all;
  display: none;
}
.sub-visual h1 {
  font-weight: bold;
  font-size: 70px;
  letter-spacing: -0.04em;
  margin-top: calc(19 / 60 * 1em);
  background: rgb(245, 1, 87);
  background: linear-gradient(
    90deg,
    rgba(245, 1, 87, 1) 0%,
    rgba(49, 42, 111, 1) 100%
  );
  background-clip: text;
  color: transparent;
  display: inline-block;
  word-break: keep-all;
}
.sub-visual .depth-base {
  text-align: center;
}
.sub-visual .depth {
  display: inline-flex;
  justify-content: center;
  margin-top: 80px;
  color: #444444;
  transform: translateX(6.5%);
  display: none;
}
.sub-visual .depth > li {
  font-size: 16px;
  letter-spacing: -0.04em;
  padding: 0 42px 0 39px;
  border-right: 2px solid #a0a0a0;
  position: relative;
  display: flex;
  gap: 13px;
}
.sub-visual .depth > li:first-child {
  padding: 0;
  padding-right: 20px;
}
.sub-visual .depth > li:last-child {
  border: 0;
}

.sub-visual .depth > li .t-depth-base {
  padding-top: 20px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  width: 95%;
  display: none;
}

.sub-visual .depth > li > a {
  color: #000;
}

.sub-visual .depth > li .t-depth {
  background: #fff;
  padding: 25px;
  border-radius: 10px;
  border: 1px solid #f50157;
  text-align: left;
}

.sub-visual .depth > li .t-depth li:first-child {
  margin-top: 0;
}
.sub-visual .depth > li .t-depth li {
  margin-top: 20px;
  font-size: 14px;
}

.sub-visual .depth > li .t-depth li a {
  color: #000;
  display: block;
  word-break: keep-all;
  line-height: 1.5;
}

@media screen and (max-width: 1280px) {
  .sub-visual h1 {
    font-size: 52px;
  }

  .sub-visual .back-tit h3 {
    font-size: 160px;
  }
}

@media screen and (max-width: 1024px) {
  .sub-visual {
    background-size: 280px;
  }

  .sub-visual p {
    font-size: 18px;
  }

  .sub-visual h1 {
    font-size: 44px;
  }

  .sub-visual .back-tit h3 {
    font-size: 140px;
  }
}

@media screen and (max-width: 820px) {
  .sub-visual {
    padding-top: 150px;
    background-size: 150px;
  }

  .sub-visual p {
    font-size: 16px;
  }

  .sub-visual h1 {
    font-size: 32px;
  }
  .sub-visual .back-tit h3 {
    font-size: 120px;
  }

  .sub-visual .depth {
    display: none;
  }
}

@media screen and (max-width: 480px) {
  .sub-visual p {
    font-size: 16px;
  }

  .sub-visual h1 {
    font-size: 28px;
  }

  .sub-visual .back-tit h3 {
    font-size: 80px;
  }
}

@media screen and (max-width: 300px) {
  .sub-visual p {
    font-size: 14px;
  }

  .sub-visual h1 {
    font-size: 26px;
  }

  .sub-visual .back-tit h3 {
    font-size: 60px;
  }
}

/* 클릭 */
.click-button {
  position: relative;
  width: 120px;
  border-radius: 1000%;
}

.click-button .wr3 {
  background: rgba(255, 255, 255, 0.2);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 1000%;
}
.click-button .wr2 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(90 / 120 * 100%);
  height: calc(90 / 120 * 100%);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 1000%;
}

.click-button .wr1 {
  border-radius: 1000%;
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  width: calc(70 / 120 * 100%);
  height: calc(70 / 120 * 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  letter-spacing: -0.03em;
  color: #f20157;
  font-weight: 600;
}

.click-button::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}