@charset 'utf-8';

/* °øÅë */
:root{
	--baseFont: 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--Poppins: 'Poppins', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--Gmarket: 'GmarketSans', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--mainColor: #00387F;
	--aosPlus: 100px;
	--aosMinus: -100px;
}

.w1720{ max-width: 1720px; width: 100%; margin: 0 auto; }
.w1500{ max-width: 1500px; width: 100%; margin: 0 auto; }
.w1400{ max-width: 1400px; width: 100%; margin: 0 auto; }
.w1000{ max-width: 1000px; width: 100%; margin: 0 auto; }

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

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

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

@media screen and (max-width: 1250px){	
	:root{
		--aosPlus: 50px;
		--aosMinus: -50px;
	}
}

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

/* privacy */
#policy .privacy * { font-size: 1.6rem; line-height: 1.625; }
#policy .privacy h3 { font-weight: 700; }
#policy .privacy h4{ font-size: 2.2rem; font-weight: 700; }
#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 .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.dot li{ position: relative; }
#policy .privacy .dlBox dl dd > ul.dot li::before{ content: ""; width: 3px; height: 3px; background: #444; border-radius: 50%; position: absolute; top: calc(1.625em / 2); left: -10px; transform: translateY(-50%); }

#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 li.square{ width: calc(100% + 12px); left: -12px; }
#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 .pBox{ gap: 15px 0; }

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

@media screen and (max-width: 900px){
	#policy .privacy h4{ font-size: 2rem; }
	#policy .privacy .dlBox dl dt { font-size: 1.7rem; }
	#policy .privacy * { font-size: 1.5rem; }
}



/* 
	header
*/
#header{ width: 100%; position: fixed; top: 0; left: 0; z-index: 100; color: #fff; transition: all 0.3s; padding-bottom: 10px; }
#header .line{ display: flex; align-items: center; }
#header .line01{ justify-content: flex-end; gap: 5px; padding-top: 15px; }
#header .line02{ justify-content: space-between; }

#header .lang{ display: inline-block; font-size: 1.4rem; font-weight: 600; position: relative; cursor: pointer; }
#header .lang p{ display: inline-block; padding: 0 5px; padding-right: 25px; position: relative; }
#header .lang p::before, #header .lang p::after{ position: absolute; top: 41%; right: 5px; transform: translateY(-50%); transform-origin: center center; transition: all 0.5s; }
#header .lang p::before{ content: url("/img/common/lang_arrow_color.png"); opacity: 0; }
#header .lang p::after{ content: url("/img/common/lang_arrow.png"); }
#header .lang ul{ width: 100%; position: absolute; top: calc(100% + 5px); z-index: 10; background: #fff; border-radius: 10px; padding: 7.5px 0; overflow: hidden; display: none; }
#header .lang ul li a{ display: inline-block; width: 100%; color: #aaa; text-align: center; padding: 2.5px 0; }
#header .lang ul li.on a{ color: var(--mainColor); }
#header .lang.active p::before, #header .lang.active p::after{ top: 63%; transform: translateY(-50%) rotate(-180deg); }

#header .toggle{ background: var(--mainColor); border-radius: 100px; }
#header .toggle a{ display: flex; align-items: center; padding: 5px; overflow: hidden; position: relative; }
#header .toggle .icon{ width: 20px; height: 20px; background: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; }
#header .toggle .txt{ overflow: hidden; }
#header .toggle p{ width: 0; font-size: 1.3rem; font-weight: 400; color: #fff; letter-spacing: -0.02em; white-space: nowrap; padding-left: 0; padding-right: 0; transition: width 0.5s, padding 0.5s; }

#header .toggle + .lang{ margin-left: 10px; }

@media screen and (hover: hover){
	#header .toggle:hover p{ padding: 0 10px; }
	#header .tell:hover p{ width: 158px; }
	#header .email:hover p{ width: 187px; }
}

#header .call{ display: flex; align-items: center; background: var(--mainColor); border-radius: 100px; padding: 5px; padding-right: 20px; margin-left: 15px; }
#header .call span{ display: inline-block; width: 20px; height: 20px; background: #fff; border-radius: 50%; position: relative; }
#header .call span img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#header .call p{ font-size: 1.3rem; font-weight: 400; color: #fff; margin-left: 10px; }

#header .logo{ display: inline-block; position: relative; margin-top: -11px; }
#header .logo img{ transition: all 0.3s; }
#header .logo::after{ content: url("/img/common/higen_logo_color.svg"); position: absolute; top: 57%; left: 50%; transform: translate(-50%, -50%); transition: all 0.3s; opacity: 0; }
#header .logo a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

#header nav{ margin-right: 40px; }
#header nav .depth01{ display: flex; }
#header nav .depth01 > li > a{ display: inline-block; font-size: 1.8rem; font-weight: 600; color: #fff; padding: 20px 40px; transition: all 0.3s; }
#header nav .depth01 > li{ position: relative; }
#header nav .depth02{ width: 150px; position: absolute; left: 50%; transform: translateX(-50%); background: var(--mainColor); padding: 12.5px 0; border-radius: 10px; display: none; }
#header nav .depth02 > li > a{ display: inline-block; width: 100%; text-align: center; font-size: 1.6rem; font-weight: 400; color: #fff; line-height: 1.425; padding: 7.5px 10px; /* transition: color 0.3s; */ }
/* #header nav .depth02 > li:hover a{ color: #fff; } */
#header nav .depth01 > li:not(.wide) .depth03{ display: none; }

/* header - Á¦Ç°¼Ò°³ */
#header nav .wide .sliding-box{ display: none; width: max-content; overflow: hidden; position: absolute; left: 50%; left: 50%; transform: translateX(-50%); }
#header nav .wide .depth02{ width: max-content; padding: 10px 0; overflow: hidden; }
#header nav .wide .depth02 > li{ display: inline-block; vertical-align: top; }
#header nav .wide .depth02 > li > a{ padding: 10.5px 30px; color: #eee; text-align: left; }
#header nav .depth03{ padding: 0 30px; /* margin-bottom: -15px; */ }
#header nav .depth03 li a{ display: inline-block; font-size: 1.4rem; font-weight: 400; color: #fff; position: relative; padding-left: 12px; }
#header nav .depth03 li a::before{ content: "\e92f"; font-family: "xeicon"; font-style: normal; font-size: 0.6rem; position: absolute; top: 35%; left: 0; transform: translateY(-50%) rotate(90deg); }
#header nav .depth03 > li > a{ padding-bottom: 8px; }
#header nav .depth04{ margin-bottom: 20px; }
#header nav .depth04 > li > a{ display: inline-block; opacity: 0.5; position: relative; padding: 3.5px 0; padding-left: 12px; }
#header nav .depth04 > li > a::before{ content: ""; width: 3px; height: 3px; background: #fff; border-radius: 50%; opacity: 0.5; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
#header nav .prod .depth02{ left: 0; }

#header .flex-box{ display: flex; align-items: center; align-items: center; }
#header button{ border: none; background: none; padding: 10px; position: relative; }
#header .line button img{ transition: all 0.3s; }
#header button.search::after{ content: url("/img/common/search_icon_color.png"); position: absolute; top: 56%; left: 50%; transform: translate(-50%, -50%); transition: all 0.3s; opacity: 0; }
#header button.menu::after{ content: url("/img/common/menu_icon_color.png"); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.3s; opacity: 0; }
 
/* header - °Ë»öâ */
#header .search-box{ width: 100%; background: var(--mainColor); position: absolute; top: 100%; left: 0; z-index: -1; text-align: center; overflow: hidden; display: none; }
#header .form-box{ display: flex; flex-direction: column; align-items: center; padding: 60px 0; }
#header .search-box .input-box div{ display: inline-block; position: relative; }
#header .search-box input{ width: 600px; height: 65px; border-radius: 100px; border: none; font-size: 1.8rem; font-weight: 400; color: #333; padding: 0 45px; padding-right: 85px; }
#header .search-box input::placeholder{ color: #aaa; }
#header .search-box button{ padding: 0; }
#header .search-box button.submit{ position: absolute; top: 50%; right: 45px; z-index: 10; transform: translateY(-50%); }
#header .search-box button.close{ padding: 10px; margin-left: 20px; }
#header .search-box ul{ max-width: 645px; width: 100%; display: flex; flex-wrap: wrap; padding: 15px 40px 0; padding-right: 30px; margin-bottom: -10px; }
#header .search-box ul li{ margin-right: 10px; margin-bottom: 10px; }    
#header .search-box ul li a{ font-size: 1.6rem; font-weight: 300; color: #fff; }
#header .search-box ul li a::before{ content: "#"; }

/* header - scroll */
#header.scroll{ background: #fff; color: #111; }
#header.scroll .lang p::before{ opacity: 1; }
#header.scroll .lang p::after{ opacity: 0; }
#header.scroll .depth01 > li > a{ color: #111; }

#header.scroll .logo img{ opacity: 0; }
#header.scroll .logo::after{ opacity: 1; }

#header.scroll .line button img{ opacity: 0; }
#header.scroll button.search::after{ opacity: 1; }
#header.scroll button.menu::after{ opacity: 1; }

#header.scroll2 .line01 {display:none;}

@media screen and (max-width: 1820px){
	#header nav .prod .depth02{ left: -30%; }
}

@media screen and (max-width: 1450px){
	#header nav{ display: none; }
	#header .line02{ padding-top: 10px; }
}

@media screen and (max-width: 1500px){
	#header .search-box input{ width: 500px; height: 55px; }
	#header .search-box ul{ max-width: 560px }
}

@media screen and (max-width: 800px){
	#header .search-box input{ width: 450px; height: 50px; font-size: 1.6rem; }
	#header .search-box button.close{ margin-left: 10px; }
}

@media screen and (max-width: 600px){
	#header .form-box{ padding: 30px 0; } 
	#header .search-box .input-box{ padding-left: 10px; }
	#header .search-box input{ width: calc(100vw - 100px); }
}


/* 
	footer
*/
#footer{ background: #191919; padding: 80px 0; }  
#footer .logo{ display: inline-block; position: relative; }
#footer .logo a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#footer .line{ display: flex; justify-content: space-between; }

#footer .line01{ align-items: flex-start; position: relative; margin-bottom: 65px; }
#footer .line01 ul{ display: flex; align-items: center; gap: 20px; }

#footer #top{ width: 65px; height: 65px; position: absolute; bottom: -17px; right: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #292929; border: none; border-radius: 10px; font-family: var(--Poppins); font-size: 1.4rem; font-weight: 500; color: #fff; }
#footer #top img{ margin-bottom: 7px; }

#footer .line02{ border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 15px; }
#footer .line02 > ul{ display: flex; margin-left: -15px; }
#footer .line02 > ul li a{ display: inline-block; font-size: 1.5rem; font-weight: 200; color: #fff; padding: 15px; }
#footer .line02 > ul li.bold a{ font-weight: 400; color: #ddd; text-decoration: underline; }

#footer .line02 .select{ position: relative; cursor: pointer; }
#footer .line02 .select p{ font-family: var(--Poppins); font-size: 1.8rem; font-weight: 400; color: #fff; padding: 10px 0; padding-right: 50px; position: relative; }
#footer .line02 .select p::after{ content: url("/img/common/select_icon.png"); position: absolute; top: 50%; right: 0; transform: translateY(-50%); transform-origin: center center; transition: all 0.3s; }
#footer .line02 .select ul{ width: calc(100% + 10px); position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); background: var(--mainColor); padding: 5px 0; border-radius: 10px; overflow: hidden; display: none; }
#footer .line02 .select ul li a{ display: inline-block; width: 100%; font-size: 1.5rem; font-weight: 400; color: #fff; text-align: center; padding: 5px 10px; }

#footer .line02 .select.active p::after{ top: calc(50% - 10px); transform: translateX(-50%) scaleY(-1); }

#footer .line03{ padding-top: 30px; }
#footer .line03 .company *{ font-size: 1.5rem; font-weight: 200; color: #fff; }
#footer .line03 .company .bold{ font-weight: 500; margin-bottom: 20px; }
#footer .line03 .company ul{ display: flex; margin-bottom: 10px; }
#footer .line03 .company ul li{ margin-right: 30px; }
#footer .line03 .sns{ display: flex; }
#footer .line03 .sns li{ width: 40px; height: 40px; border: 1px solid #555; border-radius: 50%; display: flex; justify-content: center; align-items: center; position: relative; }
#footer .line03 .sns li:not(:last-of-type){ margin-right: 10px; } 
#footer .line03 .sns li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

@media screen and (max-width: 1200px){
	#footer{ padding: 40px 0; }  
	#footer #top{ width: 55px; height: 55px; }
	#footer .line02 .select p{ font-size: 1.6rem; }
}
 
@media screen and (max-width: 900px){
	#footer .line01{ flex-direction: column; align-items: center; margin-bottom: 30px; }
	#footer .line01 ul{ margin-top: 30px; }
	#footer #top{ bottom: calc(100% - 50px); }

	#footer .line02{ align-items: center; }
	#footer .line02 > ul li:not(:last-of-type){ display: none; }

	#footer .line03 .company ul{ flex-wrap: wrap; margin-bottom: 0; }
	#footer .line03 .company ul li{ margin-bottom: 10px; }
}

@media screen and (max-width: 600px){
	#footer .line03{ flex-direction: column-reverse; }
	#footer .line03 .sns{ margin-bottom: 20px; }
}


/* 
	menu-box - Àüü¸Þ´º
*/
#menu-box{ width: 100%; height: 100vh; background: #111; position: fixed; top: 0; left: 0; z-index: 200; overflow: hidden; transform: translateX(100%); transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1); }
#menu-box::after{ content: url("/img/common/menu_bg.png"); position: absolute; bottom: 0; right: 0; }
#menu-box button{ position: absolute; top: 50px; right: -20px; z-index: 10; padding: 20px; border: none; background: none; }

#menu-box .flex-box{ width: 100%; display: flex; height: 100vh; }
#menu-box .flex-box > div{ /* width: calc(100%/ 3); */ position: relative; padding-top: 125px; }
#menu-box .flex-box > div::after{ content: ""; width: 1px; height: 100vh; background: #fff; opacity: 0.1; position: absolute; bottom: 0; right: 0; }
#menu-box .flex-box > div:last-of-type::after{ display: none; }

/* menu-box - line01 */
#menu-box .line01{ width: 36%; padding-left: 80px; background: #090909; }
#menu-box .line01 ul li{ color: #444; display: flex; align-items: center; padding: 25px 0; position: relative; }
#menu-box .line01 ul li::before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; }
#menu-box .line01 ul li.none::before{ display: none; }
#menu-box .line01 ul li a{ font-size: 4.4rem; font-weight: 600; margin-left: 50px; transition: color 0.3s; }
#menu-box .line01 ul li span{ font-size: 1.8rem; font-weight: 500; transition: color 0.3s; }

#menu-box .line01 ul li.on a{ color: #fff; }
#menu-box .line01 ul li.on span{ color: var(--mainColor); }

#menu-box .line01 ul li:hover a{ color: #fff; }
#menu-box .line01 ul li:hover span{ color: var(--mainColor); }

/* menu-box - line02 */
#menu-box .line02{ width: 29%; } 
#menu-box .line02 ul{ width: 100%; position: absolute; top: 125px; left: 0; padding-top: 20px; }
#menu-box .line02 ul:not(:first-of-type){ display: none; }
#menu-box .line02 ul li a{ display: inline-block; width: 100%; font-size: 2rem; font-weight: 300; color: #444; padding: 20px 60px; position: relative; }
#menu-box .line02 ul li a::before{ content: ""; width: 3px; height: calc(100% - 9px); background: var(--mainColor); position: absolute; top: 50%; left: -2px; transform: translateY(-50%); opacity: 0; transition: all 0.3s; }
#menu-box .line02 ul li a::after{ content: url("/img/common/menu_arrow.png"); position: absolute; top: 50%; right: 60px; transform: translateY(-50%); opacity: 0; transition: all 0.3s; }
#menu-box .line02 br{ display: none; }

#menu-box .line02 ul li:hover a{ color: #fff; transition: color 0.3s; }
#menu-box .line02 ul li:hover a::before, #menu-box .line02 ul li:hover a::after{ opacity: 1; }

#menu-box .company-info{ display: flex; flex-direction: column; justify-content: space-between; width: 35%; padding: 25px 0 50px; padding-left: 40px; }
#menu-box .company-info ul li{ font-size: 1.4rem; font-weight: 300; color: #fff; }
#menu-box .company-info ul li:not(:last-of-type){ margin-bottom: 10px; }
#menu-box .company-info ul li span{ display: inline-block; font-weight: 500; margin-right: 10px; }
#menu-box .company-info p{ font-size: 1.4rem; font-weight: 300; color: #fff; opacity: 0.5; margin-top: 25px; }

@media screen and (max-width: 1760px){
	#menu-box button{ right: 15px; transform: translateY(-3px); }
	#menu-box .line01{ padding-left: 20px; } 
	#menu-box .company-info{ padding-right: 20px; }
}

@media screen and (max-width: 1500px){
	#menu-box .line01 ul li{ padding: 20px; }
	#menu-box .line01 ul li a{ font-size: 4rem; }
	#menu-box .flex-box > div{ width: 30%; }
	#menu-box .flex-box > div.line02{ width: 35%; }
	#menu-box .flex-box > div.company-info{ width: 35%; }
}

@media screen and (max-width: 1200px){
	#menu-box .line01 ul li a{ font-size: 3.5rem; }
	#menu-box .flex-box > div{ width: 50%; }
	#menu-box .flex-box > div.line02{ width: 50%; }
	#menu-box .flex-box > div:nth-of-type(2)::after{ display: none; }
	#menu-box .flex-box > div.company-info{ display: none; }
}

@media screen and (max-width: 750px){
	#menu-box .line02 ul li a::after{ right: 20px; }
}

@media screen and (max-width: 700px){
	#menu-box .line01 ul li{ padding-left: 0; }
	#menu-box .line01 ul li a{ font-size: 3rem; }
	#menu-box .line02 ul{ padding-top: 10px; }
	#menu-box .line02 ul li a{ font-size: 1.8rem; padding: 20px 30px; }
}


/* 
	quick-menu - Äü¸Þ´º
*/
#quick-menu{ position: fixed; bottom: 40px; right: 20px; z-index: 1500; transition: all 0.3s; }
#quick-menu button.open{ width: 60px; height: 60px; background: none; border: 1px solid #fff; border-radius: 50%; padding: 0; position: relative; transition: all 0.5s; transition: all 0.3s; backdrop-filter: blur(4px); }
#quick-menu button.open::before{ content: ""; width: 12px; height: 2px; background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.3s; }
#quick-menu button.open::after{ content: ""; width: 2px; height: 12px; background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.3s; }

#quick-menu span{ display: inline-block; width: 60px; position: absolute; top: 50%; right: 0; transform: translateY(-50%); font-family: var(--Poppins); font-size: 1.4rem; font-weight: 600; color: #fff; white-space: nowrap; background: var(--mainColor); padding: 21px 24px; padding-right: 75px; border-radius: 100px; opacity: 0; overflow: hidden; transition: all 0.5s; cursor: pointer; }
#quick-menu span::before{ content: ""; width: 12px; height: 2px; background: #fff; position: absolute; top: 50%; right: 24px; transform: translateY(-50%); opacity: 0; transition: all 0.5s; transition-delay: 0.1s; }
#quick-menu span::after{ content: ""; width: 2px; height: 12px; background: #fff; position: absolute; top: 50%; right: 29px; transform: translateY(-50%); opacity: 0; transition: all 0.5s; transition-delay: 0.1s; }

#quick-menu:hover button{ opacity: 0; }
#quick-menu:hover span{ width: 180px; opacity: 1; }
#quick-menu:hover span::before, #quick-menu:hover span::after{ opacity: 1; }

#quick-menu ul{ width: 180px; position: absolute; bottom: 70px; right: 0; background: #fff; border-radius: 20px; padding: 0 20px; display: none; }
#quick-menu ul li{ display: flex; align-items: center; font-size: 1.5rem; font-weight: 600; color: #111; padding: 20px 0; border-bottom: 1px solid #ddd; position: relative; }
#quick-menu ul li:last-of-type{ border-bottom: none; }
#quick-menu ul li img{ margin-right: 15px; }
#quick-menu ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

#quick-menu.on button{ opacity: 0; }
#quick-menu.on span{ width: 180px; opacity: 1; }
#quick-menu.on span::before{ opacity: 1; }
#quick-menu.on span::after{ opacity: 1; transform: translateY(-50%) rotate(90deg); }

#quick-menu.scroll button.open{ border: 1px solid var(--mainColor); }
#quick-menu.scroll button.open::before{ background: var(--mainColor); }
#quick-menu.scroll button.open::after{ background: var(--mainColor); }

@media screen and (max-width: 1200px){
	#quick-menu ul li{ padding: 15px 0; }
}