@font-face {
    font-family: 'Eoe_Zno_EB';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/Eoe_Zno_EB.woff') format('woff');} 

    
    




body, .main-container{
  margin : 0 ; 
  padding : 0 ; 
}


.main-container {
  position : relative ; 
  
}

.main-container,
.main-container * {
}

input,
select,
textarea,
button {
  outline: 0;
} 

.main-container {
  position: relative;
  width: 100% ; 
  max-width: 1920px ; 
  margin : 0 auto ; 
  height: auto; 
  background: #ffffff;
  overflow: hidden;
  padding-top: 90px ;
}


/* ===== 헤더 컨테이너 ===== */
.h_wrap{
  position: absolute; /* 필요하면 fixed */
  top: 0;
  width: 100%;
  background: #f1E3C4;
  z-index: 10;
  height: auto; /* 내용에 맞게 */
}

/* ===== 내부 래퍼: 중앙정렬 + 플렉스 ===== */
.rectangle-1{
  width: 100%;
  max-width: 1200px;
  min-height: 90px;
  margin: 0 auto;
  padding: 8px 16px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  flex-wrap: wrap;        /* 폭 좁아지면 줄바꿈 */
  column-gap: 16px;
  row-gap: 8px;
}

/* ===== 좌측: 호텔찾기 / 예약달력 ===== */
.group-5,
.calender_box{
  order: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  color:#555;
  font-size:16px;
  font-weight:600;
}
.frame{ display:inline-flex; align-items:center; gap:6px; margin:0; }
.hotel-search{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.search-icon{ width:18px; height:18px; }
.reservation-calendar{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.calender{ width:18px; height:18px; }

/* ===== 중앙: 로고 (가운데 고정) ===== */
.top-logo{
  order: 2;
  margin: 0 auto;      /* 좌/우를 밀어 중앙 정렬 */
  width: 200px; height: 50px;
  display:flex; align-items:center; justify-content:center;
}
.top-logo img{ width:100%; height:auto; display:block; }

/* ===== 우측: 로그인 / 예약확인 / 리워즈 / 언어 ===== */
.rectangle-4, /* 로그인 */
.rectangle-3, /* 예약확인 */
.top-rewards, /* 리워즈 가입 */
.group{       /* 언어 셀렉트 */
  order: 3;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 6px;
}

/* 우측 첫 요소를 오른쪽 끝으로 밀기 */
.rectangle-3{ margin-left: auto; }

.login,
.reservation-check,
.shilla-rewards{
  display:inline-flex; align-items:center;
  color:#555; font-size:12px; font-weight:600; line-height:1;
  white-space:nowrap; padding:0 4px;
}

.language-select{
  padding:8px 10px; font-size:12px;
  background:#f1E3C4; color:#222; border:0.5px solid #f1E3C4; outline:none;
}
.language-select:focus{ background:#f1E3C4; }

/* ===== 하단 링크: 소개 / 멤버십 / 더신라숍 ===== */
.shilla-hotel-introduction,
.membership,
.the-shilla-shop{
  order: 4;
  display:inline-flex; align-items:center;
  color:#555; font-size:16px; font-weight:600; line-height:1;
  white-space:nowrap; padding:0 8px;
}

/* ===== 절대좌표 제거(겹침 방지) ===== */
.group, .top-rewards, .rectangle-3, .rectangle-4,
.group-5, .calender_box, .top-logo,
.shilla-hotel-introduction, .membership, .the-shilla-shop{
  position: static !important;
  top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
  width:auto !important; height:auto !important;
  z-index:auto !important;
}



  .h_wrap_copy{ 
  display: none;
  position: fixed;
  top: 0;
  width: 100%;  
  height: 60px;
  background:  #f1e3c4;
  z-index: 20000;   
  }  


.h_wrap_copy > .top-logo-2{
  position: relative;
  width: 100% ;  
  max-width: 200px; 
  height: 49px;
  top: 7px; 
  margin: auto ;  
  z-index: 30000; 
}



/* ================================
   배너 영역 (중앙정렬 + 반응형 완전 정리)
================================ */

/* 공통 배너 컨테이너 */
.banner {
  position: relative;
  width: 100%;
  max-width: 1920px;
  height: 650px;
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
}

/* 화살표 버튼 */
.arrow_b,
.arrow_f {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.8;
  cursor: pointer;
  z-index: 10;

  width: 40px;
  height: 40px;
  min-width: 20px;
  min-height: 20px;
  max-width: 40px;
  max-height: 40px;
}

.arrow_b {
  left: 5%;
}

.arrow_f {
  right: 5%;
}

/* 공통 배너 아이템 */
.banner-item {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1920px;
  height: 650px;
  background-size: cover;
  background-position: center;
  display: none;
  margin: 0 auto;
  z-index: 1;
}

/* 개별 배너 이미지 */
.banner04 {
  display: block; /* 첫 화면 표시 */
  background-image: url("../images/banner4.jpg");
}

.banner05 {
  background-image: url("../images/banner5.jpg");
}

.banner01 {
  background-image: url("../images/banner1.jpg");
}

.banner02 {
  background-image: url("../images/banner2.jpg");
}

.banner03 {
  background-image: url("../images/banner3.jpg");
}

 


/* ===== 예약 박스 : 중앙정렬 & 반응형 정리 ===== */

/* 바깥 컨테이너 */ 

.reserve{
  display: flex;  
  width : 80% ; 
  margin : 0 auto ; 
}
.group-40 {
  position: relative;
  width: 100%;
  max-width: 120px;       /* 중앙 정렬 기준 폭 */
  margin: 24px auto 0;     /* 배너 아래 여백은 필요 시 값 조정 */
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  border-radius: 8px;
  padding: 20px 160px 20px 20px; /* 오른쪽은 검색 버튼 자리 확보 */
  display: flex;
  align-items: center;
  box-sizing: border-box;
  z-index: 38;
}

/* 테이블 래퍼(기존 rectangle-41) */
.rectangle-41 {
  position: relative;   /* 절대 배치 제거 */
  width: 90%;
  height: auto;
  margin: 0;            /* 중앙정렬은 group-40에서 처리 */
  z-index: 40;
}

/* 검색 버튼 */
.search_box{
  position: absolute;
  right: 20px;                /* 컨테이너 내부에서 오른쪽 고정 */
  top: 50%;
  transform: translateY(-50%);
  width: 135px;
  height: 60px;
  background-color: #3E2B2C;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
}

.search {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

/* 표 기본 */
.table{
  border-collapse: collapse;
  width: 100%;               /* 고정폭 대신 가변폭 */
  table-layout: fixed;       /* 칼럼 균등 배분 */
  text-align: center;
  margin: 0;
}

.table tr:first-child td {
  font-size: 12px;
  color: #101010;
}
.table tr:first-child td:first-child {
  text-align: left;
  padding: 0;
}
.table tr:nth-child(2) td {
  font-size: 16px;
  color: #333;
  font-weight: 600;
}
.table tr:nth-child(2) td:first-child {
  text-align: left;
  padding: 0;
  position: relative;
}

/* 아이콘들 */
.h-search{ width: 20px; height: 20px; margin-left: 12px; }
.night{ width: 25px; height: 25px; vertical-align: middle; }

/* ===== 기존 절대배치 좌표값들 무력화(겹침 방지) =====
   아래 클래스들은 과거 absolute 포지셔닝용이었음.
   지금 레이아웃에서는 필요 없으니 position/좌표 리셋.
*/
.hotel-city, .check-in, .children, .adult, .check-out, .room, .infant,
.group-42, .group-43, .group-44, .group-45,
.rectangle-46, .rectangle-47, .rectangle-48, .rectangle-49,
.select-hotel, .date-mon, .date-tue, .one-night, .one, .two, .zero, .zero-4a {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
}




/*  .valid-html, .valid-css{
  position: relative ; 
  left : 700px ;  
  top : 200px ; 
 } */


 


/* ===== 다이닝 박스 : 중앙정렬 & 반응형 정리 ===== */

.rectangle-7 {
  position: relative;
  width: 100%;
  max-width: 1194px;
  height: 80px;
  margin: 60px auto;              /* 위아래 여백 + 가운데 정렬 */
  background: #f2f2f2;
  z-index: 67;
  
  display: flex;
  align-items: center;             /* 수직 중앙정렬 */
  justify-content: space-between;  /* 좌: 안내문 / 우: 링크 */
  padding: 0 40px;
  box-sizing: border-box;
  border-radius: 6px;
}

/* 왼쪽 안내문 */
.online-reservation {
  color: #767676;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
}

/* 오른쪽 링크 */
.dining-reservation {
  color: #767676;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: underline;
  white-space: nowrap;
}

/* 반응형 (모바일 화면) */
@media (max-width: 768px) {
  .rectangle-7 {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 20px;
    gap: 12px;
  }

  .online-reservation,
  .dining-reservation {
    font-size: 14px;
    text-align: center;
  }
}


/* ===== 사진 갤러리 : 중앙정렬 + 반응형 그리드 ===== */

/* 아우터 컨테이너 */
.frame-8{
  position: relative;
  width: 100%;
  max-width: 1196px;
  margin: 130px auto 0;
  padding: 0 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
  z-index: 70;
}

/* 불필요한 절대배치 제거 + 폭 가변화 */
.group-9, .group-a, .group-11,  
.flex-row-b, .flex-row-ee {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  left: auto !important; top: auto !important; right: auto !important; 
}

/* 타이틀 영역 중앙정렬 */
.group-b, .frame-c, .frame-d, .group-e, .group-f{
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto !important;   /* 가운데 */
  display: block;
  text-align: center;
}

/* 타이틀 */
.special-offer{
  position: static !important;
  display: inline-block;
  color: #555;
  font-family: 'NanumJejuMyeongjo', serif;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.special-offer::after{
  content:"";
  display:block;
  width: 200px;
  height: 1px;
  margin: 10px auto 0;
  box-shadow: 0 2px 2px rgba(240,170,170,.8);
  background: transparent;
  border-radius: 2px;
  pointer-events:none;
}
.special-offer-10{
  display: block;
  margin: 10px auto 0;
  width: auto;
  color:#555;
  font-size:16px;
  font-weight:500;
  letter-spacing: 3px;
  line-height: 1.25;
  white-space: nowrap;
}

/* 갤러리 그리드 - grid-template-areas 방식
   table: 큰 이미지 (2x2), parm: 우상단
   land: 좌하단, present: 중앙하단, phone: 우측 세로(2x1) */

.group-11{
  padding-top : 40px ; 
  display: grid;
  grid-template-columns: repeat(3, 1fr);     
  grid-template-rows: auto auto auto ; 
  grid-template-areas: 
    "dinner dinner parm"
    "dinner dinner phone"
    "land present phone";     
    align-items: stretch;
    gap : 16px ; 
    overflow: hidden; /* 부모 컨테이너에 overflow 적용 */
}

.group-11 img { 
  display: block;
  width: 100%; 
  height: auto;  
  border-radius: 4px;
  object-fit: cover;
}

.dinner {
  grid-area: dinner;
} 

.parm {
  grid-area: parm;
}

.land {
  grid-area: land;
}

.present {
  grid-area: present;
}

.phone {
  grid-area: phone;
}






/* ===== 신라에스 : 중앙정렬 + 반응형 그리드 ===== */

.frame-19{
  position: relative;
  width: 100%;
  max-width: 1224px;
  margin: 130px auto 0;    /* 상단 여백, 중앙정렬, 하단 여백 0 */
  padding: 0 16px;
  box-sizing: border-box;
  z-index: 128;
}

/* 2컬럼 그리드: 좌(이미지) / 우(설명 박스) */
.group-1a{
  display: grid;
  grid-template-columns: 1fr 1.15fr;  /* 원본 비율 근사(599 : 693) */
  grid-template-areas: "img info";
  gap: 24px;
  align-items: stretch;
  width: 100%;
  height: 80%; 
}

/* 좌측 카드 이미지 */
.rectangle-1d{
  grid-area: img;
  background: url(../images/mcard.png) no-repeat center / cover;
  min-height: 300px;     /* 필요 시 조절 */
  border-radius: 8px;
}

/* 우측 회색 배경(텍스트 배경) */
.group-1b{
  grid-area: info;
  border-radius: 8px;
}

/* 실제 회색 배경 박스 */
.rectangle-1c{
  width: 100%;
  height: auto ;  
  min-height: 320px ;
  
}

.shilla-es {
  margin-top : 40px ; 
}

.group-1b {
  background-color:  #f7f3eb;
  padding-top: 0 ;
}


/* 타이틀 블록 */
.group-1e{
  margin-top: 72px;        /* 수직 위치 */
}
.shilla-es-membership{
  color: #555;
  font-family: 'NanumJejuMyeongjo', serif;
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-align: left;
}
.shilla-membership{
  margin-top: 12px;
  color: #555;
  font-family: serif;
  font-size: clamp(12px, 1.6vw, 16px);
  font-weight: 300;
  letter-spacing: 3px;
  line-height: 1.3;
  white-space: nowrap;
  text-align: left;
}

/* 본문 */
.group-1f{
  margin-top: 215px;       /* 수직 위치 */
  max-width: 520px;
}
.shilla-es{
  color: #000;
  font-size: clamp(14px, 1.6vw, 16px);
  font-weight: 300;
  line-height: 1.6;
  white-space: normal;     /* 줄바꿈 허용 */
}

/* 링크 */
.es-anniversary-event{
  margin-top: 319px;       /* 수직 위치 */
  color: #000;
  font-size: clamp(14px, 1.6vw, 16px);
  font-weight: 400;
  line-height: 1.4;
  text-decoration: underline;
  cursor: pointer;
}

/* ===== 리셋: 기존 절대좌표/사이즈 무력화 ===== */
.frame-19, .group-1a, .group-1b, .rectangle-1c, .rectangle-1d,
.group-1e, .group-1f, .shilla-es, .es-anniversary-event{
  /* 기존 코드의 position/left/top/width/height가 있더라도 아래로 덮어쓰기 */
}


.frame-19{ align-items: stretch; }
.group-1a, .group-1b, .rectangle-1c, .rectangle-1d
{
  position: relative !important;
  width: auto !important;
  height: auto !important;
  top: auto !important; left: auto !important; right: auto !important; margin: 0 !important;
}




/* ===== 리워즈 : 중앙정렬 + 반응형 그리드 ===== */

.frame-20{
  position: relative;
  width: 100%;
  max-width: 1200px; 
  margin: 120px auto 0;     /* 원하는 80px로 복원 */
  padding: 0 16px;
  box-sizing: border-box;
  z-index: 92;  
  background-color: #f7f3eb;
  height : auto ; 
}

/* 타이틀 + 콘텐츠 2행 그리드 */
.group-21{
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  row-gap: 24px;
  width: 100%;
}

/* 타이틀 블록 중앙정렬 */
.frame-22{
  margin: 0;
  width: auto;
  justify-self: center;
  text-align: center;
}
.group-23{ width: auto; height: auto; font-size: 0; }
.shilla-rewards-24{
  display: inline-block;
  color:#555;
  font-family:'NanumJejuMyeongjo', serif;
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight:600;
  line-height:1.2;
  white-space: nowrap;
}
.membership-25{
  display:block;
  margin: 12px auto 0;
  color:#555;
  font-family: serif;
  font-size: clamp(12px, 1.6vw, 16px);
  font-weight:300;
  letter-spacing:3px;
  line-height:1.3;
  white-space: nowrap;
  text-align:center;
}

/* 콘텐츠 영역: 좌(텍스트들) / 우(카드 이미지+버튼) */
.group-26{
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  grid-auto-rows: min-content;
  column-gap: 32px;
  row-gap: 20px;
  align-items: start;
  padding: 28px 32px;
  border-radius: 8px;
  min-height: 362px;
  overflow: hidden;
}

/* 회색 배경(박스 전체) */
.rectangle-27{
  position: absolute;
  inset: 0;
  background:#f6f6f6;
  border-radius: 8px;
  z-index: 0;
}

/* 좌측 상단 텍스트 블록들 */
.group-29{
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 1;
}
.member-exclusive-products{
  color:#000;
  font-size:20px;
  font-weight:300;
  line-height:1.1;
  white-space: nowrap;
}
.group-2a{ width:auto; height:auto; margin-top:4px; }
.products-and-events-for-members{
  position: static;
  display:block;
  color:#000;
  font-size:12px;
  font-weight:300;
  line-height:1.4;
  padding:0;
}

/* 좌측 중간: 두 개의 특전 설명 */
.frame-2b{
  grid-column: 1;
  grid-row: 2;
  display:flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 28px 56px; /* 가로/세로 간격 */
  width: 100%;
  position: relative;
  z-index:1;
}
.group-2c, .group-2d{ width: auto; }
.shilla-rewards-benefit,
.shilla-rewards-points{
  color:#000;
  font-size:20px;
  font-weight:300;
  line-height:1.2;
  white-space: nowrap;
}
.rewards-member-benefit-products,
.points-like-cash{
  display:block;
  margin-top:4px;
  color:#000;
  font-size:12px;
  font-weight:300;
  line-height:1.4;
  white-space: nowrap;
}

/* 좌측 하단: 본문 설명 */
.bottom-text-box{
  grid-column: 1;
  grid-row: 3;
  position: relative;
  width: 100%;
  max-width: 730px;
  color:#101010;
  font-size:16px;
  line-height:24px;
  z-index:1;
}

/* 우측: 카드 이미지 */
.rectangle-28{
  grid-column: 2;
  grid-row: 1 / span 2; /* 위쪽에 크게 배치 */
  justify-self: end;
  align-self: start;
  width: 211px;
  height: 135px;
  background: url(../images/rwCard.png) no-repeat center / cover;
  position: relative;
  z-index:1;
  border-radius: 6px;
}

/* 우측 하단: 가입 버튼 */
.group-2e{
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
  align-self: end;
  position: relative;
  width: 140px;
  height: 40px;
  z-index:1;
}
.rectangle-2f{
  position:absolute;
  inset: 0;
  background:#3e2b2c;
  border-radius: 6px;
}
.join-button{
  position: relative;
  display:block;
  text-align:center;
  color:#fff;
  font-size:16px;
  line-height:40px;
  font-weight:500;
}

/* ===== 기존 절대좌표/크기값 무력화 ===== */
.group-26, .rectangle-27, .rectangle-28, .group-29, .group-2a,
.frame-2b, .group-2c, .group-2d, .bottom-text-box,
.group-2e, .rectangle-2f, .join-button{
  top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
  margin:0 !important;
  width:auto; height:auto;
}


/* ===== 갤러리 : 중앙정렬 + 반응형 ===== */

/* 바깥 컨테이너 */
.frame-30{
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 145px auto 0;      /* 가운데 정렬 */
  padding: 0 16px;
  box-sizing: border-box;
  z-index: 115;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.frame-31{ align-self: stretch; }

/* 높이 고정 제거 */
.group-32{
  position: relative;
  width: 100%;
  height: auto;
}

/* 타이틀 블록 중앙정렬 */
.group-33{
  width: auto;
  height: auto;
  margin: 0 auto;            /* 가운데 */
  text-align: center;
}

.frame-34, .frame-35, .group-36, .group-37{
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto !important;
}

/* 타이틀 */
.gallery{
  position: static !important;
  display: inline-block;
  color:#555;
  font-family:'NanumJejuMyeongjo', serif;
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.gallery::after{
  content:"";
  display:block;
  width:200px;
  height:1px;
  margin:10px auto 0;
  box-shadow:0 2px 2px rgba(240,170,170,.8);
  background:transparent;
  border-radius:2px;
  pointer-events:none;
}
.gallery-38{
  display:block;
  margin:12px auto 0;
  color:#555;
  font-family:serif;
  font-size: clamp(12px, 1.6vw, 16px);
  font-weight:300;
  letter-spacing:3px;
  line-height:1.3;
  white-space: nowrap;
}

/* 콘텐츠 래퍼 */
.flex-row-c{
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 24px;
}

/* 유튜브: 반응형 비율 유지 */
.rectangle-39{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;     /* 화면에 맞춰 자동 크기 */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.rectangle-39 iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* 나머지 사각형들(이미지/썸네일 자리) 중앙정렬 예시 */
.rectangle-3a, .rectangle-3b{
  margin-top: 16px;
  width: 100%;
  min-height: 200px;         /* 필요 시 조정 */
  border-radius: 8px;
  background: #f6f6f6;
}





/* =============== 공통 =============== */
img { max-width: 100%; height: auto; display: block; }

/* =============== FOOTBOX01 =============== */
.footbox01{
  width: 100%;
  background:#f1ebd6;
}

.foot01{
  width: 100%;
  max-width: 1210px;
  margin: 0 auto;
  min-height: 170px;
  display: grid;
  grid-template-columns: 220px 1fr 1fr 1fr auto; /* 로고 / 제휴 3개 / SNS */
  grid-template-rows: auto auto;                 /* 1행: 로고/브랜드, 2행: 링크 */
  column-gap: 16px;
  row-gap: 12px;
  align-items: center;
  padding: 20px 12px;
  box-sizing: border-box;
  color:#101010;
}

/* 좌측 CI 로고: 세로 중앙 정렬 */
.ci_bottom{
  grid-column: 1 / 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
}
.ci_bottom img{ max-height: 60px; }

/* 제휴 로고 3개 */
.shila      { grid-column: 2 / 3; }
.monogram   { grid-column: 3 / 4; }
.shillastay { grid-column: 4 / 5; }

.shila, .monogram, .shillastay{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 0;
}
.shila img{ max-height: 40px; }
.monogram img{ max-height: 40px; }
.shillastay img{ max-height: 40px; }

/* SNS 아이콘 */
.sns{
  grid-column: 5 / 6;
  justify-self: end;
  display: flex;
  align-items: center;
}
.sns img{ max-height: 32px; }

/* 링크 목록 */
.foot_list{
  grid-column: 2 / 6;
  grid-row: 2 / 3;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  list-style: none;
  padding: 0;
  margin: 0;
  color:#666;
  font-size: 12px;
}
.foot_list > li{ white-space: nowrap; }

/* =============== FOOTBOX02 =============== */
.footbox02{
  width: 100%;
  background:#fff;
  padding: 16px 0 24px;
  box-sizing: border-box;
  /* 뱃지 가운데 정렬 */
  text-align: center;
}

/* W3C 검증 배지 */
.footbox02 > a{ display: inline-block; margin: 0 6px 10px; }
.valid-html, .valid-css{ height: 24px; width: auto; }

/* 내부 레이아웃 */
.foot02{
  width: 100%;
  max-width: 1210px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto; /* 좌: 규정/회사정보, 우: 언어/인증 */
  grid-template-rows: auto auto;
  gap: 10px 16px;
  padding: 0 12px;
  box-sizing: border-box;
}

/* 규정 링크 */
.rules{
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  color:#666;
}
.rules > li{ white-space: nowrap; }

/* 언어 선택 */
.language{
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: flex-end;
  color:#666;
}
.language > li{ white-space: nowrap; }

/* 회사 정보 */
.info{
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  color:#666;
  font-size: 12px;
  line-height: 18px;
  margin: 0;
}

/* 인증(보안/인증 마크 등) */
.certif{
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  justify-self: end;
}
.certif img{ max-height: 36px; }

/* =============== 반응형 =============== */
@media (max-width: 980px){
  .foot01{
    grid-template-columns: 1fr 1fr auto;
    grid-template-rows: auto auto auto;
  }
  .ci_bottom{ grid-column: 1 / -1; grid-row: 1 / 2; justify-content: center; }
  .shila{ grid-column: 1 / 2; grid-row: 2 / 3; justify-content: center; }
  .monogram{ grid-column: 2 / 3; grid-row: 2 / 3; justify-content: center; }
  .shillastay{ grid-column: 3 / 4; grid-row: 2 / 3; justify-content: center; }
  .sns{ grid-column: 3 / 4; grid-row: 1 / 2; justify-self: end; }

  .foot_list{ grid-column: 1 / -1; grid-row: 3 / 4; justify-content: center; }

  .foot02{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    text-align: center;
  }
  .language{ justify-content: center; }
  .certif{ justify-self: center; }
}

@media (max-width: 600px){
  .foot01{ padding: 16px 10px; }
  .foot_list{ font-size: 11px; }
  .rules{ justify-content: center; }
  .info{ text-align: left; }
}

/* === 1920 이상 화면에서 중앙정렬 균형 보정 === */
@media (min-width: 1600px) {
  body {
    display: flex;
    flex-direction: column;
    align-items: center;   /* 모든 콘텐츠를 가운데로 */
  }

  .banner,
  .group-40,
  .rectangle-7,
  .frame-8,
  .frame-19,
  .frame-20,
  .frame-30,
  .footbox01,
  .footbox02 {
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
  }

  /* 혹시 width:1920px로 고정된 섹션 있으면 이걸로 교체 */
  .banner04, .banner05, .banner01, .banner02, .banner03 {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
  }

  /* 상단 헤더, 배너 등의 이미지가 왼쪽으로 치우칠 때 보정 */
  .main-container,
  .h_wrap,
  .rectangle-1 {
    margin: 0 auto;
    left: 0;
    right: 0;
  }
}


/* -------------------------------------------------------
   1) 스페셜 오퍼( frame-8 / group-13 ) 데스크톱 정렬 픽스
   - 3열 고정 그리드로 정확한 픽셀 정렬(385/385/382)
   - 상단 큰 이미지(790x354) + 우측 카드(382x260)
   - 하단 왼쪽 2장(385x260 2장) + 우측 세로(382x354)
------------------------------------------------------- */
@media (min-width: 1200px){
  .frame-8{ max-width: 1196px; margin-left:auto; margin-right:auto; }

  .group-13{
    display: grid;
    grid-template-columns: 385px 385px 382px; /* = 1196px */
    grid-template-rows: 354px 260px;
    gap: 24px;
    align-items: start;     /* 늘어남 방지 */
    justify-content: center;
  }

  .rectangle-14{ /* 790x354 */
    grid-column: 1 / span 2;
    grid-row: 1 / span 1;
    height: 354px;
    background-position: center;
    background-size: cover;
  }
  .rectangle-15{ /* 382x260 (우상단) */
    grid-column: 3 / span 1;
    grid-row: 1 / span 1;
    height: 260px;
    background-position: center;
    background-size: cover;
    align-self: start;
  }
  .rectangle-17{ /* 좌하단 1 */
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
    height: 260px;
    background-position: center;
    background-size: cover;
  }
  .rectangle-18{ /* 좌하단 2 */
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
    height: 260px;
    background-position: center;
    background-size: cover;
  }
  .rectangle-16{ /* 우하단 세로(382x354) */
    grid-column: 3 / span 1;
    grid-row: 2 / span 1;
    height: 354px;
    background-position: center;
    background-size: cover;
  }
}

/* -------------------------------------------------------
   2) 리워즈( frame-20 / group-26 ) 데스크톱 정렬 픽스
   - 절대배치 제거로 겹침 방지
   - 좌 텍스트, 우 카드 이미지/버튼 정렬 안정화
------------------------------------------------------- */
@media (min-width: 1200px){
  .frame-20{ max-width: 1200px; margin-left:auto; margin-right:auto; }

  /* 회색 배경은 컨테이너 전체에 깔림 */
  .group-26{
    position: relative;
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;  /* 좌/우 비율 */
    grid-auto-rows: min-content;
    column-gap: 32px;
    row-gap: 20px;
    align-items: start;
    padding: 28px 32px;
    border-radius: 8px;
    min-height: 362px;
  }

  .rectangle-27{ position:absolute; inset:0; border-radius:8px; }
  
  /* 좌측 상단 타이틀 블록 */
  .group-29{ grid-column:1; grid-row:1; position:relative; }
  .frame-2b{ grid-column:1; grid-row:2; position:relative; }
  
  /* 좌측 하단 본문(겹침 원인 제거) */
  .bottom-text-box{
    grid-column:1; grid-row:3; 
    position: relative;   /* ← absolute 제거 */
    width: 100%; max-width: 730px;
    margin: 0;            /* 남는 여백 제거 */
  }

  /* 우측 카드 이미지 */
  .rectangle-28{
    grid-column:2; grid-row:1 / span 2;
    justify-self: end; align-self: start;
    width: 211px; height: 135px;
    border-radius: 6px;
  }

  /* 우측 버튼 */
  .group-2e{
    grid-column:2; grid-row:3;
    justify-self: end; align-self: end;
    width: 140px; height: 40px;
  }
}