@charset "utf-8";

/* header */
header { position:absolute; top:0; left:0; width:100%; z-index:99; transition:top 0.4s ease; }
header h1 { position:absolute; left:50px; z-index:4; display:flex; align-items:center; height:100%; }
header h1 img { transition:all 0.25s; filter:none; } 
#wrap.on header h1 img { filter:brightness(0) invert(1); }
#wrap.on header.over h1 img { filter:none; }
header h1 a { display:block; }
header.over_all h1 { z-index:999; }
@media screen and (max-width:1440px){
	header h1 { left:20px; }
}
@media screen and (max-width:1200px){
	header { position:fixed; height:80px; }
	#wrap.on header.active { background:rgba(0, 0, 0, 0.1); }
	header.fix { top:-80px; }
	header.fix.nav-down { top:0; }
	header h1 img { width:160px; height:auto; }
	#wrap.on header.active h1 img { filter:none; }
	#wrap.mainbody.on header h1 img { filter:brightness(0) invert(1); }
}
@media screen and (max-width:640px){
	header { height:60px; }
	header.fix { top:-60px; }
	header h1 img { width:120px; }
}


header #navi { position:relative; z-index:3; display:flex; justify-content:center; width:100%; }
header.over_all #navi { opacity:0; }
header #navi #gnb { overflow:hidden; }
header #navi #gnb > ul { display:flex; text-align:center; }
header #navi #gnb > ul > li { transition:all 0.5s; }
header #navi #gnb > ul > li > a { position:relative; z-index:10; padding:0 50px; height:100px; text-wrap:nowrap; display:flex; justify-content:center; align-items:center; color:#111; font-size:var(--font20); font-weight:700; line-height:1.3; transition:all 0.3s; }
#wrap.on header #navi #gnb > ul > li > a { color:#fff; }
header #navi #gnb > ul > li > a * { font-weight:500; line-height:1.3; }
header #navi #gnb > ul > li > a .aniTxt { height:var(--font22); overflow:hidden; display:inline-block; }
header #navi #gnb > ul > li > a strong { position:relative; }
header #navi #gnb > ul > li > a strong:before { content:attr(data-text); display:block; text-wrap:nowrap; font-weight:800; }
header.over #navi #gnb > ul > li > a strong,
body.subCon header #navi #gnb > ul > li > a strong { color:#111; font-weight:700; }
header.over #navi #gnb > ul > li:hover > a span { color:var(--mainColor); }
header.over #navi #gnb > ul > li:hover strong { transform:translateY(0); color:var(--mainColor); }
header #navi #gnb > ul > li > .subDepth { display:none; text-align:left; position:absolute; left:50%; transform:translateX(-50%); top:0; }
header #navi #gnb > ul > li > .subDepth .box { transition:all 0.4s 0.1s; display:flex; padding:140px 50px 40px; gap:0 110px; background:#fff; }
header #navi #gnb > ul > li > .subDepth .box > ul { position:relative; padding:25px 0 0; display:flex; gap:50px; }
header #navi #gnb > ul > li > .subDepth .box > ul > li { display:flex; gap:44px; min-width:185px; }
header #navi #gnb > ul > li > .subDepth .box > ul > li .depth3.w { padding-right:100px; }
header #navi #gnb > ul > li > .subDepth .box > ul > li:last-child .depth3.w { padding-right:0; }
header #navi #gnb > ul > li > .subDepth .box > ul > li > a { color:#222; font-size:var(--font20); font-weight:600; line-height:1.3; }
header #navi #gnb > ul > li > .subDepth .box > ul > li > a.kr { font-weight:500; }
header #navi #gnb > ul > li > .subDepth .box > ul > li li:not(:last-child) { margin-bottom:10px; }
header #navi #gnb > ul > li > .subDepth .box > ul > li li a { color:#666; font-size:var(--font18); font-weight:400; line-height:1.3; }
header #navi #gnb > ul > li > .subDepth .bg img { max-width:100%; }
header #navi:after { content:""; display:block; position:absolute; left:0; top:0; width:100%; height:0; opacity:0; transition:all 0.4s 0.1s; background:#fff; } 
header.over #navi:after { opacity:1; height:100px; }
header #navi:before { content:""; display:block; position:absolute; left:0; top:100px; width:100%; height:1px; opacity:0; transition:all 0.3s; background:#e5e5e5; } 
header.over #navi:before { opacity:1; z-index:2; transition:all 0.4s 0.3s; }
@media screen and (max-width:1600px){
	header #navi #gnb > ul > li > a { padding:0 40px; }
	header #navi #gnb > ul > li > .subDepth .box { gap:0 80px; }
	header #navi #gnb > ul > li > .subDepth .box > ul { gap:35px; }
	header #navi #gnb > ul > li > .subDepth .box > ul > li { gap:35px; min-width:160px; }
	header #navi #gnb > ul > li > .subDepth .box > ul > li .depth3.w { padding-right:80px; }
}
@media screen and (max-width:1400px){
	header #navi #gnb > ul > li > a { padding:0 30px; }
	header #navi #gnb > ul > li > .subDepth .box { gap:0 40px; }
	header #navi #gnb > ul > li > .subDepth .box > ul { gap:25px; }
	header #navi #gnb > ul > li > .subDepth .box > ul > li { gap:25px; min-width:130px; }
	header #navi #gnb > ul > li > .subDepth .box > ul > li .depth3.w { padding-right:60px; }
}
@media screen and (max-width:1200px){
	header #navi { display:none }
}

header .top-menu { position:absolute; right:50px; top:0; z-index:5; display:flex; align-items:center; gap:20px; height:100%; }
header .top-menu .email img,
header .top-menu .contact img { filter: brightness(0) invert(1) brightness(0.13); border-radius:50px; transition:all 0.4s; border:2px solid #222; } 
#wrap.on header .top-menu .email img,
#wrap.on header .top-menu .contact img { filter:brightness(0) invert(1); border:2px solid #fff; } 
header .top-menu .email a:hover img,
header .top-menu .contact a:hover img,
#wrap.on header .top-menu .email a:hover img,
#wrap.on header .top-menu .contact a:hover img { filter:none; background:#fff; border:2px solid #fff; }
#wrap.on header.over .top-menu .email a img,
#wrap.on header.over .top-menu .contact a img { filter:brightness(0) invert(1) brightness(0.13); border:2px solid #222; } 
@media screen and (max-width:1200px){
	header .top-menu { right:20px; gap:15px; }
	header .top-menu .email img,
	header .top-menu .contact img { width:36px; height:36px; }
	#wrap.on header.active .top-menu .email a img,
	#wrap.on header.active .top-menu .contact a img { filter:brightness(0) invert(1) brightness(0.13); border:2px solid #222; }  
	#wrap.on header.active .top-menu .email a:hover img,
	#wrap.on header.active .top-menu .contact a:hover img { filter:none; background:#fff; border:2px solid #fff; }

	#wrap.mainbody.on header .top-menu .email a img,
	#wrap.mainbody.on header .top-menu .contact a img { filter:brightness(0) invert(1); border:2px solid #fff; } 
	#wrap.mainbody.on header .top-menu .email a:hover img,
	#wrap.mainbody.on header .top-menu .contact a:hover img { filter:none; background:#fff; border:2px solid #fff; }
}
@media screen and (max-width:640px){
	header .top-menu { gap:10px; }
	#wrap.on header .top-menu .email img,
	#wrap.on header .top-menu .contact img { border:1px solid #fff; } 
	header .top-menu .email img,
	header .top-menu .contact img { width:30px; height:30px; border:1px solid #222; }
	header .top-menu .email a:hover img,
	header .top-menu .contact a:hover img,
	#wrap.on header .top-menu .email a:hover img,
	#wrap.on header .top-menu .email a:hover img,
	#wrap.on header .top-menu .contact a:hover img { border:1px solid #fff; }
	#wrap.on header.over .top-menu .email a img,
	#wrap.on header.over .top-menu .contact a img { border:1px solid #222; } 
}

header .allmenu { position:relative; z-index:20; opacity:1; }
header.over_all .allBox.active .allmenu { opacity:0; }
header .allmenu a { position:relative; width:30px; height:30px; display:block; }
header .allmenu span { position:absolute; display:block; height:2px; background:#222; transition:all 0.2s ease-in-out; }
#wrap.on header .allmenu span { background:#fff; }
header.over .allmenu span,
#wrap.on header.over .allmenu span { background:#222; }
header .allmenu span:nth-child(1) { right:0; top:9px; width:20px; }
header .allmenu span:nth-child(2) { right:0; bottom:9px; width:100%; }
header .allmenu a:hover span:nth-child(1) { width:100%; }
header .allmenu a:hover span:nth-child(2) { width:20px; }
@media screen and (max-width:1200px){
	#wrap.on header.active .allmenu span { background:#222; }
	#wrap.mainbody.on header .allmenu span { background:#fff; }
}
@media screen and (max-width:640px){
	header .allmenu a { width:24px; height:28px; }
	header .allmenu span:nth-child(1),
	header .allmenu a:hover span:nth-child(2) { width:14px }
}



#allmenuBox .btnClose { opacity:0; transition:all 0.7s; cursor:pointer; }
#allmenuBox.on .btnClose { opacity:1; position:absolute; right:40px; top:36px; z-index:10; width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:url(/img/svg/close_icon.svg) center center no-repeat; }
#allmenuBox .subDepth .box h4.title { display:none }
#allmenuBox { z-index:999; position:fixed; top:-110%; left:0; width:100%; height:100vh; background:#fff; transition:all 0.8s; overflow:hidden; }
#allmenuBox.on { top:0; }
#allmenuBox .menuBox { position:relative; width:100%; display:flex; align-items:center; height:100vh; padding:0 8%; }
#allmenuBox .menuBox .mCont { position:relative; z-index:3; }
#allmenuBox .menuBox .mCont,
#allmenuBox .menuBox .mCont > ul { width:100%; }
.web #allmenuBox .menuBox .mCont > ul { display:flex; }
.web #allmenuBox .menuBox .mCont > ul > li { position:relative; transition:all 0.3s; width:calc(100% / 5); text-align:center; height:100vh; padding-top:13%; border-left:1px solid #eee; }
.web #allmenuBox .menuBox .mCont > ul > li:before { content:''; display:block; position:absolute; left:0; top:0; width:100%; height:0; background:#fff5f5; transition:all 0.3s; }
.web #allmenuBox .menuBox .mCont > ul > li:first-child { border-left:none }
.web #allmenuBox .menuBox .mCont > ul > li > a { position:relative; color:var(--mainColor); font-size:var(--font40); font-weight:700; line-height:1.3; transition:all 0.3s; }
.web #allmenuBox .menuBox .mCont > ul > li > a * { font-weight:500; line-height:1.3; }
.web #allmenuBox .menuBox .mCont > ul > li > a .aniTxt { height:var(--font44); overflow:hidden; display:inline-block; }
.web #allmenuBox .menuBox .mCont > ul > li > a strong { position:relative; }
.web #allmenuBox .menuBox .mCont > ul > li > a strong:before { content:attr(data-text); display:block; text-wrap:nowrap; font-weight:700; }
.web #allmenuBox .menuBox .mCont > ul > li > a strong,
.web #allmenuBox .menuBox .mCont > ul > li > a strong { color:var(--mainColor); font-weight:700; }
.web #allmenuBox .menuBox .mCont > ul > li .subDepth { position:relative; }
.web #allmenuBox .menuBox .mCont > ul > li .subDepth .box { margin-top:80px; }
.web #allmenuBox .menuBox .mCont > ul > li .subDepth .box .bg { display:none }
.web #allmenuBox .menuBox .mCont > ul > li .subDepth .box > ul > li:not(:last-child) { margin-bottom:25px; }
.web #allmenuBox .menuBox .mCont > ul > li .subDepth .box > ul > li > a { color:#111; font-size:var(--font22); font-weight:400; line-height:1.3; }
.web #allmenuBox .menuBox .mCont > ul > li .subDepth .box > ul > li > a.kr { font-weight:500; }
.web #allmenuBox .menuBox .mCont > ul > li .subDepth .box > ul > li > a:hover { font-weight:600; }
.web #allmenuBox .menuBox .mCont > ul > li .subDepth .box > ul > li > a.kr:hover { font-weight:700; }
.web #allmenuBox .menuBox .mCont > ul > li .subDepth .box > ul > li .depth3 { display:none; }
.web #allmenuBox .menuBox .mCont > ul > li .subDepth .box > ul > li ul { padding:20px 0 40px; }
.web #allmenuBox .menuBox .mCont > ul > li .subDepth .box > ul > li ul li:not(:last-child) { margin-bottom:15px; }
.web #allmenuBox .menuBox .mCont > ul > li .subDepth .box > ul > li ul li a { color:#111; font-size:var(--font18); font-weight:400; line-height:1.3; opacity:0.8; }
.web #allmenuBox .menuBox .mCont > ul > li .subDepth .box > ul > li ul li a:hover { font-weight:500; opacity:1; }
.web #allmenuBox .menuBox .mCont > ul > li:hover > a span { color:var(--mainColor); }
.web #allmenuBox .menuBox .mCont > ul > li:hover > a strong { transform:translateY(0); }
.web #allmenuBox .menuBox .mCont > ul > li:hover:before { height:100%; }

@media screen and (max-width:1200px){
    #allmenuBox { position:fixed; top:0; left:unset; right:-520px; max-width:520px; width:100%; height:100vh; background:#fff; transition:all 0.3s 0.1s ease-in-out; z-index:10000; }
    #allmenuBox.on { right:0; z-index:10000; opacity:1; visibility:visible; transition:all 0.3s 0.1s ease-in-out; }
    #allmenuBox .menuCont { position:relative; z-index:5; height:100vh; } 
    #allmenuBox .menuBox { align-items:flex-start;}
    #allmenuBox .menuBox .mCont > ul { position:relative; top:80px; padding:0; height:100%; }
    #allmenuBox .menuBox .mCont > ul > li { position:relative; display:block; height:auto; padding:10px 20px;  }
	#allmenuBox .menuBox .mCont > ul > li:before { width:100%; height:0; } 
	#allmenuBox .menuBox .mCont > ul > li.hover:before { height:100%; } 
    #allmenuBox .menuBox .mCont > ul > li > a { width:auto; font-size:var(--font30); line-height:1.3;}
	#allmenuBox .menuBox .mCont > ul > li > a * { font-weight:500; line-height:1.3; }
	#allmenuBox .menuBox .mCont > ul > li > a .aniTxt { height:var(--font40); overflow:hidden; display:inline-block; }
	#allmenuBox .menuBox .mCont > ul > li > a strong { position:relative; color:#111; font-weight:700; }
	#allmenuBox .menuBox .mCont > ul > li > a strong:before { content:attr(data-text); display:block; text-wrap:nowrap; font-weight:700; }
	#allmenuBox .menuBox .mCont > ul > li.hover > a strong { transform:translateY(0); color:var(--mainColor);}
	#allmenuBox .menuBox .mCont > ul > li .subDepth .box .bg { display:none }
    #allmenuBox .menuBox .mCont > ul > li > .subDepth { position:relative; display:none; width:100%; }
	#allmenuBox .menuBox .mCont > ul > li.hover .subDepth { display:block; opacity:1; visibility:visible; z-index:2; }
	#allmenuBox .menuBox .mCont > ul > li.hover .subDepth .box { animation:ani_3_2 0.5s 0.3s; animation-fill-mode:both; }
	#allmenuBox .menuBox .mCont > ul > li .subDepth .box > ul { padding:15px 0; }
	#allmenuBox .menuBox .mCont > ul > li .subDepth .box > ul > li { display:flex; }
	#allmenuBox .menuBox .mCont > ul > li .subDepth .box > ul > li > a { font-size:2.0rem; color:rgba(255,255,255,1); min-width:100px; }
	#allmenuBox .menuBox .mCont > ul > li .subDepth .box > ul > li:not(:last-child) { margin-bottom:20px; }
	#allmenuBox .menuBox .mCont > ul > li .subDepth .box > ul > li > a { color:#111; font-size:var(--font22); font-weight:400; line-height:1.3; }
	#allmenuBox .menuBox .mCont > ul > li .subDepth .box > ul > li > a.kr { font-weight:500; }
	#allmenuBox .menuBox .mCont > ul > li .subDepth .box > ul > li > a:hover { font-weight:600; }
	#allmenuBox .menuBox .mCont > ul > li .subDepth .box > ul > li > a.kr:hover { font-weight:700; }
	#allmenuBox .menuBox .mCont > ul > li .subDepth .box > ul > li ul li:not(:last-child) { margin-bottom:10px; }
	#allmenuBox .menuBox .mCont > ul > li .subDepth .box > ul > li ul li a { color:#111; font-size:var(--font18); font-weight:400; line-height:1.3; opacity:0.8; }
	#allmenuBox .menuBox .mCont > ul > li .subDepth .box > ul > li ul li a:hover { font-weight:500; opacity:1; }
	#allmenuBox.on .btnClose { right:20px; top:24px; background-size:24px auto; }
}

footer { position:relative; padding-bottom:45px; }
footer.bg { background:#f8f8f8; }
footer .footer_box { position:relative; padding:60px; border:1px solid #eee; background:#fbfbfb; }
footer .l-box .logo img { width:238px; }
footer .l-box .infobox { margin-top:105px; }
footer .l-box .infobox li:not(:last-child) { margin-bottom:10px; }
footer .l-box .infobox li { display:flex; gap:41px; }
footer .l-box .infobox li dl { position:relative; display:flex; gap:10px; align-items:center; }
footer .l-box .infobox li:first-child dl { display:block; }
footer .l-box .infobox li dl:before {content:""; display:block; position:absolute; left:-21px; top:50%; transform:translateY(-50%); width:1px; height:11px; background:#999; }
footer .l-box .infobox li:first-child dl:before { display:none; }
footer .l-box .infobox li dl:first-child:before { display:none; }
footer .l-box .infobox li dt { color:#111; font-size:var(--font20); font-weight:600; line-height:1.3; }
footer .l-box .infobox li dd { color:#777; font-size:var(--font17); font-weight:400; line-height:1.3; }
footer .r-box { position:absolute; right:90px; top:60px;  }
footer .r-box .all-menu > ul { display:flex; gap:60px; } 
footer .r-box .all-menu > ul > li > a { color:#111; font-size:var(--font20); font-weight:500; line-height:1.3; }
footer .r-box .all-menu > ul > li > a strong { transform:translate(0);}
footer .r-box .all-menu > ul > li ul { margin-top:25px; }
footer .r-box .all-menu > ul > li ul li:not(:last-child) { margin-bottom:12px; }
footer .r-box .all-menu > ul > li ul li a { color:#777; font-size:var(--font16); font-weight:500; line-height:1.3; }
footer .fmenu { display:flex; justify-content:space-between; padding:20px 40px 0; }
footer .fmenu ul { display:flex; flex-wrap:wrap; gap:30px; }
footer .fmenu ul li a { color:#777; font-size:var(--font17); font-weight:400; line-height:1.3; }
footer .fmenu ul li a.kr { font-size:var(--font16); font-weight:500; }
footer .copyright { color:#bbb; font-size:var(--font16); font-weight:400; line-height:1.5; }
@media screen and (max-width:1600px){
	footer .l-box .infobox { margin-top:90px; }
	footer .l-box .infobox li { gap:30px; }
	footer .r-box .all-menu > ul { gap:50px; } 
}
@media screen and (max-width:1280px){
	footer .footer_box { padding:40px; }
	footer .l-box .infobox { margin-top:70px; }
	footer .l-box .infobox li { gap:30px; }
	footer .r-box .all-menu > ul { gap:50px; } 
}
@media screen and (max-width:1024px){
	footer .l-box .logo img { width:180px; }
	footer .l-box .infobox { margin-top:40px; }
	footer .l-box .infobox li { gap:31px; }
	footer .l-box .infobox li dd { margin:0; }
	footer .l-box .infobox li:not(:last-child) { margin-bottom:10px; }
	footer .l-box .infobox li dl:before { left:-16px; }
	footer .r-box .all-menu { display:none } 
	footer .fmenu { padding:20px 40px 0; }
	footer .fmenu ul { display:flex; flex-wrap:wrap; gap:30px; }
	footer .fmenu { flex-wrap:wrap; gap:10px; }
	footer .fmenu ul { width:100%; gap:5px 20px; }
	footer .copyright { width:100%; }
}
@media screen and (max-width:640px){
	footer .footer_box { padding:20px 10px; }
	footer .l-box .logo img { width:150px; }
	footer .l-box .infobox { margin-top:20px; }
	footer .fmenu { padding:15px 10px 0; }
	footer .fmenu ul { gap:5px 15px; }
}

.btn_top { display:flex; justify-content:flex-end; padding:20px 0; }
.btn_top.bg { background:#f8f8f8; }
.btn_top a { text-align:center; display:flex; align-items:center; justify-content:center; width:45px; height:45px; background:#fff; border-radius:2px; border:1px solid rgba(17, 17, 17, 0.40); transition:all 0.3s; }
.btn_top a img { transition:all 0.3s; }
.btn_top a:hover { border-color:var(--mainColor); background:var(--mainColor); }
.btn_top a:hover img { filter:brightness(0) invert(1); }
@media screen and (max-width:1024px){
	.btn_top { padding:10px 0; }
	.btn_top a { width:38px; height:38px; }
	.btn_top a img { width:15px; }
}


.subbody .btn_top { }