@charset 'utf-8';

/* ���� */
:root{
    --baseFont: 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--engFont: 'Exo 2', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;

	--mainColor: #E60012;
	--mainRGB: 230, 0, 18;

	--vh: 100%;
	--resizeVH: 100vh;
	--headerH: 100px;

	--aosP: 100px;
	--aosM: -100px;
	--aosT: 800ms;
}

*{ box-sizing: border-box; word-break: keep-all; line-height: 1.3; }
body.lock{ overflow: hidden; }
body{ font-size: 16px; }
body *{ font-size: inherit; }

.w1920{ max-width: 1920px; width: 100%; margin: 0 auto; }
.w1740{ max-width: 1780px; width: 100%; margin: 0 auto; padding: 0 20px; }
.w1720{ max-width: 1760px; width: 100%; margin: 0 auto; padding: 0 20px; }
.w1500{ max-width: 1540px; width: 100%; margin: 0 auto; padding: 0 20px; }
.w1450{ max-width: 1490px; width: 100%; margin: 0 auto; padding: 0 20px; }
.w1300{ max-width: 1340px; width: 100%; margin: 0 auto; padding: 0 20px; }

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

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

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

@media screen and (max-width: 1700px){
	:root{
		--headerH: 90px;
	}
	html{ font-size: 50%; }
}

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

		--aosP: 50px;
		--aosM: -50px;
	}

	html{ font-size: 40%; }
}

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

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

/* privacy */
.privacy * { font-size: 18px; font-weight: 300; color: #111; line-height: 1.5; }
.privacy > *:not(:last-child){ margin-bottom: 100px; }
.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: 400; }
.privacy .textBox dl dd{ margin-top: 5px; }

.privacy .textBox > *:not(:last-of-type){ 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: 1600px){
	.privacy > *:not(:last-child){ margin-bottom: 70px; }

	.privacy dl dt{ font-size: 19px; }
	.privacy .textBox dl dt{ font-size: 18px; }
}

@media screen and (max-width: 1280px){
	.privacy * { font-size: 17px; }
	.privacy > *:not(:last-child){ margin-bottom: 50px; }

	.privacy .textBox > *:not(:last-of-type){ margin-bottom: 30px; }

	.privacy dl dt{ font-size: 18px; }
	.privacy dl dd{ margin-top: 5px; }
	.privacy .textBox dl dt{ font-size: 17px; }
}


/* header */
#header{
	--before: 140px;
	--after: 180px;
}
#header .logo,
#header nav,
#header .lang{ opacity: 1; transition: opacity 0.4s; }

#header{ width: 100%; background: transparent; box-shadow: 0 0 20px rgba(85, 85, 85, 0); position: absolute; top: 0; left: 0; z-index: 999; transition: background 0.3s, box-shadow 0.3s; }
#header::after{ content: ""; width: 100%; height: 1px; background: transparent; position: absolute; bottom: 0; left: 0; pointer-events: none; transition: background 0.3s; }
#header .navBg{ width: 100%; height: 0; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(40px); position: absolute; top: 0; left: 0; z-index: -1; transition: height 0.5s 0.2s; }
#header .flex-box{ height: var(--headerH); display: flex; justify-content: space-between; align-items: center; }
#header .logo a{ display: flex; }
#header .logo svg{ width: auto; height: auto; }
#header .logo svg path{ transition: fill 0.3s; }
#header .logo svg path{ fill: #FFF; }
#header .logo svg path.red{ fill: var(--mainColor) !important; }


#header nav{ text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#header nav a{ font-family: var(--engFont); }
#header .depth01{ display: flex; }
#header .depth01 > li{ width: var(--before); position: relative; transition: width 0.4s; }
#header .depth01 > li > a{ width: 100%; height: var(--headerH); display: flex; justify-content: center; align-items: center; font-size: 19px; font-weight: 500; color: #FFF; letter-spacing: -0.02em; position: relative; z-index: 10; transition: color 0.3s; }
#header .depth01 > li > a::after{ content: ""; width: 100%; height: 2px; background: var(--mainColor); position: absolute; bottom: 0; left: 0; transform: scaleX(0); transition: transform 0.3s; pointer-events: none; }

#header .depthBox{ width: var(--after); height: calc(var(--headerH) + var(--navH)); position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding-top: var(--headerH); pointer-events: none; }
#header .depth02{ padding: 30px 0 75px; }
#header .depth02 > li{ transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transition: transform 0.4s, clip-path 0.4s; }
#header .depth02 > li > a{ display: block; font-size: 18px; font-weight: 400; color: rgba(255, 255, 255, 0.5); letter-spacing: -0.02em; line-height: 1.3; padding: 10px; transition: color 0.3s; }


#header .right{ display: flex; align-items: center; margin-right: -20px; }
#header .right button{ height: var(--headerH); display: flex; background: none; border: none; padding: 20px; }

#header .lang{ position: relative; }
#header .lang button{ align-items: center; }
#header .lang button img,
#header .lang button::after{ filter: unset; -webkit-filter: unset; transition: filter 0.3s, transform 0.3s; }
#header .lang button::after{ content: ""; display: inline-block; width: 10px; height: 7px; background: url("/img/common/lang_arrow.svg") no-repeat center center / contain; margin-left: 15px; transform: rotate(0); }
#header .lang div{ position: absolute; top: calc(100% - 10px); left: 50%; transform: translateX(-50%); pointer-events: none; }
#header .lang ul{ background: #FFF; border-radius: 5px; padding: 10px 0; filter: drop-shadow(0 -1px 8px rgba(0, 0, 0, 0.07)); -webkit-filter: drop-shadow(0 -1px 8px rgba(0, 0, 0, 0.07)); transform: translateY(20px); opacity: 0; transition: transform 0.4s, opacity 0.4s; }
#header .lang ul::before{ content: ""; width: 23px; height: 16px; background: #FFF; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); position: absolute; top: 1px; left: 50%; transform: translate(-50%, -100%); }
#header .lang ul li a{ display: block; font-size: 16px; font-weight: 300; color: #777; line-height: 1.3; text-align: center; padding: 3px 15px; }
#header .lang ul li.on a{ color: var(--mainColor); }

#header .lang.active button::after{ transform: rotate(-180deg); }
#header .lang.active div{ pointer-events: auto; }
#header .lang.active ul{ transform: translateY(0); opacity: 1; }

#header .menu button{ flex-direction: column; justify-content: center; }
#header .menu span{ display: inline-block; width: 60px; height: 3px; background: #FFF; vertical-align: middle; transition: background 0.3s, width 0.3s, transform 0.3s, margin 0.3s; }
#header .menu span:first-of-type{ margin-bottom: 8px; }

/* header - scroll */
#header.scroll{ background: #FFF; box-shadow: 0 0 20px rgba(85, 85, 85, 0.08); }
#header.scroll .logo svg path.gray{ fill: #595757; }
#header.scroll .logo svg path.light{ fill: #898989; }
#header.scroll .depth01 > li > a{ color: #111; }
#header.scroll .lang button img,
#header.scroll .lang button::after{ filter: invert(1); -webkit-filter: invert(1); }
#header.scroll span{ background: #111; }

/* header - hover */
#header.hover{ background: transparent; box-shadow: 0 0 20px rgba(85, 85, 85, 0); }
#header.hover::after{ background: rgba(255, 255, 255, 0.1); }
#header.hover .navBg{ height: calc(var(--headerH) + var(--navH)); transition-delay: unset; }
#header.hover .logo svg path.gray{ fill: #FFF; }
#header.hover .logo svg path.light{ fill: #FFF; }
#header.hover .depth01 > li > a{ color: #FFF; }
#header.hover .depthBox{ pointer-events: auto; }
#header.hover .depth02 > li{ transform: translateY(0); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition-delay: 0.2s; }
#header.hover .lang button img,
#header.hover .lang button::after{ filter: unset; -webkit-filter: unset; }
#header.hover span{ background: #FFF; }

@media screen and (hover: hover){
	#header nav:hover .depth01 > li{ width: var(--after); }
	#header .depth01 > li:not(.none):hover > a{ color: var(--mainColor); }
	#header .depth01 > li:not(.none):hover > a::after{ transform: scaleX(1); }
	#header .depth01 > li.none > a:hover{ color: var(--mainColor); }
	#header .depth01 > li.none > a:hover::after{ transform: scaleX(1); }
	#header .depth02 > li:hover > a{ color: #FFF; }
}

@media screen and (max-width: 1700px){
	#header .logo svg{ height: 45px; }
	#header .menu span{ width: 50px; }
}

@media screen and (max-width: 1280px){
	#header{
		--before: 130px;
		--after: 160px;
	}
	#header .depth01 > li > a{ font-size: 18px; }
	#header .depth02{ padding: 20px 0 50px; }
	#header .depth02 > li > a{ font-size: 17px; padding: 7px 3px; }

	#header .right{ margin-right: -15px; }
	#header .right button{ padding: 15px; }

	#header .lang div{ top: calc(100% - 5px); }
	#header .lang ul::before{ width: 16px; height: 10px; }
	#header .lang ul li a{ padding: 3px 12px; }
}

@media screen and (max-width: 1200px){
	#header .logo svg{ height: 40px; }
	#header nav{ display: none; }
	#header .menu span{ width: 35px !important; }
}

/* menu */
#menu{
	--inset: 50px;
}
#menu{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 900; display: none; }
#menu .bg{ height: 100%; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(20px); transform: translateY(var(--aosP)); clip-path: inset(var(--inset) var(--inset) var(--inset) var(--inset) round 20px); -webkit-clip-path: inset(var(--inset) var(--inset) var(--inset) var(--inset) round 20px); transition: transform 0.5s 0.3s, clip-path 0.5s 0.3s; }
#menu *{ color: #FFF; }
#menu .inner{ max-width: 1700px; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; padding: 0 20px; position: relative; margin: 0 auto; }
#menu .inner::before{ content: ""; width: 1px; height: 100%; background: rgba(255, 255, 255, 0.1); position: absolute; top: 0; left: 54.5%; }
#menu .grid-box{ width: 100%; display: grid; grid-template-columns: 54.5% 45.5%; opacity: 0; transform: translateY(var(--aosP)); transition: opacity 0.5s 1s, transform 0.5s 1s; }
#menu .grid-box > *{ padding: calc(var(--headerH) + 20px) 0; }
#menu .mobile{ display: none; }


#menu nav > div{ position: relative; padding-right: 65px; }
#menu nav a{ display: block; line-height: 1.3; }
#menu .depth01{ display: grid; grid-template-columns: repeat(3, 1fr); margin: -30px 0; }
#menu .depth01 > li{ margin: 30px 0; }
#menu .depth01 > li > a{ font-family: var(--engFont); font-size: 37px; font-weight: 500; letter-spacing: -0.02em; padding: 30px 0; position: relative; }
#menu .depth01 > li > a::before{ content: ""; width: 30px; height: 5px; background: var(--mainColor); clip-path: inset(0 100% 0 0 round 99px); -webkit-clip-path: inset(0 100% 0 0 round 99px); position: absolute; top: 0; left: 0; transition: clip-path 0.4s; }
#menu .depth02 > li > a{ font-size: 20px; font-weight: 200; color: rgba(255, 255, 255, 0.5); letter-spacing: -0.02em; padding: 10px 0; transition: color 0.3s; }


#menu .right .pLeft{ padding-left: 110px; }
#menu .right figure{ display: block; position: relative; border-radius: 20px; overflow: hidden; padding-bottom: 77.45%; margin-bottom: 80px; }
#menu .right figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#menu address{ margin: -8px 0; }
#menu address dl{ display: flex; font-family: var(--engFont); font-size: 18px; letter-spacing: -0.02em; padding: 8px 0; }
#menu address dl dt{ font-weight: 500; padding-right: 15px; }
#menu address dl dd{ font-weight: 200; }
#menu address .flex{ display: flex; flex-wrap: wrap; margin: 0 -22px; }
#menu address .flex dl{ padding-left: 22px; padding-right: 22px; }

#menu .copyright{ font-family: var(--engFont); font-size: 18px; font-weight: 200; color: rgba(255, 255, 255, 0.3); margin-top: 35px; }


/* body - open */
body.open{ overflow: hidden; }
body.open #header{ background: transparent; box-shadow: 0 0 20px rgba(85, 85, 85, 0); }
body.open #header .logo,
body.open #header nav,
body.open #header .lang{ opacity: 0; pointer-events: none; }
body.open #header .menu span{ width: 40px; background: #FFF; }
body.open #header .menu span:first-of-type{ transform: rotate(45deg); margin-bottom: -3px; }
body.open #header .menu span:last-of-type{ transform: rotate(-45deg); }

body.open #menu .bg{ transform: translateY(0); clip-path: inset(0 0 0 0 round 0); -webkit-clip-path: inset(0 0 0 0 round 0); transition: transform 0.5s, clip-path 0.5s 0.5s; }
body.open #menu .grid-box{ opacity: 1; transform: translateY(0); }

@media screen and (hover: hover){
	#menu .depth02 > li:hover > a{ font-weight: 500; color: #FFF; }
	#menu .depth01 > li:hover > a::before{ clip-path: inset(0 0 0 0 round 99px); -webkit-clip-path: inset(0 0 0 0 round 99px); }
}

@media screen and (max-width: 1700px){
	#menu nav > div{ padding-right: 40px; }
	#menu .depth01 > li > a{ font-size: 30px; padding: 20px 0; }
	#menu .depth02 > li > a{ font-size: 19px; }

	#menu .right .pLeft{ padding-left: 80px; }
	#menu .right figure{ margin-bottom: 50px; }
	#menu address{ margin: -5px 0; }
	#menu address dl{ padding: 5px 0; }
	#menu .copyright{ margin-top: 25px; }
}

@media screen and (max-width: 1280px){
	#menu .inner::before{ left: 60%; }
	#menu .grid-box{ grid-template-columns: 60% 40%; }

	#menu nav > div{ padding-right: 30px; }
	#menu .depth01 > li > a{ font-size: 26px; padding: 15px 0; }
	#menu .depth01 > li > a::before{ width: 20px; height: 3px; }
	#menu .depth02 > li > a{ font-size: 18px; }

	#menu .right .pLeft{ padding-left: 25px; }
	#menu .right figure{ margin-bottom: 30px; }
	#menu address dl{ font-size: 17px; }
	#menu address dl dt{ padding-right: 10px; }
	#menu address .flex{ margin: 0 -10px; }
	#menu address .flex dl{ padding-left: 10px; padding-right: 10px; }
	#menu .copyright{ font-size: 17px; margin-top: 15px; }
}

@media screen and (max-width: 1200px){
	#menu .inner{ align-items: flex-start; }
	#menu .inner::before{ display: none; }
	#menu .grid-box{ display: block; }
	#menu .grid-box > *{ padding: var(--headerH) 0; }
	#menu .pc{ display: none; }
	#menu .mobile{ display: block; }

	#menu nav > div{ padding-right: 0; }
	#menu nav .depth01{ display: block; margin: 0 !important; }
	#menu nav .depth01 > li{ border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin: 0 !important; }
	#menu nav .depth01 > li:first-of-type{ border-top: 1px solid rgba(255, 255, 255, 0.1); }
	#menu nav .depth01 > li > a{ padding: 15px; }
	#menu nav .depth01 > li > a::before{ display: none; }
	#menu nav .depthBox{ display: none; }
	#menu nav .depth02{ background: rgba(255, 255, 255, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 7px 0; }
	#menu nav .depth02 > li > a{ font-size: 20px; padding: 7px 15px; }

	#menu .right{ display: none; }
}

/* footer */
#footer{ background: #111; border-radius: 30px 30px 0 0; padding: 90px 0 50px; }
#footer .flex{ display: flex; justify-content: space-between; }
#footer .line01{ padding-bottom: 55px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
#footer .line02{ padding-top: 50px; }
#footer .line02 > .flex{ align-items: flex-end; }

#footer .logo a{ display: inline-block; }
#footer .logo svg{ width: auto; height: 80px; }
#footer .logo svg path:not(.red){ fill: #FFF; }

#footer nav ul{ display: flex; flex-wrap: wrap; margin-top: -20px; margin-right: -20px; }
#footer nav ul li a{ display: inline-block; font-family: var(--engFont); font-size: 19px; font-weight: 300; color: #FFF; letter-spacing: -0.02em; padding: 20px; }
#footer nav ul li.policy a{ font-weight: 500; }

#footer address{ margin: -8px 0; }
#footer address dl{ display: flex; font-family: var(--engFont); font-size: 18px; color: #FFF; letter-spacing: -0.02em; padding: 8px 0; }
#footer address .flex{ justify-content: flex-start; margin: 0 -20px; }
#footer address .flex dl{ padding-left: 20px; padding-right: 20px; }
#footer address dl dt{ font-weight: 500; padding-right: 15px; }
#footer address dl dd{ font-weight: 200; }

#footer .copyright{ font-family: var(--engFont); font-size: 18px; font-weight: 200; color: rgba(255, 255, 255, 0.3); letter-spacing: -0.02em; margin-top: 40px; }


/* top */
#top{
	--gap: 16px;
}
#top{ width: 65px; height: 65px; background: #FFF; border: 1px solid rgba(var(--mainRGB), 0.2); box-shadow: 0 0 10px rgba(var(--mainRGB), 0.2); border-radius: 15px; position: fixed; bottom: 30px; right: 30px; z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.4s, background 0.4s, border-color 0.4s, box-shadow 0.4s; }
#top div{ height: 30px; position: relative; overflow: hidden; }
#top i{ display: block; width: 100%; height: 100%; }
#top i::before{ content: ""; width: 100%; height: 100%; display: block; background: url("/img/common/top_icon_red.svg") no-repeat center center / contain; transition: filter 0.4s; }
#top i:first-of-type{ position: relative; top: 0; transform: translateY(0); }
#top i:last-of-type{ position: absolute; bottom: calc(var(--gap) * -1); left: 0; transform: translateY(100%); }

#top.opacity{ opacity: 1; pointer-events: auto; }
#top.white{ background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 0 10px rgba(255, 255, 255, 0.2); }
#top.white i::before{ filter: grayscale(1) brightness(5); -webkit-filter: grayscale(1) brightness(5); }

@media screen and (hover: hover){
	#top:hover i:first-of-type{ animation: top01 0.5s both; }
	#top:hover i:last-of-type{ animation: top02 0.5s both; }
}

@media screen and (max-width: 1700px){
	/* footer */
	#footer{ padding: 70px 0 40px; }
	#footer .line01{ padding-bottom: 40px; }
	#footer .line02{ padding-top: 40px; }

	#footer .logo svg{ height: 60px; }

	#footer nav ul li a{ font-size: 18px; }

	#footer address dl{ font-size: 17px; }

	#footer .copyright{ font-size: 17px; margin-top: 30px; }

	/* top */
	#top{ width: 60px; height: 60px; }
	#top div{ height: 25px; }
}

@media screen and (max-width: 1280px){
	/* footer */
	#footer{ padding: 40px 0 30px; }
	#footer .line01{ padding-bottom: 25px; }
	#footer .line02{ padding-top: 25px; }

	#footer .logo svg{ height: 45px; }

	#footer nav ul{ margin-top: -15px; margin-right: -15px; }
	#footer nav ul li a{ font-size: 17px; padding: 15px; }

 	#footer address{ margin: -5px 0; }
	#footer address dl{ font-size: 16px; padding: 5px 0; }
	#footer address .flex{ margin: 0 -10px; }
	#footer address .flex dl{ padding-left: 10px; padding-right: 10px; }

	#footer .copyright{ font-size: 16px; margin-top: 20px; }

	/* top */
	#top{
		--gap: 10px;
	}
	#top{ width: 55px; height: 55px; bottom: 20px; right: 20px; }
	#top div{ height: 22px; }
}

@media screen and (max-width: 800px){
	/* footer */
	#footer nav ul{ margin: -15px; }
	#footer nav ul li:not(.policy){ display: none; }

	#footer address .flex{ flex-direction: column; }
}