@charset 'utf-8';

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

	--mainColor: #89C765;
	--mainRGB: 137, 199, 101;
	--borderC: #E5E5E5;
	--grayBg: #F8F8F8;

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

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

.w1920{ max-width: 1920px; width: 100%; margin: 0 auto; }
.w1840{ max-width: 1880px; width: 100%; margin: 0 auto; padding: 0 20px; }
.w1760{ max-width: 1800px; width: 100%; margin: 0 auto; padding: 0 20px; }
.w1400{ max-width: 1440px; width: 100%; margin: 0 auto; padding: 0 20px; }

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

/* 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: 70px;

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

	html{ font-size: 40%; }
}

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


/* header */
header{
	--before: 150px;
	--after: 200px;
}
header{ width: 100%; background: #FFF; position: fixed; top: 0; left: 0; z-index: 999; transition: background 0.5s; }
header::after{ content: ""; width: 100%; height: 1px; background: var(--borderC); position: absolute; bottom: 0; left: 0; opacity: 0; transition: opacity 0.4s; pointer-events: none; }
header .navBg{ width: 100%; height: var(--navH); background: #FFF; box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); position: absolute; top: 0; left: 0; z-index: -1; opacity: 0; transition: opacity 0.4s; pointer-events: none; }
header .flex-box{ height: var(--headerH); display: flex; justify-content: space-between; align-items: center; }
header .right{ display: flex; align-items: center; }


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


header nav{ text-align: center; position: absolute; top: 0; left: 50%; transform: translateX(-50%); opacity: 1; transition: opacity 0.5s; }
header .depth01{ display: flex; justify-content: center; }
header .depth01 > li{ width: var(--before); position: relative; transition: width 0.4s; }
header .depth01 > li > a{ width: 100%; height: var(--headerH); display: inline-flex; justify-content: center; align-items: center; font-family: var(--engFont); font-size: 21px; font-weight: 500; color: #111; position: relative; z-index: 10; transition: color 0.4s; }
header .depth01 > li > div{ width: var(--after); height: var(--navH); background: transparent; position: absolute; top: 0; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.4s; transition: opacity 0.4s, background 0.4s; pointer-events: none; }


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


header .lang{ opacity: 1; transition: opacity 0.5s; }
header .lang ul{ display: inline-flex; border: 2px solid var(--borderC); border-radius: 100px; padding: 0 10px; }
header .lang ul li{ position: relative; }
header .lang ul li::before{ content: ""; width: 2px; height: 15px; background: var(--borderC); position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); }
header .lang ul li:first-of-type::before{ display: none; }
header .lang ul li a{ display: block; font-family: var(--engFont); font-size: 16px; font-weight: 700; color: #CCC; padding: 10px; }
header .lang ul li.on a{ color: var(--mainColor); }

header .menu{ display: inline-flex; flex-direction: column; justify-content: center; background: none; border: none; padding: 20px; margin-right: -20px; overflow: hidden; }
header .menu span{ display: inline-block; width: 20px; height: 2px; background: #000; vertical-align: middle; transition: opacity 0.5s, transform 0.5s; }
header .menu span:not(:last-of-type){ margin-bottom: 4px; }


/* header - scroll */
header.scroll::after{ opacity: 1; }

/* header - hover */
header.hover::after{ opacity: 1; }
header.hover .navBg{ opacity: 1; }

header .depth01:hover > li{ width: var(--after); }
header .depth01:hover > li > div{ opacity: 1; pointer-events: auto; }

header .depth01 > li:hover > a{ color: #FFF; }
header .depth01 > li:hover > div{ background: var(--mainColor); }
header .depth01 > li:hover .depth02 > li > a{ color: rgba(255, 255, 255, 0.3); }
header .depth02 > li:hover > a{ color: #FFF !important; }

@media screen and (max-width: 1700px){
	header{
		--before: 140px;
		--after: 180px;
	}
	header h1 img{ height: 32px; }

	header .depth01 > li > a{ font-size: 19px; }
	header .depth02{ padding-bottom: 100px; }
}

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

	header nav{ left: 52.5%; }
	header .depth02{ padding: calc(var(--headerH) + 12px) 0 70px; }
}

@media screen and (max-width: 1280px){
	header h1 img{ height: 28px; }

	header nav{ display: none; }

	header .lang ul{ padding: 0 7px; }
	header .lang ul li a{ padding: 7px; }
}


/* menu */
#menu{ width: 100%; height: 100%; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); position: fixed; top: 0; left: 0; z-index: 900; display: none; }
#menu::before{ content: ""; width: 100%; height: var(--headerH); background: #FFF; position: absolute; top: 0; left: 0; }
#menu .mobile{ display: none; }
#menu > div,
#menu nav,
#menu nav > div{ height: 100%; }
#menu > div{ position: relative; z-index: 10; }

#menu .header{ width: 100%; position: absolute; top: 0; left: 0; z-index: 10; pointer-events: none; }
#menu .header .flex-box{ height: var(--headerH); display: flex; justify-content: space-between; align-items: center; }
#menu .header .flex-box > *{ pointer-events: auto; }

#menu .depth01{ display: flex; height: 100%; }
#menu .depth01 a{ display: block; line-height: 1.3; padding-inline: 60px; transition: color 0.4s; }
#menu .depth01 > li{ width: 20%; height: 100%; padding-top: 13%; border-right: 1px solid var(--borderC); position: relative; z-index: 10; }
#menu .depth01 > li::before{ content: ""; width: 100%; height: 100%; background: linear-gradient(to bottom, #89C765, #5A9438); position: absolute; top: 0; left: 0; z-index: -1; opacity: 0; transition: opacity 0.4s; }
#menu .depth01 > li:last-of-type{ border-right: none; }
#menu .depth01 > li > a{ font-family: var(--engFont); font-size: 36px; font-weight: 600; color: #111; padding-block: 50px; }

#menu .depth02 > li > a{ font-size: 19px; font-weight: 400; color: #AAA; padding-block: 10px; }


/* body - open */
body.open{ overflow: hidden; }
body.open header{ background: transparent !important; transition-delay: 0.5s; pointer-events: none; }
body.open header::after{ opacity: 0 !important; }
body.open header h1{ pointer-events: auto; }
body.open header h1 a::after{ opacity: 1; }
body.open header h1 img{ opacity: 0; }
body.open header nav{ opacity: 0; }
body.open header .lang{ opacity: 0; }
body.open header .menu{ pointer-events: auto; }
body.open header .menu span:nth-of-type(1){ transform: translateY(6px) rotate(45deg); }
body.open header .menu span:nth-of-type(2){ opacity: 0; }
body.open header .menu span:nth-of-type(3){ transform: translateY(-6px) rotate(-45deg); }

@media screen and (hover: hover) and (pointer: fine){
	#menu .depth01 > li:hover::before{ opacity: 1; }
	#menu .depth01 > li:hover > a{ color: #FFF; }
	#menu .depth01 > li:hover .depth02 > li > a{ color: rgba(255, 255, 255, 0.3); }
	#menu .depth02 > li:hover > a{ color: #FFF !important; }
}

@media screen and (max-width: 1700px){
	#menu .depth01 a{ padding-inline: 40px; }
	#menu .depth01 > li{ padding-top: 16%; }
	#menu .depth01 > li > a{ font-size: 32px; padding-block: 30px; }
}

@media screen and (max-width: 1280px){
	#menu .depth01 a{ padding-inline: 25px; }
	#menu .depth01 > li{ padding-top: 20%; }
	#menu .depth01 > li > a{ font-size: 28px; padding-block: 20px; }
}

@media screen and (max-width: 1200px){
	#menu .pc{ display: none; }
	#menu .mobile{ display: block; }

	#menu nav{ padding-top: var(--headerH); }
	#menu .depth01{ display: block; }
	#menu .depth01 a{ padding-inline: 20px; }
	#menu .depth01 > li{ width: 100%; height: auto; border-right: 0; border-bottom: 1px solid var(--borderC); padding-top: 0; }
	#menu .depth01 > li:first-of-type{ border-top: 1px solid var(--borderC); }
	#menu .depth01 > li > div{ display: none; padding: 0 15px 15px; }	 

	#menu .depth02{ background: #FFF; padding: 7px 0; }
	#menu .depth02 > li > a{ padding-inline: 17px; }

	#menu .depth01 > li.on::before{ opacity: 1; }
	#menu .depth01 > li.on > a{ color: #FFF; }
	#menu .depth01 > li.on .depth02 > li > a{ color: #AAA; }
}

@media screen and (max-width: 1200px) and (hover: hover) and (pointer: fine){
	#menu .depth02 > li:hover > a{ color: var(--mainColor) !important; }
}

@media screen and (max-width: 900px){
	#menu .depth01 > li > a{ font-size: 25px; padding-block: 20px; }
	#menu .depth01 > li > div{ padding: 0 10px 10px; }	 
}



/* footer */
footer{ padding: 40px; padding-top: 0 !important; }
footer .inner{ display: grid; grid-template-columns: calc(100% - 1000px) 1000px; align-items: flex-end; padding: 80px 40px; background: #111; border-radius: 40px; position: relative; }
footer .right{ display: grid; grid-template-columns: 30% 70%; }

footer nav .depth01{ margin: -10px 0; }
footer nav a{ display: block; font-family: var(--engFont); font-size: 21px; font-weight: 500; color: #FFF !important; padding: 10px 0; line-height: 1.3; }

footer address dl{ display: grid; grid-template-columns: 180px calc(100% - 180px); align-items: baseline; font-size: 19px; }
footer address dl:not(:last-of-type){ margin-bottom: 15px; }
footer address dl dt{ font-family: var(--engFont); font-weight: 400; color: #FFF; padding-right: 15px; }
footer address dl dd{ font-weight: 200; color: #AAA; }

footer address dl.add dd p:not(:last-of-type){ margin-bottom: 15px; }
footer address dl.add dd p strong{ display: block; color: #FFF; padding-bottom: 5px; }

footer .bottom{ grid-column: auto / span 2; display: flex; justify-content: space-between; align-items: flex-end; border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 60px; padding-top: 30px; }
footer .bottom ul{ display: flex; margin: -10px -20px; }
footer .bottom ul li{ position: relative; }
footer .bottom ul li::before{ content: ""; width: 1px; height: 15px; background: #AAA; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
footer .bottom ul li:first-of-type::before{ display: none; }
footer .bottom ul li a{ display: block; font-size: 17px; font-weight: 500; color: #AAA; padding: 10px 20px; }
footer .bottom .copyright{ font-family: var(--engFont); font-size: 17px; font-weight: 400; color: #AAA; margin-top: 10px; }


/* top */
#top{ width: 60px; height: 60px; background: var(--mainColor); border: none; border-radius: 50%; font-family: var(--engFont); font-size: 16px; font-weight: 600; color: #FFF; padding: 0; }

@media screen and (max-width: 1700px){
	footer{ padding: 30px; }
	footer .inner{ padding: 60px 35px; }
	footer .right{ display: grid; grid-template-columns: 25% 75%; }
	
	footer h1 img{ height: 70px; }

	footer nav a{ font-size: 19px; }
	footer address dl{ grid-template-columns: 160px calc(100% - 160px); font-size: 18px; }
}

@media screen and (max-width: 1500px){
	footer{ padding: 20px; }
	footer .inner{ grid-template-columns: repeat(1, 100%); }
	footer .left{ margin-bottom: 30px; }
	footer .right{ grid-template-columns: repeat(1, 100%); }

	footer nav .depth01{ display: flex; margin-left: -10px; margin-bottom: 5px; }
	footer nav .depth01 > li > a{ padding: 10px; }

	footer address dl:not(:last-of-type){ margin-bottom: 10px; }

	footer .bottom{ grid-column: unset; margin-top: 20px; }
}

@media screen and (max-width: 1280px){	
	footer .inner{ padding: 30px 25px; }
	footer h1 img{ height: 60px; }

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

	footer .bottom ul{ margin: -10px; }
	footer .bottom ul li::before{ height: 12px; }
	footer .bottom ul li a{ font-size: 16px; padding: 10px; } 
	footer .bottom .copyright{ font-size: 16px; }
}

@media screen and (max-width: 900px){
	footer .bottom .copyright{ font-size: 15px; }
}

@media screen and (max-width: 800px){
	footer address{ display: flex; flex-wrap: wrap; margin-inline: -15px; }
	footer address dl{ display: flex; margin: 0 15px; }
	footer address dl:not(:last-of-type){ margin-bottom: 5px; }
	footer address dl dt{ margin-bottom: 5px; }

	footer address dl.add{ width: 100%; display: grid; grid-template-columns: repeat(1, 100%); margin-bottom: 15px; }
	footer address dl.add dt{ padding-right: 0; }
}

@media screen and (max-width: 600px){
	/* top */
	#top{ position: absolute; top: 30px; right: 25px; }
}