@charset 'utf-8';

/* ���� */
:root{
    --baseFont: 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--engFont: 'Geologica', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--mainColor1: #E1D8CF;
	--mainColor2: #43564A;
	--fontColor: #040000;
	--darkBg: #3D3D3F;
}

.w1560{ max-width: 1560px; width: 100%; margin: 0 auto; }

@media screen and (max-width: 1600px){
	.w1560{ padding: 0 20px; }
}

/* privacy */
#policy .privacy * { font-size: 1.6rem; line-height: 1.625; }
#policy .privacy h3 { font-weight: 700; }
#policy .privacy h4{ font-weight: 700; }
#policy .privacy .textBox,
#policy .privacy .pBox,
#policy .privacy .dlBox,
#policy .privacy .subTextBox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

#policy .privacy .textBox { gap: 100px 0; }
#policy .privacy .textBox h3{ font-size: 2.2rem; margin-bottom: 5px; }

#policy .privacy .pBox { gap: 30px 0; margin: 40px 0; }

#policy .privacy .dlBox { gap: 50px 0; }
#policy .privacy .dlBox > dl > dt { font-size: 1.8rem; font-weight: 500; }
#policy .privacy .dlBox > dl > dd > p { margin: 5px 0; }
#policy .privacy .dlBox > dl > dd > ul { padding: 0 0 0 20px; }
#policy .privacy .dlBox > dl > dd ul:only-child{ margin-top: 5px; }

#policy .privacy .square { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 0 5px; position: relative; padding-left: 12px; }
#policy .privacy .square::before { content: "‧"; position: absolute; top: 0; left: 0; }
#policy .privacy .square > p { width: 100%; padding: 0 0 0 13px; }

#policy .privacy .subTextBox { gap: 24px 0; }
#policy .privacy .subTextBox h6 { font-weight: 500; margin: 0 0 4px; }
#policy .privacy .subText { margin: 4px 0; }
#policy .privacy .subText dd { padding: 0 0 0 11px; }

#policy .privacy .contact { margin: 60px 0 0; }
#policy .privacy .contact ol { margin: 30px 0 0; }

@media screen and (max-width: 1250px){
	#policy .privacy .textBox h3{ font-size: 2rem; }
	#policy .privacy .textBox { gap: 80px 0; }

	#policy .privacy .pBox{ gap: 15px 0; }
	
	#policy .privacy .dlBox { gap: 30px 0; }
}

@media screen and (max-width: 900px){
	#policy .privacy .dlBox > dl > dt { font-size: 1.7rem; }
	#policy .privacy * { font-size: 1.5rem; }
	#policy .privacy .dlBox > dl > dd > ul { padding: 0 0 0 10px; }
}


/* header */
#header{ width: 100%; position: fixed; top: 0; left: 0; z-index: 100; }
#header::after{ content: ""; width: 100%; height: 1px; background: #fff; opacity: 0.35; position: absolute; bottom: 0; left: 0; z-index: 10; }
#header .bg{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -10; transform-origin: top center; background: transparent; /* border-radius: 0 0 30px 30px; */ backdrop-filter: blur(3px); transition: all 0.5s; pointer-events: none; }
#header .flex-box{ display: flex; justify-content: space-between; align-items: center; }
#header .logo{ display: inline-block; position: relative; }
#header .logo img{ opacity: 1; transition: all 0.5s; }
#header .logo::after{ content: url("/img/common/revation_logo_scroll.svg"); position: absolute; top: 0; left: 0; opacity: 0; transition: all 0.5s; }
#header .logo a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

#header .flex-box div{ display: flex; align-items: center; }
#header .depth01{ display: flex; }
#header .depth01 > li{ position: relative; z-index: 20; }
#header .depth01 > li::after{ content: ""; width: calc(100% - 70px); height: 2px; background: var(--mainColor1); position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%) scaleX(0); transition: transform 0.5s; }
#header .depth01 > li > a{ display: inline-block; font-family: var(--engFont); font-size: 1.7rem; font-weight: 400; color: var(--mainColor1); padding: 30.5px 35px; transition: all 0.5s; }

#header .depth02{ width: max-content; position: absolute; right: 50%; transform: translateX(50%); transform-origin: top center; z-index: 50; display: flex; overflow: hidden; visibility: hidden; }
#header .depth02 > li{ opacity: 0; transition: opacity 0.8s; }
#header .depth02 > li > a{ display: inline-block; font-size: 1.7rem; font-weight: 400; color: var(--mainColor1); padding: 54px 32.5px; opacity: 0.5; transition: opacity 0.5s; }

#header .lang{ position: relative; }
#header .lang *{ font-family: var(--engFont); }
#header .lang button{ background: none; border: none; font-size: 1.7rem; font-weight: 400; color: var(--mainColor1); padding: 5px; padding-right: 20px; margin-right: 20px; position: relative; transition: all 0.5s; }
#header .lang button::before, #header .lang button::after{  position: absolute; top: 42%; right: 0; transform: translateY(-50%); transition: all 0.5s; }
#header .lang button::before{ content: url("/img/common/lang_icon.svg"); opacity: 1; }
#header .lang button::after{ content: url("/img/common/lang_icon_scroll.svg"); opacity: 0; }
#header .lang ul{ width: fit-content; position: absolute; top: 100%; left: calc(50% - 6px); z-index: 50; transform: translateX(-50%); background: #000; border-radius: 10px; overflow: hidden; display: none; }
#header .lang ul li a{ display: inline-block; font-size: 1.7rem; font-weight: 500; color: var(--mainColor1); padding: 10px 15px; cursor: pointer; }

#header .lang.on button::before, #header .lang.on button::after{ top: 55%; transform: translateY(-50%) rotate(-180deg); }

/* header - hover */
#header .depth01 > li:hover::after{ transform: translateX(-50%) scaleX(1); }

/* 
#header .depth01 > li:hover .depth02{ visibility: visible; }
#header .depth01 > li:hover .depth02 > li{ opacity: 1; }
#header .depth02 > li:hover > a{ opacity: 1; } */

/* header - mobile menu */
button.menu{ width: 65px; height: 60px; background: none; border: none; outline: none; padding: 0; margin-left: 10px; margin-right: -20px; position: relative; display: none; }
button.menu span{ display: inline-block; width: 27px; height: 2px; background: var(--mainColor1); position: relative; top: -3px; transform: background 0.5s; }
button.menu span::before, button.menu span::after{ content: ""; width: 100%; height: 100%; background: var(--mainColor1); position: absolute; left: 0; transition: top 0.5s, transform 0.5s; }
button.menu span::before{ top: -8px; }
button.menu span::after{ top: 8px; }

body.lock button.menu span{ background: transparent; }
body.lock button.menu span::before{ top: 0; transform: rotate(-45deg); }
body.lock button.menu span::after{ top: 0; transform: rotate(45deg); }

#header.scroll .logo img{ opacity: 0; }
#header.scroll .logo::after{ opacity: 1; }
#header.scroll::after{ background: var(--mainColor2); }
#header.scroll .bg{ background: var(--mainColor1); }
#header.scroll .depth01 > li::after{ background: var(--mainColor2); }
#header.scroll .depth01 > li > a{ color: var(--mainColor2); }
#header.scroll .lang button{ color: var(--mainColor2); }
#header.scroll .lang button::before{ opacity: 0; }
#header.scroll .lang button::after{ opacity: 1; }
#header.scroll button.menu span{ background: var(--mainColor2); }
#header.scroll button.menu span::before, #header.scroll button.menu span::after{ background: var(--mainColor2); }

#header.on .bg{ height: 210px; border-radius: 0 0 30px 30px; transform: scaleY(1); }

#header.blur .bg{ background: transparent; }

@media screen and (max-width: 1860px){
	#header .depth01 > li:last-of-type .depth02{ right: 30%; transform: translateX(30%); }
}

@media screen and (max-width: 1710px){
	#header .depth01 > li:last-of-type .depth02{ right: 0; transform: translateX(0); }
}

@media screen and (max-width: 1600px){
	#header .depth01 > li > a{ font-size: 1.7rem; }
	#header .depth02 > li > a{ font-size: 1.6rem; padding: 40px 25px; }
	#header .lang button{ font-size: 1.6rem; padding: 5px 25px; padding-right: 20px; }
	#header .lang ul{ left: calc(50% + 3px); }
	#header .lang ul li a{ font-size: 1.5rem; }

	#header.on .bg{ height: 175px; }
}

@media screen and (max-width: 1280px){
	#header{ padding: 5px 0; }
	#header nav{ display: none; }
	#header .lang button{ margin-right: 0; }
	#header .lang ul{ left: calc(50% + 12px); }
	button.menu{ display: block; }
}

/* mobile menu */
#menu{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999; display: none; }
#menu .blank{ width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; }
#menu .inner{ max-width: 500px; height: 100%; background: var(--mainColor2); padding: 5px 20px; position: relative; right: -100%; transform: translateX(0); z-index: 10; transition: transform 0.8s; }

#menu .right{ display: flex; justify-content: flex-end; }
#menu .nav{ margin-top: 20px; }

#menu .depth01{ position: relative; }
#menu .depth01::before, #menu .depth01::after{ content: ""; width: 100%; height: 1px; background: var(--mainColor1); position: absolute; top: 0; left: 0; }
#menu .depth01::before{ opacity: 0.3; }
#menu .depth01::after{ transform: scaleX(0); transform-origin: left; transition: transform 0.8s; }
#menu .depth01 > li{ position: relative; }
#menu .depth01 > li::before{ content: ""; width: 100%; height: 100%; background: var(--mainColor1); position: absolute; bottom: 1px; left: 0; z-index: -1; transform: scaleY(0); transform-origin: bottom; transition: transform 0.5s; }
/* #menu .depth01 > li::after{ content: ""; width: 100%; height: 55px; position: absolute; top: 0; left: 0; z-index: 20; cursor: pointer; }  */
#menu .depth01 > li > a { width: 100%; display: inline-block; font-size: 3.5rem; font-weight: 500; color: rgba(225, 216, 207, 0.3); padding: 10px; position: relative; transition: color 0.5s; }
#menu .depth01 > li > a::before, #menu .depth01 > li > a::after{ content: ""; width: 100%; height: 1px; background: var(--mainColor1); position: absolute; bottom: 0; left: 0; }
#menu .depth01 > li > a::before{ opacity: 0.3; }
#menu .depth01 > li > a::after{ transform: scaleX(0); transform-origin: left; transition: transform 0.8s; }

#menu .depth02{ position: relative; background: var(--mainColor1); padding: 10px 0; display: none; }
#menu .depth02::before, #menu .depth02::after{ content: ""; width: 100%; height: 3px; background: var(--mainColor2); position: absolute; left: 0; }
#menu .depth02::before{ top: -1px; }
#menu .depth02::after{ bottom: -1px; }
#menu .depth02 > li > a{ display: inline-block; font-size: 2.5rem; font-weight: 500; color: var(--mainColor2); padding: 10px; }

body.lock #menu .inner{ transform: translateX(-100%); }
body.lock #menu .depth01::after, body.lock #menu .depth01 > li > a::after{ transform: scaleX(1); transition-delay: 0.5s; }
body.lock #menu .depth01 > li > a{ color: var(--mainColor1); }

#menu .depth01 > li.on::before{ transform: scaleY(1); }
#menu .depth01 > li.on > a{ color: var(--mainColor2) !important; }

#menu .depth01 > li:hover::before{ transform: scaleY(1); }
#menu .depth01 > li:hover > a{ color: var(--mainColor2) !important; }


/* footer */
#footer{ background: var(--mainColor2); padding: 120px 0 60px; color: var(--mainColor1); position: relative; }
#footer .flex-box{ display: flex; justify-content: space-between; }
#footer .line .box2{ width: 780px; }

#footer .line01{ padding-bottom: 60px; }
#footer .line01 .flex-box{ align-items: flex-end; position: relative; }
#footer .line01 .box1 p{ font-family: var(--engFont); font-size: 1.6rem; font-weight: 300; }
#footer .line01 .box1 p.bold{ font-size: 6rem; font-weight: 400; }
#footer .line01 .box1 .form{ max-width: 490px; width: 100%; margin-top: 40px; position: relative; }
#footer .line01 .box1 .form input{ width: 100%; height: 60px; font-family: var(--engFont); font-size: 1.8rem; font-weight: 300; color: var(--mainColor1); padding: 0 20px; padding-right: 85px; background: rgba(255, 216, 207, 0.1); border: 1px solid var(--mainColor1); border-radius: 10px; outline: none; }
#footer .line01 .box1 .form input::placeholder{ color: var(--mainColor1); }
#footer .line01 .box1 .form span{ display: inline-block; width: 2px; height: 20px; background: var(--mainColor1); position: absolute; top: 50%; left: 20px; transform: translateY(-50%); opacity: 0; animation: cursor 1.2s step-end infinite; }
#footer .line01 .box1 .form button{ height: 100%; padding: 0; padding-right: 30px; border: none; background: none; position: absolute; top: 50%; right: 0; z-index: 10; transform: translateY(-50%); }
#footer .line01 .box1 .form button img{ max-height: calc(100% - 20px); }

#footer .line01 .box1 .btn{ max-width: 490px; width: 100%; height: 60px; margin-top: 40px; position: relative; }
#footer .line01 .box1 .btn a { display: flex; align-items: center; width: 100%; height: 100%; font-family: var(--engFont); font-size: 1.8rem; font-weight: 300; color: var(--mainColor1); padding: 0 20px; padding-right: 85px; background: rgba(255, 216, 207, 0.1); border: 1px solid var(--mainColor1); border-radius: 10px; outline: none; }
#footer .line01 .box1 .btn span{ position: absolute; top: 50%; right: 30px; z-index: 10; transform: translateY(-50%); }
#footer .line01 .box1 .btn span img{ max-height: calc(100% - 20px); }

#footer .line01 .box1 .form.value input + span{ animation: none; }
#footer .line01 .box1 .form input:focus + span{ animation: none; }

@keyframes cursor{
	50%{ opacity: 1; }
}

#footer .line01 .sns{ display: flex; margin-top: 30px; }
#footer .line01 .sns li{ display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background: var(--mainColor1); border-radius: 50%; position: relative; }
#footer .line01 .sns li:not(:last-of-type){ margin-right: 20px; }
#footer .line01 .sns li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }  

#footer .line01 .box2 dl{ display: flex; font-size: 1.5rem; }
#footer .line01 .box2 dl dt{ font-weight: 600; margin-right: 10px; }
#footer .line01 .box2 dl dd{ font-weight: 300; }

#footer .line01 .box2 .dl div{ display: flex; flex-wrap: wrap; gap: 10px 0; }
#footer .line01 .box2 .dl div:not(:first-of-type){ margin-top: 10px; }
#footer .line01 .box2 .dl div dl{ padding: 0 20px; position: relative; }
#footer .line01 .box2 .dl div dl::after{ content: ""; width: 1px; height: 15px; background: var(--mainColor1); opacity: 0.2; position: absolute; top: 45%; right: 0; transform: translateY(-50%); }
#footer .line01 .box2 .dl div dl:first-of-type{ padding-left: 0; }
#footer .line01 .box2 .dl div dl:last-of-type::after{ display: none; }
#footer .line01 .box2 .dl > dl{ margin-top: 10px; }

#footer .line02{ padding-top: 40px; border-top: 1px solid rgba(225, 216, 207, 0.2); }
#footer .line02 .flex-box{ align-items: center; } 
#footer .line02 .box1{ display: flex; align-items: flex-end; }
#footer .logo{ display: inline-block; position: relative; }
#footer .logo a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; } 
#footer .copyright{ font-family: var(--engFont); font-size: 1.4rem; font-weight: 300; margin-left: 20px; }

#footer .nav ul{ display: flex; justify-content: space-between; }
#footer .nav ul li a{ font-family: var(--engFont); font-size: 1.8rem; font-weight: 500; color: var(--mainColor); }

@media screen and (max-width: 1725px){
	#footer > div{ position: relative; }
}

@media screen and (max-width: 1600px){
	#footer{ padding: 60px 0 40px; }
	#footer .line01 .box1 p.bold{ font-size: 4.5rem; }
	#footer .line01 .box1 .form input{ height: 50px; }
	#footer .line01 .box1 .btn { height: 50px; }

	#footer .nav ul li a{ font-size: 1.7rem; }
}

@media screen and (max-width: 1400px){
	#footer .line01 .box2{ width: 600px; }
	/* #footer .line01 .box2 .dl div dl:nth-of-type(2)::after{ display: none; }
	#footer .line01 .box2 .dl div dl:nth-of-type(3){ padding-left: 0; } */
	#footer .line02 .box2{ display: none; }
} 

@media screen and (max-width: 1280px){
	#footer .line01 .box1 p.bold{ font-size: 3.5rem; }
}

@media screen and (max-width: 1200px){
	#footer{ padding: 30px 0; }

	#footer .line01{ padding-bottom: 30px; }
	#footer .line01 .flex-box{ align-items: flex-start; }
	#footer .line01 .box1, #footer .line01 .box2{ width: calc((100% - 80px) / 2); }
	#footer .line01 .box2 .dl div dl:nth-of-type(2)::after{ display: none; }
	#footer .line01 .box2 .dl div dl:nth-of-type(3){ padding-left: 0; }
	#footer .line01 .box2{ margin-top: 30px; }

	#footer .line02{ padding-top: 30px; }
} 

@media screen and (max-width: 1105px){
	#footer .line01 .flex-box{ flex-direction: column; }
	#footer .line01 .box1, #footer .line01 .box2{ width: 100%; }

}

@media screen and (max-width: 600px){
	#footer .line02 .box1{ flex-direction: column; align-items: flex-start; }
	#footer .copyright{ margin-left: 0; margin-top: 10px; }
}


/* 좌측 플로팅 메뉴 */
#floating{ position: fixed; top: 180px; left: 40px; z-index: 50; opacity: 1; transition: all 0.5s; }
#floating ul li{ position: relative; }
#floating ul li a{ display: flex; flex-direction: column-reverse; align-items: center; padding: 5px 0; }
#floating ul li a::before{ content: ""; display: inline-block; width: 10px; height: 10px; background: #aaa; border-radius: 50%; transition: color 0.5s; margin-bottom: 5px; }
#floating ul li span{ display: none; font-family: var(--engFont); font-size: 1.3rem; font-weight: 700; color: #aaa; padding-top: 5px; writing-mode: vertical-rl; transform: rotate(180deg); }

#floating ul li.on span{ color: var(--mainColor2); display: inline-block; }
#floating ul li.on a::before{ background: var(--mainColor2); }

#floating.green ul li.on a::before{ background: var(--mainColor1); }
#floating.green ul li.on span{ color: var(--mainColor1); }

#floating.opacity{ opacity: 0; pointer-events: none; }

@media screen and (max-width: 1900px){
	#floating{ left: 20px; }
	#floating ul li span{ padding: 7.5px 10px; }
}

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


/* 탑버튼 */
#top{ width: 60px; height: 60px; position: absolute; top: -40px; right: 60px; z-index: 50; transform: translateY(-100%); background: none; border: 1px solid var(--mainColor2); border-radius: 50%; }
#top::after{ content: url("/img/common/top_color_01.svg"); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; }
#top.fixed{ position: fixed; top: unset; bottom: 60px; transform: translateY(0); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

@media screen and (max-width: 1725px){
	#top{ top: -160px; right: 0; }
	#top.fixed{ right: 20px; }
}

@media screen and (max-width: 1600px){
	#top{ top: -75px; right: 20px; }
	#top.fixed{ bottom: 20px; }
}

@media screen and (max-width: 1200px){
	#top{ top: -45px; }
}


/* 배경색 어두울 때 */
body.bg-color #header::after{ background: var(--mainColor1); }
body.bg-color #header .bg{ background: var(--darkBg); }
body.bg-color #header .logo::after{ opacity: 0; }
body.bg-color #header .logo img{ opacity: 1; }
body.bg-color #header .depth01 > li::after{ background: var(--mainColor1); }
body.bg-color #header .depth01 > li > a{ color: var(--mainColor1); }
body.bg-color #header .lang button{ color: var(--mainColor1); }
body.bg-color #header .lang button::before{ opacity: 1; }
body.bg-color #header .lang button::after{ opacity: 0; }
body.bg-color #header button.menu span{ background: var(--mainColor1); }
body.bg-color #header button.menu span::before, body.bg-color #header button.menu span::after{ background: var(--mainColor1); }

body.bg-color #top{ border: 1px solid var(--mainColor1); }
body.bg-color #top img{ opacity: 0; }
body.bg-color #top::after{ opacity: 1; }