@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;

	--mainColor: #AA226E;
	--mainRGB: 170, 34, 110;
	--borderColor: #E5E5E5;
	--grayBg: #F8F8F8;

	--headerH: 100px;

	--vh: 100%;
	--resizeVH: 100vh;

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

*{ box-sizing: border-box; word-break: keep-all; line-height: 1.3; }
body.lock{ overflow: hidden; }
body{ font-size: 16px; letter-spacing: -0.02em; }
body *{ font-size: inherit; }
.eng{ font-family: var(--engFont); }

/* inner */
.w1920{ max-width: 1920px; width: 100%; margin: 0 auto; }
.w1820{ max-width: 1860px; width: 100%; padding: 0 20px; margin: 0 auto; }
.w1760{ max-width: 1800px; width: 100%; padding: 0 20px; margin: 0 auto; }
.w1000{ max-width: 1040px; 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 (hover: hover) and (pointer: fine) {
	:root{
		--resizeVH: var(--vh);
	}
}

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

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

		--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: 35%; }
}


/* header */
header{
	--before: 120px;
	--after: 180px;
}

header{ width: 100%; position: absolute; top: 0; left: 0; z-index: 900; }
header .navBg{ width: 100%; height: var(--navH); background: #FFF; box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; transition: opacity 0.4s; }
header .flex-box{ height: var(--headerH); display: flex; justify-content: space-between; align-items: center; }
header .right{ display: flex; align-items: center; }
header .right button{ background: none; border: none; }

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

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

header .depth02{ padding: calc(var(--headerH) + 20px) 0 50px; }
header .depth02 > li > a{ display: block; font-size: 17px; font-weight: 500; color: #AAA; line-height: 1.3; padding: 10px; transition: color 0.4s; }

header .depth03{ display: none; }

header .lang{ display: flex; align-items: center; }
header .lang i{ display: inline-block; width: 20px; height: 20px; background: url("/img/common/icon_lang.svg") no-repeat center center / contain; filter: unset; -webkir-filter: unset; transition: filter 0.4s; }
header .lang ul{ display: flex; }
header .lang ul li{ position: relative; }
header .lang ul li::before{ content: ""; width: 2px; height: 15px; background: rgba(255, 255, 255, 0.3); position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); transition: background 0.4s; }
header .lang ul li:first-of-type::before{ display: none; }
header .lang ul li a{ display: inline-block; font-family: var(--engFont); font-size: 17px; font-weight: 500; color: rgba(255, 255, 255, 0.3); text-stroke: 0.012em transparent; -webkit-text-stroke: 0.012em transparent; padding: 11px; transition: color 0.4s, text-stroke 0.4s,text-stroke-color 0.4s; }
header .lang ul li.on a{ color: #FFF; }

header .menu{ display: inline-flex; flex-direction: column; align-items: center; padding: 20px; margin-right: -20px; position: relative; }
header .menu span{ display: inline-block; width: 30px; height: 3px; background: #FFF; vertical-align: middle; transition: background 0.4s; }
header .menu span:not(:last-of-type){ margin-bottom: 6px; }

/* header - scroll */
header.scroll h1 a::after{ opacity: 0; }
header.scroll h1 img{ opacity: 1; }
header.scroll nav::after{ opacity: 1; }
header.scroll .depth01 > li{ width: var(--after); }
header.scroll .depth01 > li > a{ color: #111; text-stroke-color: #111; -webkit-text-stroke-color: #111; }
header.scroll .lang i{ filter: invert(1); -webkit-filter: invert(1); }
header.scroll .lang ul li::before{ background: #CCC; }
header.scroll .lang ul li a{ color: #CCC; text-stroke-color: #CCC; -webkit-stroke-color: #CCC; }
header.scroll .lang ul li.on a{ color: #111; text-stroke: 0.015em #111; -webkit-text-stroke: 0.015em #111; }
header.scroll .menu span{ background: #000; }

/* header - hover */
header.hover .navBg{ opacity: 1; }
header.hover h1 a::after{ opacity: 0; }
header.hover h1 img{ opacity: 1; }
header.hover nav::after{ opacity: 1; }
header.hover .depth01 > li{ width: var(--after); }
header.hover .depth01 > li > a{ color: #111; text-stroke-color: #111; -webkit-text-stroke-color: #111; }
header.hover .depth01 > li > div{ opacity: 1; pointer-events: auto; }
header.hover .lang i{ filter: invert(1); -webkit-filter: invert(1); }
header.hover .lang ul li::before{ background: #CCC; }
header.hover .lang ul li a{ color: #CCC; text-stroke-color: #CCC; -webkit-stroke-color: #CCC; }
header.hover .lang ul li.on a{ color: #111; text-stroke: 0.015em #111; -webkit-text-stroke: 0.015em #111; }
header.hover .menu span{ background: #000; }

@media screen and (hover: hover) and (pointer: fine){
	header .depth01 > li:hover > a{ color: var(--mainColor); text-stroke-color: var(--mainColor); -webkit-text-stroke-color: var(--mainColor); }
	header .depth01 > li:hover > a::after{ transform: scaleX(1); }
	header .depth02 > li:hover > a{ color: var(--mainColor); }
}

@media screen and (max-width: 1700px){
	header{
		--after: 160px;
	}
	header h1 img{ height: 45px; }
}

@media screen and (max-width: 1400px){
	header{
		--before: 110px;
		--after: 150px;
	}
}

@media screen and (max-width: 1280px){
	header{
		--before: 100px;
		--after: 140px;
	}
	header h1 img{ height: 40px; }

	header .depth01 > li > a{ font-size: 18px; }
}

@media screen and (max-width: 1200px){
	header h1 img{ height: 35px; }
	
	header nav{ display: none; }

	header .lang i{ width: 17px; height: 17px; transform: translateY(-1px); }
	header .lang ul li a{ font-size: 16px; }

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

/* menu */
#menu{
	--ptb: 88px;
	--left: 590px;
	--min: 115px;
}
#menu{ width: 100%; height: 100%; background: #000; position: fixed; top: 0; left: 0; z-index: 1000; transform: translateY(-100%); transition: transform 0.6s; }
#menu .mobile{ display: none; }
#menu > *{ height: 100%; padding: 1px 10px; }
#menu .inner{ height: 100%; background: #FFF url("/img/common/menu_bg.png") no-repeat center right / auto; clip-path: inset(0 100% 0 0 round 40px); -webkit-clip-path: inset(0 100% 0 0 round 40px); position: relative; transition: clip-path var(--aosT) 0.6s; }
#menu .header{ height: var(--ptb); display: flex; flex-direction: column; justify-content: center; text-align: right; position: absolute; top: 0; left: 0; right: 0; z-index: 15; pointer-events: none; }
#menu .close{ background: none; border: none; vertical-align: middle; padding: 20px; margin-right: -20px; pointer-events: auto; }
#menu .close::before{ content: ""; width: 20px; height: 20px; display: inline-block; background: url("/img/common/icon_close.svg") no-repeat center center / contain; }

#menu nav{ width: var(--left); height: 100%; display: flex; flex-direction: column; justify-content: center; background: #EEE; padding: var(--ptb) 0; }
#menu .depth01{ padding: 0 40px; position: relative; }
#menu .depth01 a{ font-size: 32px; }
#menu .depth01 a{
	-webkit-tap-highlight-color: transparent;   /* 사파리 & 크롬용 */
	-webkit-touch-callout: none;                    /* iOS 오래 누를 때 메뉴 제거 */
	user-select: none;   
}
#menu .depth01 > li:not(:last-of-type){ margin-bottom: 10px; }
#menu .depth01 > li > a{ min-height: var(--min); display: flex; justify-content: space-between; align-items: center; background: transparent; font-weight: 600; color: #AAA; padding: 10px 60px; position: relative; z-index: 10; }
#menu .depth01 > li > a::before{ content: ""; width: 100%; height: 100%; background: #000; position: absolute; top: 0; left: 0; z-index: -1; clip-path: inset(0 100% 0 0 round 20px); -webkit-clip-path: inset(0 100% 0 0 round 20px); transition: clip-path 0.4s; }
#menu .depth01 > li > a::after{ content: ""; width: 20px; height: 17px; display: inline-block; background: url("/img/common/icon_arrow.svg") no-repeat center center / contain; margin-left: 30px; opacity: 0; transition: opacity 0.4s; }
#menu .depth01 > li > div{ width: 1310px; height: 100%; padding-inline: 160px; padding-top: 23px; opacity: 0; transform: translateX(var(--aosP)); transition: opacity 0.4s, transform 0.4s; position: absolute; top: 0; left: 100%; overflow-x: clip; overflow-y: scroll; -ms-overflow-style: none; pointer-events: none; }
#menu .depth01 > li > div::-webkit-scrollbar{ display: none; }

#menu .depth02 a{ display: block; line-height: 1.3; } 
#menu .depth02 > li:not(:last-of-type){ margin-bottom: 60px; }
#menu .depth02 > li > a{ font-weight: 600; color: #111; padding: 13px 0; }

#menu .depth03 > li > a{ font-size: 20px; font-weight: 500; color: #AAA; padding: 7px 0; }

#menu .footer{ height: var(--ptb); display: flex; flex-direction: column; justify-content: center; position: absolute; bottom: 0; left: 0; right: 0; }
#menu .footer .copyright{ font-family: var(--engFont); font-size: 500; color: #CCC; text-align: right; }


/* on */
#menu .depth01 > li.on > a{ color: #FFF; }
#menu .depth01 > li.on > a::before{ clip-path: inset(0 0 0 0 round 20px); -webkit-clip-path: inset(0 0 0 0 round 20px); }
#menu .depth01 > li.on > a::after{ opacity: 1; }
#menu .depth01 > li.on > div{ opacity: 1; transform: translateX(0); transition-delay: 0.1s; pointer-events: auto; }

/* body - open */
body.open{ overflow: hidden; }
body.open #menu{ transform: translateY(0); }
body.open #menu .inner{ clip-path: inset(0 0 0 0 round 40px); -webkit-clip-path: inset(0 0 0 0 round 40px); }

@media screen and (max-width: 1920px){
	#menu .depth01 > li > div{ width: calc(var(--vw) - var(--left) - 20px); }
}

@media screen and (max-width: 1700px){
	#menu{
		--ptb: 70px;
		--left: 450px;
		--min: 100px;
	}
	#menu .depth01 a{ font-size: 28px; }
	#menu .depth01 > li > a{ padding-inline: 40px; }
	#menu .depth01 > li > div{ padding-inline: 120px; }

	#menu .depth02 > li:not(:last-of-type){ margin-bottom: 40px; }
}

@media screen and (max-width: 1400px){
	#menu{
		
		--left: 400px;
		--min: 90px;
	}
	#menu .depth01{ padding-inline: 30px; }
	#menu .depth01 > li > div{ padding-top: 14px; }
}

@media screen and (max-width: 1280px){
	#menu{
		--ptb: 60px;
		--left: 300px;
		--min: 80px;
	}
	#menu .depth01{ padding-inline: 15px; }
	#menu .depth01 a{ font-size: 26px; }
	#menu .depth02 > li:not(:last-of-type){ margin-bottom: 20px; }
	#menu .depth01 > li > a{ padding-inline: 30px; }
	#menu .depth01 > li > a::after{ margin-left: 20px; }
	#menu .depth01 > li > div{ padding-inline: 60px; }
}

@media screen and (max-width: 900px){
	#menu{
		--min: 0;
	}
	#menu > *{ padding: 1px 5px; }
	#menu .inner{ background-color: #EEE; clip-path: inset(0 100% 0 0 round 30px); -webkit-clip-path: inset(0 100% 0 0 round 30px); }
	#menu .pc{ display: none; }
	#menu .mobile{ display: block; }
	#menu .footer{ display: none; }

	#menu nav{ width: 100%; overflow-x: clip; overflow-y: auto; -ms-overflow-style: none; overflow-x: clip; justify-content: flex-start; background: transparent; padding-top: 70px; }
	#menu nav::-webkit-scrollbar{ display: none; }
	#menu .depth01{ padding-inline: 25px; }
	#menu .depth01 div{ display: none; }
	#menu .depth01 > li:not(:last-of-type){ margin-bottom: 10; }
	#menu .depth01 > li > a{ font-size: 28px; color: #111; padding: 25px 30px; }
	#menu .depth01 > li > div{ width: 100%; height: auto; background: #FFF; border-radius: 20px; position: static; padding: 10px 0; margin-top: 10px; opacity: 1; transform: unset; pointer-events: unset; }
	#menu .depth02 > li:not(:last-of-type){ margin-bottom: 0; }
	#menu .depth02 > li > a{ font-size: 22px; padding: 10px 30px; }
	#menu .depth02 > li > div{ padding: 0 15px; }
	#menu .depth03{ background: #EEE; border-radius: 20px; padding: 10px; }
	#menu .depth03 > li > a{ font-size: 20px; padding: 10px 10px; }

	#menu .depth01 > li.on > a::before{ background: #000; }
	#menu .depth01 > li.on > a::after{ filter: unset; -webkit-filter: unset; }

	/* body - open */
	body.open #menu .inner{ clip-path: inset(0 0 0 0 round 30px); -webkit-clip-path: inset(0 0 0 0 round 30px); }
}



/* footer */
footer{ background: #000; padding: 80px 0 40px; }
footer *{ color: #FFF; }
footer a{ display: block; line-height: 1.3; }

footer nav{ border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 80px; margin-bottom: 40px; }
footer .depth01{ display: grid; grid-template-columns: repeat(6, calc(100% / 6)); margin-top: -23px; margin-inline: -10px; }
footer .depth01 > li{ margin-inline: 10px; }
footer .depth01 > li > a{ font-size: 20px; font-weight: 500; color: #FFF !important; padding: 23px 0; }
footer .depth02 > li > a{ font-size: 17px; font-weight: 400; color: #AAA !important; padding: 7px 0; }
footer .depth03{ display: none; }

footer h1{ display: inline-block; margin-bottom: 50px; }
footer h1 img{ width: auto; height: 55px; } 

footer address{ display: flex; flex-wrap: wrap; margin: -7px -20px; }
footer address dl{ display: flex; font-size: 17px; margin: 7px 20px; }
footer address dl dt{ font-weight: 400; color: #FFF; padding-right: 10px; }
footer address dl dd{ font-family: var(--engFont); font-weight: 300; color: #AAA; }

footer .bottom{ position: relative; }
footer .info{ display: flex; justify-content: space-between; align-items: flex-end; }
footer .copyright{ font-family: var(--engFont); font-family: var(--engFont); font-size: 17px; font-weight: 400; color: #FFF; margin-top: 15px; }

footer .right ul{ display: flex; justify-content: flex-end; align-items: center; margin: -10px; }
footer .right ul li a{ display: inline-block; font-size: 17px; font-weight: 400; color: #AAA; padding: 10px; }
footer .right ul li.bold a{ color: #FFF; }

/* top */
#top{ width: 100px; height: 100px; background: rgba(255, 255, 255, 0.1); border: 2px solid #FFF; border-radius: 20px; font-family: var(--engFont); font-size: 20px; font-weight: 400; color: #FFF; padding: 10px; position: absolute; top: 0; right: 0; z-index: 10; }

@media screen and (max-width: 1700px){
	footer{ padding-top: 60px; }
	footer .depth01{ margin-top: -18px; }
	footer .depth01 > li > a{ font-size: 19px; padding: 18px 0; }

	#top{ width: 90px; height: 90px; font-size: 19px; }
}

@media screen and (max-width: 1280px){
	footer{ padding: 50px 0 30px; }
	footer .depth01{ margin-top: -13px; }
	footer .depth01 > li > a{ font-size: 18px; padding: 13px 0; }
	footer .depth02 > li > a{ font-size: 16px; }

	footer address{ margin-inline: -15px; }
	footer address dl{ font-size: 16px; margin-inline: 15px; }
	footer .copyright{ font-size: 16px; }
	footer .right ul li a{ font-size: 16px; }

	/* top */
	#top{ width: 80px; height: 80px; font-size: 18px; }
}

@media screen and (max-width: 1150px){
	footer h1 img{ height: 50px; }
	footer .info{ flex-direction: column-reverse; align-items: flex-start; }
	footer .right{ margin-bottom: 15px; }

	/* top */
	#top{ width: 70px; height: 70px; top: -10px; }
}

@media screen and (max-width: 1000px){
	footer nav{ display: none; }
}