@charset 'utf-8';

/* ���� */
:root{
    --baseFont: 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--engFont: 'Poppins', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--nanum: 'NanumSquare', '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: 700ms;
}

html, 
body{ -ms-overflow-style: none; scrollbar-width: none; }
html::-webkit-scrollbar, 
body::-webkit-scrollbar{ display: none; }

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

.w1920{ max-width: 1920px; width: 100%; margin: 0 auto; }
.w1840{ max-width: 1880px; width: 100%; margin: 0 auto; padding: 0 20px; }
.w1820{ max-width: 1860px; width: 100%; margin: 0 auto; padding: 0 20px; }
.w1720{ max-width: 1760px; 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;

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

	html{ font-size: 40%; }
}

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


/* scrolldown */
.scrolldown{
	--before: 13px;
	--after: 6px;
}
.scrolldown .icon{ width: 26px; height: 45px; margin: 0 auto; overflow: hidden; }
.scrolldown .icon div{ height: 100%; border: 2px solid rgba(255, 255, 255, 0.15); border-radius: 999px; position: relative; padding: 8px 0; }
.scrolldown .icon div::before{ content: ""; width: 100%; height: 100%; border: 2px solid #FFF; border-radius: inherit; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); clip-path: inset(0 0 100% 0); -webkit-clip-path: inset(0 0 100% 0); will-chanage: clip-path; animation: scrollDown01 3s infinite; }
.scrolldown .icon i{ display: inline-block; width: var(--after); height: var(--before); background: #FFF; border-radius: 999px; top: -700%; transform: translateY(-700%); will-change: height, top, transform; animation: scrollDown02 3s infinite; }
.scrolldown p{ font-family: var(--engFont); font-size: 16px; font-weight: 400; color: #FFF; letter-spacing: -0.02em; margin-top: 20px; transform: translateY(0); opacity: 1; animation: scrollDown04 3s infinite; }
.scrolldown p span{ display: inline-block; transform: translateY(-100%); opacity: 0; animation: scrollDown03 3s infinite; }  

@media screen and (max-width: 1280px){
	.scrolldown{
		--before: 12px;
		--after: 5px;
	}
	.scrolldown .icon{ width: 23px; height: 40px; }
	.scrolldown p{ font-size: 15px; margin-top: 15px; }
}


/* privacy */
.privacy * { font-size: 19px; font-weight: 300; color: #111; 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 .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: 1720px){
	.privacy * { font-size: 18px; }
	.privacy > *:not(:last-child){ margin-bottom: 80px; }
	.privacy dl dt{ font-size: 20px; }
	.privacy .textBox dl dt{ font-size: 18px; }
}

@media screen and (max-width: 1600px){
	.privacy br{ display: none; }
}

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


/* roundBtn */
.roundBtn{ display: inline-flex; align-items: center; background: none; border: none; font-family: var(--engFont); font-size: 18px; font-weight: 300; color: #FFF; padding: 10px; margin: -10px; }
.roundBtn i{ width: 50px; height: 50px; 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%; margin-left: 15px; position: relative; transform: translateY(-2px); }
.roundBtn i::before{ content: ""; width: 100%; height: 100%; background: #FFF; border-radius: 50%; position: absolute; top: 0; left: 0; transform: scale(0); transition: transform 0.4s; }
.roundBtn i::after{ content: ""; width: 12px; height: 12px; display: inline-block; background: url("/img/main/viewmore.svg") no-repeat center center / contain; filter: grayscale(1) invert(1); -webkit-filter: grayscale(1) invert(1); transition: filter 0.4s; }

@media screen and (hover: hover) and (pointer: fine){
	.roundBtn:hover i::before{ transform: scale(1); }
	.roundBtn:hover i::after{ filter: grayscale(1); -webkit-filter: grayscale(1); }
}

@media screen and (max-width: 1700px){
	.roundBtn i{ width: 45px; height: 45px; }
}

@media screen and (max-width: 1280px){
	.roundBtn{ font-size: 17px; }
	.roundBtn i{ width: 40px; height: 40px; }
	.roundBtn i::after{ width: 10px; height: 10px; }
}


/* header */
#header{
	--height: 55px;
	--padding: 0 40px;
	--bg: rgba(255, 255, 255, 0.1);
	--border: rgba(255, 255, 255, 0.15);
	--radius: 999px;
	--blur: blur(3px);
}
#header{ width: 100%; background: transparent; position: fixed; top: 0; left: 0; z-index: 900; text-align: center; transform: translateY(0); transition: background 0.4s, transform 0.4s; }
#header *{ font-family: var(--engFont); font-size: 19px; font-weight: 400; color: #FFF; }
#header .flex-box{ height: var(--headerH); display: flex; justify-content: space-between; align-items: center; /* padding-bottom: 15px; */ }
#header .right{ display: flex; align-items: center; }
#header .right > *:not(:first-child){ margin-left: 30px; }
#header .right > a{ height: var(--height); display: flex; align-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: var(--blur); -webkit-text-stroke: 0.01em transparent; -webkit-text-stroke: 0.01em transparent; padding: var(--padding); transition: background 0.4s, color 0.4s, text-stroke-color 0.4s; }

#header h1 a{ display: block; position: relative; }
#header h1 a::after{ content: ""; width: 100%; height: 100%; background: url("/img/common/logo_color.svg") no-repeat center center / contain; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.4s; }
#header h1 img{ opacity: 1; transition: opacity 0.4s; }

#header nav{ background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: var(--blur); }
#header .depth01{ display: flex; }
#header .depth01 > li{ position: relative; }
#header .depth01 > li::after{ content: ""; width: 1px; height: 12px; background: var(--border); position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
#header .depth01 > li:last-of-type::after{ display: none; }
#header .depth01 > li > a{ height: var(--height); display: flex; align-items: center; padding: var(--padding); -webkit-text-stroke: 0.01em transparent; -webkit-text-stroke: 0.01em transparent; transition: color 0.4s, text-stroke-color 0.4s; }
#header .depth01 > li div{ min-width: 150px; padding-top: 15px; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); clip-path: inset(0 0 100% 0); -webkit-clip-path: inset(0 0 100% 0); transition: clip-path var(--aosT); }

#header .depth02{ background: #111; border-radius: 20px; padding: 18px 0; }
#header .depth02 > li > a{ display: block; font-size: 18px; font-weight: 500; color: rgba(255, 255, 255, 0.4); letter-spacing: -0.02em; line-height: 1.3; white-space: nowrap; padding: 7px 30px; transition: color 0.4s; }

#header .lang{ position: relative; }
#header .lang button{ display: flex; align-items: center; background: none; border: none; text-stroke: 0.01em transparent; -webkit-text-stroke: 0.01em transparent; padding: 15px 0; }
#header .lang button i{ width: 26px; height: 26px; display: inline-block; background: url("/img/common/lang_icon.svg") no-repeat center center / contain; margin-right: 7px; }
#header .lang ul{ background: #111; border-radius: 15px; width: 100%; padding: 11px 0; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); clip-path: inset(0 0 100% 0); -webkit-clip-path: inset(0 0 100% 0); transition: clip-path 0.5s; }
#header .lang ul li a{ display: block; font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, 0.3); line-height: 1.3; padding: 4px 0; }
#header .lang ul li.on a{ color: #FFF; }
#header .lang.active ul{ clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); } 

#header .menu{ width: var(--height); height: var(--height); display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: 50%; padding: 0; position: relative; }
#header .menu::before{ content: ""; width: 100%; height: 100%; background: #FFF; border-radius: 50%; position: absolute; top: 0; left: 0; transform: scale(0); transition: transform 0.4s; }
#header .menu span{ display: inline-block; width: 18px; height: 2px; background: #FFF; border-radius: 99px; vertical-align: middle; position: relative; z-index: 10; transition: background 0.4s; }
#header .menu span:not(:last-of-type){ margin-bottom: 5px; }

/* header - scroll */
#header.scroll{ background: #000; }

/* header - hover */
#header.hover h1 a::after{ opacity: 1; }
#header.hover h1 img{ opacity: 0; }

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

/* body - open */
body.open #header .menu::before{ transform: scale(1); }
body.open #header .menu span{ background: #111; }

@media screen and (hover: hover) and (pointer: fine){
	#header .depth01:hover > li > a{ color: rgba(255, 255, 255, 0.5); }
	#header .depth01 > li:hover > a{ color: var(--mainColor); -webkit-text-stroke-color: var(--mainColor); -webkit-text-stroke-color: var(--mainColor); }
	#header .depth01 > li:hover div{ clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }

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

	#header .right > a:hover{ background: #FFF; color: #111; -webkit-text-stroke-color: #111; -webkit-text-stroke-color: #111; }

	#header .menu:hover::before{ transform: scale(1); }
	#header .menu:hover span{ background: #111; }
}

@media screen and (max-width: 1700px){
	#header{
		--height: 50px;
		--padding: 0 30px;
	}
	#header *{ font-size: 18px; }
	#header h1 img{ height: 35px; }

	#header .depth01 > li div{ min-width: 140px; }

	#header .depth02{ padding: 13px; }
	#header .depth02 > li > a{ font-size: 17px; padding: 7px 20px; }
}

@media screen and (max-width: 1280px){
	#header{
		--height: 45px;
		--padding: 0 25px;
	}
	#header *{ font-size: 17px; }
	#header h1 img{ height: 32px; }

	#header .lang button i{ width: 24px; height: 24px; }

	#header .depth01 > li div{ min-width: 130px; }

	#header .depth02{ padding: 9px 0; }
	#header .depth02 > li > a{ font-size: 16px; padding: 6px 15px; }
}

@media screen and (max-width: 1200px){
	#header{
		--padding: 0 20px
	}
	#header .flex-box{ align-items: center; padding-bottom: 0; }
	#header nav{ display: none; }
}

@media screen and (max-width: 900px){
	#header{
		--padding: 0 15px;
	}
	
	#header h1 img{ height: 30px; }
	#header .right > *:not(:first-child){ margin-left: 15px; }
	#header .right > a{ height: 40px; font-size: 16px; }

	#header .lang button i{ width: 22px; height: 22px; }
}


/* menu */
#menu{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; overflow: hidden; pointer-events: none; }
#menu .blank{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
#menu .blank + div{ height: 100%; padding-block: 20px 40px; }
#menu .inner{ max-width: 540px; height: 100%; background: #111 url("/img/common/menu_bg.png") no-repeat bottom center / contain; border-radius: 20px; margin-left: auto; position: relative; z-index: 100; transform: translateX(100%); opacity: 0; transition: transform var(--aosT), opacity var(--aosT); }
#menu .pc{ display: none; }

#menu .top{ height: calc(var(--headerH) + 15px); display: flex; justify-content: flex-end; align-items: center; padding-inline: 30px; padding-bottom: 15px; }
#menu .close{ width: 50px; height: 50px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; position: relative; }
#menu .close span{ display: inline-block; width: 18px; height: 2px; background: #FFF; border-radius: 99px; vertical-align: middle; position: absolute; top: 50%; left: 50%; }
#menu .close span:first-of-type{ transform: translate(-50%, -50%) rotate(-45deg); }
#menu .close span:last-of-type{ transform: translate(-50%, -50%) rotate(45deg); }

#menu .bottom{ height: calc(100% - var(--headerH) - 15px); display: flex; flex-direction: column; padding: 60px 65px; padding-top: 0 !important; }
#menu nav{ height: calc(100% - 50px); flex: 1 0 auto; overflow-x: clip; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; }
#menu nav::-webkit-scrollbar{ display: none; }
#menu nav a{ display: block; font-family: var(--engFont); line-height: 1.3; }
#menu .depth01{ margin-top: -15px; }
#menu .depth01 > li > a{ font-size: 4.8rem; font-weight: 400; color: #FFF; padding: 15px 0; }
#menu .depth01 > li div{ display: none; margin-bottom: 5px; }
#menu .depth02{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); margin: 0 -15px; }
#menu .depth02 > li > a{ font-size: 18px; font-weight: 300; color: rgba(255, 255, 255, 0.8); padding: 10px 15px; }

#menu .roundBtn{ color: #FFF; }

/* body - open */
html.open, 
html.open body{ overflow: hidden; }
html.open #menu{ pointer-events: auto; }
html.open #menu .inner{ transform: translateX(0); opacity: 1; transition-delay: 0.3s; }

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

@media screen and (max-width: 1700px){
	#menu .inner{ max-width: 500px; }
	#menu .bottom{ padding: 40px 45px; }
	#menu .depth01 > li > a{ padding: 10px 0; }
}

@media screen and (max-width: 1280px){
	#menu .blank + div{ padding-block: 13px; }
	#menu .close{ width: 45px; height: 45px; }
}

@media screen and (max-width: 1200px){
	#menu .top{ height: var(--headerH); padding-bottom: 0; }
	#menu .bottom{ height: calc(100% - var(--headerH)); }

	#menu .depth01{ margin-top: 0; }
}

@media screen and (max-width: 900px){
	#menu .blank{ display: none; }
	#menu .w1840{ width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
	#menu .inner{ max-width: 100% !important; width: 100% !important; height: 100%; border-radius: 0; position: absolute; top: 0; left: 0; }
	#menu .bottom{ padding: 30px 35px; }

	#menu .depth01 > li > a{ font-size: 6.5rem; }
	#menu .depth02 > li > a{ font-size: 20px; }
}


/* footer */
#footer{ background: #000; padding: 80px 0 60px; position: relative; overflow: hidden; }
#footer *{ color: #FFF; }
#footer .flex-box{ display: flex; justify-content: space-between; }
#footer .line01{ margin-bottom: 45px; }
#footer .line02 .flex-box{ align-items: flex-end; }
#footer .line03{ margin-top: 45px; }
#footer .line03 .flex-box{ align-items: center; }

#footer h1 img{ width: auto; height: 60px; }
#footer h2{ font-size: 18px; font-weight: 400; margin-bottom: 21px; }

#footer nav{ overflow: hidden; }
#footer .depth01{ display: flex; margin: -10px -40px; }
#footer .depth01 > li > a{ display: block; font-family: var(--engFont); font-size: 19px; font-weight: 400; color: #FFF; padding: 10px 40px; }

#footer address{ font-family: var(--engFont); font-size: 18px; margin: -7px -25px; }  
#footer address dl{ display: flex; align-items: baseline; margin: 7px 25px; }
#footer address dl dt{ font-weight: 400; color: rgba(255, 255, 255, 0.5); padding-right: 12px; }
#footer address dl dd{ font-weight: 200; }
#footer address div{ display: flex; flex-wrap: wrap; }

#footer .copyright{ font-family: var(--engFont); font-size: 17px; font-weight: 300; color: rgba(255, 255, 255, 0.5); }

#footer .right{ display: flex; align-items: center; }
#footer .right > a{ display: block; font-size: 17px; font-weight: 400; color: #FFF; padding: 10px; margin: -10px; }
#footer .familysite{ margin-left: 50px; position: relative; }
#footer .familysite *{ font-family: var(--engFont); font-size: 17px; }
#footer .familysite button{ height: 48px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px; font-weight: 500; padding: 0 30px; position: relative; z-index: 10; outline: none; transition: color 0.3s; }
#footer .familysite button::after{ content: ""; display: inline-block; width: 24px; height: 24px; background: url("/img/common/familysite_arrow.svg") no-repeat center center / contain; vertical-align: middle; margin-left: 10px; transform: translateY(-1px) scaleY(1); transition: transform 0.3s, filter 0.3s; }
#footer .familysite ul{ width: 100%; background: #FFF; border-radius: 20px; position: absolute; bottom: 0; left: 0; padding: 13px 0 48px; opacity: 0; transform: translateY(15px); transition: opacity 0.3s, transform 0.3s; pointer-events: none; }
#footer .familysite ul > li > a{ display: block; font-weight: 500; color: rgba(17, 17, 17, 0.4); padding: 7px 30px; transition: color 0.3s; }

#footer .familysite.on button{ color: #111; }
#footer .familysite.on button::after{ transform: translateY(-1px) scaleY(-1); filter: invert(1); -webkit-filter: invert(1); }
#footer .familysite.on ul{ opacity: 1; transform: translateY(0); pointer-events: auto; }

/* top */
#top{ width: 188px; height: 188px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; padding: 0; position: relative; }
#top::before{ content: ""; width: 100%; height: 100%; background: #FFF; border-radius: 50%; position: absolute; top: 0; left: 0; transform: scale(0); transition: transform 0.4s; }
#top i{ width: 100%; height: 40px; display: inline-block; background: url("/img/common/icon_top.svg") no-repeat center center / contain; transition: filter 0.4s; }

@media screen and (hover: hover) and (pointer: fine){
	#footer .familysite ul > li:hover > a{ color: #111; }
	
	/* top */
	#top:hover::before{ transform: scale(1); }
	#top:hover i{ filter: invert(1); -webkit-filter: invert(1); }
}

@media screen and (max-width: 1700px){
	#footer{ padding: 60px 0 40px; }
	#footer h1 img{ height: 50px; }

	#footer .depth01{ margin: -10px -30px; }
	#footer .depth01 > li > a{ font-size: 18px; padding: 10px 30px; }

	/* top */
	#top{ width: 140px; height: 140px; }
	#top i{ height: 30px; }
}

@media screen and (max-width: 1280px){
	#footer{ padding: 40px 0 30px; }
	#footer h1 img{ height: 40px; }
	#footer h2{ font-size: 17px; margin-bottom: 15px; }

	#footer .line01{ margin-bottom: 30px; }
	#footer .line03{ margin-top: 20px; }

	#footer .depth01{ margin: -10px -20px; }
	#footer .depth01 > li > a{ font-size: 17px; padding: 10px 20px; }

	#footer address{ font-size: 17px; }
	#footer address dl dt{ padding-right: 10px; }

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

	#footer .familysite{ margin-left: 20px; }
	#footer .familysite *{ font-size: 16px; }
	#footer .familysite button{ height: 45px; padding: 0 20px; }
	#footer .familysite ul{ padding: 13px 0 45px; }
	#footer .familysite ul > li > a{ padding: 7px 20px; }

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

@media screen and (max-width: 1000px){
	#footer .line01{ margin-bottom: 20px; }
	#footer h1 img{ height: 35px; }
	#footer nav{ display: none; }
}

@media screen and (max-width: 800px){
	#footer .line01{ margin-bottom: -35px; }
	#footer .line02 .flex-box{ flex-direction: column-reverse; align-items: flex-start; }
	#footer .line03 .flex-box{ flex-direction: column-reverse; align-items: flex-start; }

	#footer h2{ margin-bottom: 15px; }

	#footer address{ margin: -5px -15px; }  
	#footer address dl{ margin: 5px 15px; }

	#footer .copyright{ margin-top: 15px; margin-bottom: 15px; }

	/* top */
	#top{ width: 80px; height: 80px; margin-left: auto; }
}

@media screen and (max-width: 600px){
	#footer address > dl dd{ width: 100%; margin-top: 5px; }
}

/* 260226 추가 */
#footer h2 { font-family: var(--engFont); }
#footer .address-box address dl { margin: 10px 25px 0;}
#footer .address-box address dl dt { white-space: nowrap; }
#footer .address-box { display: flex; gap: 30px 100px; }
#footer .address-box address + address { margin-top: 25px; }
#footer .address-box address.email dt { width: 153px; }
#footer .address-box address.email dd { width: calc(100% - 153px); }

@media screen and (max-width: 1280px){
	#footer .address-box { display: flex; gap: 30px 60px; }
	#footer .address-box address.email dt { width: 140px; }
	#footer .address-box address.email dd { width: calc(100% - 140px); }
}
@media screen and (max-width: 1200px){
	#footer .address-box { flex-direction: column; }
}

@media screen and (max-width: 800px){
	#footer .address-box address + address { margin-top: 15px; }
	#footer .address-box address dl { margin: 5px 15px 0;}
}