@charset "utf-8";
/* 메인페이지 레이아웃 */


/* PC 모드에서 스와이퍼 애니메이션만 작동하게 설정 */
.animate-title {
    transform: translateX(150px);
    transition: transform 1.8s ease;
}

.animate-element {
    transform: translateX(220px);
    transition: transform 2.2s ease;
}

.animate-top {
    transform: translateY(50px);
    transition: transform 2.2s ease;
}

.swiper-slide-active .animate-title,
.swiper-slide-active .animate-element,
.swiper-slide-active .animate-top{
    transform: translate(0, 0);
}


body {overflow: hidden; }
.main *{word-break: keep-all;}
#hd{-webkit-backdrop-filter:none;backdrop-filter: none;background:transparent;}
#container{max-width:100vw;}


/* 스와이퍼 풀페이지 설정 */
.main .main-swiper { 
  width: 100%; 
  height: 100vh;
  height: 100svh;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: hidden;
}

.main .swiper-wrapper {
    height: 100vh;
    height: 100svh;
}

.main .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.mian .swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{
  margin:16px;
}
.main .swiper-pagination-vertical.swiper-pagination-bullets, 
.main .swiper-vertical>.swiper-pagination-bullets{
  left:auto;
  right:8px;
}

.main .swiper-pagination-bullet{
  width:10px;
  height:10px;
  background:#fff;
  border:1px solid #395896;
  opacity:1;
}
.main .swiper-pagination-bullet-active{
  background:#395896;

}


/* 스와이퍼 내부 공통 레이아웃 */

.main .section { display: flex; justify-content: center; align-items: center; font-size: 5vw; font-weight: 800;}
.main .sec_inner{position:relative;width:100%;padding:90px 60px 16px;}
.main_wr{width:100%;display:flex;flex-flow:row nowrap;justify-content: center;align-items:flex-end;gap:50px;}



.main .sec_title{
  /* 최소 60px ~ 최대 140px */
  font-size: clamp(28px, 2.9vw, 44px);
  /* text-transform: uppercase; */
}

.main .sec_sub {
  /* 최소 32px ~ 최대 60px */
  font-size: clamp(16px, 1.1vw, 18px);
  font-weight:400;
  text-transform: uppercase;
}
.main .sec_sub.eng{

}

.main .sec_tit {
    /* 최소 24px ~ 최대 32px */
  font-size: clamp(1.5rem, 1.6vw + 1rem, 2rem);
  font-weight:400;
}

.main .sec_content {
    /* 최소 16px ~ 최대 20px */
  font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem);
  line-height: 1.6;
  font-weight:400;
}

.main .btn_text {
    /* 최소 15px ~ 최대 18px */
  font-size: clamp(0.938rem, 0.9vw + 0.1rem, 1.125rem);
  font-weight:400;
}

.main small {
  /* 최소 12px ~ 최대 14px */
  font-size: clamp(0.75rem, 0.7vw + 0.2rem, 0.875rem);
}

.more_btn a{padding-bottom:8px;font-size:16px;text-transform:uppercase; border-bottom:2px solid #181818;}
.more_btn a:hover{color:#036bec;border-color:#036bec;}



.slick-dots li.slick-active button:before{font-size:8px;color:#036bec;}




#sec-main{background:#f8f8f8;}
#sec-main .main_left{position:relative;width:50%;}
#sec-main .sec_title{position:absolute;top:3vh;left:80%;z-index: 1;}
#sec-main .main_img_01{width:100%;max-height:68vh;object-fit: contain;}
#sec-main .main_right{width:50%;}
#sec-main .company_typo{position:absolute;top:16vh;right:11vw;font-size: clamp(7.5rem, 20vw, 24.25rem);color:rgba(57, 88, 150, 0.1);transition: transform 2.6s ease;}
#sec-main .main_point{display:flex;flex-flow:row nowrap;align-items:center;gap:16px;margin-bottom:40px;font-weight:600;color:#395896;}
#sec-main .main_point_line{width:50px;height:2px;background:#395896;}



#sec-service .main_wr{display:block;position:relative;}
#sec-service .title_wr{position: absolute;top: 50%;left: 57%;transform: translate(0, -160px);z-index:3;}
#sec-service .service_slider_wr{position:relative;width:100%;}
#sec-service .main_service_slider{width:100%;}
#sec-service .service_item{display:flex;flex-flow:row nowrap;align-items:center;gap:5%;}
#sec-service .service_img{width:52%;height:calc(100vh - 160px);overflow:hidden;}
#sec-service .service_img img{width:100%;height:100%;object-fit:cover;}
#sec-service .service_txt{display:flex;flex-flow:column nowrap;gap:24px;width:43%;}
#sec-service .service_txt h3{display:flex;flex-flow:column nowrap;gap:10px;}
#sec-service .service_txt .service_eng{font-size:18px;color:#555;font-weight:500;}
#sec-service .service_txt .service_big{font-size:clamp(28px,1.2vw,40px);font-weight:500;}
#sec-service .service_txt p{font-size:16px;font-weight:400;color:#555;}

#sec-service .service_slide_btn{display:flex;flex-flow:row nowrap;justify-content:space-between;position:absolute;left:57%;bottom:0;width:calc(120px + 80px);}
#sec-service .pic_prev,
#sec-service .pic_next{
  position:relative;
  width:30px;
  height:30px;
  border:0;
  background:none;
  cursor:pointer;
  z-index:2;
  box-shadow:none;
}

#sec-service .pic_prev img,
#sec-service .pic_next img{
  position:absolute;
  inset:0;
  width:100%;
}

#sec-service .service_txt h3 span,
#sec-service .service_txt p{
    display:block;
    opacity:0;
    transition:all 1s ease;
    overflow:hidden;
}

#sec-service .slick-current .service_txt h3 span,
#sec-service .slick-current .service_txt p{
    opacity:1;
}

#sec-service .slick-current .service_txt .service_eng{
    transition-delay:.3s;
}
#sec-service .slick-current .service_txt .service_big{
    transition-delay:.46s;
}

#sec-service .slick-current .service_txt p{
    transition-delay:.7s;
}

#sec-service .slick-dotted.slick-slider{
  margin-bottom:0;
}
#sec-service .slick-dots{
  bottom: 0;
  z-index:2;
  width:max-content;
  left:calc(57% + 40px);
  height: 30px;
  font-size: 16px;
}
#sec-service .more_btn a{position:absolute;bottom:4px;left:calc(57% + 240px);}



#sec-impact{background:url(/img/main_impact.jpg) no-repeat center / cover;}
#sec-impact .main_impact_flex{display:flex;flex-flow:row nowrap;gap:4%;width:100%;}
#sec-impact .main_impact_flex .title_wr{min-width:30%;}
/* #sec-impact .main_impact_flex .impact_icons{width:66%;} */
#sec-impact .sec_title{margin-bottom:40px;color:#fff;}
#sec-impact .sec_sub{color:#fff;}
#sec-impact .impact_icons{display: grid;grid-template-columns: repeat(2, 1fr);gap:24px;width:65%;font-size:16px;text-align:center;}
#sec-impact .impact_icons > a{display:flex;flex-flow:column nowrap;align-items:center;gap:16px;padding:32px 16px 24px;text-align:center;background:rgba(255,255,255,0.8);}
#sec-impact .impact_icons img{width:60px;}
#sec-impact .impact_icons h3{font-size:22px;}
#sec-impact .impact_icons p{font-weight:400;}



#sec-case .main_case_flex{position:relative;display:flex;flex-flow:row nowrap;gap:4%;width:100%;}
#sec-case .title_wr{display:flex;flex-flow:column nowrap;justify-content:space-between;width:30%;}
#sec-case .sec_title{display:flex;flex-flow:column nowrap;gap:4px;}
#sec-case .point_gray{color:#999;}
#sec-case .pic_case_wrap{width:70%;padding-left:30px;}





#sec-partnership .sec_inner{display:flex;flex-flow:column nowrap;justify-content:center;align-items:center;gap:clamp(8px, 1vw, 40px);text-align:center;}
#sec-partnership .title_wr{display:flex;flex-flow:column nowrap;gap:20px;}

#sec-partnership #ft{position:fixed;bottom:0;left:0;width:100%;}


@media all and (max-width: 2056px) {
}


@media all and (max-width: 1300px) {
  #sec-about .sec_inner{padding:60px;}
}




/* 반응형: 모바일에서는 일반 스크롤처럼 보이게 */
/* 모바일 상태 (980px 이하) */
@media all and (max-width: 980px) {
  body, html {overflow-x: hidden;overflow-y: auto !important;height: auto !important;}
  #hd{-webkit-backdrop-filter: blur(5px);backdrop-filter: blur(5px);background-color: #f5f5f580;}
  .main .main-swiper{height: 100vh;height: 100svh;overflow: hidden;}
  .main .swiper-wrapper {display: block !important;height: auto !important;}
  .main .swiper-slide {height: auto !important;min-height: 100vh;min-height: 100svh; display: block !important;}
  .main .swiper-pagination-bullet{width:8px;height:8px;}
  .main .swiper-pagination-vertical.swiper-pagination-bullets, 
  .main .swiper-vertical>.swiper-pagination-bullets{
    left: auto;
    right:0px;
  }
  .main .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
  .mian .swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{
    margin:20px 8px;
  }
  .main .sec_inner{height:auto;min-height:100vh;min-height: 100svh;padding:90px 60px;}
  .main .main_wr{flex-direction:column;align-items: flex-start;min-height:100vh;min-height: 100svh;}

  #sec-service .main_wr{height:auto;min-height:auto;}
  #sec-service .title_wr{top:20px;transform: translate(0, 0);}
  #sec-service .service_img{height:44vh;}
  #sec-service .service_item{justify-content:flex-start;align-items: flex-start;}
  #sec-service .service_txt{padding-top:90px;}
  /* #sec-service .more_btn a{left:57%;bottom:64px;} */
      

  #sec-service .title_wr{position:static;margin-bottom:30px;}
  #sec-service .service_item{flex-direction:column;}
  #sec-service .service_img{width:100%;height:44vh;}
  #sec-service .service_txt{width:100%;padding-top:30px;}
  #sec-service .slick-dotted.slick-slider{padding-bottom:40px;}
  #sec-service .slick-dots{width:100%;height: 30px;bottom:-30px;left:50%;transform:translate(-50%,0);}
  #sec-service .service_slide_btn{position:static;width:100%;margin:0 auto;}
  #sec-service .more_btn{margin:60px 0 14px;text-align:center;}
  #sec-service .more_btn a{position:static;}
  
  #sec-impact .main_wr,
  #sec-impact .sec_inner,
  #sec-impact{min-height:auto;}
  #sec-impact .main_impact_flex{flex-direction:column;gap: 70px;}
  #sec-impact .main_impact_flex .title_wr{width:100%;}
  #sec-impact .impact_icons{width:100%;}

  #sec-case .main_wr,
  #sec-case .sec_inner,
  #sec-case{min-height:auto;}
  #sec-partnership{min-height:auto;}
  #sec-partnership .sec_inner{min-height:auto;}
  #sec-partnership #ft{position:static;}
}


@media all and (max-width: 767px) {
  #sec-case .sec_title{flex-direction:row;gap:10px;margin-bottom:20px;}
}

@media all and (max-width:540px){
  .main .sec_inner{padding:90px 30px;}
  #sec-partnership .title_wr{width:100%;text-align:left;}
}

@media all and (max-width: 500px) {
  #sec-impact .main_impact_flex{gap:40px;}
  #sec-impact .impact_icons{grid-template-columns: repeat(1, 1fr);}
}