@charset "utf-8";

@import "base.css";
@import "common.css";

:root{
	--font-pretendard:'Pretendard', Sans-serif;
	--font-roboto:'Roboto', Sans-serif;
}

html *:lang(en){font-family:'Oswald', sans-serif;}

body{overflow:inherit; position:relative;}
body.active{overflow-y:scroll; position:fixed; width:100%;}
#wrap{position:relative; opacity:0; transition:0.3s ease;}
#wrap.active{opacity:1;}

#header{position:absolute; top:0px; left:0px; z-index:80; width:100%;}
#header .inr{position:relative; height:85px;}
#header .inr:after{content:''; opacity:0.1; display:block; position:absolute; bottom:0px; left:0px; width:100%; height:1px; background:#fff;}
#header .inr:before{content:''; display:block; position:absolute; right:0px; top:0px; width:20%; height:100%; background:#7baa50;}
#header h1{position:absolute; top:50%; left:34px; z-index:91; width:168px; height:36px; margin-top:-18px;}
#header h1 > a{display:block; height:100%; background:url(../images/common/logo.svg) no-repeat 50% 0; background-size:auto 100%; text-indent:100%; overflow:hidden; white-space:nowrap;}
#header nav{width:80%; height:100%; background:#fff;}
#header nav .gnb{padding-left:335px; text-align:center; font-size:0px;}
#header nav .gnb > li{display:inline-block; position:relative; padding:25px 70px 0;}
#header nav .gnb > li > a{display:block; padding-bottom:20px; font-size:20px; color:#222; font-weight:500;}
#header nav .gnb > li ul{opacity:0; visibility:hidden; position:absolute; top:68px; right:-200px; width:100%; box-sizing:border-box; padding:20px; background:#fff; border:1px solid #d0d0d0; box-shadow:0 20px 15px rgba(0,0,0,0.1); transition:all 0.3s ease; transition-property:opacity, right, visibility; transition-delay:0s, 0s, 0s;}
#header nav .gnb > li ul li{text-align:left;}
#header nav .gnb > li ul li a{display:block; padding:7px 0px; font-size:16px; color:#666; transition:0.3s ease;}
#header nav .gnb > li ul li a:hover{color:#308438; box-shadow:0 1px 0 #80c386;}
#header nav .gnb > li.active ul{opacity:1; visibility:visible; right:0px; z-index:10; transition-delay:0s, 0s, 0s;}
#header nav .gnb > li.active > a{color:#308438;}
.ie #header h1{width:172px; height:37px;}

.gnb_all{opacity:0; visibility:hidden; position:fixed; top:0px; left:0px; z-index:90; width:100%; height:100%; transition:0.2s linear 0.5s;}
.gnb_all:after,
.gnb_all .siteMap:after{content:''; display:block; clear:both;}
.gnb_all .siteMap,
.gnb_all .bg{float:left; position:relative;}
.gnb_all .siteMap{width:69%; height:100%;}
.gnb_all .siteMap > li{float:left; position:relative; width:25%; height:100%; box-sizing:border-box; padding-top:28%; border-left:1px solid #fff; text-align:center; transition:background 0.3s ease;}
.gnb_all .siteMap > li:after{content:''; display:block; position:absolute; top:0px; left:0px; z-index:-1; width:0%; height:100%; background:#f5f5f5; transition:width 0.6s cubic-bezier(.08,.03,.22,.87) 0s;}
.gnb_all .siteMap > li > a{opacity:0; display:block; font-size:40px; font-weight:300; color:#000; letter-spacing:1px; transition:opacity 0.2s ease 0s;}
.gnb_all .siteMap > li > a span{padding:0 30px; transition:0.4s cubic-bezier(.08,.03,.22,.87);}
.gnb_all .siteMap > li > ul{opacity:0; margin-top:50px; transition:opacity 0.2s ease 0s;}
.gnb_all .siteMap > li > ul > li{padding:10px 0px;}
.gnb_all .siteMap > li > ul > li > a{display:block; font-size:25px; font-weight:300; color:#000; word-break:keep-all; transition:color 0.3s ease;}
.gnb_all .siteMap > li.active{background:#e6e6e6;}
.gnb_all .siteMap > li > ul > li > a:hover{color:#797979;}
.gnb_all .bg{opacity:0; position:relative; width:31%; height:100%; box-sizing:border-box; padding:50px; background:url(../images/common/bg_all.jpg) no-repeat 50% 0; background-size:cover; transform:translateX(100%); transition:opacity 0.2s linear 0.2s, transform 0.6s cubic-bezier(.08,.03,.22,.87);}
.gnb_all .bg .box{opacity:0; position:absolute; bottom:100px; left:50px; transition:opacity 0.2s ease 0s;}
.gnb_all .bg em{display:block; font-size:50px; color:#fff; font-weight:500;}
.gnb_all .bg p{margin-top:30px; font-size:18px; font-weight:300; color:#fff; line-height:1.8em; letter-spacing:-0.5px;}
.gnb_all.active{opacity:1; visibility:visible; transition-delay:0s;}
.gnb_all.active .siteMap > li:after{width:100%;}
.gnb_all.active .siteMap > li > a,
.gnb_all.active .siteMap > li > ul,
.gnb_all.active .bg .box{opacity:1; transition-duration:0.5s; transition-delay:0.3s;}
.gnb_all.active .bg{opacity:1; transform:translateX(0); transition-delay:0s, 0s;}

[data-util="menu"]{position:absolute; top:50%; right:50px; z-index:91; height:30px; background:transparent; border:0px; font-size:20px; letter-spacing:2px; color:#fff; transform:translateY(-50%);}
[data-util="menu"] span{position:relative; padding-right:20px;}
[data-util="menu"]:before,
[data-util="menu"]:after,
[data-util="menu"] span:before{content:''; display:block; position:absolute; right:0px; width:4px; height:4px; background:#fff; border-radius:100%;}
[data-util="menu"] span:before{top:50%; margin-top:-2px;}
[data-util="menu"]:before{top:0px;}
[data-util="menu"]:after{bottom:0px;}
[data-util="menu"]:hover,
[data-util="menu"]:focus{outline:none;}

#footer{background:#2a2f35; box-shadow:0 30px 50px rgba(0,0,0,0.15) inset;}
#footer .inr{position:relative; padding:40px 35px;}
#footer .inr *{color:#fff; font-size:14px;}
#footer .inr > *:not(.logo){margin-left:240px;}
#footer .logo{display:block; position:absolute; left:35px; top:50%; width:167px; height:37px; margin-top:-18px; background:url(../images/common/footer_logo.png) no-repeat 50% 0; text-indent:100%; overflow:hidden; white-space:nowrap;}
#footer address{opacity:0.6; font-weight:300;}
/* 230424 footer 본사/지사 줄바꿈
#footer address em{display:inline-block; margin-right:20px;}*/
#footer address em{display:block; margin-right:20px;}
#footer address a{display:inline-block; margin-left:20px;}
#footer p{opacity:0.3; margin-top:5px;}
#footer p:nth-of-type(2){font-size:13px;}
#footer p i, #footer p a{display:inline-block; margin-left:20px;}

.btn_top{display:block; position:absolute; right:35px; top:40px; width:50px; height:50px; margin-left:0px !important; line-height:50px; background:#141517; text-align:center; font-size:13px; transition:0.3s ease;}
.btn_top:hover{box-shadow:0px 15px 30px rgba(0,0,0,0.3);}

.area_subVisual{position:relative; height:500px; background-repeat:no-repeat; background-position:50% 0; background-attachment:fixed; display:flex; flex-direction:column; justify-content:center; color:#fff;}
.area_subVisual.sub01{background-image:url(../images/content/img_visual01.jpg);}
.area_subVisual.sub02{background-image:url(../images/content/img_visual02.jpg);}
.area_subVisual.sub03{background-image:url(../images/content/img_visual03.jpg);}
.area_subVisual.sub04{background-image:url(../images/content/img_visual04.jpg);}
.area_subVisual .scroll{display:block; position:absolute; bottom:110px; left:0px; margin-left:-30px; padding-left:50px; font-size:12px; color:#fff; letter-spacing:3px; transform:rotate(-90deg);}
.area_subVisual .scroll:before,
.area_subVisual .scroll:after,
.area_subVisual .scroll i:before{content:''; display:block; position:absolute; top:5px; width:6px; height:6px; background:#fff; border-radius:100%;}
.area_subVisual .scroll i:before{left:20px; opacity:0.3;}
.area_subVisual .scroll:after{opacity:0.5;}
.area_subVisual .scroll:before{left:0px;}
.area_subVisual .scroll:after{left:10px;}
.area_subVisual .txt{position:relative; padding-top:100px; text-align:center;}
.area_subVisual .txt em{display:block; font-size:25px;}
.area_subVisual .txt p{margin-top:15px; font-size:45px; font-weight:700;}

.lnb{position:absolute; z-index:70; width:100%; background:#fff;}
.lnb:after{content:''; display:block; position:absolute; bottom:0px; left:0px; width:100%; height:1px; background:#f5f5f5;}
.lnb:before{content:''; display:block; position:absolute; top:0px; left:0px; z-index:-1; width:50%; height:100%; background:#f7af37;}
.lnb .inr{max-width:1400px; box-sizing:border-box; margin:0 auto; background:#fff;}
.lnb ul{display:table;}
.lnb ul > li{display:table-cell; position:relative; height:85px; box-sizing:border-box; padding:0 40px; vertical-align:middle; transition:height 0.3s ease;}
.lnb ul > li > a{display:block; font-size:18px; color:#777;}
.lnb ul > li > a:before{content:''; display:block; position:absolute; bottom:0px; left:0px; width:0; height:5px; background:#f7af37; transition:0.3s ease 0s;}
.lnb ul > li > a:hover{color:#f7af37;}
.lnb ul > li > a.on{color:#f7af37; font-weight:700;}
.lnb ul > li > a.on:before{width:100%;}
.lnb ul > li[data-lnb="home"]{padding:0px; background:#f7af37; border-left:1px solid rgba(255,255,255,0.3);}
.lnb ul > li[data-lnb="home"] > a{min-width:86px; height:100%; background:url(../images/common/icon_home.png) no-repeat 50% 50%; font-size:0px;}
.lnb.fix{position:fixed; top:0px; left:0px;}
.lnb.fix ul > li{height:65px;}

.tab > ul{display:table; border-collapse:collapse; margin:70px auto 0;}
.tab > ul > li{display:table-cell; min-width:230px; height:60px; box-sizing:border-box; border:1px solid #e6e6e6; vertical-align:middle; transition:0.3s ease-in-out;}
.tab > ul > li > a{display:block; position:relative; display:flex; flex-direction:column; justify-content:center; height:100%; padding:0 15px; text-align:center; font-size:18px; color:#666; transition:0.3s ease-in-out;}
.tab > ul > li > a span{display:inline-block;}
.tab > ul > li.on{border-color:#333;}
.tab > ul > li.on > a{z-index:3; background:#333; color:#fff; font-weight:500; box-shadow:0px 20px 25px rgba(0,0,0,0.15);}
.tab_conts div[id^="tab"]{opacity:0; visibility:hidden; overflow:hidden; height:0px;}
.tab_conts div[id^="tab"].active{opacity:1; visibility:visible; overflow:visible; height:auto;}


@media all and (min-width:1930px){
	.area_subVisual{background-size:cover;}
}

@media all and (min-width:1025px){
	.gnb_all .siteMap > li.active > a span,
	.gnb_all .siteMap > li > a:hover span{box-shadow:0 -30px 0px rgba(255,255,255,1) inset;}
}

@media all and (max-width:1800px){
	#header nav .gnb > li{padding-left:50px; padding-right:50px;}
	
	.gnb_all .bg .box{padding-right:40px;}
	.gnb_all .bg p{font-size:18px; word-break:keep-all;}
	.gnb_all .bg p br{display:none;}
}

@media all and (max-width:1560px){
	#header nav .gnb > li{padding-left:40px; padding-right:40px;}
	#header nav .gnb > li > a{font-size:18px;}
	#header nav .gnb > li ul li a{font-size:15px; word-break:keep-all;}

	.gnb_all .siteMap > li > a{font-size:35px;}
	.gnb_all .siteMap > li > ul > li > a{font-size:22px;}
}

@media all and (max-width:1250px){
	#footer .logo{display:none;}
	#footer .inr{padding:30px 80px 30px 20px;}
	#footer .inr > *:not(.logo){margin-left:0px;}
	#footer p{font-size:14px;}
	.btn_top{right:20px;}	
}

@media all and (max-width:1150px){
	#header{position:relative;}
	#header .inr{background:#fff;}
	#header nav .gnb > li{padding-left:30px; padding-right:30px;}
	
	.gnb_all .bg{padding:30px;}
	.gnb_all .bg em{font-size:40px;}
	.gnb_all .bg p{font-size:17px;}
	.gnb_all .bg .box{left:30px; padding-right:30px;}
	.gnb_all .siteMap > li > a{font-size:30px;}
	.gnb_all .siteMap > li > ul > li > a{font-size:18px;}
	
	.area_subVisual{height:300px;}
	.area_subVisual .txt{padding-top:30px;}
	.area_subVisual .txt em{font-size:20px;}
	.area_subVisual .txt p{font-size:35px;}
}

@media all and (max-width:1024px){
	#header nav{display:none;}
	.gnb_all .siteMap,
	.gnb_all .bg{float:none; width:100%;}
	.gnb_all .siteMap{overflow-y:auto; height:calc(100% - 171px); box-sizing:border-box; padding-top:85px; background:#f5f5f5;}
	.gnb_all .siteMap > li{float:none; width:100%; height:auto; padding-top:0px; border-left-width:0px; text-align:left;}
	.gnb_all .siteMap > li > a{padding:20px 0px 15px; border-top:1px solid #fff; font-size:25px;}
	.gnb_all .siteMap > li > ul{display:none; padding-left:30px; padding-bottom:20px; margin-top:0px;}
	.gnb_all .siteMap > li > ul > li{padding:0px;}
	.gnb_all .siteMap > li > ul > li > a{padding:7px 0px;}
	.gnb_all .bg{position:absolute; bottom:0px; left:0px; height:171px; background-position-y:20%;}
	.gnb_all .bg .box{position:static;}
	.gnb_all .bg em{font-size:30px;}
	.gnb_all .bg p{margin-top:15px;}
	
	[data-util="menu"]{right:30px;}
	[data-util="menu"].active{color:#333;}
	[data-util="menu"].active:before,
	[data-util="menu"].active:after,
	[data-util="menu"].active span:before{background:#555;}
	
	.area_subVisual{background-position:50% 0 !important; background-size:cover; background-attachment:inherit;}
	.lnb ul > li{padding:0 30px;}

	.tab{padding:0 15px;}
	.tab > ul{width:100%; table-layout:fixed; margin-top:50px;}
	.tab > ul > li{min-width:inherit;}
	/* 230424 footer 본사/지사 줄바꿈
	#footer address span{display:block; margin:5px 0px;}*/
	#footer address a{margin-left:10px;}
	#footer address > a{font-size:13px;}
	/**/#footer address em{margin-top:5px; margin-bottom:5px;}
	#footer p{font-size:13px; word-break:keep-all;}
	#footer p i{display:block; margin-left:0px;}
	#footer p a{margin-left:0px;}
	#footer p:nth-of-type(2){word-break:break-all;}
}

@media all and (max-width:768px){	
	.tab > ul > li{height:50px;}
	.tab > ul > li > a{font-size:17px;}
	.tab > .free{table-layout:auto;}
	.tab > .free > li > a{font-size:16px; letter-spacing:-0.5px;}
	
	.area_subVisual .scroll{display:none;}
	
	#footer p i{margin-top:3px;}
	#footer p:nth-of-type(2){margin-top:15px;}
}

@media all and (max-width:560px){
	#header .inr:before{width:120px;}
	.gnb_all .bg .box{padding-right:0px;}
	.gnb_all .bg p{font-size:14px; line-height:1.5em;}
	
	.area_subVisual{height:200px;}
	.area_subVisual .txt{padding-top:0px; padding-right:15px; padding-left:15px;}
	.area_subVisual .txt em{font-size:18px; word-break:keep-all;}
	.area_subVisual .txt p{font-size:25px;}
	
	.lnb ul > li{height:65px; padding:0 20px;}
	.lnb ul > li > a{font-size:16px;}
	.lnb ul > li[data-lnb="home"] > a{min-width:65px;}
	.lnb.fix ul > li{height:50px;}
	
	.tab > ul > li > a{font-size:15px;}
	.tab > .free > li > a{font-size:14px; word-break:keep-all; line-height:1.3em;}
	
	#footer .inr{padding:30px 15px;}
	#footer address{padding-right:60px; font-size:14px; word-break:keep-all;}	
	.btn_top{right:0px; top:0;}
}

@media all and (max-width:460px){
	#header h1{left:10px; height:30px; margin-top:-15px;}
	#header .inr{height:65px;}
	#header .inr:before{width:100px;}
	.gnb_all .siteMap{padding-top:65px;}
	.gnb_all .siteMap > li > a{font-size:20px;}
	.gnb_all .siteMap > li > a span{padding:0 20px;}
	.gnb_all .siteMap > li > ul > li > a{font-size:16px;}
	[data-util="menu"]{right:20px; height:25px; font-size:16px;}
}

@media all and (max-width:425px){
	.area_subVisual .txt em{font-size:16px;}
	.area_subVisual .txt p{font-size:20px;}
	
	.lnb ul > li{height:50px; padding:0 15px; font-size:15px;}
	.lnb ul > li[data-lnb="home"] > a{min-width:50px; background-size:16px 16px;}
	.lnb ul > li > a{font-size:15px; line-height:1.2em;}	

	.tab > ul > li > a{padding:0 5px; font-size:12px;}
}

@media all and (max-width:360px){
	.tab > ul > li > a{letter-spacing:-1px;}
	.tab > .free > li > a{font-size:13px; letter-spacing:-1px;}

	.area_subVisual .txt em{font-size:15px;}

	.lnb ul > li > a{word-break:keep-all; font-size:13px;}
}