@charset "utf-8";

/**
 * --------------------------------
 * common CSS
 * --------------------------------
*/

@font-face {font-family: 'Pretendard';src: url('../images/common/Pretendard-Thin.woff') format('woff');font-weight: 100;font-display: swap;}
@font-face {font-family: 'Pretendard';src: url('../images/common/Pretendard-ExtraLight.woff') format('woff');font-weight: 200;font-display: swap;}
@font-face {font-family: 'Pretendard';src: url('../images/common/Pretendard-Light.woff') format('woff');font-weight: 300;font-display: swap;}
@font-face {font-family: 'Pretendard';src: url('../images/common/Pretendard-Regular.woff') format('woff');font-weight: 400;font-display: swap;}
@font-face {font-family: 'Pretendard';src: url('../images/common/Pretendard-Medium.woff') format('woff');font-weight: 500;font-display: swap;}
@font-face {font-family: 'Pretendard';src: url('../images/common/Pretendard-SemiBold.woff') format('woff');font-weight: 600;font-display: swap;}
@font-face {font-family: 'Pretendard';src: url('../images/common/Pretendard-Bold.woff') format('woff');font-weight: 700;font-display: swap;}
@font-face {font-family: 'Pretendard';src: url('../images/common/Pretendard-ExtraBold.woff') format('woff');font-weight: 800;font-display: swap;}
@font-face {font-family: 'Pretendard';src: url('../images/common/Pretendard-Black.woff') format('woff');font-weight: 900;font-display: swap;}
@font-face {font-family: 'RiaSans';src: url('../images/common/RiaSans-ExtraBold.otf');font-display: swap;}
/* @font-face {font-family: 'RiaSans';src: url('../images/common/RiaSans-ExtraBold.woff2') format('woff2');font-display: swap;} */

/* base */
html {width:100%;}
body {width:100%; font-family: 'Pretendard',-apple-system,blinkmacsystemfont,Helvetica,roboto,sans-serif;font-weight:400;font-size:16px;line-height:1;color:#000;letter-spacing:-0.025em;word-wrap:break-word;image-rendering: -webkit-optimize-contrast;}
h1,h2,h3,h4,h5,h6 {margin:0;font-weight:400;}
ul, ol {list-style:none;margin:0;padding:0;}
button {font-family: -apple-system,blinkmacsystemfont,Helvetica,roboto,sans-serif;cursor:pointer;padding:0;border:none;letter-spacing:-0.025em;background-color:transparent;outline:none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-tap-highlight-color: transparent;}
a {color:#767676;text-decoration:none;outline:none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-tap-highlight-color: transparent;}
i, p, div, span, li {margin:0;}
b, strong {font-weight: inherit;}
em {display:inline-block;font-style:normal;}
table {table-layout:fixed;width:100%;border-collapse:collapse;border-spacing:0;}
table caption {display:none;}
th, td {padding:0;}
dl, dd {margin:0;}
figure {margin:0;}
img {vertical-align:top;}
address {font-style:normal;}
.hide {position:absolute !important;left:-9999px;}
*, *:before, *:after {box-sizing:border-box;outline: none;}

.header {position: fixed;top: 0;left: 0;display: flex;justify-content: space-between;width: 100%;background-color: #fff;z-index: 50;}
.header h1 {margin: 15px 0 15px 20px;width: 176px;height: 26px;background: url('../images/common/header_logo.svg') no-repeat 0 0;background-size: 100%;text-indent: -9999em;text-align: left;}
.header .btn-allmenu {position: absolute;top: 0;right: 0;width: 64px;height: 56px;font-size: 0;}
.header .btn-allmenu .bar {position: absolute;top: 26px;right: 20px;width: 24px;height: 2px;background-color: #000;border-radius: 2px;}
.header .btn-allmenu .bar::before {content: '';position: absolute;top: -7px;right: 0;width: 100%;height: 2px;background-color: #000;border-radius: 2px;}
.header .btn-allmenu .bar::after {content: '';position: absolute;top: 7px;right: 0;width: 100%;height: 2px;background-color: #000;border-radius: 2px;}
.header nav {position: absolute;top: 30px;right: 168px;display: flex;gap: 80px;opacity: 0;transition: opacity .2s ease-in-out;}
.header nav span {color: #8C97A4;font-family: 'RiaSans';font-size: 18px;font-weight: 800;line-height: 18px;}

.container {padding-top: 56px;}

.footer {position: relative;padding: 40px 20px;border-top: 1px solid #EEE;background: #FFF;}
.footer .inner {position: relative;}
.footer .logo {display: inline-block;width: 142px;height: 28px;background: url('../images/common/footer_logo.svg') no-repeat 0 0;background-size: 100%;vertical-align: top;text-indent: -9999em;text-align: left;}
.footer .util {margin-top: 30px;display: flex;flex-wrap: wrap;}
.footer .util li {position: relative;margin-right: 12px;padding-right: 12px;color: #000;font-size: 14px;font-weight: 400;line-height: 24px;}
.footer .util li::after {content: '';position: absolute;top: 6px;right: 0;width: 1px;height: 12px;background: #D4D4D4;}
.footer .util li:last-of-type {margin-right: 0;padding-right: 0;}
.footer .util li:last-of-type::after {display: none;}
.footer .util li:nth-of-type(2)::after {display: none;}
.footer .util li strong {font-weight: 700;}
.footer .txt-copyright {margin-top: 20px;color: #777;font-size: 12px;font-weight: 400;line-height: 20px;}
.footer .txt-copyright span {display: block;}
.footer .txt-familysite {position: relative;margin-top: 30px;padding: 10px 12px 10px 16px;color: #000;font-size: 14px;font-weight: 400;line-height: 24px;border-radius: 6px;border: 1px solid #D4D4D4;background: #FFF;}
.footer .txt-familysite::before {content: '';position: absolute;top: 14px;right: 12px;width: 16px;height: 16px;background-image: url("data:image/svg+xml,%0A%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 11L8 6L13 11' stroke='%23777777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");}

@media (min-width: 476px) {
	.footer .util li:nth-of-type(2)::after {display: block;}
	.footer .util li:nth-of-type(3)::after {display: none;}
}

@media (min-width: 523px) {
	.footer .util li:nth-of-type(3)::after {display: block;}
}

@media (min-width: 768px) {
	.header {height: 80px;}
	.header .inner {position: relative;margin: 0 auto;width: 100%;max-width: 1320px;}
	.header h1 {margin-top: 24px;width: 227px;height: 32px;}
	.header nav {opacity: 1;right: 10.6250vw;}
	.header .btn-allmenu {width: 80px;height: 80px;}
	.header .btn-allmenu .bar {top: 38px;right: 26px;width: 28px;}
	.header .btn-allmenu .bar::before {top: -9px;}
	.header .btn-allmenu .bar::after {top: 9px;}
	.container {padding-top: 80px;}
	.container .inner {margin: 0 auto;width: 100%;max-width: 1320px;}
	.footer .inner {margin: 0 auto;width: 100%;max-width: 1280px;}
	.footer .util {position: absolute;top: 0;right: 0;margin-top: 0;}
	.footer .txt-copyright {margin-top: 3.1250vw;}
	.footer .txt-familysite {position: absolute;bottom: 0;right: 0;width: 21.8750vw;}
}
@media (min-width: 1024px) {
	.header nav {right: 136px}
	.footer .util li {font-size: 1.4063vw;line-height: 2.1875vw;}
	.footer .logo {width: 15.7813vw;height: 3.1250vw;}
	.footer .txt-copyright {margin-top: 3.1250vw;font-size: 1.2500vw;line-height: 2.0313vw;}
	.footer .txt-familysite {width: 21.8750vw;height: 3.7500vw;font-size: 1.2500vw;line-height: 2.0313vw;}
}
@media (min-width: 1280px) {
	.footer .util li {font-size: 18px;line-height: 28px;}
	.footer .logo {width: 202px;height: 40px;}
	.footer .txt-copyright {margin-top: 40px;font-size: 16px;line-height: 26px;}
	.footer .txt-familysite {width: 280px;height: 48px;font-size: 16px;line-height: 26px;}
}