@charset "utf-8";

/************************  reset ************************/ 
* {font-size: 18px;}

body {font:1rem "Pretendard",Verdana,Dotum,AppleGothic,sans-serif; outline:0; color:#333; overflow-x:hidden; font-weight:300; line-height: 1.6em; letter-spacing:-0.03em;}
h1, h2, h3, h4, h5, h6 {font:1rem "Pretendard",Verdana,Dotum,AppleGothic,sans-serif; letter-spacing:-0.03em;}
textarea, select, input, button {font:1rem "Pretendard",Verdana,Dotum,AppleGothic,sans-serif; letter-spacing:-0.03em;}
a {color:inherit; font-size: 1em;}
input:focus, select:focus, option:focus, textarea:focus, button:focus{
	outline: none;
}

b, strong, ul, li, p {font-size: 1em;}
a.btn, .btn {font-size: 1em;}

select {appearance:none; -webkit-appearance:none; background:url('../img/common/selectArrow.png') calc(100% - 10px) center #fff no-repeat !important;}
select::-ms-expand { display:none;}

img {max-width: 100%;}

	@media screen and (max-width:799px){
		body {line-height: 1.4em;}
	}


.container {position:relative; width:1400px; margin:0 auto;}

	@media screen and (max-width:1449px){
		.container {width:100%; padding:0 2%;}
	}

	@media screen and (max-width:1024px){
		.container {padding:0 4%;}
	}


/************************ header ************************/ 
.sec-header{position:absolute; top:0; left:0; width:100%; height:80px; z-index:998; transition:all ease .5s; background-color: #fff;}
.sec-header.fixed {position:fixed; box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.08); background-color: #fff;}
.sec-header.on{height:365px; background-color:#fff; box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.04);}  
.sec-header.on:before{content:''; width:100%; height:1px; background-color:#e8e8e8; position:absolute; top:80px; left:0; z-index:9;} 
.sec-header.on #gnb > ul > li > ul{opacity:1; display:block;}

.sec-header .container {position:relative; display: flex;}

	@media screen and (max-width:1449px){
		.sec-header .container {padding:0 2%;}
	}
	@media screen and (max-width:1024px){
		.sec-header{padding:0; height:70px;}
		.sec-header .container {justify-content: space-between;}
		.sec-header.on {height:70px;}
		.sec-header.on:before {display:none; box-shadow:none;}
	}

	@media screen and (max-width:999px){
	}

	@media screen and (max-width:799px){
		.sec-header{height:70px;}
	}

	@media screen and (max-width:499px){
	}


.sec-header.hd-down{position:fixed;} 
.sec-header.hd-down:before {display:none !important;}
.sec-header.hd-down #nav-icon{z-index:9;} 
.sec-header.hd-down .gnb-btn{z-index:101;}
.sec-header.hd-down .gnb-btn button {background:none !important}
.sec-header.hd-down .logo {background:url('../img/common/logo.png') center no-repeat !important; background-size:contain !important;}

	@media screen and (max-width:1449px){
	}

	@media screen and (max-width:999px){
	}

	@media screen and (max-width:799px){
	}

	@media screen and (max-width:499px){
	}


.logo{float:left; position:relative; display:inline-block; background:url('../img/common/logo.png') center no-repeat; font-size:0; width:86px; height:80px; vertical-align:top; background-size:contain;}
.sec-header.on .logo,
.sec-header.fixed .logo {background-image:url('../img/common/logo.png');}

	@media screen and (max-width:1024px){
		.logo {height: 70px;}
	}


.loginUl {display: flex; align-items: center; justify-content: flex-end; gap: 10px; width: 180px; margin-left: 5%; color: #000;}
.loginUl > li {font-size: 1em;}
.loginUl > li > a {font-size: 1em;}
.loginUl > li:hover > a {color:#00a041;}

.sec-header.fixed .loginUl > li > a {color:#000;}
.sec-header.fixed .loginUl > li:hover > a {color:#00a041;}
.sec-header.on .loginUl > li > a {color:#000;}
	@media screen and (max-width:1024px){
		.loginUl {margin-right: 80px;}
	}



.gnb-btn{position: absolute; display:none; top:0; right:0;}
.gnb-btn button{width:50px; height:70px; border:none; background:inherit;}  
.gnb-btn:hover #nav-icon span:nth-child(1){width:50%;}
.gnb-btn:hover #nav-icon span:nth-child(6){width:0;}
.gnb-btn:hover #nav-icon.open span:nth-child(6){width:50%;}
.sec-header.on #nav-icon span,
.sec-header.fixed #nav-icon span {background:#000;}

#nav-icon {width:24px; height:24px; position:relative; margin:0 auto; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); /* -webkit-transition:.5s ease-in-out; -moz-transition:.5s ease-in-out; -o-transition:.5s ease-in-out; transition:.5s ease-in-out; */ cursor:pointer;}

#nav-icon span {display:block; position:absolute; height:2px; width:50%; background:#000; opacity:1; webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); -webkit-transition:.25s ease-in-out; -moz-transition:.25s ease-in-out; -o-transition:.25s ease-in-out; transition:.25s ease-in-out;}

#nav-icon span:nth-child(even) {left:50%;}
#nav-icon span:nth-child(odd) {left:0px;}
#nav-icon span:nth-child(1){width:0; right:50%; left:auto;}
#nav-icon span:nth-child(1), #nav-icon span:nth-child(2) {top:4px;}
#nav-icon span:nth-child(3), #nav-icon span:nth-child(4) {top:12px;}
#nav-icon span:nth-child(5), #nav-icon span:nth-child(6) {top:20px;}

#nav-icon.open{width:35px; height:35px;}
#nav-icon.open span:nth-child(1),#nav-icon.open span:nth-child(6) {-webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg);}
#nav-icon.open span:nth-child(2),#nav-icon.open span:nth-child(5) {-webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg);}
#nav-icon.open span:nth-child(1) {left:3px; top:11px; width:50%; right:auto;}
#nav-icon.open span:nth-child(2) {left:15px; top:11px;}
#nav-icon.open span:nth-child(3) {left:-50%; opacity:0;}
#nav-icon.open span:nth-child(4) {left:100%; opacity:0;}
#nav-icon.open span:nth-child(5) {left:3px; top:23px;}
#nav-icon.open span:nth-child(6) {left:15px; top:23px;} 
#nav-icon.open span{background:#444;}

	@media screen and (max-width:1024px){
		.gnb-btn {display: block;}
	}
#gnb{position:relative; display: flex; width:calc(82% - 230px); height: 80px; background:none; margin-left:11.5%;}
#gnb > ul {display:flex; flex-direction:row; justify-content:space-between; width:100%;} 
#gnb > ul > li{float:left; width:20%; position:relative; text-transform:uppercase;} 
#gnb > ul > li > a{display:flex; justify-content: center; align-items: center; position:relative; height: 100%; color:#000; font-weight:500; text-align:center;}
.sec-header.fixed #gnb > ul > li > a {color:#000;}
.sec-header.on #gnb > ul > li > a {color:#000;}
.sec-header.on #gnb > ul > li:hover > a {color:#00a041;}
#gnb > ul > li a span {position:relative; display:inline-block;}

#gnb > ul > li > ul{position:relative; top:-2px; padding:18px 0; width:100%; transition:all ease .3s; opacity:0; display:none;}
#gnb > ul > li > ul > li > a{position:relative; display:block; text-align:center; padding:9px 0;}
#gnb > ul > li > ul > li > a span {position:relative; word-break: keep-all;}
#gnb > ul > li > ul > li > a span:after {transform:scaleX(0); position:relative; bottom:0; display:block; width:100%; height:1px; margin-top:2px; background:#00a041; transition: 0.2s all ease-out; content:'';}
#gnb > ul > li > ul > li > a:hover{color:#00a041;}
#gnb > ul > li > ul > li > a:hover span:after {transform:scaleX(1);}

	@media screen and (max-width:1199px){
		#gnb {width: calc(94% - 230px); margin-left: 2%;}
		#gnb > ul > li > ul > li > a span {line-height: 1.4em;}
	}

	@media screen and (max-width:1024px){
		#gnb{display:none;}
	}

.gnb-all{display:none; position:fixed; top:0; right:-100%;  z-index:3; max-width:400px; height:100%; background:#fff; width:100%; transition:all ease .6s; z-index:99; overflow-y:auto; padding:40px 20px; background-position:20%;} 
.gnb-all.open{right:0; box-shadow:0 0 200px 0 rgba(0,0,0,0.5);} 
.gnb-all > ul {width:100%;}
.gnb-all > ul > li {border-bottom:1px solid #e8e8e8;}
.gnb-all > ul > li > h3 {position: relative; font-weight:500; padding: 20px 0; cursor:pointer;}
.gnb-all > ul > li > h3 > span.bul {display:block;position:absolute;top:20px;right:20px;background:#888;transition:all .5s;width:2px;height:20px;margin:0;}
.gnb-all > ul > li > h3 > span.bul:after {content:"";display:block;position:absolute;top:0;width:20px;height:2px;margin:9px 0 0 -9px;background:#888;}

.gnb-all > ul > li:hover > h3 > span.bul,
.gnb-all > ul > li > ul > li:hover > h3 > span.bul {transition:all .5s;width:2px;}

.gnb-all > ul > li > h3.on > span.bul,
.gnb-all > ul > li > ul > li > h3.on > span.bul {transform: translateY(0) rotate(-450deg);}
.gnb-all > ul > li > h3.on > span.bul:after {opacity:0;}

.gnb-all > ul > li > ul {display: none;  margin:0 0 20px;}
.gnb-all > ul > li > ul > li {width:100%;}
.gnb-all > ul > li > ul > li > h3 {position: relative; padding: 8px; margin: 0; cursor: pointer; font-weight: 300; font-size: 1em;}

.gnb-all > ul > li:hover > h3,
.gnb-all > ul > li > h3.on,
.gnb-all > ul > li > ul > li:hover > h3,
.gnb-all > ul > li > ul > li > h3.on {color:#00a041;}

.gnb-all > ul > li:hover > h3 > span.bul,
.gnb-all > ul > li:hover > h3 > span.bul:after,
.gnb-all > ul > li > h3.on > span.bul,
.gnb-all > ul > li > ul > li:hover > h3 > span.bul,
.gnb-all > ul > li > ul > li:hover > h3 > span.bul:after,
.gnb-all > ul > li > ul > li > h3.on > span.bul {background:#00a041;}

	@media screen and (max-width:1024px){
		.gnb-all{display:block;}
	}

/************************ media size setting end ************************/

.moreBtn {display: inline-flex; align-items: center; border: 1px solid #20b04b; padding: 12px 25px; text-transform: capitalize; color: #20b04b;}
.moreBtn span.bul {margin-right: 10px;}
.moreBtn span.bul:before,
.moreBtn span.bul:after {position: relative; display: block; width: 16px; height: 2px; background-color: #20b04b; content: '';}
.moreBtn span.bul:before {}
.moreBtn span.bul:after {transform: rotate(90deg); top: -2px;}

.moreBtn:hover {background-color: #20b04b !important; color: #fff; border: 1px solid #20b04b !important; transition: 0.3s;}
.moreBtn:hover span.bul:before,
.moreBtn:hover span.bul:after {background-color: #fff;}


	@media screen and (max-width:599px){
		.moreBtn {width: 180px; padding: 8px 13px; justify-content: center;}
	}

/************************ footer ************************/

.sec-footer {clear:both; position:relative; background:#222; color:rgba(255,255,255,0.3); margin-top:100px;}
.sec-footer .copyBottom {background:#3a3a3a; padding:20px 0;}
.sec-footer .copyBottom .container {position:relative; width:1400px;}
.sec-footer .copyBottom .linkUl {display:flex; justify-content: center;}
.sec-footer .copyBottom .linkUl li {display:inline-block; color:#fff; font-weight:300;}
.sec-footer .copyBottom .linkUl li:before{float:left; content:''; display:block; margin:7px 17px; width:1px; height:11px; background:rgba(255,255,255,0.2);}
.sec-footer .copyBottom .linkUl li:nth-child(1):before {display:none;}
.sec-footer .copyBottom .linkUl li a {color:inherit;}

	@media screen and (max-width:1449px) {
		.sec-footer .copyBottom .container {width:100%;}
	}

	@media screen and (max-width:1024px) {
		.sec-footer .copyBottom {display: none;}
	}


.sec-footer .footerInfo {padding:67px 0;}
.sec-footer .footerInfo .container {position:relative; display: flex;}
.sec-footer .footerInfo .copyLogo {width:112px; margin-right:50px; font-size:0; vertical-align:top;}
.sec-footer .footerInfo .copyLogo span {display:block; overflow:hidden; width:97px; height:53px; background:url('../img/common/copyLogo.png') center no-repeat; background-size: contain;}
.sec-footer .footerInfo .copyInfo{width:calc(100% - 97px);}
.sec-footer .footerInfo .copyInfo:after{content:''; display:block; clear:both;}
.sec-footer .footerInfo .copyInfo .text{display: flex; align-items: center; float:left; font-weight:300; font-size: 1em;}
.sec-footer .footerInfo .copyInfo .text:before{content:''; display:block; margin:0 17px; width:1px; height:11px; background:rgba(255,255,255,0.2);}
.sec-footer .footerInfo .copyInfo .text:nth-child(1):before, .sec-footer .copyInfo .text:nth-child(2):before{display:none;}
.sec-footer .footerInfo .copyInfo .text.add {float:none; margin-bottom:9px;}
.sec-footer .footerInfo .copyInfo .link {width: 100%; display: flex; padding-top: 20px;}
.sec-footer .footerInfo .copyInfo .link > li {display: flex; align-items: center;}
.sec-footer .footerInfo .copyInfo .link > li:before{content:''; display:block; margin:0 17px; width:1px; height:11px; background:rgba(255,255,255,0.2);}
.sec-footer .footerInfo .copyInfo .link > li:first-child:before {display: none;}
.sec-footer .footerInfo .copyInfo .link > li.privacy {color: #fff;}
.sec-footer .footerInfo .copyInfo .copy{clear:both; padding-top:22px; font-size: 1em;}

	@media screen and (max-width:1449px) {
		.sec-footer .footerInfo .container {width:100%;}
	}

	@media screen and (max-width:999px) {
		.sec-footer .footerInfo {padding:47px 0;}
		.sec-footer .footerInfo .copyLogo {width:16%; margin-right:0;}
		.sec-footer .footerInfo .copyInfo {width:83%;}
		.sec-footer .footerInfo .copyInfo .text:before {margin:0 8px;}
		.sec-footer .footerInfo .copyInfo .text.email:before {margin:0 8px;}
	}

	@media screen and (max-width:799px) {
		.sec-footer .footerInfo .container {flex-direction: column;}
		.sec-footer .footerInfo .copyLogo {width:100%; margin-bottom:20px;}
		.sec-footer .footerInfo .copyLogo span {margin: 0 auto;}
		.sec-footer .footerInfo .copyInfo {width:100%; text-align:center;}
		.sec-footer .footerInfo .copyInfo .text {float:none; display:inline-block;}
		.sec-footer .footerInfo .copyInfo .text:before {display:inline-block;}
		.sec-footer .footerInfo .copyInfo .text.add {display:block;}
		.sec-footer .footerInfo .copyInfo .text.tel:before {display:none;}
		.sec-footer .footerInfo .copyInfo .link {justify-content: center;}
	}

	@media screen and (max-width:499px) {
	}


#top_button {position:fixed;bottom:20px;right:20px;width:50px;height:50px;line-height:50px;text-align:center;z-index:8000;background-color:#000;background-image:url('../img/common/top.png');background-repeat:no-repeat;background-position:50% 50%;color:#000;display:none;border-radius:50%;opacity:0.5; cursor:pointer; border:0;}
#top_button:hover{color:#fff;opacity:1;background-color:#00a041;}
#top_button span{font-size:0;}

	@media screen and (max-width:799px) {
		#top_button {bottom:10px; right:10px; width:45px;height:45px;}
	}