@charset "UTF-8";
body, input, select, textarea { font-family: "Pretendard", "Roboto", "Noto Sans KR", sans-serif; font-feature-settings: 'tnum'; /* 고정폭 숫자 */ }

/* 전체 공통 */
/* font-size: 62.5%; 62.5% = 10px */
/* 1rem = 10px, 1.6rem = 16px */
html { font-size: 6px; line-height: 1.5; }

* { box-sizing: border-box; }

/* 상단 공통 */
#header { position: relative; z-index: 100; display: flex; flex-direction: column; justify-content: center; flex-direction: column; text-align: center; font-weight: 400; height: 13rem; max-width: 640px; margin: 0 auto; margin-bottom: -13rem; }
#header::after { /* content: ''; */ position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; height: 1px; background: rgba(0, 0, 0, 0.1); }

.header article { width: 100%; height: 13rem; display: flex; justify-content: space-between; align-items: center; }
.header article.header-top { justify-content: flex-end; margin-top: 0.5rem; display: none; }
.header .navi-left, .header .navi-right { width: 6rem; height: 6rem; margin: 3.5rem; font-size: 4rem; }
.header .navi-left a, .header .navi-right a { cursor: pointer; text-decoration: none; width: 100%; height: 100%; height: 100%; }
.header .navi-left i, .header .navi-right i { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #fff; }
.header .navi-left i::before, .header .navi-right i::before { margin: 0; line-height: 1; }
.header #logo a { cursor: pointer; text-decoration: none; width: 100%; height: 100%; }
.header #logo img { width: 25rem; }

/*shop 상세 페이지*/
#header.shop { height: 10rem; }
#header.shop::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 1; width: 100%; height: 1px; background: rgba(0, 0, 0, 0.1); }
#header.shop article { height: 100%; }
#header.shop article > div { margin: 0 3rem; }
#header.shop .navi-back, #header.join.shop .navi-close { width: 6rem; height: 6rem; font-size: 6rem; }
#header.shop .navi-back a, #header.join.shop .navi-close a { cursor: pointer; text-decoration: none; width: 100%; height: 100%; height: 100%; }
#header.shop .navi-back i, #header.join.shop .navi-close i { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #333; }
#header.shop .navi-back i::before, #header.join.shop .navi-close i::before { margin: 0; line-height: 1; }
#header.shop h1 { color: #111; font-weight: 500; font-size: 3.75rem; line-height: 1.5; }

/*join 상세 페이지*/
#header.join { height: 10rem; }
#header.join::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 1; width: 100%; height: 1px; background: rgba(0, 0, 0, 0.1); }
#header.join article { height: 100%; }
#header.join article > div { margin: 0 3rem; }
#header.join .navi-back, #header.join .navi-close { width: 6rem; height: 6rem; font-size: 5rem; }
#header.join .navi-back a, #header.join .navi-close a { cursor: pointer; text-decoration: none; width: 100%; height: 100%; height: 100%; }
#header.join .navi-back i, #header.join .navi-close i { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #333; }
#header.join .navi-back i::before, #header.join .navi-close i::before { margin: 0; line-height: 1; }
#header.join .navi-close { font-size: 2.5rem; }
#header.join h1 { color: #111; font-weight: 500; font-size: 3.75rem; line-height: 1.5; }

/* 서브타이틀 */
#sub-header { position: relative; width: 100%; height: 42rem; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; }
#sub-header .sub-header-img { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; z-index: 0; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
#sub-header .sub-header-img img { width: 100%; height: 100%; object-fit: cover; }
#sub-header .sub-header-txt { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; flex-direction: column; color: #fff; font-size: 4.2rem; font-weight: 400; }
#sub-header .sub-header-txt .maps_title { margin-top: 1.5rem; }
#sub-header .sub-header-txt:after { content: ''; z-index: 1; width: 4.2rem; height: 1px; background: #fff; margin-top: 1.5rem; }