@charset 'utf-8';

/* ���� */
:root{
    --baseFont: 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--pointFont: 'Song Myung', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--engFont: 'Forum', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;

	--mainColor: #981B1F;

	--vh: 100%;
	--resizeVH: var(--vh);

	--headerH: 100px;
	--logoH: 50px;

	--aosPlus: 100px;
	--aosMinus: -100px;
	--aosT: 1000ms;
}

*{ box-sizing: border-box; word-break: keep-all; line-height: 1.3; letter-spacing: -0.02em; }
body.lock{ overflow: hidden; touch-action: none; overscroll-behavior: none; }
body{ font-size: 16px; }
body *{ font-size: inherit; }

.w1920{ max-width: 1920px; width: 100%; margin: 0 auto; }
.w1800{ max-width: 1840px; width: 100%; padding: 0 20px; margin: 0 auto; }
.w1680{ max-width: 1720px; width: 100%; padding: 0 20px; margin: 0 auto; }
.w1600{ max-width: 1640px; width: 100%; padding: 0 20px; margin: 0 auto; }
.w1520{ max-width: 1560px; width: 100%; padding: 0 20px; margin: 0 auto; }

/* slick */
.slick-slider{ overflow: hidden; }
.slick-track{ margin: 0; }
.slick-slide{ outline: none; }

/* aos */
[data-aos]{ transition-duration: var(--aosT); }

@media screen and (hover: hover) and (pointer: fine) {
	:root{
		--resizeVH: 100vh;
	}
}

@media screen and (max-width: 1800px){
	:root{
		--headerH: 90px;
		--logoH: 45px;
	}

	html{ font-size: 50%; }
}

@media screen and (max-width: 1280px){
	:root{
		--headerH: 80px;
		--logoH: 40px;

		--aosPlus: 50px;
		--aosMinus: -50px;
	}

	html{ font-size: 40%; }
}

@media screen and (max-width: 1200px){
	:root{
		--headerH: 70px;
		--logoH: 37px;
	}
}

@media screen and (max-width: 900px){
	html{ font-size: 30%; }
}

/* privacy */
.privacy * { font-size: 19px; font-weight: 300; color: #353535; line-height: 1.5; }
.privacy > *:not(:last-child){ margin-bottom: 100px; }
.privacy h4{ font-size: 30px; font-weight: 600; margin-bottom: 30px; }
.privacy h5{ font-weight: 600; margin-bottom: 10px; }
.privacy ul{ margin-top: 10px; }
.privacy ul li:not(:last-of-type){ margin-bottom: 5px; }

.privacy dl dt{ font-size: 21px; font-weight: 600; }
.privacy dl dd{ margin-top: 10px; }
.privacy .textBox dl dt{ font-size: 19px; font-weight: 500; }
.privacy .textBox dl dd{ margin-top: 5px; }

.privacy .textBox > *:not(:last-child){ margin-bottom: 40px; }
.privacy .gap > *:not(:last-child){ margin-bottom: 40px; }
.privacy .pBox > *{ margin-top: 10px; }
.privacy .dlBox > *{ margin-top: 20px; }

.privacy .dot{ padding-left: 12px; position: relative; }
.privacy .dot::before{ content: ""; width: 3px; height: 3px; background: #000; border-radius: 50%; position: absolute; top: calc(1.4em / 2); left: 0; transform: translateY(-50%); }

.privacy .hyphen{ padding-left: 12px; position: relative; }
.privacy .hyphen::before{ content: "-"; position: absolute; top: 0; left: 0; }

@media screen and (max-width: 1800px){
	.privacy * { font-size: 18px; }
	.privacy > *:not(:last-child){ margin-bottom: 70px; }
	.privacy h4{ font-size: 24px; }
	.privacy dl dt{ font-size: 20px; }
	.privacy .textBox dl dt{ font-size: 18px; }
}

@media screen and (max-width: 1280px){
	.privacy * { font-size: 17px; }
	.privacy > *:not(:last-child){ margin-bottom: 40px; }
	.privacy .gap > *:not(:last-child){ margin-bottom: 30px; }
	.privacy h4{ font-size: 22px; }
	.privacy dl dt{ font-size: 19px; }
	.privacy dl dd{ margin-top: 5px; }
	.privacy .textBox dl dt{ font-size: 17px; }

	.privacy .textBox > *:not(:last-child){ margin-bottom: 30px; }
	.privacy .pBox > *{ margin-top: 5px; }
	.privacy .dlBox > *{ margin-top: 10px; }
}

@media screen and (max-width: 900px){
	.privacy h4{ font-size: 20px; }
}


/* header */
#header{ width: 100%; background: transparent; position: fixed; top: 0; left: 0; z-index: 950; text-align: center; transform: translateY(0); transition: background 0.4s, backdrop-filter 0.4s, transform 0.4s; }
#header nav,
#header .logo,
#header .right > div,
#header .right .link{ opacity: 1; transition: opacity 0.4s; }
#header .flex-box{ height: var(--headerH); display: flex; justify-content: space-between; align-items: center; }
#header .logo{ display: flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 1; }
#header .logo img{ width: auto; height: var(--logoH); }

#header .depth01{ display: flex; margin: 0 -22px; }
#header .depth01 > li{ position: relative; }
#header .depth01 > li > a{ height: var(--headerH); display: flex; justify-content: center; align-items: center; font-size: 18px; font-weight: 400; color: #FFF; letter-spacing: -0.02em; padding: 0 22px; }

#header .depthBox{ width: 150px; padding-top: calc(var(--headerH) - 20px); position: absolute; top: 0; left: 50%; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity 0.5s, transform 0.5s; }
#header .depth02{ background: var(--mainColor); border-radius: 5px; }
#header .depth02 > li:not(:last-of-type){ border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
#header .depth02 > li > a,
#header .depth02 > li > button{ display: block; width: 100%; font-family: var(--baseFont); font-size: 16px; font-weight: 400; color: rgba(255, 255, 225, 0.3); letter-spacing: -0.02em; padding: 17px; text-align: center; transition: color 0.3s; }


#header .right{ height: 100%; display: flex; align-items: center; }
#header .right > div{ position: relative; }
#header .right button{ background: none; border: none; }
#header .right > button{ height: 40px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 5px; font-size: 16px; font-weight: 400; color: #FFF; letter-spacing: -0.02em; margin-left: 15px; transition: background 0.4s, border-color 0.4s, color 0.4s, opacity 0.4s !important; }
#header .right div > button{ height: var(--headerH); padding: 15px; }

#header .link{ padding: 0 20px; }

#header .menu{ padding: 0 15px; overflow: hidden; }
#header .menu span{ display: inline-block; width: 16px; height: 2px; background: #FFF; border-radius: 10px; vertical-align: middle; position: relative; transition: background 0.4s, top 0.4s, transform 0.4s; }  
#header .menu span::before,
#header .menu span::after{ content: ""; width: 100%; height: 100%; background: #FFF; border-radius: inherit; position: absolute; left: 0; transition: background 0.4s; }
#header .menu span::before{ top: -6px; }
#header .menu span::after{ top: 6px; }

#header .login:hover .depthBox{ transform: translate(-50%, 0); opacity: 1; }
#header .login:hover .depth02{ pointer-events: auto; }

/* header - up */
#header.up{ transform: translateY(-100%); }

/* header - scroll */
#header.scroll{ background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); }

/* header - intro */
#header.intro .logo{ opacity: 0; }

@media screen and (hover: hover){
	#header .depth01 > li:hover .depthBox{ transform: translate(-50%, 0); opacity: 1; }
	#header .depth01 > li:hover .depth02{ pointer-events: auto; }
	#header .depth02 > li:hover > a,
	#header .depth02 > li:hover > button{ color : #FFF; }

	#header .right > button:hover{ background: #FFF; border-color: #111; color: #111; }
	#header .menu:hover span,
	#header .menu:hover span::before,
	#header .menu:hover span::after{ background: #111; }
 }

 @media screen and (max-width: 1900px){
	#header .depthBox{ width: 120px; }
	#header .depth02 > li > a,
	#header .depth02 > li > button{ padding: 14px; }
 }

 @media screen and (max-width: 1280px){
	#header .depth02 > li > a,
	#header .depth02 > li > button{ padding: 12px; }

	#header .right div button{ padding: 10px; }
 }

 @media screen and (max-width: 1280px) and (hover: hover){
	#header .login:hover .depthBox{ transform: translate(-50%, 10px); }
 }

  @media screen and (max-width: 1200px){
  	#header .logo{ position: relative; left: 0; top: 0; transform: unset; }
	#header nav{ display: none; }

	#header .right > button{ height: 37px; padding: 0 12px; margin-left: 10px; }
  }


 /* search */
#search{
	--height: 80px;
	--select: 240px;
	--button: 180px;
	--padding: 25px;
}
#search{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 900; pointer-events: none; }
#search *{ font-size: 24px; font-weight: 400; color: #FFF; letter-spacing: -0.02em; }
#search .blank{ width: 100%; height: 100%; }
#search .box{ width: 100%; background: radial-gradient(225.78% 67.99% at 50% 100%, #111 0%, #222 100%); padding: 0 20px; padding-top: var(--headerH); position: absolute; top: 0; left: 0; display: none; }
#search .inner{ max-width: 1180px; padding: 120px 0 180px; margin: 0 auto; }
#search .flex-box{ display: flex; justify-content: space-between; }
#search .flex-box > *{ height: var(--height); padding: 0 var(--padding); }

#search select, 
#search input{ background: none; border: none; border-bottom: 1px solid #FFF; border-radius: 0; -webkit-border-radius: 0; outline: none; }
#search select{ width: var(--select); background: url("/img/common/select_icon.svg") no-repeat center right var(--padding); appearance: none; }
#search option{ color: #111; }
#search input{ width: calc(100% - var(--select) - var(--button) - 40px); }
#search input::placeholder{ color: rgba(255, 255, 255, 0.3); }
#search button{ width: var(--button); background: rgba(255, 255, 255, 0.05); border: 2px solid rgba(255, 255, 255, 0.15); border-radius: 5px; font-weight: 600; color: #FFF; transition: background 0.3s, color 0.3s; }

/* body - search */
body.search{ overflow: hidden; }
body.search #header{ background: transparent; backdrop-filter: unset; transform: translateY(0); }
body.search #header nav,
body.search #header .logo,
body.search #header .right > div,
body.search #header .right .link{ opacity: 0; pointer-events: none; }
body.search #header .menu span{ transform: translateX(-100px); }
body.search #header .menu span::before{ top: 0; transform: translateX(100px) rotate(45deg); }
body.search #header .menu span::after{ top: 0; transform: translateX(100px) rotate(-45deg); }

body.search #search{ pointer-events: auto; }

@media screen and (hover: hover){
	#search button:hover{ background: #FFF; color: #111; }
}

@media screen and (max-width: 1800px){
	#search{
		--height: 70px;
		--select: 200px;
		--button: 150px;
	}

	#search *{ font-size: 20px; }
	#search .inner{ padding: 80px 0 140px; }
}

@media screen and (max-width: 1280px){
	#search{
		--height: 60px;
		--select: 160px;
		--button: 120px;
		--padding: 20px;
	}

	#search *{ font-size: 18px; }
	#search .inner{ padding: 50px 0 100px; }
}

@media screen and (max-width: 900px){
	#search{
		--height: 50px;
		--select: 150px;
		--button: 80px;
		--padding: 15px;
	}

	#search *{ font-size: 17px; }
	#search .inner{ padding: 50px 0; }
}

@media screen and (max-width: 650px){
	#search .inner{ padding: 20px 0 50px; }
	#search .flex-box{ flex-wrap: wrap; }
	#search select{ width: 100%; margin-right: 0; margin-bottom: 20px; }
	#search input{ width: calc(100% - var(--button) - 20px); }
}


/* menu */
#menu{ width: 100%; height: 100%; background: #111; position: fixed; top: 0; left: 0; z-index: 900; transform: translateX(-100%); transition: transform 0.6s; }
#menu .pc{ display: none; }
#menu > div,
#menu .flex-box,
#menu .flex-box > div{ height: 100%; }

#menu .flex-box{ display: flex; }
#menu .flex-box > div{ width: 50%; }

#menu .nav{ display: flex; flex-direction: column; justify-content: flex-end; background: url("/img/common/menu_bg.svg") no-repeat top right / auto; }
#menu .nav .text{ padding: 40px 30px; }
#menu .nav .text svg{ max-width: 100%; max-height: 100%; width: auto; height: auto; }

#menu .depth01 > li{ border-top: 1px solid rgba(255, 255, 255, 0.15); }
#menu .depth01 > li > a{ --after: 28px; height: 90px; font-size: 22px; font-weight: 500; color: rgba(255, 255, 255, 0.3); display: flex; align-items: center; padding: 0 30px; transition: font-size 0.3s, color 0.3s; }
#menu .depth01 > li.on > a{ color: #FFF; }

#menu .depthBox{ display: none; background: #EBE5DD; padding: 25px 50px; }
#menu .depth02{ display: flex; flex-wrap: wrap; margin: -10px -30px; }
#menu .depth02 > li > a{ display: block; font-size: 20px; font-weight: 500; color: rgba(34, 34, 34, 0.4); padding: 10px 30px; transition: color 0.3s; }

#menu .img{ background: url("/img/common/menu_img01.jpg") no-repeat center center / cover; }

/* body - open */
body.open{ overflow: hidden; }
body.open #header{ background: transparent; backdrop-filter: unset; transform: translateY(0); }
body.open #header nav,
body.open #header .logo,
body.open #header .right > div,
body.open #header .right .link{ opacity: 0; pointer-events: none; }
body.open #header .menu span{ transform: translateX(-100px); }
body.open #header .menu span::before{ top: 0; transform: translateX(100px) rotate(45deg); }
body.open #header .menu span::after{ top: 0; transform: translateX(100px) rotate(-45deg); }

body.open #menu{ transform: translateX(0); }

@media screen and (hover: hover){
	#menu .depth01 > li:hover > a{ font-size: var(--after); color: #FFF; }
	#menu .depth02 > li:hover > a{ color: #222; }
}

@media (hover: hover) and (pointer: fine) {
	#menu .pc{ display: block; }
	#menu .mobile{ display: none; }
}

@media screen and (max-width: 1800px){
	#menu .depth01 > li > a{ --after: 24px; height: 80px; font-size: 21px; }
	#menu .depth02 > li > a{ font-size: 19px; }
}

@media screen and (max-width: 1280px){
	#menu .nav .text{ padding: 30px; }

	#menu .depth01 > li > a{ --after: 22px; height: 75px; font-size: 19px; }

	#menu .depthBox{ padding: 20px 30px; }
	#menu .depth02{ margin: -10px -20px; }
	#menu .depth02 > li > a{ font-size: 18px; padding: 10px 20px; }
}

@media screen and (max-width: 1200px){
	#menu .flex-box > div{ width: 100%; }
	#menu .img{ display: none; }

	#menu .nav .text{ padding: 20px 30px; }
	#menu .nav .text svg{ height: 45px; }
}

@media screen and (max-width: 1000px){
	#menu .nav{ background-size: 400px; }
}

@media screen and (max-width: 700px){
	#menu .nav{ background-size: 300px; }
	#menu .depth01 > li > a{ --after: 22px; font-size: 22px; }
	#menu .depth02{ display: block; }
	#menu .depth02 > li > a{ font-size: 20px; }
}


/* footer */
#footer{ background: #151515; padding: 80px 0 40px; position: relative; z-index: 10; }
#footer *{ color: #FFF; }
#footer .logo{ margin-bottom: 85px; }
#footer .logo img{ width: auto; height: 54px; }
#footer .info{ position: relative; }
#footer .right{ position: absolute; bottom: 0; right: 0; }
#footer .copyright{ font-size: 15px; font-weight: 300; color: #777; margin-top: 30px; text-align: center; }


#footer address dl *{ font-size: 17px; color: rgba(255, 255, 255, 0.8); }
#footer address dl:not(:last-of-type){ margin-bottom: 15px; }
#footer address dl dt{ font-weight: 500; margin-bottom: 15px; }
#footer address dl dd{ font-weight: 200; }

#footer address dl.flex{ display: flex; }
#footer address dl.flex dt{ margin-bottom: 0; margin-right: 15px; }

#footer address .dl{ display: flex; flex-wrap: wrap; margin-inline: -15px; }
#footer address .dl dl{ margin-inline: 15px; }

#footer .sns{ margin-bottom: 30px; }
#footer .sns ul{ display: flex; justify-content: flex-end; }
#footer .sns ul li:not(:last-of-type){ margin-right: 10px; }
#footer .sns ul li a{ width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; transition: background 0.3s; }
#footer .sns ul li a svg{ width: auto; height: auto; }
#footer .sns ul li a svg path{ transition: fill 0.3s; }

#footer .policy ul{ display: flex; margin: -15px; }
#footer .policy ul li{ position: relative; }
#footer .policy ul li::after{ content: ""; width: 1px; height: 12px; background: #FFF; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
#footer .policy ul li:last-of-type::after{ display: none; }
#footer .policy ul li a{ display: inline-block; padding: 15px; }

#footer .support{ margin-top: 30px; }
#footer .support dl{ display: flex; flex-wrap: wrap; align-items: center; }
#footer .support dl dt{ font-size: 18px; font-weight: 400; color: rgba(255, 255, 255, 0.4); padding-right: 30px; }
#footer .support dl dd{ display: flex; align-items: center; margin: -15px; }
#footer .support dl dd figure{ margin: 15px; }

@media screen and (hover: hover){
	#footer .sns ul li:hover a{ background: #FFF; }
	#footer .sns ul li:hover a svg path{ fill: #111; }
}


/* top */
#top{
	--start: calc(50% - 5px);
	--end: calc(50% + 5px);
}
#top{ width: 130px; height: 130px; background: none; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; padding: 11px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
#top::before{ content: ""; display: block; height: 100%; background: url("/img/common/top_text.svg") no-repeat center center / contain; animation: rotate360 8s linear infinite; }
#top i{ width: 15px; height: 30px; background: url("/img/common/top_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); will-change: top; animation: scroll 1.5s infinite; }

@media screen and (max-width: 1800px){
	#footer{ padding: 60px 0 30px; }
	#footer .logo{ margin-bottom: 60px; }
	#footer .logo img{ height: 45px; }

	/* top */
	#top{ width: 110px; height: 110px; padding: 10px; }
	#top i{ width: 12px; height: 25px; }
}

@media screen and (max-width: 1280px){
	#footer{ padding: 40px 0 20px; }
	#footer .logo{ margin-bottom: 40px; }
	#footer .logo img{ height: 40px; }

	/* top */
	#top{ width: 100px; height: 100px; padding: 8px; }
	#top i{ width: 12px; height: 25px; }
}

@media screen and (max-width: 1200px){
	#footer{ text-align: center; padding-top: 160px; }
	#footer .logo{ margin-bottom: 15px; }
	#footer .logo img{ height: 35px; }
	#footer .info{ position: static; }
	
	#footer address dl dt{ margin-bottom: 10px; }
	#footer address dl.flex{ justify-content: center; }
	#footer address dl.flex dt{ margin-right: 10px; }
	#footer address .dl{ justify-content: center; margin-inline: -10px; }
	#footer address .dl dl{ margin-inline: 10px; }

	#footer .right{ display: flex; flex-direction: column-reverse; justify-content: center; position: relative; margin-top: 15px; }
	#footer .sns{ margin: 20px 0 0; }
	#footer .sns ul{ justify-content: center; }
	#footer .policy ul{ justify-content: center; }

	#footer .support dl{ justify-content: center; }
	#footer .support dl dt{ padding-right: 20px; }
	#footer .support dl dd{ margin: -10px; }
	#footer .support dl dd figure{ margin: 10px; }

	/* top */
	#top{ width: 90px; height: 90px; padding: 7px; top: 40px; }
	#top i{ width: 10px; height: 20px; }
}

@media screen and (max-width: 600px){
	#footer address dl em{ display: block; }
}