/* 폰트속성 */
.f_n {font-weight:normal  !important;}
.f_b {font-weight:500}
.f_b1 {font-weight:600}
.f_b2 {font-weight:700}
.f_b3 {font-weight:900}

.f_s {font-size:0.9rem !important}
.f_l {font-size:1.3rem !important}

.img_text{font-size:0 !important}

/* Typography */
.heading_1{font-size:4.25rem;line-height:5.525rem;} /* 68px */
.heading_2{font-size:3.5rem;line-height:4.55rem;} /* 56px */
.heading_3{font-size:3rem;line-height:3.9rem;} /* 48px */
.heading_4{font-size:2.75rem;line-height:3.575rem;} /* 44px */
.heading_5{font-size:2.25rem;line-height:2.925rem;}/* 36px */
.heading_6{font-size:1.5rem;line-height:1.95rem;}/* 24px */

.subtitle_1{font-size:1.25rem;line-height:1.75rem;}/* 20px */
.subtitle_2{font-size:1.125rem;line-height:1.688rem;}/* 18px */



.main .visual :root {
  --vh: 100%;
}

.main section {
  overflow: hidden;
}

.main .visual {
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  position: relative;
  height: calc(var(--vh, 1vh) * 100);
}

@supports (-webkit-touch-callout: none) {
  .main .visual {
    height: -webkit-fill-available;
  }
}



.main .visual .swiper-wrapper {
  -webkit-transition-timing-function: cubic-bezier(0.68, 0.12, 0.28, 0.88);
          transition-timing-function: cubic-bezier(0.68, 0.12, 0.28, 0.88);
}

.main .visual .box,
.main .visual .slideBox,
.main .visual .bg {
  width: 100%;
  height: 100%;
}

.main .visual .slideBox {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.main .visual .bg {
/*
  -webkit-clip-path: inset(88% 34% 0% 34%);
          clip-path: inset(88% 34% 0% 34%);
		  */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.main .visual .bg.bg1 {
  background-image: url("../img/main/img1.jpg");
}

.main .visual .bg.bg2 {
  background-image: url("../img/main/img2.jpg");
}

.main .visual .bg.bg3 {
  background-image: url("../img/main/img3.jpg");
}

.main .visual .bg::after {
  content: "";
  display: block;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  -webkit-transition: all 0s;
  transition: all 0s;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
/*
.main .visual .bg.on {
  -webkit-animation: clipOn 2.2s cubic-bezier(0.19, 0.82, 0.29, 1.01) forwards;
          animation: clipOn 2.2s cubic-bezier(0.19, 0.82, 0.29, 1.01) forwards;
}
*/
@-webkit-keyframes clipOn {
  0% {
    -webkit-clip-path: inset(88% 34% 0% 34%);
            clip-path: inset(88% 34% 0% 34%);
  }
  55% {
    -webkit-clip-path: inset(15% 34% 15% 34%);
            clip-path: inset(15% 34% 15% 34%);
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
  }
  65% {
    -webkit-clip-path: inset(15% 34% 15% 34%);
            clip-path: inset(15% 34% 15% 34%);
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
  }
  100% {
    -webkit-clip-path: inset(0% 0%);
            clip-path: inset(0% 0%);
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes clipOn {
  0% {
    -webkit-clip-path: inset(88% 34% 0% 34%);
            clip-path: inset(88% 34% 0% 34%);
  }
  55% {
    -webkit-clip-path: inset(15% 34% 15% 34%);
            clip-path: inset(15% 34% 15% 34%);
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
  }
  65% {
    -webkit-clip-path: inset(15% 34% 15% 34%);
            clip-path: inset(15% 34% 15% 34%);
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
  }
  100% {
    -webkit-clip-path: inset(0% 0%);
            clip-path: inset(0% 0%);
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.main .visual .text,
.main .visual .slideButtons {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.main .visual .text {
  width: 100%;
  text-align: center;
  z-index: 1;
}

.main .visual .text * {
  color: #fff;
}

.main .visual .text p {
  margin: 0 0 20px;
}

.main .visual em { font-style:normal; }

.main .visual .text em {
  display: inline-block;
  font-size:80px;
  font-weight: 500;
  letter-spacing: 0.1em;
  position: relative;  
}

.main .visual .text h2 {
  white-space: nowrap;
  overflow: hidden;
}

.main .visual .text h2 span {
  display: inline-block;
  font-weight: 900;
  font-size:60px;
  line-height: 1.3;
  font-family: var(--font-pretendard);
  -webkit-transition: all 0.28s;
  transition: all 0.28s;
}

.main .visual .text h2 .light {
  font-weight: 200;
}

.main .visual .text h2 .semi {
  font-weight: 600;
}

.main .visual .text.on * {
  color: var(--color-white);
}

.main .visual .text.on em {
  display: inline-block;
  color: transparent;
  opacity: 0;
  -webkit-transform: scaleY(1.12) rotateX(65deg);
          transform: scaleY(1.12) rotateX(65deg);
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
}

@-webkit-keyframes em {
  10% {
    opacity: 0.8;
    -webkit-transform: scaleY(1.12);
            transform: scaleY(1.12);
  }
  40% {
    opacity: 0.2;
  }
  60% {
    -webkit-transform: scaleY(1.24) rotateX(65deg);
            transform: scaleY(1.24) rotateX(65deg);
  }
  100% {
    color: #fff;
    opacity: 1;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}

@keyframes em {
  10% {
    opacity: 0.8;
    -webkit-transform: scaleY(1.12);
            transform: scaleY(1.12);
  }
  40% {
    opacity: 0.2;
  }
  60% {
    -webkit-transform: scaleY(1.24) rotateX(65deg);
            transform: scaleY(1.24) rotateX(65deg);
  }
  100% {
    color: #fff;
    opacity: 1;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}

.main .visual .text.on h2 span {
  opacity: 0;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}

.main .visual .slideButtons {
  width: 100%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.main .visual .slideButtons em {
  padding: 0 20px;
}

.main .visual button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  gap: 8px 0;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  background:transparent;
  border:0;
}

.main .visual button::before, .main .visual button::after {
  content: "";
  display: block;
  height: 1px;
  background: #fff;
}

.main .visual button::before {
  width: 150px;
  opacity: 0.3;
}

.main .visual button::after {
  width: 80px;
  position: absolute;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.main .visual button:hover::after {
  width: 100%;
}

.main .visual .prevButton {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.main .visual .nextButton {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.main .visual .swiper-slide-active .bg::after {
  opacity: 1;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.main .visual .swiper-slide-active .text.on em {
  -webkit-animation: em 1.0s ease-in-out forwards;
          animation: em 1.0s ease-in-out forwards;
}

.main .visual .swiper-slide-active .text.on em.delay1 {
  -webkit-animation-delay: 0.12s;
          animation-delay: 0.12s;
}

.main .visual .swiper-slide-active .text.on em.delay2 {
  -webkit-animation-delay: 0.24s;
          animation-delay: 0.24s;
}

.main .visual .swiper-slide-active .text.on em.delay3 {
  -webkit-animation-delay: 0.36s;
          animation-delay: 0.36s;
}

.main .visual .swiper-slide-active .text.on em.delay4 {
  -webkit-animation-delay: 0.48s;
          animation-delay: 0.48s;
}

.main .visual .swiper-slide-active .text.on em.delay5 {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.main .visual .swiper-slide-active .text.on em.delay6 {
  -webkit-animation-delay: 0.72s;
          animation-delay: 0.72s;
}

.main .visual .swiper-slide-active .text.on em.delay7 {
  -webkit-animation-delay: 0.84s;
          animation-delay: 0.84s;
}

.main .visual .swiper-slide-active .text.on em.delay8 {
  -webkit-animation-delay: 0.96s;
          animation-delay: 0.96s;
}

.main .visual .swiper-slide-active .text.on h2 span {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 1.0s;
  transition: all 1.0s;
  -webkit-filter: inherit;
          filter: inherit;
}

.main .visual .swiper-slide-active .text.on h2 span.span1 {
  -webkit-transition-delay: 0.22s;
          transition-delay: 0.22s;
}

.main .visual .swiper-slide-active .text.on h2 span.span2 {
  -webkit-transition-delay: 0.44s;
          transition-delay: 0.44s;
}

.main .visual .swiper-slide-active .text.on h2 span.span3 {
  -webkit-transition-delay: 0.66s;
          transition-delay: 0.66s;
}

.main .visual .swiper-slide-active .text.on h2 span.span4 {
  -webkit-transition-delay: 0.88s;
          transition-delay: 0.88s;
}

.main .visual .swiper-slide-active .text.on h2 span.span5 {
  -webkit-transition-delay: 1.1s;
          transition-delay: 1.1s;
}

.main .visual .swiper-slide-active .text.on h2 span.span6 {
  -webkit-transition-delay: 1.32s;
          transition-delay: 1.32s;
}

.main .visual .swiper-slide-active .text.on h2 span.span7 {
  -webkit-transition-delay: 1.54s;
          transition-delay: 1.54s;
}

.main .visual .swiper-slide-active .text.on h2 span.span8 {
  -webkit-transition-delay: 1.76s;
          transition-delay: 1.76s;
}

.main .visual .swiper-slide-active .text.on h2 span.span9 {
  -webkit-transition-delay: 1.98s;
          transition-delay: 1.98s;
}

.main .visual .swiper-slide-active .text.on h2 span.span10 {
  -webkit-transition-delay: 2.2s;
          transition-delay: 2.2s;
}



/* Sec01 */
.main .sec01 { display:flex; position:relative; width:100%; }
.main .sec01 .bg_l,
.main .sec01 .bg_r { width:50%; height:970px; padding-top:250px; padding-left:10%; }
.main .sec01 .bg_l { background:url('../img/main/bg_product1.jpg') top right no-repeat; }
.main .sec01 .bg_r { background:url('../img/main/bg_product2.jpg') top left no-repeat;  }
.main .sec01 .inner { color:#fff; }
.main .sec01 .inner h2 { font-size:60px; margin-bottom:30px; }
.main .sec01 .inner p.desc { font-size:20px; line-height:1.5; margin-bottom:50px; }

.main .sec01 ul:after {display:block;visibility:hidden;clear:both;content:""}
.main .sec01 li { float:left; margin-bottom:10px; font-size:18px; }
.main .sec01 li a { color:#fff; }
.main .sec01 li:before { content:"ㆍ"; color:#fff; }
.main .sec01 li + li { margin-left:20px; }

.main .sec01 .bg_l li:nth-child(2n-1) { clear:both; margin-left:0; }

.main .sec01 .cate_info { display:inline-block; background:#f36523; color:#fff; width:280px; height:35px; line-height:35px; text-align:center; font-size:18px; margin-bottom:20px; border-radius:15px; }

/**/
 /* 서비스 */
.sec02 {padding:120px 0;}
.sec02 .inner{position:relative;max-width:1440px; min-width:320px;margin:0 auto; box-sizing:border-box;padding-left:32px;padding-right:32px;}
.sec02 .top_deco_text{width:100%;padding-bottom:11.25rem;font-size:11vw;color:#E5E7EB;font-weight:900;overflow:hidden;white-space:nowrap;text-align:center;}

.main_service {position:relative;}
.main_service > .title_wrap {position:absolute;top:0;left:0;width:30%;padding-right:4rem;}
.main_service > .title_wrap h2 {color:#FFAD31;margin-bottom:20px; font-weight:500; font-size:20px; }
.main_service > .title_wrap p { font-size:40px; font-weight:700; line-height:1.2; }
.main_service_sd_wp{padding-left:30%;}
.main_service_sd_wp .slick-nav{position:absolute;bottom:0;left:0;}
.main_service_sd_wp .slick-nav .sd-play{display:none;}
.main_service_sd_wp .slick-nav .ico_box{background-color:#000;width:50px;height:50px;border-radius:50%;}

.main_service_sd .item{height:460px;}
.main_service_sd .item_col1 .in_box{padding:4.2rem;color:#fff;background-color:#121212;height:100%;}
.main_service_sd .item_col1.item1 .in_box{background:url('../img/main/business1.png') no-repeat top center;background-size:cover;}
.main_service_sd .item_col1.item2 .in_box{background:url('../img/main/business2.png') no-repeat top center;background-size:cover;}
.main_service_sd .item_col1.item3 .in_box{background:url('../img/main/business3.png') no-repeat top center;background-size:cover;}
.main_service_sd .item_col1 ul{display:flex;margin:0 -1rem;padding-top:4.2rem;}
.main_service_sd .item_col1 ul li{width:calc((100% - 2rem) / 2);margin:0 1rem;}
.main_service_sd .item_col1 .heading_6{color:#FFAD31;padding-bottom:1rem;}
.main_service_sd .item_col1 .subtitle_2{padding-bottom:1rem;}

.main_service_sd .item_col3 ul{display:flex;margin:0 -1rem;height:100%;}
.main_service_sd .item_col3 ul li{width:calc((100% - 4rem) / 3);height:100%;color:#fff;font-size:2rem;margin:0 1rem;padding:12rem 2.5rem 0;background:url('../img/main/business1.png') no-repeat top center #000;font-weight:500; text-align:center; }
.main_service_sd .item_col3 ul li:nth-child(2){background:url('../img/main/business2.png') no-repeat top center;background-size:cover;}
.main_service_sd .item_col3 ul li:nth-child(3){background:url('../img/main/business3.png') no-repeat top center;background-size:cover;}
.main_service_sd .item_col3 ul li a {width: 100%; height: 100%; color:#fff; }

.sec02 .ico_box{margin:0 2px;display: inline-flex;justify-content: center;align-items:center;}

 /*  */
.sec03 { position:relative; padding:110px 0 0; background:url('../img/main/bg_cs.jpg') top center no-repeat; height:500px; }
.sec03 .inner { text-align:center; color:#fff; }
.sec03 h2 { font-size:60px; font-weight:500; margin-bottom:10px; }
.sec03 p { font-size:20px; line-height:1.5; }
.sec03 .btn { text-align:center; margin-top:50px;  }
.sec03 .btn a { position:relative; display:inline-block; text-align:center; background:#fff; border-radius:8px; width:220px; height:50px; line-height:50px; transition: all 0.3s; }
.sec03 .btn a:hover { background:#000; color:#fff; }
.sec03 .btn a i { position:absolute; top:16px; right:20px; font-size:20px;  }
.sec03 .btn a i.icon1 { right:26px; }

 /*  */
.sec04 {padding:120px 0;}
.sec04 .inner{position:relative;max-width:1400px; margin:0 auto;}
.sec04 .title_wrap { margin-bottom:80px; text-align:center; }
.sec04 .title_wrap h2  { font-size:50px; font-weight:700; margin-bottom:10px; }
.sec04 .title_wrap p { font-size:16px; line-height:1.5; color:#262533; }