@charset "UTF-8";
@font-face {
  font-family: "Pretendard";
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url("../../font/pretendard/PretendardVariable.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Manrope";
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  src: url("../../font/manrope/ManropeVariable.woff2") format("woff2-variations");
}

:root {
	/* COLOR */
	--ir-color-black: #151B1C;
	--ir-color-dark-gray: #969696;
	--ir-color-medium-gray: #D0D0D0;
	--ir-color-light-gray: #F2F2F2;
	--ir-color-white: #FFFFFF;
	--ir-color-red: #F91120;
	--ir-color-dark-red: #A11109;

	/* Font Families */
	--lang-ko: 'Pretendard', sans-serif;
	--lang-en: 'Manrope', sans-serif;

	/* Font Weights */
	--weight-300: 300;
	--weight-400: 400;
	--weight-500: 500;
	--weight-600: 600;
	--weight-700: 700;

	/* Font size - PC */
	--font-size-220: min(22rem, 11.46vw);
	--font-size-180: min(18rem, 9.38vw);
	--font-size-150: min(15rem, 7.81vw);
	--font-size-100: min(10rem, 5.21vw);
	--font-size-80: min(8rem, 4.17vw);
	--font-size-60: min(6rem, 3.13vw);
	--font-size-48: min(4.8rem, 2.50vw);
	--font-size-32: min(3.2rem, 1.67vw);
	--font-size-24: min(2.4rem, 1.25vw);
	--font-size-20: min(2rem, 1.04vw);
	--font-size-16: min(1.6rem, 0.83vw);
	--font-size-14: min(1.4rem, 0.72vw);
	--font-size-12: min(1.2rem, 0.63vw);
	--font-size-10: min(1rem, 0.52vw);

  /*  Font Sizes - Mobile */
  --font-size-60-m: max(6rem, 16.00vw);
  --font-size-48-m: max(4.8rem, 12.80vw);
  --font-size-36-m: max(3.6rem, 9.60vw);
  --font-size-35-m: max(3.5rem, 9.33vw);
  --font-size-32-m: max(3.2rem, 8.53vw);
  --font-size-30-m: max(3rem, 8.00vw);
  --font-size-29-m: max(2.9rem, 7.73vw);
  --font-size-24-m: max(2.4rem, 6.40vw);
  --font-size-20-m: max(2rem, 5.33vw);
  --font-size-18-m: max(1.8rem, 4.80vw);
  --font-size-16-m: max(1.6rem, 4.27vw);
  --font-size-14-m: max(1.4rem, 3.67vw);
  --font-size-12-m: max(1.2rem, 3.07vw);
  --font-size-10-m: max(1rem, 2.60vw);
  /* --font-size-8-m: max(0.8rem, 2.13vw); */
  --font-size-7-m: max(0.7rem, 1.87vw);

	/* Line Heights */
	--lh-95: 95%;
	--lh-100: 100%;
	--lh-110: 110%;
	--lh-120: 120%;
	--lh-130: 130%;
	--lh-135: 135%;
	--lh-140: 140%;

	/* Letter Spacing */
	--ls-tight: -0.02em;  /* en-l-title 시리즈 */
	--ls-normal: -0.01em; /* ko-body 시리즈 */





  /* 빨간점 크기 */
  --en-dot-40: min(4.00rem, 2.08vw); 
  --en-dot-36: min(3.60rem, 1.88vw);
  --en-dot-28: min(2.80rem, 1.46vw);
  --en-dot-22: min(2.20rem, 1.15vw);
  --en-dot-16: min(1.60rem, 0.83vw);
  --en-dot-15: min(1.50rem, 0.78vw);
  --en-dot-14: min(1.40rem, 0.72vw);
  --en-dot-11: min(1.10rem, 0.57vw);
  --en-dot-8: min(0.80rem, 0.42vw);
  --en-dot-6: min(0.60rem, 0.31vw);
  --en-dot-5: min(0.50rem, 0.26vw);
  --en-dot-4: min(0.40rem, 0.21vw);

  --dot-margin-15: min(1.50rem, 0.78vw);
  --dot-margin-12: min(1.20rem, 0.63vw);
  --dot-margin-10: min(1.00rem, 0.52vw);
  --dot-margin-8: min(0.80rem, 0.42vw);
  --dot-margin-6: min(0.60rem, 0.31vw);
  --dot-margin-4: min(0.40rem, 0.21vw);
  --dot-margin-2: min(0.20rem, 0.11vw);
  --dot-margin-1: min(0.10rem, 0.05vw);

  --en-dot-4-m: max(0.40rem, 1.07vw);
  --en-dot-6-m: max(0.60rem, 1.60vw);
  --en-dot-8-m: max(0.80rem, 2.13vw);
  --en-dot-10-m: max(1.00rem, 2.67vw);
  --en-dot-11-m: max(1.10rem, 2.80vw);
  --en-dot-12-m: max(1.20rem, 3.07vw);
  --en-dot-15-m: max(1.50rem, 3.67vw);
  --en-dot-16-m: max(1.60rem, 4.27vw);
  --en-dot-20-m: max(2.00rem, 5.33vw);


  --dot-margin-2-m: max(0.20rem, 0.53vw);
  --dot-margin-3-m: max(0.30rem, 0.79vw);
  --dot-margin-4-m: max(0.40rem, 1.07vw);
  --dot-margin-6-m: max(0.60rem, 1.60vw);
  --dot-margin-8-m: max(0.80rem, 2.13vw);
  --dot-margin-10-m: max(1.00rem, 2.67vw);
  --dot-margin-12-m: max(1.20rem, 3.07vw);
  
  
}


/* 메뉴 버튼 */
.common-menu-btn {
  position: absolute;
  right: min(4.00rem, 2.08vw);
  top: 50%;
  transform: translateY(-50%);
  width: min(7.20rem, 3.75vw);
  aspect-ratio: auto 1/1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.common-menu-btn .menu-icon-inactive {
  display: block;
  width: min(3.20rem, 1.67vw);
  height: 0.12rem;
  transition: margin .3s .3s, transform .3s, background-color .5s;
  line-height: 0;
  padding: 0;
  transform: translate3d(0, 0, 0);
  /* subpixel 문제 방지 */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}
.common-menu-btn .menu-icon-inactive:nth-child(1) {
  margin-bottom: min(0.60rem, 0.31vw);
}
.common-menu-btn .menu-icon-inactive:nth-child(3) {
  margin-top: min(0.60rem, 0.31vw);
}

@media all and (max-width: 1000px) {
  .common-menu-btn {
    right: max(2.00rem, 5.33vw);
    width: max(3.60rem, 9.60vw);
  }
  .common-menu-btn .menu-icon-inactive {
    width: max(1.60rem, 4.27vw);
    height: 0.08rem;
  }
  .common-menu-btn .menu-icon-inactive:nth-child(1) {
    margin-bottom: max(0.40rem, 1.07vw);
  }
  .common-menu-btn .menu-icon-inactive:nth-child(3) {
    margin-top: max(0.40rem, 1.07vw);
  }
}


/* .common-menu-btn-active {
  position: absolute;
  right: min(7.00rem, 3.65vw);
  top: min(5.00rem, 2.60vw);
  transform: translateY(-50%);
  width: min(7.20rem, 3.75vw);
  aspect-ratio: auto 1/1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.common-menu-btn-active .menu-icon-active {
  display: block;
  width: min(3.20rem, 1.67vw);
  height: 0.12rem;
  transition: margin .3s .3s, transform .3s, background-color .5s;
  line-height: 0;
  padding: 0;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}
.common-menu-btn-active .menu-icon-active:nth-child(1) {
  margin-bottom: -0.12rem; 
  transform: rotate(45deg);
}
.common-menu-btn-active .menu-icon-active:nth-child(2) {
  margin-top: -0.12rem;
  transform:rotate(135deg);
} */



/* 보더값 */
.border-radius {
  border-radius: 1rem;
  overflow: hidden;
}
@media all and (max-width: 1000px) {
  .border-radius {
    border-radius: 0.3rem;
  }
}



/* 버튼 */
[class*="btn-"] {
    display: inline-block;
    border-radius: 5.1rem;
    overflow: hidden;
}

.btn-l-b {
  color: var(--ir-color-black);
  border: 0.1rem solid var(--ir-color-medium-gray);
  padding: min(1.04vw, 2rem) min(2.08vw, 4rem);
}
.btn-l-b:hover .hover-motion-text2 {
  background-color: var(--ir-color-black);
  color: var(--ir-color-white);
}
.btn-l-w {
  color: var(--ir-color-white);
  border: 0.1rem solid var(--ir-color-white);
  padding: min(1.04vw, 2rem) min(2.08vw, 4rem);
}
.btn-l-w:hover .hover-motion-text2 {	
  background: var(--ir-color-white);
  color: var(--ir-color-black);
}

.btn-m-b {
  color: var(--ir-color-black);
  border: 0.1rem solid var(--ir-color-medium-gray);
  
  padding: min(2.67vw, 1rem) min(5.33vw, 2rem);
  font-size: var(--font-size-14);
}

@media all and (max-width: 1000px) {
  .btn-l-b, .btn-l-w {
    padding: max(1rem, 2.67vw) max(2rem, 5.33vw);
    font-size: var(--font-size-10-m);
  }

  .btn-m-b {
    padding: max(0.6rem, 1.6vw) max(1.2rem, 3.2vw);
    font-size: var(--font-size-10-m);
  }
}


/* 빨간점 */
.red-dot {
    position: relative;
    /* top: 0.3rem; */
    vertical-align: text-bottom;
    display: inline-block;
    aspect-ratio: auto 1/1;
    background-color: var(--ir-color-red);
    border-radius: 50%;

    opacity: 0;
    transform: translateY(0);
}
.red-dot.show {
  opacity: 1;
}

.red-dot.dot-size-11 {
  width: min(1.1rem, 0.57vw);
  margin-left: 0.21vw;
}
.red-dot.dot-size-15 {
  width: min(1.5rem, 0.78vw);
  /* margin-left: 0.21vw; */
}
.red-dot.dot-size-16 {
  width: min(1.6rem, 0.83vw);
  margin-left: 0.47vw;
}
.red-dot.dot-size-20 {
  width: min(2rem, 1.04vw);
  margin-left: 0.47vw;
}
.red-dot.dot-size-22 {
  width: min(2.2rem, 1.15vw);
  margin-left: 0.47vw;
}
.red-dot.dot-size-28 {
  width: min(2.8rem, 1.46vw);
  margin-left: 0.57vw;
}
.red-dot.dot-size-36 {
  width: min(3.6rem, 1.88vw);
  margin-left: 0.63vw;
}
.red-dot.dot-size-40 {
  width: min(4rem, 2.08vw);
  margin-left: 0.78vw;
}

/* .red-dot.dot-size-11 {
  width: min(1.1rem, 0.57vw);
  margin-left: min(0.4rem, 0.73vw);
}
.red-dot.dot-size-15 {
  width: min(1.5rem, 0.78vw);
  margin-left: min(0.2rem, 0.36vw);
}
.red-dot.dot-size-16 {
  width: min(1.6rem, 0.83vw);
  margin-left: min(0.4rem, 0.73vw);
}
.red-dot.dot-size-20 {
  width: min(2rem, 1.04vw);
  margin-left: min(0.4rem, 0.73vw);
}
.red-dot.dot-size-22 {
  width: min(2.2rem, 1.15vw);
  margin-left: min(0.4rem, 0.73vw);
}
.red-dot.dot-size-28 {
  width: min(2.8rem, 1.46vw);
  margin-left: min(1rem, 0.73vw);
}
.red-dot.dot-size-36 {
  width: min(3.6rem, 1.88vw);
  margin-left: min(1.2rem, 0.73vw);
}
.red-dot.dot-size-40 {
  width: min(4rem, 2.08vw);
  margin-left: min(1.5rem, 0.73vw);
} */

/* .dot-size-en-28-w {width: min(2.8rem, 2.8vw);} */



@media screen and (max-width: 1000px) {
  /* .red-dot.dot-size-11 {
    width: max(1.6vw, 0.6rem);
    margin-left: 0.53vw;
  }

  .red-dot.dot-size-16,
  .red-dot.dot-size-20,
  .red-dot.dot-size-22,
  .red-dot.dot-size-36 {
    width: max(2.67vw, 1rem);
    margin-left: 0.8vw;
  } */
}