@import "base.css"; @import "common.css"; /* section_01 */
#section_01 .visual_wrap { position: relative;width: 100%;  height: 100vh; overflow: hidden; } 
#section_01 .visual_wrap .video_wrap { height: 100%; width: 100%; } 
#section_01 .visual_wrap .video_wrap video { width: 100%; height: 100%; object-fit: cover; } 
#section_01 .visual_wrap .text_wrap { position: absolute; left: 0; bottom: 150px; } 
#section_01 .visual_wrap .text_wrap span { display: inline-block; color: #fff; font-size: clamp(18px, 2vw, 24px); margin-bottom: 50px; font-weight: 500; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); } 
#section_01 .visual_wrap .text_wrap .text_01,
#section_01 .visual_wrap .text_wrap .text_02 { color: #fff; font-size: clamp(24px, 3vw, 40px); font-weight: 600; padding-bottom: 5px; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); opacity: 0; transform: translateY(40px); animation: slideUp 0.7s ease-in-out forwards; } 
#section_01 .visual_wrap .text_wrap .text_02 { animation-delay: 0.3s; } 

/* 텍스트 애니메이션 */
@keyframes slideUp { form { opacity: 0; transform: translateY(40px); } 
 to { opacity: 1; transform: translateY(0); } 
 }

/* section_02 */
#section_02 { margin-top: clamp(50px, 17vw, 150px); } 
#section_02 .Company_flex_wrap { display: flex; flex-wrap: wrap; justify-content: space-between; } 
#section_02 .Company_flex_wrap .left .shortcut_business { display: inline-block; margin-top: clamp(30px, 5vw, 60px); } 

#section_02 .Company_flex_wrap .right { width: 704px; position: relative; } 
#section_02 .Company_flex_wrap .right .images_flex_wrap { min-height: 631px; position: relative; perspective: 800px; /* 미세 3D 깊이감 */ } 

#section_02 .Company_flex_wrap .right .img_box { position: absolute; display: inline-block; border-radius: 10px; overflow: hidden; /* ===== 애니메이션 기본 상태 ===== */
 opacity: 0; transform: translateY(24px) scale(.98); filter: saturate(.9); will-change: transform, opacity, box-shadow, filter; transition:
 transform .35s ease,
 box-shadow .35s ease,
 filter .35s ease; box-shadow: 0 8px 24px -12px rgba(0,0,0,.18); } 

#section_02 .Company_flex_wrap .right .img_box img { display: block; width: 100%; height: auto; transform: scale(1.0); transition: transform .45s ease; will-change: transform; object-fit: cover; } 

/* ===== 위치별 개별 스타일 ===== */
#section_02 .Company_flex_wrap .right .img_box:nth-of-type(1) { left: 0; top: 0; border-radius: 50px 10px 10px 10px; } 
#section_02 .Company_flex_wrap .right .img_box:nth-of-type(2) { right: 0; top: 0; } 
#section_02 .Company_flex_wrap .right .img_box:nth-of-type(3) { left: 0; bottom: 0; } 
#section_02 .Company_flex_wrap .right .img_box:nth-of-type(4) { right: 0; bottom: 0; border-radius: 10px 10px 50px 10px; } 

/* ===== 스크롤 진입 시: 계단식 등장 (느리게) ===== */
#section_02 .Company_flex_wrap .right .images_flex_wrap.inview .img_box { animation: card-in 1.3s cubic-bezier(.2,.7,.2,1) forwards; /* 0.7s → 1.2s */ } 

#section_02 .Company_flex_wrap .right .images_flex_wrap.inview .img_box:nth-of-type(1) { animation-delay: .00s; } 
#section_02 .Company_flex_wrap .right .images_flex_wrap.inview .img_box:nth-of-type(2) { animation-delay: .20s; } /* 0.08s → 0.20s */
#section_02 .Company_flex_wrap .right .images_flex_wrap.inview .img_box:nth-of-type(3) { animation-delay: .40s; } /* 0.16s → 0.40s */
#section_02 .Company_flex_wrap .right .images_flex_wrap.inview .img_box:nth-of-type(4) { animation-delay: .60s; } /* 0.24s → 0.60s */


/* ===== 키프레임 ===== */
@keyframes card-in { 
 0% { opacity: 0; transform: translateY(24px) scale(.98) rotateX(2deg); filter: saturate(.9); } 
 100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0); filter: saturate(1); } 
 }

/* ===== 호버: 미세 리프트 + 소프트 줌 ===== */
#section_02 .Company_flex_wrap .right .img_box:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 14px 28px -12px rgba(0,0,0,.24); } 
#section_02 .Company_flex_wrap .right .img_box:hover img { transform: scale(1.04); } 

/* ===== 광택(sheen) 스윕 ===== */
#section_02 .Company_flex_wrap .right .img_box::after { content:""; position: absolute; inset: 0; background: linear-gradient(120deg,
 transparent 0%,
 rgba(255,255,255,.18) 40%,
 rgba(255,255,255,0) 60%,
 transparent 100%); transform: translateX(-120%); transition: transform 1s ease; pointer-events: none; } 
#section_02 .Company_flex_wrap .right .img_box:hover::after { transform: translateX(120%); } 

/* ===== 모션 최소화 선호 시 ===== */
@media (prefers-reduced-motion: reduce){
 #section_02 .Company_flex_wrap .right .img_box,
 #section_02 .Company_flex_wrap .right .img_box img { transition: none; } 
 #section_02 .Company_flex_wrap .right .images_flex_wrap.inview .img_box { animation: none; opacity: 1; transform: none; } 
 }


 @media (max-width:1200px){
 #section_02 .Company_flex_wrap .right { width: 540px; } 
 #section_02 .Company_flex_wrap .right .images_flex_wrap { min-height: 498px; } 
 #section_02 .Company_flex_wrap .right .img_box { width: 49%; } 
 #section_02 .Company_flex_wrap .right .img_box:nth-of-type(1) { aspect-ratio: 378 / 294; } 
 #section_02 .Company_flex_wrap .right .img_box:nth-of-type(2) { aspect-ratio: 327 / 346; } 
 #section_02 .Company_flex_wrap .right .img_box:nth-of-type(3) { aspect-ratio: 318 / 317; } 
 #section_02 .Company_flex_wrap .right .img_box:nth-of-type(4) { aspect-ratio: 367 / 264; } 
 }

/* 940px 이하에서도 좌/우 나란히 유지하며 비율 축소 */
@media (max-width: 940px) {
  /* 줄바꿈 금지 */
  #section_02 .Company_flex_wrap { 
    flex-wrap: nowrap;
    gap: 16px;               /* 필요 시 간격을 살짝 줄임 */
    align-items: center;
  }

  /* 좌측 텍스트 영역은 유연하게 줄어듦 */
  #section_02 .Company_flex_wrap .left {
    flex: 1 1 0; 
    min-width: 0;            /* 내용 때문에 줄바꿈 방지용 */
  }

  /* 우측 이미지 영역: 고정폭 해제 → 유동폭 + 최대치 제한 */
  #section_02 .Company_flex_wrap .right {
    width: auto;             
    flex: 0 1 min(300px, 38%);  /* 최대 704px, 아니면 컨테이너의 절반 정도 */
    min-width: 100px;           /* 너무 작아지지 않게 하한 설정(원하면 조절) */
  }

  /* 전체 블록의 세로 비율 유지(가로가 줄면 세로도 비례 축소) */
  #section_02 .Company_flex_wrap .right .images_flex_wrap {
    min-height: 0;             
    height: auto;
    aspect-ratio: 704 / 631;   /* 기존 704×631 비율 유지 */
  }

  /* 내부 이미지 박스가 컨테이너 크기에 맞춰 자연 축소되도록 */
  #section_02 .Company_flex_wrap .right .img_box {
    transform: none;           /* 진입 오프셋 제거(선택) */
  }
  #section_02 .Company_flex_wrap .right .img_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@media (max-width: 600px) {
    #section_02 .Company_flex_wrap .right{display: none;}
}

/* @media (max-width: 700px) {
    #section_02 .Company_flex_wrap .right .images_flex_wrap{aspect-ratio: auto;}
#section_02 .Company_flex_wrap .right .images_flex_wrap.inview .img_box:nth-of-type(1),
#section_02 .Company_flex_wrap .right .images_flex_wrap.inview .img_box:nth-of-type(2),
#section_02 .Company_flex_wrap .right .images_flex_wrap.inview .img_box:nth-of-type(3){display: none;}
#section_02 .Company_flex_wrap .right .images_flex_wrap.inview .img_box:nth-of-type(4){position: unset;}
} */



/* section_03 */
#section_03 { margin-top: clamp(50px, 17vw, 150px); } 
/* ===== Certifications layout ===== */
#section_03 .certification_flex_wrap { display: flex; gap: clamp(24px, 4vw, 56px); align-items: flex-start; /* 서로 높이 상속(늘어남) 방지 */ } 

/* --- left column --- */
#section_03 .certification_flex_wrap .left.vertical { flex: 0 0 clamp(220px, 24vw, 320px); display: flex; flex-direction: column; gap: 14px; justify-content: space-between; height: 349px; } 

#section_03 .certification_flex_wrap .left h2 { font-size: clamp(24px, 3vw, 40px); line-height: 1.2; margin: 0 0 .5rem; } 

/* fraction pagination 영역 */
#section_03 .certification_flex_wrap .left .paging { display: inline-flex; align-items: center; gap: .5rem; font-size: clamp(14px, 1.5vw, 16px); color: #1f2937; user-select: none; } 
#section_03 .certification_flex_wrap .left .paging .swiper-pagination-current { font-weight: 700; } 
#section_03 .certification_flex_wrap .left .paging .sep { opacity: .35; padding: 0 .25rem; } 

/* 좌우 버튼 */
#section_03 .certification_flex_wrap .left .nav_btns .cert-prev { width: 12px; height: 21px; background: url(../images/common/mini_prev.png) no-repeat 0 0; } 
#section_03 .certification_flex_wrap .left .nav_btns .cert-next { width: 12px; height: 21px; background: url(../images/common/mini_next.png) no-repeat 0 0; } 
/* nav 버튼 줄 레이아웃(페이징 포함) */
#section_03 .certification_flex_wrap .left .nav_btns { display:flex; align-items:center; gap:15px; } 

/* 페이징 컨테이너 */
#section_03 .certification_flex_wrap .left .nav_btns .paging { display:flex; align-items:center; gap:15px; min-width: 180px; /* 진행바가 너무 작지 않게 */ } 

/* 현재/총 개수 숫자 (JS가 주입) */
#section_03 .certification_flex_wrap .left .nav_btns .paging .current,
#section_03 .certification_flex_wrap .left .nav_btns .paging .total { font-size: clamp(14px, 1.5vw, 16px); line-height:1; color:#0b0b0b; } 

/* 진행 라인(회색 바탕) */
#section_03 .certification_flex_wrap .left .nav_btns .paging .art_progress_line { position:relative; flex:1 1 auto; height:4px; background:#e5e7eb; /* 연한 회색 */
 border-radius:999px; overflow:hidden; } 

/* 진행막대(검은 라인) */
#section_03 .certification_flex_wrap .left .nav_btns .paging .art_progress { position:absolute; left:0; top:0; bottom:0; width:0%; background:#0b0b0b; border-radius:999px; transition:width .35s ease; } 

/* --- right column / slider --- */
#section_03 .certification_flex_wrap .right { flex: 1 1 auto; min-width: 0; /* Swiper overflow 깨짐 방지 */ } 

/* Swiper 기본 */
#section_03 .certification_flex_wrap .right .cert-swiper { overflow: hidden; } 
#section_03 .certification_flex_wrap .right .cert-swiper .swiper-wrapper { align-items: stretch; /* 슬라이드 높이 강제 동일화 방지 */ padding-top: 30px; } 
#section_03 .certification_flex_wrap .right .cert-swiper .swiper-slide { height: auto; /* 콘텐츠 높이대로 */
 width: 268px !important; } 
 #section_03 .certification_flex_wrap .right .cert-swiper .swiper-slide:hover { transform: translateY(-30px); transition: 0.3s ease-in; } 

/* 인증 카드 (프레임+그림자) */
#section_03 .certification_flex_wrap .right .cert_card { display: flex; flex-direction: column; gap: 30px; align-items: center; text-align: center; } 

#section_03 .certification_flex_wrap .right .cert_card > img { width: 100%; height: auto; display: block; box-shadow: 2.7px 13.7px 29px rgba(0, 0, 0, 0.28); } 
#section_03 .certification_flex_wrap .right .cert_card > figcaption { font-size: clamp(15px, 1.5vw, 20px); font-weight: 700; color: #0f172a; } 

/* 반응형 */

@media (max-width: 790px){
    #section_03{ margin-top: 0;   padding-top: clamp(50px, 17vw, 150px); overflow: hidden;}
 #section_03 .certification_flex_wrap { flex-direction: column; } 
 #section_03 .certification_flex_wrap .left.vertical{flex: none; width: 100%; flex-direction: row; height: auto;}
 #section_03 .certification_flex_wrap .left .nav_btns .cert-prev,#section_03 .certification_flex_wrap .left .nav_btns .cert-next{display: block !important;}
 }

@media (max-width: 500px){
#section_03 .certification_flex_wrap .left.vertical{flex-direction: column;}
#section_03 .certification_flex_wrap .left .nav_btns{ justify-content: flex-end;}
#section_03 .certification_flex_wrap .right .cert-swiper .swiper-slide{width: 200px !important;}
}
 
/* 컨테이너/슬라이더 폭 명시 (초기 0폭 계산 방지) */
#section_03 .certification_flex_wrap .right,
#section_03 .certification_flex_wrap .right .cert-swiper {
  width: 100%;
  position: relative;
  z-index: 1;
}

/* 스와이프 허용 + 이미지가 터치 가로막지 않게 */
#section_03 .certification_flex_wrap .right .cert-swiper { touch-action: pan-y; }
#section_03 .certification_flex_wrap .right .cert-swiper img {
  -webkit-user-drag: none; user-select: none; pointer-events: none; display: block;
}

/* 페이징 라인은 터치 막지 않게 */
#section_03 .certification_flex_wrap .left .nav_btns .paging,
#section_03 .certification_flex_wrap .left .nav_btns .paging * { pointer-events: none; }

/* 내비게이션 버튼은 클릭 가능 */
#section_03 .certification_flex_wrap .left .nav_btns .cert-prev,
#section_03 .certification_flex_wrap .left .nav_btns .cert-next { pointer-events: auto; }

/* slidesPerView:auto 안전망 */
#section_03 .certification_flex_wrap .right .cert-swiper .swiper-slide { flex-shrink: 0; }


/* section_04 */
/* ====== 기존 스타일 유지 + 약간 보강 ====== */
#section_04 { margin-top: clamp(50px, 17vw, 150px); text-align: center; } 
#section_04 .subtitle_04 { margin: 0 0 clamp(40px, 3.5vw, 60px); word-break: keep-all;} 
#section_04 .Company_introduction_flex { display: flex; flex-wrap: wrap; gap: 20px; } 
#section_04 .Company_introduction_flex li { width: calc((100% - 2.5rem) / 3); height: 100%; aspect-ratio: 466 / 500; border-radius: 20px; overflow: hidden; position: relative; text-align: left; box-shadow:5px 5px 10px 0px rgba(0, 0, 0, 0.25); /* 호버/등장용 기본값 */
 background-size: cover; background-position: center; transform: translateY(16px) scale(.98); opacity: 0; transition:
 transform .8s ease, /* 살짝 천천히 */
 box-shadow .6s ease,
 background-size 1.1s ease-in-out, /* 확대 속도 느리고 부드럽게 */
 opacity .6s ease; will-change: transform, box-shadow, opacity, background-size; cursor: pointer; } 
#section_04 .Company_introduction_flex li .text_wrap { position: absolute; bottom: 93px; } 
#section_04 .Company_introduction_flex li::before { content: ""; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.35); clip-path: circle(0% at 100% 100%); /* 초기엔 0% (안 보임) */
 transition: clip-path 0.8s ease-in-out, background-color .6s ease; z-index: -2;} 
#section_04 .Company_introduction_flex li::after { content: ''; position: absolute; right: 30px; bottom: 30px; background: url(../images/common/diagonal-arrow.png) no-repeat; width: 33px; height: 33px; z-index: -1;} 
#section_04 .Company_introduction_flex li:nth-of-type(1) { background: url(../images/main/about_us.png) no-repeat; } 
#section_04 .Company_introduction_flex li:nth-of-type(2) { background: url(../images/main/history.png) no-repeat; } 
#section_04 .Company_introduction_flex li:nth-of-type(3) { background: url(../images/main/location.png) no-repeat; } 
#section_04 .Company_introduction_flex li span { color: #fff; position: relative; z-index: 1; font-size: clamp(18px, 2.3vw, 28px); font-weight: 600; margin: 0 0 25px; display: inline-block; } 
#section_04 .Company_introduction_flex li p { color: #fff; position: relative; z-index: 1; font-size: clamp(14px, 1.5vw, 18px); font-weight:500; text-align: left; word-break: auto-phrase; width: 90%; } 
#section_04 .Company_introduction_flex li a{width: 100%; height: 100%; display: block; padding: 30px; }
/* ====== 호버 스타일 ====== */
/* 살짝 떠오르며 배경 줌 + 오버레이 미묘하게 옅어지고 화살표가 살짝 이동/강조 */

#section_04 .Company_introduction_flex li:hover::before { background-color: #006a67; clip-path: circle(40% at 100% 100%); } 


/* ====== 스크롤 진입 시: 계단식 등장 ====== */
#section_04 .Company_introduction_flex.inview li { animation: sec4-card-in 1s cubic-bezier(.2,.7,.2,1) forwards; } 

#section_04 .Company_introduction_flex.inview li:nth-of-type(1) { animation-delay: .00s; } 
#section_04 .Company_introduction_flex.inview li:nth-of-type(2) { animation-delay: .18s; } 
#section_04 .Company_introduction_flex.inview li:nth-of-type(3) { animation-delay: .36s; } 
/* 3개 그리드 기준. 항목이 더 생기면 4,5… 이어서 추가 */

@keyframes sec4-card-in { 
 0% { opacity: 0; transform: translateY(16px) scale(.98); } 
 100% { opacity: 1; transform: translateY(0) scale(1); } 
 }

/* ====== 모션 최소화 선호 ====== */
@media (prefers-reduced-motion: reduce){
 #section_04 .Company_introduction_flex li { transition: none; animation: none; opacity: 1; transform: none; } 
 }

 @media (max-width: 960px){
 #section_04 .Company_introduction_flex { gap: 10px; } 
 #section_04 .Company_introduction_flex li { padding: 20px; width: calc((100% - 20px) / 3); } 
 #section_04 .Company_introduction_flex li .text_wrap { bottom: 65px; } 
 #section_04 .Company_introduction_flex li::after { background-size: 100%; width: 25px; height: 25px; right: 20px; bottom: 20px; } 
 }

 @media (max-width: 790px){
 #section_04 .Company_introduction_flex li { width: 100%; aspect-ratio: 5 / 1; } 
 #section_04 .Company_introduction_flex li:nth-of-type(1),
 #section_04 .Company_introduction_flex li:nth-of-type(2),
 #section_04 .Company_introduction_flex li:nth-of-type(3) { background-size: cover; background-position: 0 center; } 
 #section_04 .Company_introduction_flex li .text_wrap { position: unset; } 
 }

  @media (max-width: 600px){
 #section_04 .Company_introduction_flex li {   aspect-ratio: 7 / 3; } 
  }

/* section_05 */
#section_05 { margin-top: clamp(50px, 17vw, 150px); } 
#section_05 .business_flex_wrap { display: flex; gap: 40px; } 
#section_05 .business_flex_wrap:nth-of-type(2),#section_05 .business_flex_wrap:nth-of-type(4) { padding:clamp(20px, 3.5vw, 60px) 0; } 
#section_05 .business_flex_wrap .contents_area { flex: 1 0 0; padding: 40px 0; position: relative; } 
#section_05 .business_flex_wrap .contents_area:nth-of-type(1),#section_05 .business_flex_wrap .contents_area:nth-of-type(3) { text-align: right; } 
#section_05 .business_flex_wrap .contents_area:nth-of-type(2),#section_05 .business_flex_wrap .contents_area:nth-of-type(4) { text-align: left; } 
#section_05 .business_flex_wrap .contents_area:nth-of-type(2) .keyword_flex ,#section_05 .business_flex_wrap .contents_area:nth-of-type(4) .keyword_flex { left: 0; } 
#section_05 .business_flex_wrap .contents_area p:first-of-type { font-weight: 500; } 
#section_05 .business_flex_wrap .contents_area p:last-of-type { margin: 0 0 clamp(20px, 2vw, 60px); line-height: 1.2; } 
#section_05 .business_flex_wrap .contents_area .keyword_flex { display: flex; gap: 10px; position: absolute; bottom: 40px; right: 0; } 
#section_05 .business_flex_wrap .contents_area .keyword_flex li { border-radius: 18px; background-color: #eee; color: #666; padding: 10px 15px; box-shadow:0px 1px 5px 0px rgba(0, 0, 0, 0.1); display: none; } 

#section_05 .business_flex_wrap .img_area { overflow: hidden; border-radius: 20px; flex: 1 0 0; box-shadow:5px 5px 10px 0px rgba(0, 0, 0, 0.25); /* 애니메이션 초기 상태 */
 opacity: 0; transform: translateX(80%); /* 기본은 오른쪽에서 들어옴 */
 will-change: transform, opacity; } 
/* 2번째/4번째 랩은 왼쪽에서 들어오도록 초기값 변경 */
#section_05 .business_flex_wrap:nth-of-type(2) .img_area,
#section_05 .business_flex_wrap:nth-of-type(4) .img_area { transform: translateX(-80%); } 

/* 뷰포트 인뷰 시 애니메이션 실행 */
#section_05 .business_flex_wrap .img_area.inview { animation: img_right .9s ease-out forwards; } 
#section_05 .business_flex_wrap:nth-of-type(2) .img_area.inview,
#section_05 .business_flex_wrap:nth-of-type(4) .img_area.inview { animation: img_left .9s ease-out forwards; } 

/* 키프레임 */

@keyframes img_right { 
 0% { opacity: 0; transform: translateX(80%); } 
 100% { opacity: 1; transform: translateX(0); } 
 }
@keyframes img_left { 
 0% { opacity: 0; transform: translateX(-80%); } 
 100% { opacity: 1; transform: translateX(0); } 
 }

/* 모션 최소화 선호 대응 */
@media (prefers-reduced-motion: reduce){
 #section_05 .business_flex_wrap .img_area { animation: none !important; transform: none !important; opacity: 1 !important; } 
 }

 @media (max-width: 790px){
 #section_05 .business_flex_wrap { flex-direction: column;gap: 0; padding: 30px 0; border-bottom: 1px solid #eee;} 
   #section_05 .business_flex_wrap:nth-of-type(1){padding: 0 0 30px;}
   #section_05 .business_flex_wrap:nth-of-type(2){padding: 30px 0;}
   #section_05 .business_flex_wrap:nth-of-type(3){padding: 30px 0;}
   #section_05 .business_flex_wrap:nth-of-type(4){padding: 30px 0 0; border-bottom: none;}

 #section_05 .business_flex_wrap .img_area { flex:none; order: 1; aspect-ratio: 7 / 3;transition: none !important;  transition: none !important;   transform: none !important; opacity: 1 !important;} 
 #section_05 .business_flex_wrap .img_area img { width: 101%; height: 100%; object-fit: cover; object-position: center top; } 
 #section_05 .business_flex_wrap .contents_area { order: 2; padding: 30px 0 0;} 
 #section_05 .business_flex_wrap .contents_area .keyword_flex { flex-wrap: wrap; } 
 #section_05 .business_flex_wrap .contents_area .keyword_flex li { font-size: 14px; } 
 #section_05 .business_flex_wrap .contents_area:nth-of-type(1), #section_05 .business_flex_wrap .contents_area:nth-of-type(3){text-align: left;}
 #section_05 .business_flex_wrap .contents_area .keyword_flex{position: unset; margin:  clamp(20px, 2vw, 60px) 0 0;}
 }

/* section_06 */
#section_06 { margin-top: clamp(50px, 17vw, 150px); padding: clamp(30px, 5vw, 90px) 0; background: url(../images/main/section_06.jpg) no-repeat 0 0 / cover; } 
#section_06 .customer_service_flex { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; } 
#section_06 .customer_service_flex .left { display: flex; gap: 30px; align-items: center; } 
#section_06 .customer_service_flex .left .title { font-size: clamp(24px, 4vw, 48px); color: #fff; font-weight: 600; } 
#section_06 .customer_service_flex .left h6 { color: #fff; margin: 0 0 0; } 
#section_06 .customer_service_flex .right span { color: #fff; display: inline-block; } 
#section_06 .customer_service_flex .right span:first-of-type { margin-right: 30px; } 

 @media (max-width: 460px){
    #section_06 .customer_service_flex .left {flex-direction:column; gap: 5px; align-items: baseline;}

 }