@charset 'utf-8';

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

	--vh: 100%;
	--resizeVH: var(--vh);
	--headerH: 100px;
	--logoW: 154px;

	--mainColor: #B5182A;
	--mainRGB: 181, 24, 41;
	--grayBg: #F1F1F1;
	--pink: #D93C4F;

	--aosPlus: 100px;
	--aosMinus: -100px;
}

*{ 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; }
.w1840{ max-width: 1880px; width: 100%; margin: 0 auto; padding: 0 20px; }
.w1680{ max-width: 1720px; width: 100%; margin: 0 auto; padding: 0 20px; }
.w1600{ max-width: 1640px; width: 100%; margin: 0 auto; padding: 0 20px; }

/* viewmore */
.viewmore{
	--icon: 40px;
	--before: 10px;
}
.viewmore{ width: max-content; display: flex; justify-content: center; align-items: center; background: var(--mainColor); border: none; border-radius: 990px; font-family: var(--baseFont); font-size: 18px; font-weight: 500; color: #FFF !important; letter-spacing: -0.01em; padding: 12px 10px; }
.viewmore span{ display: inline-block; line-height: 1; padding: 0 15px 0 20px; }
.viewmore i{ display: flex; justify-content: center; align-items: center; width: var(--icon); height: var(--icon); background: #FFF; border-radius: 50%; }
.viewmore i::before{ content: ""; width: 14px; height: 18px; display: inline-block; background: url("/img/common/viewmore_icon.svg") no-repeat center center / contain; }

.viewmore.download i::before{ width: 22px; height: 22px; background: url("/img/common/download_icon.svg") no-repeat center center / contain; }

@media (hover: hover) and (pointer: fine) {
	.viewmore i{ clip-path: circle(calc(var(--before) / 2) at var(--before) 50%); -webkit-clip-path: circle(calc(var(--before) / 2) at var(--before) 50%); transition: clip-path 0.4s; }
	.viewmore i::before{ opacity: 0; transition: opacity 0.4s; }

	.viewmore:hover i{ clip-path: circle(50% at 50% 50%); -webkit-clip-path: circle(50% at 50% 50%); }
	.viewmore:hover i::before{ opacity: 1; }
}


/* reference */
.reference h4{ font-family: var(--engFont); font-size: 40px; font-weight: 700; color: #000; letter-spacing: -0.01em; text-align: center; margin-bottom: 30px; }
.reference .box{ background: #FFF; border: 1px solid #DDD; padding: 60px; }
.reference .box ul li{ font-size: 17px; font-weight: 300; color: #777; letter-spacing: -0.01em; line-height: 1.5; word-break: break-all; padding-left: 20px; position: relative; }
.reference .box ul li:not(:last-of-type){ margin-bottom: 10px; }
.reference .box ul li::before{ content: attr(data-idx); line-height: inherit; position: absolute; top: 0; left: 0; }


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

@media screen and (max-width: 1600px){
	:root{
		--headerH: 90px;
		--logoW: 140px;
	}
	html{ font-size: 50%; }
	
	/* viewmore */
	.viewmore{
		--icon: 35px;
	}
	.viewmore{ font-size: 17px; padding: 10px; }

	/* reference */
	.reference h4{ font-size: 36px; }
	.reference .box{ padding: 40px; }
	.reference .box ul li{ font-size: 16px; }
}

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

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

	html{ font-size: 40%; }

	/* viewmore */
	.viewmore{
		--icon: 30px;
		--before: 7px;
	}
	.viewmore{ font-size: 16px; }
	.viewmore span{ padding: 0 15px 0 10px; }
	.viewmore.download i::before{ width: 20px; height: 20px; }

	/* reference */
	.reference h4{ font-size: 32px; margin-bottom: 20px; }
	.reference .box{ padding: 25px; }
	.reference .box ul li{ font-size: 15px; padding-left: 17px; }
}

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

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

	/* reference */
	.reference .box{ padding: 20px; }
	.reference h4{ font-size: 28px; }
}

/* 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: 1600px){
	.privacy * { font-size: 18px; }
	.privacy > *:not(:last-child){ margin-bottom: 80px; }
	.privacy h4{ font-size: 24px; }

	.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: 60px; }
	.privacy h4{ font-size: 20px; margin-bottom: 10px; }

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

	.privacy .dlBox > *{ margin-top: 10px; }
}


/* header */
#header{
	--before: 180px;
	--after: 240px;
}
#header{ width: 100%; height: var(--headerH); background: transparent; position: fixed; top: 0; left: 0; z-index: 999; transition: background 0.5s; }
#header::after{ content: ""; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.2); position: absolute; bottom: 0; left: 0; transition: background 0.5s; pointer-events: none; }
#header .navBg{ width: 100%; height: 0; background: #FFF; position: absolute; top: 0; left: 0; z-index: -1; transition: height 0.5s 0.3s; box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); pointer-events: none; }
#header .logo{ width: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; pointer-events: none; }
#header .logo a{ width: max-content; height: var(--headerH); display: flex; align-items: center; pointer-events: auto; opacity: 1; transition: opacity 0.5s; }
#header .logo a img{ width: var(--logoW); height: auto; }

#header nav{ width: calc(100% - var(--headerH)); display: flex; justify-content: flex-end; text-align: center; margin-left: auto; padding-right: var(--headerH); opacity: 1; transition: opacity 0.5s; }
#header .nav{ max-width: max-content; position: relative; right: 0; z-index: 10; transform: translateX(0); transition: right 0.5s, transform 0.5s; will-change: right, transform; }
#header .nav .dot{ width: var(--after); position: absolute; top: var(--headerH); left: 0; z-index: 10; transform: translate(0, -50%); opacity: 0; transition: transform 0.5s, opacity 0.5s; }
#header .nav .dot::before{ content: ""; display: block; width: 8px; height: 8px; background: var(--mainColor); border-radius: 50%; margin: 0 auto; }
#header .depth01{ display: flex; }
#header .depth01 > li{ position: relative; }
#header .depth01 > li > a{ width: var(--before); height: var(--headerH); display: flex; justify-content: center; align-items: center; font-family: var(--engFont); font-size: 19px; font-weight: 600; color: #FFF; letter-spacing: -0.02em; position: relative; z-index: 10; transition: width 0.5s, color 0.5s; }

#header .depthBox{ width: 100%; height: calc(var(--headerH) + var(--navH)); position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding-top: var(--headerH); opacity: 0; pointer-events: none; transition: opacity 0.5s; }
#header .depthBox::before{ content: ""; width: 100%; height: calc(100% - var(--headerH)); background: #FEFAFA; position: absolute; bottom: 0; left: 0; z-index: -1; transform: scaleY(0); transform-origin: bottom; transition: transform 0.5s; }
#header .depth02{ padding: 37px 0 52px; }
#header .depth02::before, 
#header .depth02::after{ content: ""; width: 1px; height: var(--navH); background: #E5E5E5; position: absolute; top: var(--headerH); }
#header .depth02::before{ left: 0; }
#header .depth02::after{ right: 0; }
#header .depth01 > li:not(:first-of-type) .depth02::before{ display: none; }
#header .depth02 > li > a{ display: block; font-size: 18px; font-weight: 300; color: #222; padding: 8px 10px; line-height: 1.3; }
#header .depth02 em{ display: block; }

#header .menu{ width: var(--headerH); height: var(--headerH); background: var(--mainColor); border: none; position: absolute; top: 0; right: 0; }
#header .menu > div{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
#header .menu span i{ display: inline-block; width: 6px; height: 6px; background: #FFF; border-radius: 50%; }

#header .menu .icon01{ opacity: 1; transition: opacity 0.4s; }
#header .menu .icon01 span{ display: grid; grid-template-columns: repeat(2, 1fr); margin: -6px; animation: menuRotate 5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite; }
#header .menu .icon01 span i{ margin: 6px; }

#header .menu .icon02{ position: absolute; top: 0; left: 0; transform: rotate(0); opacity: 0;  transition: opacity 0.4s, transform 0.7s; }
#header .menu .icon02 span{ display: flex; flex-direction: column; }
#header .menu .icon02 span:last-of-type{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0); transition: transform 0.7s; }
#header .menu .icon02 span i{ width: 4px; height: 4px; }
#header .menu .icon02 span i:not(:last-of-type){ margin-bottom: 4px; }

/* header - scroll */
#header.scroll{ background: #FFF; }
#header.scroll::after{ background: #E5E5E5; }
#header.scroll .depth01 > li > a{ color: #777; }

/* header - hover */
#header.hover::after{ background: #E5E5E5; }
#header.hover .navBg{ height: calc(var(--headerH) + var(--navH)); transition-delay: unset; }
#header.hover .depthBox{ opacity: 1; pointer-events: auto; transition-delay: 0.3s; }
#header.hover .depth01 > li > a{ color: #777; }

@media screen and (hover: hover){
	#header nav:hover .nav{ right: 50%; transform: translateX(50%); }
	#header nav:hover .depth01 > li > a{ width: var(--after); }
	#header nav:hover .nav .dot{ transform: translate(calc(100% * var(--index)), -50%); opacity: 1; }

	#header.hover .depth01 > li:hover > a{ color: var(--mainColor); }
	#header.hover .depth01 > li:hover .depthBox::before{ transform: scaleY(1); }
	#header.hover .depth02 > li:hover > a{ font-weight: 500; }
}

@media screen and (max-width: 1600px){
	#header{
		--before: 150px;
		--after: 200px;
	}

	#header .depth01 > li > a{ font-size: 18px; }
	#header .depth02{ padding: 20px 0 35px; }
	#header .depth02 > li > a{ font-size: 17px; padding: 5px 10px; }
}

@media screen and (max-width: 1300px){
	#header{
		--before: 150px;
		--after: 170px;
	}
}

@media screen and (max-width: 1200px){
	#header .nav{ display: none; }

	#header .menu .icon01 span{ margin: -5px; }
	#header .menu .icon01 span i{ width: 4px; height: 4px; margin: 5px; }
}


/* menu */
#menu{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 900; display: none; }
#menu .mobile{ display: none; }
#menu .flex-box{ height: 100%; display: flex; }
#menu .flex-box > *{ overflow: hidden; }
#menu .img{ width: 650px; display: flex; flex-direction: column; justify-content: center; background: url("/img/common/menu_img.jpg") no-repeat center center / cover; text-align: center; clip-path: polygon(0% 0%, 100% 0%, 100% 0, 0 0); -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 0, 0 0); transition: clip-path 0.5s 0.5s; }
#menu .img .logo{ transform: translateY(var(--aosPlus)); opacity: 0; transition: transform 0.7s, opacity 0.7s; transition-delay: 1.2s;  }
#menu .img svg{ width: auto; height: auto; }
#menu nav{ width: calc(100% - 650px); display: flex; flex-direction: column; justify-content: center; background: #FFF; padding: var(--headerH) 90px; transform: scaleX(0); transform-origin: left; transition: transform 0.5s 0.5s; }

#menu nav a{ line-height: 1.3; }
#menu .depth01 > li{ display: flex; align-items: center; transform: translateY(var(--aosPlus)); opacity: 0; transition: transform 0.7s, opacity 0.7s; }
#menu .depth01 > li > a{ width: 430px; display: block; font-family: var(--engFont); font-size: 5.6rem; font-weight: 700; color: #DDD; letter-spacing: -0.02em; padding: 25px 0; transition: color 0.4s; }

#menu .depthBox{ width: calc(100% - 430px); }
#menu .depth02{ display: flex; flex-wrap: wrap; margin: 0 -20px; }
#menu .depth02 > li > a{ display: inline-block; font-size: 19px; font-weight: 400; color: #999; padding: 7px 20px; transition: color 0.4s; }

#menu .mobile .on .arrow{ color: var(--mainColor) !important; }

/* body - open */
body.open{ overflow: hidden; }
body.open #header{ background: transparent; }
body.open #header::after{ background: transparent; }
body.open #header .logo a{ opacity: 0; pointer-events: none; }
body.open #header nav{ opacity: 0; pointer-events: none; }
body.open #header .menu .icon01{ opacity: 0; }
body.open #header .menu .icon01 span{ animation-iteration-count: unset; }
body.open #header .menu .icon02{ opacity: 1; transform: rotate(-45deg); transition-delay: 0.4s; }
body.open #header .menu .icon02 span:last-of-type{ transform: translate(-50%, -50%) rotate(90deg); transition-delay: 0.4s; }

body.open #menu .img{ clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%); -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%); }
body.open #menu .img .logo{ transform: translateY(0); opacity: 1; }
body.open #menu nav{ transform: scale(1); }
body.open #menu .depth01 > li{ transform: translateY(0); opacity: 1; }

@media screen and (hover: hover){
	#menu .depth01 > li:hover > a{ color: var(--mainColor); }
	#menu .depth02 > li:hover > a{ font-weight: 500; color: #333; }
}

@media screen and (max-width: 1600px){
	#menu nav{ padding: var(--headerH) 50px; }
	#menu .depth01 > li > a{ width: 350px; }
	#menu .depthBox{ width: calc(100% - 350px); }
}

@media screen and (max-width: 1400px){
	#menu .img{ width: 40%; }
	#menu .img svg{ height: 60px; }

	#menu nav{ width: 60%; }  
}

@media screen and (max-width: 1280px){
	#menu .depth01 > li > a{ width: 300px; padding: 20px 0; }
	#menu .depthBox{ width: calc(100% - 300px); }
	#menu .depth02 > li > a{ font-size: 18px; }
}

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

	body.open #header::after{ background: #E5E5E5; }
	body.open #header .logo a{ opacity: 1; pointer-events: auto; }
}

@media screen and (max-width: 900px){
	#menu nav{ display: block; padding: var(--headerH) 0; }
	#menu .pc{ display: none; }
	#menu .mobile{ display: block; }

	#menu .depth01 > li{ display: block; border-bottom: 1px solid #E5E5E5; }
	#menu .depth01 > li > a{ width: 100%; font-size: 26px; padding: 15px 20px; }

	#menu .depthBox{ width: 100%; background: #F8F8F8; border-top: 1px solid #E5E5E5; display: none; }
	#menu .depth02{ display: block; margin: 0; padding: 7px 0; }
	#menu .depth02 > li > a{ display: block; font-size: 20px; padding: 7px 20px; }
}


/* footer */
#footer{ border-top: 1px solid #E9E9E9; padding: 80px 0 75px; position: relative; }
#footer .flex-box{ display: flex; justify-content: space-between; }
#footer .logo img{ width: auto; height: 58px; }

#footer .line02{ margin-top: 50px; }
#footer .line02 .flex-box{ align-items: flex-end; }
#footer .line03{ margin-top: 15px; }

#footer .policy{ display: flex; }
#footer .policy li:not(:last-of-type){ margin-right: 10px; }
#footer .policy li a{ width: 205px; height: 65px; display: flex; justify-content: space-between; align-items: center; background: #F3F3F3; border-radius: 50px; font-size: 18px; font-weight: 500; color: #777; padding: 0 24px; }
#footer .policy li a::after{ content: ""; width: 24px; height: 24px; display: inline-block; background: url("/img/common/policy_icon.svg") no-repeat center center / contain; margin-left: 5px; }

#footer .dl{ display: flex; flex-wrap: wrap; margin: -5px -12px; }
#footer .dl dl{ display: flex; font-size: 18px; margin: 5px 12px; }
#footer .dl dl dt{ font-family: var(--engFont); font-weight: 700; color: #333; white-space: nowrap; padding-right: 4px; }
#footer .dl dl dd{ font-weight: 300; color: #444; }
#footer .left > .dl{ margin-bottom: 5px; }

#footer .copyright{ font-size: 17px; font-weight: 700; color: #555; }

#footer .bottom{ overflow: hidden; }
#footer .bottom ul{ display: flex; flex-wrap: wrap; /* justify-content: flex-end; */ margin: -3px -20px; margin-left: 0; }
#footer .bottom ul li{ font-size: 17px; font-weight: 300; color: #999; padding: 3px 20px; padding-left: 0; position: relative; }
#footer .bottom ul li::after{ content: ""; width: 1px; height: 12px; background: #DDD; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); }
#footer .bottom ul li:last-of-type::after{ display: none; }

@media screen and (max-width: 1600px){
	#footer{ padding: 60px 0 55px; }
	#footer .logo img{ height: 50px; }

	#footer .line02 .flex-box{ flex-direction: column; align-items: flex-start; }
	#footer .copyright{ margin-top: 10px; }

	#footer .policy li a{ width: 190px; height: 55px; font-size: 17px; padding: 0 17px; }
	#footer .policy li a::after{ transform: translateY(-1px); }
}

@media screen and (max-width: 1400px){
	#footer{ padding: 30px 0; }
	#footer .flex-box{ flex-direction: column; align-items: flex-start !important; }
	#footer .line02{ margin-top: 15px; }
	#footer .logo{ margin-bottom: 10px; }
}

@media screen and (max-width: 1280px){
	#footer .logo img{ height: 38px; }
	#footer .policy li a{ width: 170px; height: 45px; font-size: 16px; padding: 0 15px; }
	#footer .policy li a::after{ width: 20px; height: 20px; transform: translateY(-1px); }

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

	#footer .bottom ul li{ font-size: 16px; }
}

@media screen and (max-width: 1100px){
	#footer .dl{ flex-direction: column; }
}

@media screen and (max-width: 600px){
	#footer .bottom ul{ flex-direction: column; justify-content: flex-start; }
}


/* top */
#footer .top{ width: 100%; text-align: right; padding-bottom: 40px; position: absolute; top: 0; left: 0; transform: translateY(-100%); pointer-events: none; }

#top{ width: 80px; height: 80px; background: #FFF; border: 1px solid var(--mainColor); font-family: var(--engFont); font-size: 18px; font-weight: 400; color: var(--mainColor); pointer-events: auto; }
#top i{ display: block; height: 30px; background: url("/img/common/top_icon.svg") no-repeat center center / contain; padding: 0; }

@media screen and (max-width: 1600px){
	#top{ width: 70px; height: 70px; font-size: 18px; }
	#top i{ height: 25px; }
}

@media screen and (max-width: 1280px){
	#footer .top{ padding-bottom: 20px; }

	#top{ width: 60px; height: 60px; font-size: 16px; }
	#top i{ height: 20px; margin-bottom: 3px; }
}

@media screen and (max-width: 900px){
	#top{ width: 55px; height: 55px; font-size: 15px; }
	#top i{ height: 17px; margin-bottom: 2px; }
}