@charset 'utf-8';

/* ���� */
:root{
	--Lora: 'Lora', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--Nanum: 'Nanum Myeongjo', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
    --baseFont: 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--mainColor: #083220;
}

.w1920{ max-width: 1920px; width: 100%; margin: 0 auto; }
.w1800{ max-width: 1800px; width: 100%; margin: 0 auto; }
.w1600{ max-width: 1600px; width: 100%; margin: 0 auto; }

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

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

/* privacy */
#policy.sub-content{ padding-top: 0; }
.privacy * { font-size: 1.6rem; line-height: 1.625; }
.privacy h3 { font-weight: 700; }
.privacy h4{ font-weight: 700; }
.privacy .textBox,
.privacy .pBox,
.privacy .dlBox,
.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; }

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

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

.privacy .dlBox { gap: 50px 0; }
.privacy .dlBox > dl > dt { font-size: 1.8rem; font-weight: 500; color: #111; }
.privacy .dlBox > dl > dd:not(:only-child):first-of-type{ margin-top: 5px; }
.privacy .dlBox > dl > dd:not(:only-child){ margin-bottom: 7px; }
.privacy .dlBox > dl > dd > p { margin: 5px 0; }
.privacy .dlBox > dl > dd > ul { padding: 0 0 0 20px; }
.privacy .dlBox > dl > dd ul:only-child{ margin-top: 5px; }

.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; }
.privacy .square::before { content: "-"; position: absolute; top: 0; left: 0; }
.privacy .square > p { width: 100%; /* padding: 0 0 0 13px; */ margin-bottom: 3px; }
.privacy .square > p:last-of-type{ margin-bottom: 10px; }

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

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

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

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

	.privacy .pBox{ gap: 15px 0; margin: 20px 0; }
	
	.privacy .dlBox { gap: 30px 0; }

	.privacy .contact { margin: 30px 0 0; }
}

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


/* header */
#header{ width: 100%; position: fixed; top: 0; left: 0; z-index: 999; padding: 25px 0; transition: all 0.5s; } 
#header .flex-box{ display: flex; justify-content: space-between; align-items: center; position: relative; }
#header .logo{ display: inline-block; position: relative; }
#header .logo::after{ content: url("/img/common/taesan_logo_color.svg"); position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.5s; }
#header .logo img{ opacity: 1; transition: opacity 0.5s; }
#header .logo a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

#header nav{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: opacity 0.5s; pointer-events: none; }
#header nav a{ display: inline-block; }
#header .depth01{ display: flex; justify-content: center; }
#header .depth01 > li{ position: relative; pointer-events: auto;  }
#header .depth01 > li > a{ font-size: 1.7rem; font-weight: 500; color: #fff; padding: 30px 45px; position: relative; transition: color 0.5s; }
#header .depth01 > li > a::after{ content: ""; width: 70px; height: 1px; background: #fff; position: absolute; bottom: 19px; left: 50%; transform: translateX(-50%) scaleX(0); transition: all 0.5s; }

#header .depth02{ width: calc(100% + 10px); background: var(--mainColor); padding: 12.5px 0; position: absolute; left: 50%; transform: translateX(-50%); overflow: hidden; display: none; }
#header .depth02 > li > a{ width: 100%; padding: 7.5px 20px; font-size: 1.6rem; font-weight: 400; color: #fff; opacity: 0.8; transition: opacity 0.5s; }

#header button{ width: 47px; height: 47px; margin-right: -8px; }
#header button span{ display: inline-block; width: 30px; height: 2px; background: #fff; position: relative; top: -4px; left: -1px; transition: all 0.5s; }
#header button span::before, #header button span::after{ content: ""; width: 100%; height: 100%; background: #fff; position: absolute; transition: all 0.5s; }
#header button span::before{ top: -10px; right: 0; }
#header button span::after{ width: 20px; left: 0; bottom: -10px; } 


/* header - scroll */
#header.scroll{ background: #fff; }
#header.scroll .logo img{ opacity: 0; }
#header.scroll .logo::after{ opacity: 1; }

#header.scroll .depth01 > li > a{ color: #111; }
#header.scroll .depth01 > li > a::after{ background: var(--mainColor); }
#header.scroll button span{ background: var(--mainColor); }
#header.scroll button span::before, #header.scroll button span::after{ background: var(--mainColor); }

@media (hover: hover){
	#header .depth01 > li:hover > a::after{ transform: translateX(-50%) scaleX(1); }
	#header .depth02 > li > a:hover{ opacity: 1; }

	#header button:hover span::before{ width: 20px; }
	#header button:hover span::after{ width: 100%; }
}

@media screen and (max-width: 1400px){
	#header .depth01{ padding-left: 133px; }
}

@media screen and (max-width: 1250px){
	#header{ padding: 15px 0; }
	#header nav{ display: none; }
}


/* footer */
#footer{ background: #111; padding: 100px 0 70px; }
#footer h1{ display: inline-block; font-size: 2.2rem; font-weight: 600; color: #fff; letter-spacing: -0.02em; position: relative; }
#footer h1 a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }
#footer .dl{ margin: 40px 0 60px; }
#footer .dl > div{ display: flex; flex-wrap: wrap; gap: 15px 60px; }
#footer .dl > div:not(:last-of-type){ margin-bottom: 15px; }
#footer .dl dl{ display: flex; font-size: 1.8rem; letter-spacing: -0.02em; color: #fff; }
#footer .dl dl dt{ font-weight: 400; padding-right: 10px; }
#footer .dl dl dd{ font-weight: 300; opacity: 0.5; }
#footer .dl .Nanum{ font-family: var(--Nanum); font-weight: 400; letter-spacing: 0; }

#footer .flex-box{ display: flex; justify-content: space-between; align-items: flex-end; }
#footer .copyright{ font-family: var(--Nanum); font-size: 1.6rem; font-weight: 400; color: #fff; opacity: 0.5; }
#footer .link{ display: inline-block; font-size: 1.6rem; font-weight: 400; color: #fff; letter-spacing: -0.02em; line-height: 1; padding: 15px 30px; position: relative; z-index: 5; transition: color 0.7s 0.1s, border 0.7s; overflow: hidden; }
#footer .link::before{ content: ""; width: 150%; padding-bottom: 150%; background: #fff; border-radius: 50%; position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%) scale(0); transition: transform 0.7s; }
#footer .link::after{ content: ""; width: calc(100% - 2px); height: calc(100% - 2px); border: 1px solid rgba(255, 255, 255, 0.2); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

@media (hover: hover){
	#footer .link:hover{ color: var(--mainColor); transition-delay: unset; }
	#footer .link:hover::before{ transform: translate(-50%, -50%) scale(1); }
}

@media screen and (max-width: 1700px){
	#footer .w1600{ padding-left: 0 !important; }
}

@media screen and (max-width: 1640px){
	#footer .w1600{ padding-left: 20px !important; }
}

@media screen and (max-width: 1600px){
	#footer{ padding: 70px 0; }
	#footer h1{ font-size: 2rem; }

	#footer .link{ padding: 15px 20px; }
}

@media screen and (max-width: 1250px){
	#footer h1{ font-size: 1.8rem; }

	#footer .dl{ margin: 30px 0; }
	#footer .dl dl{ font-size: 1.6rem; }

	#footer .copyright{ font-size: 1.5rem; }
	#footer .link{ font-size: 1.5rem; }
}

@media screen and (max-width: 1200px){
	#footer{ padding: 40px 0; }
	#footer .dl > div{ gap: 15px 30px; }
}

@media screen and (max-width: 700px){
	#footer .flex-box{ flex-direction: column-reverse; align-items: flex-start; }
	#footer .copyright{ margin-top: 15px; }
}


/* menu */
#menu{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 900; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); overflow: hidden; display: none; }
#menu::before{ content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); position: absolute; top: 0; left: 0; z-index: -1; }
#menu .inner{ max-width: 1920px; width: 100%; height: 100%; margin: 0 auto; position: relative; }
#menu .mobile{ display: none; }

#menu .depth01{ width: 100%; display: flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#menu .depth01 a{ width: 100%; display: inline-block; }
#menu .depth01 > li{ width: calc(100% / 6); height: 100%; position: relative; }
#menu .depth01 > li::after{ content: ""; width: 1px; height: calc(100vh + 100%); background: rgba(255, 255, 255, 0.1); position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
#menu .depth01 > li > a{ font-size: 3rem; font-weight: 600; color: #fff; padding: 65px 60px; opacity: 0; transform: translateY(-30px); transition: all 0.8s; transition-delay: unset; }

#menu .depth02 > li{ opacity: 0; transform: translateY(30px); transition: all 0.8s; transition-delay: unset; }
#menu .depth02 > li > a{ font-size: 1.8rem; font-weight: 500; color: rgba(255, 255, 255, 0.5); padding: 15px 60px; transition: color 0.5s; }

@media (hover: hover){
	#menu .depth02 > li > a:hover{ color: #fff; }
}

@media screen and (max-width: 1600px){
	#menu .depth01 > li > a{ font-size: 2.5rem; padding: 30px; }
	#menu .depth02 > li > a{ padding: 15px 30px; }
}

@media screen and (max-width: 1250px){
	#menu .depth01 > li > a{ font-size: 2.2rem; padding: 20px; }
	#menu .depth02 > li > a{ font-size: 1.7rem; padding: 12.5px 20px; }
}

@media screen and (max-width: 1200px){
	#menu .inner{ width: 90%; }
	#menu .depth01{ flex-direction: column; }
	#menu .depth01 > li{ width: 100%; display: flex; align-items: center; overflow: hidden; }
	#menu .depth01 > li::after{ width: 100vw; height: 1px; top: calc(100% - 1px); right: -5%; transform: translateY(0); }
	#menu .depth01 > li:last-of-type::after{ display: none; }
	#menu .depth01 > li > a{ width: 150px; padding: 40px 20px; padding-left: 0; }
	#menu .depth02{ display: flex; flex-wrap: wrap; }
	#menu .depth02 > li > a{ padding: 20px; }
}

@media screen and (max-width: 655px){
	#menu .pc{ display: none; }
	#menu .mobile{ display: block; }
	#menu .depth01{ display: block; }
	#menu .depth01 > li{ flex-direction: column; align-items: flex-start; }
	#menu .depth01 > li::before{ content: ""; width: 100%; height: 62px; position: absolute; top: 0; left: 0; z-index: 30; cursor: pointer; }
	#menu .depth01 > li > a{ width: 100%; padding: 20px; }
	#menu .depth02{ display: none; width: 100%; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1); }
	#menu .depth02 > li > a{ padding: 10px 20px; }
}


/* quick menu */
#quick{ max-width: 1800px; width: 100%; position: fixed; bottom: 30px; left: 50%; z-index: 800; transform: translateX(-50%); text-align: right; pointer-events: none; transition: opacity 0.5s; }
#quick button{ pointer-events: auto; outline: none; }

#quick .menu{ width: 100%; position: absolute; right: 25px; bottom: calc(100% + 20px); /* display: none; */ pointer-events: none; }
#quick ul{ direction: rtl; }
#quick ul li{ width: 50px; height: 50px; background: #fff; border-radius: 60px; position: relative; position: absolute; top: 0; opacity: 0; pointer-events: none; transition: all 0.5s; }
#quick ul li:not(:last-of-type){ margin-bottom: 15px; }
#quick ul li .text{ width: max-content; height: 100%; position: absolute; right: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
#quick ul li .text *{  pointer-events: auto; } 
#quick ul li .text span{ width: max-content; height: 100%; display: flex; align-items: center; background: #fff; border-radius: inherit; padding-left: 20px; padding-right: 50px; font-size: 1.4rem; font-weight: 400; color: var(--mainColor); letter-spacing: -0.02em; line-height: 1; transform: translateX(calc(100% - 50px)); transition: transform 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955); }
#quick ul li .text a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; transform: translateX(calc(100% - 50px)); transition: transform 0.7s; }
#quick ul li .icon{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: inherit; border-radius: inherit; position: relative; z-index: 5; }

#quick ul li:last-of-type{ background: #000; }
#quick ul li #top{ width: 100%; height: 100%; background: #000; border-radius: 50%; font-family: var(--Lora); font-size: 1.4rem; font-weight: 400; color: #fff; line-height: 1; }

#quick .circle{ position: relative; }
#quick .img{ position: relative; animation: rotate360 5s infinite linear; }
#quick .img::after{ content: url("/img/common/quick_circle_black.svg"); position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.5s; }  
#quick .circle img{ opacity: 1; transition: opacity 0.5s; }
#quick .circle span{ display: inline-block; width: 16px; height: 2px; background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.7s; }
#quick .circle span::after{ content: ""; width: 100%; height: 100%; background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(90deg); transition: all 0.7s; }

#quick.on ul li{ opacity: 1; pointer-events: auto; }
#quick.on ul li:nth-of-type(1){  top: -310px; }
#quick.on ul li:nth-of-type(2){  top: -245px; }
#quick.on ul li:nth-of-type(3){  top: -180px; }
#quick.on ul li:nth-of-type(4){  top: -115px; }
#quick.on ul li:nth-of-type(5){  top: -50px; }
#quick.on .circle span{ transform: translate(-50%, -50%) rotate(135deg); }

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

#quick.black .img::after{ opacity: 1; }
#quick.black .circle img{ opacity: 0; }
#quick.black .circle span, #quick.black .circle span::after{ background: #000; }

@keyframes rotate360{
	0%{ transform: rotate(0deg); }
	100%{ transform: rotate(360deg); }
}

@keyframes rotate360_black{
	0%{ transform: translate(-50%, -50%) rotate(0deg); }
	100%{ transform: translate(-50%, -50%) rotate(360deg); }
}

@media (hover: hover){
	#quick ul li:hover .text span{ transform: translateX(0); }
	#quick ul li:hover .text a{ transform: translateX(0); }
}

@media screen and (max-width: 1840px){
	#quick{ padding: 0 20px; }
	#quick .menu{ right: 45px; }
}


/* 전체 메뉴 펼쳐질 때 */
body.lock{ overflow: hidden; }
body.lock #header{ background: transparent; }
body.lock #header .logo img{ opacity: 1; }
body.lock #header .logo::after{ opacity: 0; }
body.lock #header nav{ opacity: 0; pointer-events: none; }
body.lock #header button span{ background: #fff; transform: rotate(45deg); }
body.lock #header button span::before{ top: 19%; left: 2%; transform: rotate(90deg); background: #fff; }
body.lock #header button span::after{ opacity: 0; background: #fff; }
body.lock #menu .depth01 > li > a, body.lock #menu .depth02 > li{ opacity: 1; transform: translateY(0); }
body.lock #menu .depth01 > li > a{ color: #fff; }
body.lock #menu .depth01 > li > a{ transition-delay: 0.5s; }

@media (hover: hover){
	body.lock #header button span::before{ width: 100%; }
}