:root {
  --color-point: #ff5500;
  --color-white: #fff;
  --color-black: #000;
  --font-mbc: "MBC 1961", sans-serif;
  --font-poppins: "Poppins", sans-serif;
  --font-paperlogy: "Paperlogy", sans-serif;
  --gradient-angle: 90deg;
  --gradient-start: #171717;
  --gradient-end: #000000;
}

html {
  /* font-size: 62.5%; */ /* 10px = 62.5% = 0.52084vw */
  font-size: 0.52084vw;
}

body {
  font-size: 1.6rem;
  font-size: calc(14px + 0.2rem);
  color: var(--color-white);
  background: var(--color-black);
  line-height: 1.5;
}

/* commercial hompage 페이지 내 공통 스타일 */

/* commercialHpPage 페이지  */
#commercialHpPage {
  background: linear-gradient(
    var(--gradient-angle),
    var(--gradient-start) 0%,
    var(--gradient-end) 100%
  );
  /* background: linear-gradient(90deg, #171717 0%, #000 100%); */
  overflow: hidden;
}

/* font 관련 */
#commercialHpPage .color-or {
  color: var(--color-point);
}

#commercialHpPage .bold {
  font-weight: 600;
}

#commercialHpPage .mark-or {
  background: var(--color-point);
  color: var(--color-white);
  font-weight: 700;
  padding: 0.12em 0;
}

#commercialHpPage .brx {
  display: none;
}

#commercialHpPage .br-500,
#commercialHpPage .br-768,
#commercialHpPage .br-960 {
  display: inline-block;
}

#commercialHpPage .not-br-768 {
  display: block;
}

/* 말풍선 */
#commercialHpPage .speech-bubble {
  display: inline-block;

  position: relative;

  font-size: 4.4rem;
  font-size: calc(12px + 3.2rem);
  font-weight: 600;
  color: var(--color-black);
  white-space: nowrap;

  border-radius: 0.5em;
  background: var(--color-white);

  padding: 0.54em 1.09em;
  margin-left: 0.45em;
}

#commercialHpPage .speech-bubble::before {
  content: "";

  position: absolute;
  bottom: 0;

  width: 8rem;
  height: 8rem;

  background: url("/img/commercialHp/speech_bubble_tail.png") no-repeat 0
    0 / contain;
}

#commercialHpPage .speech-bubble[data-direction="left"]::before {
  left: 0;
  transform: translate(-15%, 85%);
}

#commercialHpPage .speech-bubble[data-direction="right"]::before {
  right: 0;
  transform: translate(-15%, 85%) scaleX(-1);
}

/* 섹션 타이틀, 서브타이틀, 설명글 */
.cmhp-heading {
  font-family: var(--font-mbc);
  font-size: 8rem;
  font-size: calc(26px + 5.4rem);
  line-height: 1.2;
}

.cmhp-heading.lg {
  font-size: 10rem;
  font-size: calc(26px + 7.4rem);
  line-height: 1.1;
}

.cmhp-heading.sm {
  font-size: 6rem;
  font-size: calc(26px + 3.4rem);
}

.cmhp-sub-heading {
  display: inline-block;

  font-family: var(--font-poppins);
  font-size: 3rem;
  font-size: calc(14px + 1.6rem);
  margin-bottom: 1.6rem;
}

.cmhp-desc {
  font-size: 2.4rem;
  font-size: calc(12px + 1.2rem);
  /* font-size: clamp(15px, 2.4rem, 2.4rem); */
  line-height: 1.6;
}

/* section */
.cmhp-section {
  position: relative;
  z-index: 1;
}

.scroll-pin-warp {
  position: relative;
}

/* container */
.cmhp-container {
  position: relative;
  width: 100%;
  max-width: calc(1500px + 12vw);
  padding: 0 6vw;
  margin: 0 auto;
}

.full-sticky-container {
  position: relative;

  height: 100vh;
}

@media (max-aspect-ratio: 4/3) {
  #commercialHpPage .brx {
    display: block;
  }
}

@media (max-width: 960px) {
  #commercialHpPage .br-960 {
    display: block;
  }
}

@media (max-width: 768px) {
  #commercialHpPage .br-768 {
    display: block;
  }

  #commercialHpPage .not-br-768 {
    display: none;
  }
}

@media (max-width: 500px) {
  #commercialHpPage .br-500 {
    display: block;
  }

  .cmhp-heading.lg {
    font-size: 8rem;
    font-size: calc(24px + 5.6rem);
  }
}

/* 영문 사이트 style */
.lang-en .cmhp-heading {
  font-size: calc(23.4px + 4.86rem);
}

.lang-en .cmhp-heading.lg {
  font-size: calc(23.4px + 6.66rem);
}

.lang-en .cmhp-intro__title {
  padding: 0 10px;
}

#commercialHpPage.lang-en .speech-bubble {
  font-size: calc(7.2px + 1.92rem);
}

@media (max-width: 1200px) {
  .lang-en .cmhp-heading.lg {
    font-size: calc(18.72px + 5.328rem);
  }
}

@media (max-width: 768px) {
  .lang-en #commercialHpIntro .cmhp-heading {
    gap: 0;
  }
}