@charset 'utf-8';

/* ���� */
:root{
    --baseFont: 'Montserrat', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--mainColor: #D61C18;
}

.w1710{ max-width: 1710px; width: 100%; margin: 0 auto; }
.w1700{ max-width: 1700px; width: 100%; margin: 0 auto; }

@media screen and (max-width: 1750px){
	.w1710{ padding: 0 20px; }
}

@media screen and (max-width: 1740px){
	.w1700{ padding: 0 20px; }
}

/* privacy */
.privacy * { font-size: 1.6rem; line-height: 1.625; }
.privacy h3 { font-weight: 700; }
.privacy h4{ font-weight: 700; }
.privacy .textBox,
.privacy .pBox,
.privacy .dlBox,
.privacy .subTextBox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

.privacy .textBox { gap: 100px 0; }
.privacy .textBox h3{ font-size: 2.2rem; margin-bottom: 5px; }

.privacy .pBox { gap: 30px 0; margin: 40px 0; }

.privacy .dlBox { gap: 50px 0; }
.privacy .dlBox > dl > dt { font-size: 1.8rem; font-weight: 500; }
.privacy .dlBox > dl > dd > p { margin: 5px 0; }
.privacy .dlBox > dl > dd > ul { padding: 0 0 0 20px; }
.privacy .dlBox > dl > dd ul:only-child{ margin-top: 5px; }

.privacy .square { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 0 5px; position: relative; padding-left: 12px; }
.privacy .square::before { content: "-"; position: absolute; top: 0; left: 0; }
.privacy .square > p { width: 100%; padding: 0 0 0 13px; }

.privacy .subTextBox { gap: 24px 0; }
.privacy .subTextBox h6 { font-weight: 500; margin: 0 0 4px; }
.privacy .subText { margin: 4px 0; }
.privacy .subText dd { padding: 0 0 0 11px; }

.privacy .contact { margin: 60px 0 0; }
.privacy .contact ol { margin: 30px 0 0; }

@media screen and (max-width: 1250px){
	.privacy .textBox h3{ font-size: 2rem; }
	.privacy .textBox { gap: 80px 0; }

	.privacy .pBox{ gap: 15px 0; }
	
	.privacy .dlBox { gap: 30px 0; }
}

@media screen and (max-width: 900px){
	.privacy .dlBox > dl > dt { font-size: 1.7rem; }
	.privacy * { font-size: 1.5rem; }
	.privacy .dlBox > dl > dd > ul { padding: 0 0 0 10px; }
}


/* header */
#header{ width: 100%; position: fixed; top: 0; left: 0; z-index: 100; transform: translateY(-100%); animation: translateY 0.8s forwards; }
#header .inner{ display: flex; justify-content: space-between; align-items: center; max-width: 1800px; width: 100%; margin: 0 auto; background: #fff; backdrop-filter: blur(6px); border-radius: 400px; padding: 10px; padding-left: 30px; position: relative; transition: background 0.5s; }

#header .logo{ display: inline-block; position: relative; transform: scale(1); transition: transform 0.5s; }
#header .logo a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

#header nav{ width: max-content; position: absolute; top: 50%; left: 50%; z-index: 50; transform: translate(-50%, -50%); }
#header nav .depth01{ display: flex; }
#header nav .depth01 > li{ position: relative; }
#header nav .depth01 > li > a{ display: inline-block; font-size: 2rem; font-weight: 600; color: #0F0F0F; padding: 30px 50px; transition: color 0.5s; }
#header nav .depth02{ width: 170px; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding: 40px 0 30px; display: none; }
#header nav .depth02::after{ content: ""; width: 100%; height: calc(100% - 10px); background: rgba(255, 255, 255, 0.7); border-radius: 20px; position: absolute; bottom: 0; left: 0; z-index: -1; }
#header nav .depth02 > li{ overflow: hidden; }
#header nav .depth02 > li > a{ display: inline-block; width: 100%; text-align: center; font-size: 1.6rem; font-weight: 400; color: #444; padding: 15px 5px; }

#header nav .depth01 > li:hover > a{ color: var(--mainColor); }

#header button{ width: 60px; height: 60px; background: #AAA; border: none; border-radius: 50%; padding: 0; line-height: 1; position: relative; }
#header button svg{ position: relative; top: 2px; }
#header button .close{ opacity: 1; transition: opacity 0.5s; }

#header.scroll .inner{ background: rgba(255, 255, 255, 0.1); }

/* all menu */
#header .blur{ width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); position: fixed; top: -40px; left: 0; z-index: -5; opacity: 0; visibility: hidden; transition: opacity 0.5s; }
#menu{ width: 570px; padding: 60px; padding-top: 90px; transform: scale(0); transform-origin: top right; opacity: 0; position: absolute; top: 100%; right: 25px; transition: all 0.5s; visibility: hidden; }
#menu::after{ content: ""; width: 100%; height: calc(100% - 30px); background: #fff; border-radius: 20px; position: absolute; bottom: 0; right: 0; z-index: -1; }
#menu ul li{ overflow: hidden; }
#menu ul li a{ display: inline-block; transform: translateY(100%); opacity: 0; transition: all 0.5s; }
#menu .depth01 > li:not(:last-of-type){ margin-bottom: 40px; }
#menu .depth01 > li > a{ font-size: 3rem; font-weight: 700; color: #222; }
#menu .depth02{ display: flex; flex-wrap: wrap; margin-left: -10px; margin-top: 10px; }
#menu .depth02 > li > a{ font-size: 1.6rem; font-weight: 400; color: #444; padding: 5px 10px; }

#header.on .logo{ transform: scale(0.85); }
#header.on button .close{ opacity: 0; }
#header.on .blur{ opacity: 1; visibility: visible; }
#header.on #menu{ transform: scale(1); opacity: 1; visibility: visible; }
#header.on #menu ul li a{ transform: translateY(0); opacity: 1; transition-delay: 0.5s; }

@keyframes translateY{
	0%{ top: 0; transform: translateY(-100%); }
	100%{ top: 40px; transform: translateY(0%); }
}

@media screen and (max-width: 1840px){
	/* header */
	#header{ padding: 0 20px; }
} 

@media screen and (max-width: 1700px){
	/* header */
	#header nav .depth01 > li > a{ font-size: 1.8rem; padding: 31px 30px; }
}

@media screen and (max-width: 1500px){
	/* header */
	#header .inner{ padding-left: 15px; }
	#header nav{ left: 55%; }
	#header nav .depth01 > li > a{ font-size: 1.7rem; padding: 27px 30px; }
	#header nav .depth02{ padding: 30px 0 20px; }
	#header nav .depth02 > li > a{ padding: 8px 5px; }
	#header button{ width: 50px; height: 50px; }

	/* all menu */
	#menu{ width: 500px; padding: 40px; padding-top: 60px; }
	#menu::after{ height: calc(100% - 20px); }
	#menu .depth01 > li > a{ font-size: 2.5rem; } 
	#menu .depth02 > li > a{ font-size: 1.5rem; }
}

@media screen and (max-width: 1300px){
	/* header */
	#header nav{ left: 58%; }
}

@media screen and (max-width: 1250px){
	/* header */
	#header{ top: 0; }
	#header nav{ display: none; }
	#header .blur{ top: -20px; }

	@keyframes translateY{
		0%{ top: 0; transform: translateY(-100%); }
		100%{ top: 20px; transform: translateY(0%); }
	}

	/* all menu */
	#menu{ width: 465px; padding: 30px; padding-top: 50px; }
	#menu .depth01 > li > a{ font-size: 2.3rem; }
}

@media screen and (max-width: 550px){
	#menu{ max-width: calc(100vw - 90px); width: 100%; }
}
	

/* footer */
#footer{ border-top: 1px solid #DDD; padding: 40px 0; background: #fff url("/img/common/footer_bg.png") no-repeat bottom right / auto; }
#footer .logo{ display: inline-block; position: relative; }
#footer .logo a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }
#footer .flex-box{ display: flex; justify-content: space-between; align-items: flex-end; margin-top: 30px; }

#footer .dl dl{ display: flex; }
#footer .dl dl *{ font-size: 1.6rem; font-weight: 300; color: #222; }
#footer .dl dl dt{ font-weight: 600; padding-right: 10px; }
#footer .dl > div{ display: flex; flex-wrap: wrap; }
#footer .dl > div dl{ margin-right: 20px; margin-bottom: 10px; }

#footer .copyright{ display: flex; align-items: flex-end; }
#footer .copyright *{ font-size: 1.5rem; }
#footer .copyright p{ font-weight: 300; color: #A0A0A0; }
#footer .copyright a{ display: inline-block; padding: 20px; font-weight: 500; color: #222; line-height: 1.3; margin-right: -20px; margin-bottom: -20px; }

@media screen and (max-width: 1400px){
	#footer .flex-box{ flex-direction: column; align-items: flex-start; }

	#footer .dl > div{ flex-direction: column; }
	#footer .dl > div dl{ margin-right: 0; }
}

@media screen and (max-width: 700px){
	#footer{ padding: 30px 0; }
	#footer .copyright{ flex-direction: column-reverse; align-items: flex-start; margin-top: 20px; }
	#footer .copyright a{ margin-bottom: 0; margin-right: 0; margin-left: -20px; padding: 10px 20px; }
}