@font-face {
  font-family: 'Gmarket Sans';
  src: url('../font/GmarketSans/GmarketSansTTFLight.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Gmarket Sans';
  src: url('../font/GmarketSans/GmarketSansTTFMedium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Gmarket Sans';
  src: url('../font/GmarketSans/GmarketSansTTFBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

:root {
  /* 색상 변수 */
  --primary-color: #fc5230;
  --secondary-color: #898989;
  --blue-color: #004ab0;
  --text-color: #231815;
  --accent-color: #007bff;
  --background-color: #fff;
  --border-color: #ddd;
  --error-color: #dc3545;
  --success-color: #28a745;

  --header-height: 60px;
  --max-width: 1920px;
  
  /* 폰트 크기 */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;
  --font-size-5xl: 40px;
  --font-size-6xl: 48px;
  --font-size-7xl: 52px;
  
  /* 여백 */
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 20px;
  --gap-6: 24px;
  --gap-7: 28px;
  --gap-8: 32px;
  --gap-9: 36px;
  --gap-10: 40px;
  --gap-11: 44px;
  --gap-12: 48px;
  --gap-13: 52px;
  --gap-14: 56px;
  --gap-15: 60px;
  --gap-16: 64px;
  --gap-17: 68px;
  --gap-18: 72px;
  --gap-19: 76px;
  --gap-20: 80px;
  --gap-30: 120px;
  --gap-40: 160px;

  --padding-x: 20px;
}


@media (max-width: 768px) {
  :root{
      --header-height: 25px;

      --font-size-xs: 1.56vw;
      --font-size-sm: 1.82vw;
      --font-size-base: 2.08vw;
      --font-size-lg: 2.34vw;
      --font-size-xl: 2.6vw;
      --font-size-2xl: 3.13vw;
      --font-size-3xl: 3.9vw;
      --font-size-4xl: 4.69vw;
      --font-size-5xl: 5.21vw;
      --font-size-6xl: 6.25vw;
      --font-size-7xl: 6.77vw;

      --gap-1: 0.52vw;
      --gap-2: 1.04vw;
      --gap-3: 1.56vw;
      --gap-4: 2.08vw;
      --gap-5: 2.60vw;
      --gap-6: 3.13vw;
      --gap-7: 3.65vw;
      --gap-8: 4.17vw;
      --gap-9: 4.69vw;
      --gap-10: 5.21vw;
      --gap-11: 5.73vw;
      --gap-12: 6.25vw;
      --gap-13: 6.77vw;
      --gap-14: 7.29vw;
      --gap-15: 7.81vw;
      --gap-16: 8.33vw;
      --gap-17: 8.85vw;
      --gap-18: 9.38vw;
      --gap-19: 9.90vw;
      --gap-20: 10.42vw;
      --gap-30: 15.63vw;
      --gap-40: 20.83vw;
  }
}

@media (max-width: 480px) {
  :root{
      --font-size-xs: 2.5vw;
      --font-size-sm: 2.92vw;
      --font-size-base: 3.33vw;
      --font-size-lg: 3.75vw;
      --font-size-xl: 4.17vw;
      --font-size-2xl: 5vw;
      --font-size-3xl: 6.25vw;
      --font-size-4xl: 7.5vw;
      --font-size-5xl: 8.33vw;
      --font-size-6xl: 10vw;
      --font-size-7xl: 10.83vw;

      --gap-1: 0.83vw;
      --gap-2: 1.67vw;
      --gap-3: 2.50vw;
      --gap-4: 3.33vw;
      --gap-5: 4.17vw;
      --gap-6: 5.00vw;
      --gap-7: 5.83vw;
      --gap-8: 6.67vw;
      --gap-9: 7.50vw;
      --gap-10: 8.33vw;
      --gap-11: 9.17vw;
      --gap-12: 10.00vw;
      --gap-13: 10.83vw;
      --gap-14: 11.67vw;
      --gap-15: 12.50vw;
      --gap-16: 13.33vw;
      --gap-17: 14.17vw;
      --gap-18: 15.00vw;
      --gap-19: 15.83vw;
      --gap-20: 16.67vw;
      --gap-30: 25vw;
      --gap-40: 33.33vw;
  }
}

body {
  font-family: 'Gmarket Sans', sans-serif;
  font-size: var(--font-size-base);
  color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Gmarket Sans', sans-serif;
  color: var(--text-color);
}

.clamp-1 {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.clamp-2 {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.clamp-3 {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

#wrapper{
  min-height: 80vh;
}

/* 헤더 */
header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}
.header_inner{
  width: 100%;
  /* background-color: #000; */
  padding: var(--gap-10) 0;
}
.rolling-banner {
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.rolling-track {
  display: flex;
  width: max-content;
  animation: rolling 20s linear infinite;
}
.rolling-item {
  flex: 0 0 auto;
  margin-right: var(--gap-20);
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--header-height);
}
.rolling-item img{
  min-width: 100px;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}
@keyframes rolling {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  .rolling-item {
    margin-right: var(--gap-10);
  }
}

/* 섹션1 */
.section{
  width: 100%;
  /* min-height: 1440px; */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: calc(var(--header-height) + var(--gap-20));
}

.section_1_inner{
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--padding-x);
  display: flex;
  flex-flow: column;
  gap: var(--gap-30);
  align-items: center;
  padding-top: var(--gap-16);
  padding-bottom: var(--gap-5);
}
.section_1_inner_top{
  width: 100%;
  display: flex;
  flex-flow: column;
  gap: var(--gap-15);
  align-items: center;
}
.section_1_inner_top h2{
  font-size: var(--font-size-4xl);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: #fff;
  font-weight: 500;
}
.section_1_inner_top h2 .text_orange{
  color: var(--primary-color);
}
.section_1_inner_top h2 .text_large{
  font-size: var(--font-size-6xl);
  font-weight: 700;
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 1);
}
.section_1_inner_top_btn{
  padding: var(--gap-5) var(--gap-10);
  display: flex;
  align-items: center;
  gap: var(--gap-5);
  background-color: #fff;
  border-radius: 50px;
  font-size: var(--font-size-3xl);
  font-weight: 700;
  box-shadow: 0 6px 5px 5px rgba(0, 0, 0, 1);
  cursor: pointer;
}
.section_1_inner_top_btn span{
  display: flex;
  align-items: center;
  margin-top: var(--gap-1);
}
.section_1_inner_top_btn>div{
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  border-radius: 50%;
  color: #fff;
  font-size: var(--font-size-xl);
}

.section_1_inner_bottom{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.section_1_inner_bottom .swiper_wrap{
  width: 920px;
  max-width: 920px;
  height: 670px;
  background-image: url('../img/section1_img2.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  padding-right: 18px;
  position: relative;
}
.section_1_swiper{
  width: 752px;
  height: 480px;
  padding-top: 44px;
}
.section_1_swiper .swiper-slide{
  width: 100%;
  height: 100%;
}
.section_1_swiper .swiper-slide .swiper_img{
  width: 100%;
  height: 100%;
}
.section_1_swiper .swiper-slide .swiper_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.section_1_inner_bottom .swiper_btns{
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 110%;
  display: flex;
  justify-content: space-between;
}
.section_1_inner_bottom .swiper_btns>div{
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  border: 5px solid #fff;
  box-sizing: border-box;
  font-size: var(--font-size-2xl);
  cursor: pointer;
}
.section_1_inner_bottom .swiper_btns .section_1_button_prev{
  transform: rotate(180deg);
}
.section_1_inner_bottom .text_img{
  position: absolute;
  top: -7%;
  right: -18%;
  z-index: 1;
  transform: rotate(25deg);
}
.section_1_inner_bottom .text_img img{
  width: 35.79vw;
  max-width: 340px;
  height: auto;
  object-fit: contain;
}
.section_1_inner_bottom .text_img_text{
  position: absolute;
  left: 50%;
  bottom: 24.5%;
  transform: translateX(-50%);
  z-index: 1;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--primary-color);
}

@media (max-width: 1440px) {
  .section_1_inner_bottom .text_img{
    top: unset;
    bottom: 13%;
    right: 0%;
  }
  .section_1_inner_bottom .text_img img{
    width: 16.21vw;
    max-width: 154px;
  }
}
@media (max-width: 1024px) {
  .section_1_inner_bottom .swiper_btns{
    display: none;
  }
}
@media (max-width: 950px) {
  .section_1_inner_bottom .swiper_wrap{
    width: 96.84vw;
    max-width: 96.84vw;
    height: 70.53vw;
    padding-right: 1.89vw;
  }
  .section_1_swiper{
    width: 79.16vw;
    height: 50.53vw;
    padding-top: 4.63vw;
  }
}

@media (max-width: 768px) {
  .section_1_inner_top h2{
    font-size: var(--font-size-2xl);
  }
  .section_1_inner_top h2 .text_large{
    font-size: var(--font-size-4xl);
  }

  .section_1_inner_top_btn{
    padding: var(--gap-3) var(--gap-6);
    gap: var(--gap-3);
    font-size: var(--font-size-2xl);
  }
  .section_1_inner_top_btn>div{
    width: 20px;
    height: 20px;
    font-size: var(--font-size-sm);
  }
  /* .section {
    min-height: 156.25vw;
  } */
}

@media (max-width: 480px) {
  .section_1_inner_top h2{
    font-size: var(--font-size-xl);
  }
  .section_1_inner_top h2 .text_large{
    font-size: var(--font-size-2xl);
  }
  .section_1_inner {
    gap: var(--gap-20);
  }
  .section_1_swiper {
    width: 73.16vw;
    height: 48.53vw;
    padding-top: 6.63vw;
  }
}

/* 섹션2 */
.section_2{
  display: flex;
  align-items: center;
}
.section_2_inner{
  width: 100%;
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--padding-x);
  display: flex;
  gap: var(--gap-10);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--gap-16);
  padding-bottom: var(--gap-20);
}
.section_2_inner_left{
  flex: 1;
  display: flex;
  flex-flow: column;
  gap: var(--gap-10);
}
.section_2_inner_left_top{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gap-3);
}
.section_2_inner_left_top h2{
  font-size: var(--font-size-6xl);
  font-weight: 700;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.77);
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 1);
}
.section_2_inner_left_bottom{
  width: 100%;
  display: flex;
  flex-flow: column;
  gap: var(--gap-8);
}
.section_2_inner_left_bottom_item{
  width: 100%;
  display: flex;
  flex-flow: column;
  gap: var(--gap-3);
}
.section_2_inner_left_bottom_item h3{
  font-size: var(--font-size-3xl);
  font-weight: 700;
  line-height: 1.2;
  color: var(--primary-color);
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 1);
}
.section_2_inner_left_bottom_item h3 span{
  font-size: var(--font-size-6xl);
}
.section_2_inner_left_bottom_item p{
  font-size: var(--font-size-lg);
  font-weight: 300;
  line-height: 1.2;
  color: #fff;
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 1);
}
.section_2_inner_left_bottom_item p span{
  font-weight: 700;
}

.section_2_inner_right{
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: var(--gap-6);
  padding-right: 90px;
}
.section_2_inner_right .swiper_wrap{
  width: 428px;
  max-width: 428px;
  height: 864px;
  background-image: url('../img/section2_img1.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  /* padding-right: 18px; */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section_2_swiper{
  width: 380px;
  height: 620px;
}
.section_2_swiper .swiper-slide{
  width: 100%;
  height: 100%;
}
.section_2_swiper .swiper-slide .swiper_img{
  width: 100%;
  height: 100%;
}
.section_2_swiper .swiper-slide .swiper_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.section_2_inner_right .swiper_btns{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 140%;
  display: flex;
  justify-content: space-between;
}
.section_2_inner_right .swiper_btns>div{
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  border: 5px solid #fff;
  box-sizing: border-box;
  font-size: var(--font-size-2xl);
  cursor: pointer;
}
.section_2_inner_right .swiper_btns .section_2_button_prev{
  transform: rotate(180deg);
}
.section_2_inner_right .text_img_text{
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--primary-color);
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 1);
}

.section_2_inner_left .mobile{
  display: none;
}
.section_2_inner_left .mobile .swiper_wrap{
  width: 204px;
  max-width: 204px;
  height: 412px;
  background-image: url('../img/section2_img1.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  /* padding-right: 18px; */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section_2_mobile_swiper{
  width: 180px;
  height: 275px;
}
.section_2_mobile_swiper .swiper-slide{
  width: 100%;
  height: 100%;
}
.section_2_mobile_swiper .swiper-slide .swiper_img{
  width: 100%;
  height: 100%;
}
.section_2_mobile_swiper .swiper-slide .swiper_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}


@media (max-width: 1280px) {
  .section_2_inner_right .swiper_btns{
    display: none;
  }
  .section_2_inner_right{
    padding-right: 0;
  }
}
@media (max-width: 950px) {
  .section_2_inner_right .swiper_wrap{
    width: 45.05vw;
    max-width: 45.05vw;
    height: 90.95vw;
  }
  .section_2_swiper{
    width: 40vw;
    height: 65.26vw;
  }
}

@media (max-width: 768px) {
  .section_2_inner_right{
    display: none;
  }
  .section_2_inner_left .mobile{
    display: flex;
  }
  /* .section {
    min-height: 156.25vw;
  } */
  .section_2_inner_left{
    flex: 1;
    display: flex;
    flex-flow: column;
    gap: var(--gap-4);
  }
}

@media (max-width: 480px) {
  .section_2_inner_left_top h2 {
    font-size: var(--font-size-3xl);
    white-space: nowrap;
  }
  .section_2_inner_left_bottom_item h3 {
    font-size: var(--font-size-xl);
  }
  .section_2_inner_left_bottom_item h3 span {
    font-size: var(--font-size-3xl);
  }
  .section_2_inner_left_bottom_item p {
    font-size: var(--font-size-xs);
  }
  .section_2_inner_left .mobile .swiper_wrap{
    width: 32vw;
    max-width: 32vw;
    height: 64.27vw;
  }
  .section_2_mobile_swiper{
    width: 28vw;
    height: 42.67vw;
  }
}

/* 섹션3 */
.section_3{
  display: flex;
  align-items: center;
}
.section_3_inner{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding-top: var(--gap-16);
  padding-bottom: var(--gap-20);
  position: relative;
}
.section_3_inner .swiper_wrap{
  width: 100%;
}
.section_3_swiper{
  width: 100%;
  height: 864px;
}
.section_3_swiper .swiper-slide .swiper_img{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.section_3_swiper .swiper-slide .swiper_img img{
  width: 380px;
  height: 620px;
  transition: all 0.4s;
}


.section_3_swiper .swiper-slide-active {
  opacity: 1;
  filter: none;
  transition: opacity 0.3s, filter 0.3s;
  height: 864px;
  background-image: url('../img/section2_img1.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.section_3_swiper .swiper-slide-prev,
.section_3_swiper .swiper-slide-next {
  opacity: 0.9;
  filter: brightness(0.8) grayscale(0.2);
  transition: opacity 0.3s, filter 0.3s;
}

.section_3_swiper .swiper-slide-visible:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) {
  opacity: 0.8;
  filter: brightness(0.6) grayscale(0.5);
  transition: opacity 0.3s, filter 0.3s;
}
.section_3_swiper .swiper-slide:not(.swiper-slide-visible){
  opacity: 0.8;
  filter: brightness(0.6) grayscale(0.5);
}
.section_3_inner .swiper_btns{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 590px;
  display: flex;
  justify-content: space-between;
  z-index: 2;
}
.section_3_inner .swiper_btns>div{
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  border: 5px solid #fff;
  box-sizing: border-box;
  font-size: var(--font-size-2xl);
  cursor: pointer;
}
.section_3_inner .swiper_btns .section_3_button_prev{
  transform: rotate(180deg);
}

@media (max-width: 768px) {
  .section_3_swiper{
    height: 112.5vw;
  }
  .section_3_swiper .swiper-slide .swiper_img img{
    width: 49.48vw;
    height: 80.73vw;
  }
  .section_3_swiper .swiper-slide-active {
    height: 112.5vw;
  }
  .section_3_inner .swiper_btns{
    width: 80vw;
  }
  .section_3_inner .swiper_btns>div{
    width: 7.81vw;
    height: 7.81vw;
    font-size: var(--font-size-lg);
    border: 0.65vw solid #fff;
  }
}

@media (max-width: 480px) {
  .section_3_inner .swiper_btns{
    width: 90vw;
  }
  .section_3_inner .swiper_btns>div{
    width: 10vw;
    height: 10vw;
    font-size: var(--font-size-lg);
  }
}


/* 섹션4 */
.section_4{
  display: flex;
  align-items: center;
  padding-bottom:11vh;
}
.section_4_inner{
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
  padding: 0 var(--padding-x);
  padding-top: var(--gap-16);
  padding-bottom: var(--gap-20);
  position: relative;
  gap: var(--gap-30);
}
.section_4_inner_top{
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: var(--gap-2);
  text-align: center;
}
.section_4_inner_top h2{
  font-size: var(--font-size-6xl);
  font-weight: 700;
  color: #fff;
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 1);
}
.section_4_inner_top h3{
  font-size: var(--font-size-4xl);
  font-weight: 300;
  color: #fff;
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 1);
}

@media (max-width: 768px) {
  .section_4_inner_top h2{
    font-size: var(--font-size-2xl);
  }
  .section_4_inner_top h3{
    font-size: var(--font-size-xl);
  }
}

/* 섹션 sub */
.section_sub{
  display: flex;
  align-items: center;
  background-color: #000;
  min-height: 100vh;
}
.section_sub_inner{
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
  padding: 0 var(--padding-x);
  padding-top: var(--gap-16);
  padding-bottom: var(--gap-40);
  gap: var(--gap-20);
  text-align: center;
  color: #fff;
}
.section_sub_inner>div{
  width: 100%;
  display: flex;
  flex-flow: column;
  gap: var(--gap-20);
}
.section_sub_inner>div h2{
  font-size: var(--font-size-6xl);
  font-weight: 700;
  color: #fff;
}
.section_sub_inner>div p{
  font-size: var(--font-size-2xl);
  font-weight: 300;
}
.section_sub_inner>p{
  font-size: var(--font-size-xl);
  font-weight: 300;
}

@media (max-width: 768px) {
  .section_sub {
    display: none;
  }
}