@charset "utf-8";

/************* sub-tab02  **************/
.sub-tab02{text-align:center; font-size:0; }
.sub-tab02 div{display:inline;}
.sub-tab02 div a{width:100%; font-size:24px;font-weight:700; padding:26px 40px; border-bottom:5px solid #ddd; position:relative;}
.sub-tab02 div a:hover,
.sub-tab02 div.curr a{color:#005baa; border-bottom:5px solid #005baa;}
.sub-tab02 div a:after{width:5px; height:5px; top:40px; left:0px; background:#ccc; border-radius:100%; content:""; display:block; position:absolute;}
.sub-tab02 div:first-child a:after{width:0;}

.page-tit .tab-area{margin-top:50px;}

@media (max-width:1140px){
	.sub-tab02 div a{font-size:22px;padding:22px 30px; border-bottom:3px solid #ddd;}
	.sub-tab02 div a:hover,
	.sub-tab02 div.curr a{border-bottom:3px solid #005baa;}
	.sub-tab02 div a:after{top:30px;}

}

@media (max-width:860px){
	.sub-tab02 div a{font-size:20px;}
}

@media (max-width:640px){
	.sub-tab02 div a{font-size:18px;padding:16px 20px; border-bottom:2px solid #ddd;}
	.sub-tab02 div a:hover,
	.sub-tab02 div.curr a{border-bottom:2px solid #005baa;}
	.sub-tab02 div a:after{width:3px; height:3px; top:24px;}
	.page-tit .tab-area{margin-top:30px; }
}

/* 모바일에서 2줄(3개씩) 배치 */
@media (max-width:479px){
  .sub-tab02{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;  /* 가운데 정렬 */
    gap:0;                   /* 필요하면 4~8px로 조절 가능 */
	margin-left:10px;
  }

  .sub-tab02 div{
    display:block;           /* flex 아이템으로 처리 */
    flex:0 0 33.3333%;       /* 3개씩 한 줄 */
  }

  .sub-tab02 div a{
    display:block;           /* width:90% 적용되게 */
    box-sizing:border-box;
    width:90%;
    font-size:16px;          /* 모바일 가독성 */
    padding:10px;
    border-bottom:1px solid #ddd; /* 얇게 */
  }
  .sub-tab02 div a:after{top:19px;left:-8px;}

  /* 점 장식이 줄바꿈에서 어긋나면 숨김 */
  sub-tab02 div a:after{display:none;}
  
  /* 점 장식을 두번째줄의 첫번째에서는 숨김 */
  .sub-tab02 div.dottNone a:after{width:0;}
}
/************* sub-tab02  끝  **************/


.service01-section{background:#f6fcff; padding:100px 0;}
.service01-section .service01-top{width:80%; margin:0 auto; height:480px;}
.service01-section .service01-top:after{clear:both; display:block; content:"";}
.service01-section .service01-top .img{width:57%; height:100%;float:left; background:url("../img/service_img01.jpg") no-repeat center; background-size:cover;}
.service01-section .service01-top .txt{width:43%; height:100%;float:left; background:#2c72d0; color:#fff; position:relative; text-align:center;}
.service01-section .service01-top .txt div{width:100%; top:50%; -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%); position:absolute;}
.service01-section .service01-top .txt div h1{font-size:36px; font-weight:800;}
.service01-section .service01-top .txt div p{font-size:20px; margin-top:30px;}
/**********************************/
/* 모바일: 이미지 위, 텍스트 아래 */
@media (max-width:479px){
  .service01-section{ padding:20px 0; }

  .service01-section .service01-top{
    width:92%;
    height:auto;                 /* 고정 높이 해제 */
    margin:0 auto;
  }

  /* 두 박스를 문서 흐름대로 쌓이게 */
  .service01-section .service01-top .img,
  .service01-section .service01-top .txt{
    float:none;                  /* float 해제 */
    width:100%;
    height:auto;
  }

  .service01-section .service01-top .img{
    min-height:220px;            /* 배경이미지 표시용 최소 높이 */
    background-position:center;
    background-size:cover;
  }

  .service01-section .service01-top .txt{
    text-align:center;
    padding:24px 16px;           /* 내부 여백으로 세로 중앙 대체 */
    position:relative;           /* 그대로 사용 */
    color:#fff;
    background:#2c72d0;
  }

  /* 절대배치/변형 제거: 자연스럽게 위에서 아래로 */
  .service01-section .service01-top .txt div{
    position:static;
    top:auto;
    transform:none;
    -ms-transform:none;
    -webkit-transform:none;
    -moz-transform:none;
    width:100%;
  }

  /* 모바일 타이포 살짝 축소 */
  .service01-section .service01-top .txt div h1{
    font-size:24px;
    font-weight:800;
    line-height:1.25;
  }
  .service01-section .service01-top .txt div p{
    font-size:16px;
    margin-top:12px;
    line-height:1.6;
  }
}
/*************  end  **************/


.service01-section .process{}
.service01-section .process:after{clear:both; display:block; content:"";}
.service01-section .process li{float:left; width:27%; height:360px; margin-bottom:30px;}
.service01-section .process li.arrow{width:6%;position:relative;}
.service01-section .process li.arrow i{width:100%; top:50%; -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%); position:absolute; text-align:center; font-size:28px; color:#525252;}
.service01-section .process li .box{height:360px; border:1px solid #2c72d0; border-radius:20px; background:#fff; padding:40px;position:relative; box-shadow:rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;}
.service01-section .process li .box h3{color:#2c72d0; font-size:20px; font-weight:900; border-bottom:1px solid #dedede; padding-bottom:20px;}
.service01-section .process li .box h1{font-size:24px; font-weight:800; margin:30px 0 20px;}
.service01-section .process li .box p{font-size:18px;}
.service01-section .process li .box span{position:absolute; right:40px; bottom:40px;}
.service01-section .process li .box span img{height:60px;}
/**********************************/
@media (max-width:860px){
  /* 부모를 플렉스로 두 줄 배치 */
  .service01-section .process{
    display:flex;
    flex-wrap:wrap;
    gap:16px; /* 카드 사이 간격 */
  }

  /* 리스트 아이템: 2개씩 한 줄 */
  .service01-section .process li{
    float:none;                 /* float 해제 */
    height:auto;
    /* gap을 고려해 정확히 2열 */
    flex:0 0 calc((100% - 16px)/2);
    margin:0;                   /* 간격은 gap으로 처리 */
  }

  /* 화살표는 숨김 */
  .service01-section .process li.arrow{
    display:none;
  }
}
@media (max-width:640px){
  
}
@media (max-width:479px){

  /* 리스트 아이템: 한 줄에 하나 */
  .service01-section .process li{
 	/* gap을 고려해 정확히 1열 */
    flex:0 0 calc((100% - 16px)/1);
    float:none;
    width:100%;
    height:auto;
    margin-bottom:16px;
  }

  /* 화살표 아이템은 모바일에서 숨김 */
  .service01-section .process li.arrow{
    display:none;
  }

  /* 박스: 자동 높이 + 모바일 여백/타이포 조정 */
  .service01-section .process li .box{
    height:auto;
    padding:24px 20px;
    border-radius:16px;
  }
  .service01-section .process li .box h3{
    font-size:18px;
    padding-bottom:14px;
  }
  .service01-section .process li .box h1{
    font-size:20px;
    margin:18px 0 12px;
  }
  .service01-section .process li .box p{
    font-size:15px;
    line-height:1.6;
  }

  /* 아이콘 위치를 자연스럽게 */
  .service01-section .process li .box span{
    position:static;            /* absolute 해제 */
    display:block;
    margin-top:16px;
    text-align:right;
  }
  .service01-section .process li .box span img{
    height:48px;
  }
}
/*************  End  **************/


/***********Y셔츠 찌든 때 다림질 힘드시죠?...부터 아래 끝까지 ***********/
/* ========== Base (모바일) : 이미지 위, 텍스트 아래 ========== */
.service-section{
  padding:40px 0 80px; /* 모바일 여백 최적화 */
}
.service-section.service-bg{ background:#f8f8f8; }

/* 레이아웃: 세로 스택 */
.service-section .service-area{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:20px;
  height:auto;               /* 고정 높이 해제 */
}
.service-section .service-area:after{
  content:""; display:block; clear:both; /* 과거 호환 */
}

/* 이미지 블록 */
.service-section .service-area .img{
  width:100%;
  height:240px;              /* 모바일 가시용 최소 높이 */
  float:none;                /* float 해제 */
  border-radius:16px;        /* 모바일에선 간단한 라운드 */
  background-position:center;
  background-size:cover;
}

/* 텍스트 블록 */
.service-section .cont-area{ overflow:hidden; }
.service-section .service-area .txt{
  width:100%;
  height:auto;
  float:none;                /* float 해제 */
  position:static;
  padding:4px 4px;           /* 내부 여백 */
  display:flex;
  align-items:center;
}
.service-section .service-area .txt .txt-area{
  position:static;           /* transform/absolute 제거 */
  top:auto; transform:none;
  width:100%;
}

/* 타이포 반응형 */
.service-section .service-area .txt .txt-area h1{
  font-size:clamp(22px, 5vw, 40px);
  line-height:1.2;
}
.service-section .service-area .txt .txt-area h1 span{
  color:#2c72d0; font-weight:800;
}
.service-section .service-area .txt .txt-area ul{
  margin-top:20px;
}
.service-section .service-area .txt .txt-area ul li{
  font-size:clamp(15px, 3.8vw, 22px);
  margin:10px 0;
  position:relative;
  padding-left:14px;
  line-height:1.6;
}
.service-section .service-area .txt .txt-area ul li:after{
  content:""; position:absolute; left:0; top:0.9em;
  width:4px; height:4px; background:#666; border-radius:50%;
}

/* 배경이미지 지정 */
.service-section.service02 .img{ background:url("../img/service_img02.jpg") no-repeat center / cover; }
.service-section.service03 .img{ background:url("../img/service_img03.jpg") no-repeat center / cover; }
.service-section.service04 .img{ background:url("../img/service_img04.jpg") no-repeat center / cover; }
.service-section.service05 .img{ background:url("../img/service_img05.jpg") no-repeat center / cover; }
.service-section.service06 .img{ background:url("../img/service_img06.jpg") no-repeat center / cover; }

/* ========== Tablet (≥768px): 여백·높이 확장 ========== */
@media (min-width:768px){
  .service-section{ padding:60px 0 90px; }
  .service-section .service-area .img{ height:320px; border-radius:24px; }
}

/* ========== Desktop (≥1024px): 좌우 2단 레이아웃 ========== */
@media (min-width:1024px){
  .service-section{ padding:0 0 100px; }

  .service-section .service-area{
    flex-direction:row;           /* 기본: 이미지 좌, 텍스트 우 */
    align-items:stretch;
    gap:0;
    min-height:500px;             /* 원래 높이 느낌 유지 */
  }

  /* 기본(이미지 왼쪽) */
  .service-section .service-area .img{
    width:52%;
    height:auto;
    border-radius:0 300px 300px 0;
  }
  .service-section .service-area .txt{
    width:42%;
    padding:0 40px;
  }

  /* service-bg일 때는 이미지가 오른쪽, 텍스트 왼쪽 */
  .service-section.service-bg .service-area{
    flex-direction:row-reverse;   /* 순서 뒤집기 */
  }
  .service-section.service-bg .service-area .img{
    border-radius:300px 0 0 300px;
  }

  /* 타이포 상한값 고정 */
  .service-section .service-area .txt .txt-area h1{ font-size:40px; }
  .service-section .service-area .txt .txt-area ul{ margin-top:40px; }
  .service-section .service-area .txt .txt-area ul li{ font-size:22px; margin:14px 0; }
}
/*************  End (Y셔츠 찌든 때 다림질 힘드시죠?...부터 아래 끝까지)  **************/


/*************  이런 세탁물은 하드엔드 케어에 맡겨주세요!  **************/
/* ========== Base (모바일) : 이미지 위 / 텍스트 아래 ========== */
.highend01-section{
  padding:40px 0 80px;
}

.highend01-section .service01-top{
  width:min(95%, 1200px);
  margin:0 auto;
  display:flex;
  flex-direction:column;      /* 세로 스택 */
  gap:20px;
  min-height:auto;            /* 고정 높이 제거 */
}

.highend01-section .service01-top:after{
  content:""; display:block; clear:both; /* 구 코드 호환 */
}

/* 이미지 */
.highend01-section .service01-top .img{
  width:100%;
  min-height:240px;           /* 모바일 최소 높이 */
  background:url("../img/highend_img01.jpg") no-repeat center / cover;
  float:none;                  /* float 해제 */
  border-radius:12px;          /* 선택: 살짝 라운드 */
}

/* 텍스트 */
.highend01-section .service01-top .txt{
  width:100%;
  color:#fff;
  background:#0FA59C;
  text-align:left;
  float:none;
  position:static;
  padding:24px 20px;          /* left:50px 대신 패딩으로 */
  display:flex;
  align-items:center;         /* 수직 가운데 */
}

.highend01-section .service01-top .txt div{
  position:static;
  top:auto; transform:none;   /* 절대배치 제거 */
  width:100%;
  max-width:760px;            /* 본문 폭 제한(가독성) */
}

.highend01-section .service01-top .txt div h1{
  font-size:clamp(22px, 5vw, 36px);
  font-weight:800;
  line-height:1.2;
}

.highend01-section .service01-top .txt div ul{
  margin-top:16px;            /* 모바일 간격 축소 */
}

.highend01-section .service01-top .txt div ul li{
  font-size:clamp(14px, 3.8vw, 20px);
  margin:10px 0;
  position:relative;
  padding-left:15px;
  letter-spacing:-0.05em;
  line-height:1.6;
}

.highend01-section .service01-top .txt div ul li:after{
  content:"";
  display:block;
  position:absolute;
  left:0;
  top:0.9em;                  /* 글줄 기준 점 위치 */
  width:4px; height:4px;
  background:#fff; border-radius:50%;
}

/* ========== ≥480px: 여백/높이 살짝 키우기 ========== */
@media (min-width:480px){
  .highend01-section{ padding:50px 0 90px; }
  .highend01-section .service01-top .img{ min-height:300px; border-radius:16px; }
}

/* ========== ≥768px: 타이포/여백 확장 ========== */
@media (min-width:768px){
  .highend01-section .service01-top .txt{ padding:32px 28px; }
  .highend01-section .service01-top .txt div ul{ margin-top:22px; }
}

/* ========== ≥1024px: 데스크톱 2단(57:43) ========== */
@media (min-width:1024px){
  .highend01-section{ padding:0 0 100px; }

  .highend01-section .service01-top{
    flex-direction:row;         /* 좌우 배치 */
    align-items:stretch;
    gap:0;
    min-height:540px;           /* 원래 높이 느낌 유지 */
	width:80%;
  }

  .highend01-section .service01-top .img{
    width:57%;
    min-height:auto;
    border-radius:0;            /* 원 디자인 유지 원하면 0 */
  }

  .highend01-section .service01-top .txt{
    width:43%;
    padding:0 40px 0 50px;      /* 기존 left:50px 반영 */
  }

  .highend01-section .service01-top .txt div ul{
    margin-top:30px;
  }
/* ========== ≥1440px ========== */

}
highend01-section{padding:0 0 100px;}
highend01-section .service01-top{width:80%;}
highend01-section .service01-top:after{clear:both; display:block; content:"";}
highend01-section .service01-top .img{width:57%; height:100%;float:left; background:url("../img/highend_img01.jpg") no-repeat center; background-size:cover;}
highend01-section .service01-top .txt{width:43%; height:100%;float:left; background:#0FA59C; color:#fff; position:relative; text-align:left;}
highend01-section .service01-top .txt div{width:100%; top:50%; left:50px; -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%); position:absolute;}
highend01-section .service01-top .txt div h1{font-size:36px; font-weight:800;}
highend01-section .service01-top .txt div ul{margin-top:30px;}
highend01-section .service01-top .txt div ul li{font-size:20px; margin:14px 0; position:relative; padding-left:15px; letter-spacing:-0.05em;}
highend01-section .service01-top .txt div ul li:after{width:4px; height:4px; top:12px; left:0px; background:#fff; border-radius:50px; content:""; display:block; position:absolute;}

/*************  End (이런 세탁물은 하드엔드 케어에 맡겨주세요!)  **************/


/*************  케어센터  **************/
.highend02-section{background:url("../img/highend02_bg.jpg") no-repeat center; background-size:cover; padding:50px 0 100px;}
.highend02-section .sub-page-tit{color:#fff;}
.highend02-section .sub-page-tit h1 span{font-weight:500;}
.highend02-section .highend02-area{text-align:center;}
.highend02-section .highend02-area h1 img{width:70%;}
.highend02-section .highend02-area p{margin-top:100px;}
/*************  End (케어센터)  **************/


/*************  하이엔드 케어의 꼼꼼 세탁 프로세스  **************/
/* ===== Base (모바일) : 이미지 위 / 텍스트 아래 ===== */
.highend03-section{
  padding:40px 0 80px;
}

.highend03-section .cont-area{ overflow:hidden; }

/* 각 프로세스 블록 */
.highend03-section .process-area{
  position:relative;
  display:flex;
  flex-direction:column;     /* 세로 스택 */
  gap:20px;
  min-height:auto;           /* 고정 높이 제거 */
  margin-bottom:40px;        /* 모바일 간격 축소 */
}
.highend03-section .process-area:after{
  content:""; display:block; clear:both;   /* 구 코드 호환 */
}

/* 이미지 */
.highend03-section .process-area .img{
  width:100%;
  min-height:260px;          /* 모바일 최소 높이 */
  background-position:center;
  background-size:cover;
  float:none;                /* float 제거 */
  border-radius:14px;        /* 모바일은 소프트 라운드 */
}

/* 텍스트 */
.highend03-section .process-area .txt{
  width:100%;
  height:auto;
  float:none;
  position:static;
  padding:0 16px;            /* 내부 여백 */
  display:flex;
  align-items:center;
}
.highend03-section .process-area .txt .txt-area{
  position:static;           /* 절대배치 제거 */
  top:auto;
  transform:none;
  width:100%;
  max-width:820px;           /* 가독성 폭 제한 */
  margin:0 auto;
}

/* 타이포 반응형 */
.highend03-section .process-area .txt .txt-area h1{
  font-size:clamp(22px, 5.2vw, 36px);
  font-weight:800;
  line-height:1.2;
}
.highend03-section .process-area .txt .txt-area p{
  margin-top:16px;           /* 모바일 간격 축소 */
  font-size:clamp(15px, 3.8vw, 22px);
  line-height:1.7;
  color:#666;
}

/* 배경 이미지 지정 (원본 유지) */
.highend03-section .process01 .img{ background:url("../img/highend03_img01.jpg") no-repeat center / cover; }
.highend03-section .process02 .img{ background:url("../img/highend03_img02.jpg") no-repeat center / cover; }
.highend03-section .process03 .img{ background:url("../img/highend03_img03.jpg") no-repeat center / cover; }
.highend03-section .process04 .img{ background:url("../img/highend03_img04.jpg") no-repeat center / cover; }
.highend03-section .process05 .img{ background:url("../img/highend03_img05.jpg") no-repeat center / cover; }
.highend03-section .process06 .img{ background:url("../img/highend03_img06.jpg") no-repeat center / cover; }
.highend03-section .process07 .img{ background:url("../img/highend03_img07.jpg") no-repeat center / cover; }

/* ===== ≥480px : 여백/높이 보강 ===== */
@media (min-width:480px){
  .highend03-section .process-area{ margin-bottom:50px; }
  .highend03-section .process-area .img{ min-height:320px; border-radius:18px; }
}

/* ===== ≥768px : 타이포/여백 확장 ===== */
@media (min-width:768px){
  .highend03-section .process-area .txt{ padding:0 24px; }
  .highend03-section .process-area .txt .txt-area p{ margin-top:22px; }
}

/* ===== ≥1024px : 좌우 2단(52:42), 라운드 방향 반영 ===== */
@media (min-width:1024px){
  .highend03-section{ padding:0 0 100px; }

  .highend03-section .process-area{
    flex-direction:row;      /* 기본: 이미지 좌, 텍스트 우 */
    align-items:stretch;
    gap:0;
    min-height:400px;        /* 원래 높이 느낌 */
    margin-bottom:60px;      /* 원본 유지 */
  }

  /* 기본(이미지 좌) */
  .highend03-section .process-area .img{
    width:52%;
    min-height:auto;
    border-radius:0 300px 300px 0;
  }
  .highend03-section .process-area .txt{
    width:42%;
    padding:0 40px;
  }

  /* .img-r 변형(이미지 우, 텍스트 좌) */
  .highend03-section .process-area.img-r{
    flex-direction:row-reverse;
  }
  .highend03-section .process-area.img-r .img{
    border-radius:300px 0 0 300px;
  }
}
/* ===== ≤860px : 카드형 스타일(요청 반영) ===== */
@media (max-width:860px){
  .highend03-section .process-area{
    background:#fff;
    border-radius:16px;
    box-shadow:rgba(0, 0, 0, 0.08) 0 6px 18px;
    padding:16px 12px 20px;
    margin-bottom:28px;      /* 카드 간격 */
    overflow:hidden;         /* 내부 라운드 일치 */
  }
  .highend03-section .process-area .img{
    min-height:240px;
    border-radius:12px;
  }
  .highend03-section .process-area .txt{
    padding:0 8px;
  }
}

/* ===== ≥1440px : 타이포 상한 확대(요청 반영) ===== */
@media (min-width:1440px){
  .highend03-section .process-area{ min-height:460px; }
  .highend03-section .process-area .txt .txt-area h1{ font-size:42px; }
  .highend03-section .process-area .txt .txt-area p{
    font-size:24px;
    margin-top:34px;
  }
}
/*************  End (하이엔드 케어의 꼼꼼 세탁 프로세스)  **************/


/*************  세탁물 보관방법  **************/
.highend04-section{background:#0A7BB1; padding:0 0 100px;}
.highend04-section .sub-page-tit{color:#fff;}
.highend04-section .sub-page-tit ul{width:80%; margin:40px auto;}
.highend04-section .sub-page-tit ul li{font-size:24px; margin:10px 0;}
.highend04-section .sub-page-tit ul li i{margin-right:7px; font-weight:900;}
.highend04-section .photo-area{padding:0 50px 50px 50px; background:#fff;}
.highend04-section .photo-area .sub-page-tit{color:#333;}
.highend04-section .photo-area .img{text-align:center;}
@media (max-width:480px){
	.highend04-section .sub-page-tit ul{width:100%;}
	.highend04-section .sub-page-tit ul li{font-size:18px;}
	.highend04-section .photo-area{padding:10px; }
}
/*************  End (세탁물 보관방법)  **************/


/*************  브랜드  **************/
.highend05-section{padding:50px 0 100px; background:#f8f8f8;}
.highend05-section ul{}
.highend05-section ul:after{clear:both; display:block; content:"";}
.highend05-section ul li{width:20%; float:left; padding:10px;}
@media (max-width:480px){
.highend05-section{padding:50px 0 70px;}
.highend05-section ul li{width:33.3333%; padding:5px;}
}
/*************  End (브랜드)  **************/


/*************  이런 신발은 하이엔드케어!  **************/
.highend06-section{padding:0 0 100px;}
.highend06-section .img img{border-radius:20px;}
.highend06-section ul{margin-top:40px;}
.highend06-section ul li{padding:20px 0;}
.highend06-section ul li .box{border:1px solid #dedede; border-radius:20px; background:#f8f8f8; text-align:center; box-shadow:rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; padding:50px;}
.highend06-section ul li .box h1{font-size:28px; font-weight:800; color:#0FA59C; margin-bottom:30px;}
.highend06-section ul li .box p{font-size:20px; color:#525252; margin:10px 0;}

@media (max-width:480px){

.highend06-section ul li .box h1{
  font-size:clamp(20px, 5vw, 28px);
  margin-bottom:16px;
  line-height:1.25;
}

.highend06-section ul li .box p{
  font-size:clamp(14px, 3.8vw, 20px);
  margin:8px 0;
  line-height:1.7;
}

}
/*************  End (이런 신발은 하이엔드케어!)  **************/