@charset 'utf-8';

/* ���� */
:root{
    --baseFont: 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--engFont: 'Red Hat Display', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--mainColor: #09536A;
	--headerH: 98px;
}

.w1920{ max-width: 1920px; width: 100%; margin: 0 auto; }
.w1760{ max-width: 1760px; width: 100%; margin: 0 auto; }
.w1720{ max-width: 1720px; width: 100%; margin: 0 auto; }
.w1600{ max-width: 1600px; width: 100%; margin: 0 auto; }

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

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

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

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


/* privacy */
.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; }
.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; }

.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 screen and (max-width: 1250px){
	.privacy .textBox h3{ font-size: 2rem; }
	.privacy .textBox { gap: 80px 0; }

	.privacy .pBox{ gap: 15px 0; }
	
	.privacy .dlBox { gap: 30px 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; background: transparent; transition: background 0.5s, border 0.5s; }
#header .flex-box{ display: flex; justify-content: space-between; align-items: center; }
#header  .left{ display: flex; align-items: center; }
#header .logo{ display: inline-block; position: relative; margin-right: 35px; }
#header .logo a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

#header nav::before{ content: ""; width: 100%; height: 180px; background: #fff; position: absolute; top: 0; left: 0; z-index: -1; transform: scaleY(0); transform-origin: top; box-shadow: 4px 4px 10px rgba(102, 102, 102, 0.2); transition: transform 0.5s; }
#header nav::after{ content: ""; width: 100%; height: 1px; background: #D9D9D9; opacity: 0.1; position: absolute; bottom: 0; left: 0; z-index: 10; transition: opacity 0.5s; pointer-events: none; }

#header nav .depth01{ display: flex; }
#header nav .depth01 > li{ position: relative; }
#header nav .depth01 > li > a{ display: inline-block; font-size: 1.8rem; font-weight: 600; color: #fff; padding: 40px 35px; transition: color 0.5s; }

#header nav .depth02{ width: max-content; display: flex; position: absolute; top: 100%; left: 0; transform: translateX(20px); visibility: hidden; opacity: 0; transition: opacity 0.5s; transition-delay: unset; }
#header nav .depth02 > li > a{ display: inline-block; padding: 32.5px 15px; font-size: 1.6rem; font-weight: 500; color: #555; transition: font-weight 0.5s, color 0.5s; }

#header .menu{ width: 70px; height: 35px; background: var(--mainColor); border-radius: 990px; position: fixed; top: calc(var(--headerH) / 2); right: 45px; z-index: 50; transform: translateY(-50%); }
#header .menu span{ display: inline-block; width: 16px; height: 2px; background: #fff; border-radius: 100px; position: relative; top: 0; transition: all 0.5s; }
#header .menu span::after{ content: ""; width: 100%; height: 100%; background: #fff; border-radius: inherit; position: absolute; top: -5px; left: 0; transform: translateY(-100%); transition: all 0.5s; }

/* header (hover) */
#header.hover nav::before{ transform: scaleY(1); }
#header.hover nav::after{ opacity: 1; }
#header.hover nav .depth01 > li > a{ color: #222; }

#header nav .depth01 > li:hover .depth02{ visibility: visible; opacity: 1; transition-delay: 0.1s; }
#header nav .depth02 > li:hover > a{ font-weight: 700; color: var(--mainColor); }


/* header (scroll) */
#header.scroll{ background: #fff; }
#header.scroll nav::after{ opacity: 1; }
#header.scroll nav .depth01 > li > a{ color: #222; }

@media screen and (max-width: 1760px){
	#header .menu{ right: 20px; }
}

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


/* 전체 메뉴 */
#menu{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 10; display: none; }
#menu .blank{ width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); }
#menu .inner{ max-width: 405px; width: 100%; height: 100%; background: #fff; position: absolute; top: 0; right: 0; padding-top: var(--headerH); transform: translateX(100%); transition: transform 0.5s; }

#menu .nav{ height: 100%; padding: 25px 45px; padding-right: 30px; }
#menu .nav a{ display: inline-block; }
#menu .nav .depth01{ border-top: 1px solid #E1E1E1; }
#menu .nav .depth01 > li{ position: relative; }
#menu .nav .depth01 > li::after{ content: ""; width: 100%; height: 89px; position: absolute; top: 0; left: 0; cursor: pointer; }
#menu .nav .depth01 > li > a{ width: 100%; font-size: 2.8rem; font-weight: 600; color: #3F3F3F; padding: 30px 0; position: relative; }
#menu .nav .depth01 > li > a::after{ content: "\e942"; font-family: "xeicon"; font-weight: normal; font-style: normal; position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition: all 0.5s; }
#menu .nav .depth01 > li{ border-bottom: 1px solid #E1E1E1; }
#menu .nav .depth02{ padding: 20px 0 10px; border-top: 1px solid #E1E1E1; display: none; }
#menu .nav .depth02 > li{ background: #fff; transition: background 0.5s; }
#menu .nav .depth02 > li > a{ width: 100%; font-size: 1.6rem; font-weight: 400; color: #666; padding: 10px 0; padding-right: 35px !important; position: relative; transition: padding 0.5s; }
#menu .nav .depth02 > li > a::after{ content: "\e90b"; font-family: "xeicon"; font-weight: normal; color: var(--mainColor); font-style: normal; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); opacity: 0; transition: all 0.5s; }

#menu .nav .depth01 > li.on > a::after{ transform: translateY(-50%) rotate(-180deg); }
#menu .nav .depth02 > li:hover{ background: #F9F9F9; }
#menu .nav .depth02 > li:hover > a{ padding-left: 10px; }
#menu .nav .depth02 > li:hover > a::after{ opacity: 1; right: 10px; }

body.open{ overflow: hidden; }
body.open #header .menu span{ top: -4px; transform: rotate(45deg); }
body.open #header .menu span::after{ top: 0; transform: rotate(-90deg); }
body.open #menu .inner{ transform: translateX(0); }

@media screen and (max-width: 1600px){
	#menu .nav .depth01 > li::after{ height: 86px; }
	#menu .nav .depth01 > li > a{ font-size: 2.6rem; }
}

@media screen and (max-width: 1280px){
	#menu .nav .depth01 > li::after{ height: 74px; }
	#menu .nav .depth01 > li > a{ font-size: 2.4rem; padding: 25px 0; }

	#menu .nav .depth02{ padding: 10px 0; }
}

@media screen and (max-width: 900px){
	#menu .nav{ padding: 20px 25px; padding-right: 20px; }
	#menu .nav .depth01 > li::after{ height: 62px; }
	#menu .nav .depth01 > li > a{ font-size: 2.2rem; padding: 20px 0; }
}


/* footer */
#footer{ background: #1D1D1D; }
#footer .footer-box{ padding: 60px 0 50px; }
#footer dl{ display: flex; }
#footer dl dt{ color: #fff; }
#footer dl dd, #footer dl dd *{ color: #D9D9D9; }

#footer .info{ padding-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } 
#footer .info .flex-box{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 30px 60px; }
#footer .info .dl{ display: flex; flex-wrap: wrap; gap: 10px 40px; }
#footer .info dl{ gap: 15px; }
#footer .info dl *{ font-size: 1.5rem; font-weight: 500; }

#footer .flex{ display: flex; justify-content: space-between; gap: 20px 60px; padding-top: 50px; }
#footer .nav *{ font-size: 1.6rem; font-weight: 500; }
#footer .nav a{ display: inline-block; }
#footer .nav .depth01 > li{ display: flex; align-items: flex-start; margin-left: -20px; }
#footer .nav .depth01 > li > a{ color: #fff; padding: 10px 30px; padding-left: 20px; position: relative; }
#footer .nav .depth01 > li > a::after{ content: ""; width: 1px; height: 10px; background: rgba(255, 255, 255, 0.2); position: absolute; top: 50%; right: 0; transform: translateY(-50%); }  

#footer .nav .depth02{ display: flex; flex-wrap: wrap; padding-left: 27.5px; }
#footer .nav .depth02 > li > a{ color: #D9D9D9; padding: 10px 12.5px; }

#footer .top{ --translate: 45px; }
#footer .top .animate{ animation: bounce 1.5s infinite; position: relative; }
#top{ outline: none; }
#top svg circle{ transition: stroke 0.5s; }
#top svg path{ transition: fill 0.5s; }

#footer .copyright{ background: #000; text-align: center; padding: 15px 0; }
#footer .copyright p{ font-family: var(--engFont); font-size: 1.4rem; font-weight: 500; color: #6D6D6D; }

@keyframes bounce{
	0%{ top: 0; }
	50% { top: var(--translate); }
	100% { top: 0; }
}

@media screen and (hover: hover){
	#top:hover svg circle{ stroke: #0E82A6; }
	#top:hover svg path{ fill: #0E82A6; }
}

@media screen and (max-width: 1600px){
	#footer .top svg{ width: 80px; height: auto; }
}

@media screen and (max-width: 1000px){
	#footer .footer-box{ padding: 30px 0; }
	#footer .info{ padding-bottom: 20px; }

	#footer .flex{ padding-top: 20px; }
	#footer .nav *{ font-size: 1.5rem; }
	#footer .nav .depth01 > li > a{ padding: 10px 20px; }
	#footer .nav .depth02{ padding-left: 10px; }
	#footer .nav .depth02 > li > a{ padding: 10px; }
}

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

	#footer .nav .depth01 > li{ margin-left: -15px; }
	#footer .nav .depth01 > li > a{ padding: 10px 15px; }
	#footer .nav .depth02{ padding-left: 10px; }
	#footer .nav .depth02 > li > a{ padding: 10px 5px; }

	#footer .info .dl{ padding-right: 100px; }

	#footer .top{ position: absolute; top: 35px; right: 35px; }
	#footer .top svg{ width: 70px; }
}


/* 스크롤바 커스텀 */
.scroll-y{ overflow-y: scroll; }
.scroll-y::-webkit-scrollbar{ width: 31px; }
.scroll-y::-webkit-scrollbar-thumb{ height: 20px; background: var(--mainColor); border-radius: 60px; background-clip: padding-box; border: 15px solid transparent; }
.scroll-y::-webkit-scrollbar-track{ background: #E1E1E1; background-clip: padding-box; border: 15px; border: 15px solid transparent; }