:root {
  --header-height: 3.5rem;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index:10;
  transition:ease .7s;
}
.header.sticky{
	/* box-shadow: 0 0 10px 0 rgba(0,0,0,0.1); */
	/* backdrop-filter: blur(10px);
	    -webkit-backdrop-filter: blur(10px); */
	background:#fff;
}

.header .gnb_menu_btn {position:fixed; top:36px; right:55px; background:transparent; color:#111;width:25px;height:30px;border-top:2px solid #111; border-left:0; border-right:0; border-bottom:0; transition: all 0.3s;  cursor: pointer;}
.header .gnb_menu_btn:after{position: absolute; display:block; content:''; width: 25px; background: #111; height: 2px; top:5px; transition: all 0.5s; -webkit-transition: all 0.5s;}
.header .gnb_menu_btn::before{ position: absolute; display:block; content:''; width: 25px; background: #111; height: 2px; top:12px; transition: all 0.5s; -webkit-transition: all 0.5s;}
.logo{width:130px; z-index:100;}

#gnb_all {display:none;
position:absolute;/* border:1px solid #c5d6da;width:100%;background:#fff;z-index:1000;-webkit-box-shadow:0 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow:0 2px 5px rgba(0,0,0,0.2);
box-shadow:0 2px 5px rgba(0,0,0,0.2) */
left:0; top:0;
width:100%; height:100vh; background:url('../img/gnb_all_bg2.png')no-repeat center center / cover;
}
#gnb_all h2 {font-size:1.3em;padding:15px 20px;border-bottom:1px solid #e7eeef}
#gnb_all .gnb_al_ul:after {display:block;visibility:hidden;clear:both;content:""}
#gnb_all .gnb_al_ul > li:nth-child(5n+1) {border-left:0}
#gnb_all .gnb_al_li {float:left;width:20%;min-height:150px;padding:20px;border-left:1px solid #e7eeef}
#gnb_all .gnb_al_li .gnb_al_a {font-size:1.2em;display:block;position:relative;margin-bottom:10px;font-weight:bold;color:#3a8afd}
#gnb_all .gnb_al_li li {line-height:2em}
#gnb_all .gnb_al_li li a {color:#555}
#gnb_all_bg {display:none;background:rgba(0,0,0,0.1);width:100%;height:100%;position:fixed;left:0;top:0;z-index:999}
.gnb_close_btn{
	position: absolute;
    background:transparent;
    z-index: 10;
    top: 28px;
    right: 50px;
	border:0;
}
.gnb_close_btn:after {
    display: block;
    content: '\00d7';
    width: 50px;
    height: 50px;
    line-height: 50px;
    color: #fff;
    transform: rotate(90deg);
    text-align: center;
    font-size: 3em;
}

.gnb_al_ul {
        text-align: center;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 0 0 25%;
    color: #fff;
    height: 100vh;
    row-gap: 3%;
}
.gnb_al_ul > li{
	transform: scaleY(0.95);
	letter-spacing:-0.025em;
	font-weight:400;
	font-size:1.6em;
	/* margin-bottom:30px; */
	display: flex;
    align-items: center;
}
.gnb_al_ul > li a{
	display: table;
	padding:0;
}
.gnb_al_ul > li > ul > li{
	display: inline-block;
    /* margin: 20px 15px 0 15px; */
    font-size: 1.2em;
    color: #fff;
    padding: 0 0 0 30px;
}
.gnb_al_ul > li > ul > li a{
	font-size:0.7em;
	color:#fff;
}
.gnb_al_ul > li  .top_menu{
	font-size:1.3em;
	font-weight:700;
	color:#fff;
}
.gnb_al_ul > li > ul > li a:after{
	display:block;
	content:'';
	width:0; height:1px; 
	background:#fff;
	transition:ease 0.5s;
}
.gnb_al_ul > li > ul > li:hover a:after{
	display:block;
	width:100%;
} 
/* .gnb_al_ul > li > a:after, .gnb_al_ul > li > ul > li a:after{
	display:block;
	content:'';
	width:0; height:1px; 
	background:#000;
	transition:ease 0.5s;
}
.gnb_al_ul > li:hover > a:after, .gnb_al_ul > li > ul > li:hover a:after{
	display:block;
	width:100%;
} */


/*=============== NAV ===============*/
.nav {
}

.nav__burger, 
.nav__close {
  color: #111;
}
.nav__toggle .line1,.nav__toggle .line2, .nav__toggle .line3 {
    width: 25px;
    height: 3px;
	background: #1a7c57;
    border-radius: 2px;
    margin: 5px;
    transition: all 0.3s ease;
}

.nav__toggle.show-icon .line1{
    transform: rotate(-45deg) translate(-5px,6px);
}
.nav__toggle.show-icon .line2{
    transition: all 0.3s ease;
    width:0;
}
.nav__toggle.show-icon .line3{
    transform: rotate(45deg) translate(-5px,-6px);
}

.nav__data {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav__menu{
	/* margin-left:auto;
	margin-right:80px; */
}

.nav__toggle {
  position: relative;
  width: 32px;
  height: 32px;
}

.nav__burger, 
.nav__close {
  position: absolute;
  width: max-content;
  height: max-content;
  inset: 0;
  margin: auto;
  font-size: 1.25rem;
  cursor: pointer;
  transition: opacity .1s, transform .4s;
}

.nav__close {
  opacity: 0;
}
.mobile_menu{
	display:block;
}
.nav_right{
	display:none;
}
.dropdown__menu li{
	padding:10px 0;
}

/* Navigation for mobile devices */

@media screen and (max-width: 1118px) {
	.header {
		padding:15px 25px;
	}
	.header.sticky{
		background:#fff;
	}
	.nav__toggle{
		top:4px;
		z-index:100;
	}
	dropdown__menu li{
		padding: 10px 0 10px 40px;
	}
	.dropdown__menu li a{
		color:#555;
	}

  .header .gnb_menu_btn{
    display:none;
  }
  .nav__menu {
    position: absolute;
    left: 0;
    top: 2.5rem;
    width: 100%;
    height: calc(100vh - 3.5rem);
    overflow: auto;
    pointer-events: none;
    opacity: 0;
    transition: top .4s, opacity .3s;
  }
  .nav__menu::-webkit-scrollbar {
    width: 0;
  }
  .nav__list {
    background-color: var(--black-color);
    padding-top: 1rem;
	padding-left: 1rem;
    padding-right: 1rem
  }
  .nav__link.bgBlue {
    padding: 1.25rem 2rem;
}

}


@media screen and (max-width: 820px) {
	.logo{
		width:130px;
	}
}

@media screen and (max-width: 600px) {
	.logo{
		width:110px;
	}
	.header {
		padding: 15px 15px;
	}
	.nav__link{
		padding: 1.25rem 1.2rem;
	}
	.nav__link:hover, .nav__link:focus .nav__link:active{
		#1a7c57
	}
}

.nav__link.bgBlue{
	background:#1b449b;
	border-radius:30px;
	color:#fff;
	font-weight:600;
}


.nav__link {
  color: var(--white-color);
  background-color: var(--black-color);
  font-weight: var(--font-semi-bold);
  padding:1.25rem 1rem 0.3rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color .3s;
  font-weight:600;
}

/* Show menu */
.show-menu {
  opacity: 1;
  top: 0;
  padding-top:3.5rem;
  pointer-events: initial;
  background:#fff;
  height:100vh;
}

/* Show icon */
.show-icon .nav__burger {
  opacity: 0;
  /* transform: rotate(90deg); */
}
.show-icon .nav__close {
  opacity: 1;
  /* transform: rotate(90deg); */
}

/*=============== DROPDOWN ===============*/
.dropdown__item {
  cursor: pointer;
}

.dropdown__arrow {
  font-size: 1.25rem;
  font-weight: initial;
  transition: transform .4s;
}

.dropdown__link i, 
.dropdown__sublink i {
  font-size: 1.25rem;
  font-weight: initial;
}

/* .dropdown__link:hover, 
.dropdown__sublink:hover {
  background-color: var(--black-color);
} */

.dropdown__menu, 
.dropdown__submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease-out;
  padding:0;
}


.dropdown__link, 
.dropdown__sublink {
  align-items: flex-start;
  padding:1rem 2em 1rem 2rem;
}

/* Show dropdown menu & submenu */
.dropdown__item:hover .dropdown__menu, 
.dropdown__subitem:hover > .dropdown__submenu {
  max-height: 1000px;
  transition: max-height .4s ease-in;
}

/* Rotate dropdown icon */
.dropdown__item:hover .dropdown__arrow {
  transform: rotate(180deg);
}

/*=============== DROPDOWN SUBMENU ===============*/
.dropdown__add {
  margin-left: auto;
}

.dropdown__sublink {
  background-color: var(--black-color-lighten);
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 340px) {
  .nav_container {
    margin-inline: 1rem;
  }

  .nav__link {
    padding-inline: 1rem;
  }
}

/* For large devices */
@media screen and (min-width: 1118px) {
	.nav__menu{
		height:100%;
	}
	.nav_right{
		display:block;
	}
	.mobile_menu{
		display:none;
	}
	.logo{
		width:150px;
	}
	
	.dropdown__link, 
	.dropdown__sublink {
		  padding:0.2rem 2em 0.2rem 2rem;
		  /* color: var(--white-color); */
		  background-color: var(--black-color-light);
		  display: flex;
		  align-items: center;
		  /* column-gap: .5rem; */
		  transition: background-color .3s;
		  /* color:#fff; */
		  justify-content: center;
		  font-weight:700;
	}

	.nav__link.bgBlue{
		padding:5px 16px;
	}

	.nav_right{
		display: flex;
		align-items: center;
	}
	.header_login{

	}
	.header_login li{
		display:inline-block;
		padding-left:10px;
	}

	.language{
		display:inline-block;
	}
	.language ul {
		text-align: center;
		list-style: none;
	}
	.language ul li {
		position: relative; 
		width:60px; 
		padding: 14px 0; 
		background:none; 
		cursor: pointer; 
		vertical-align:middle; -webkit-transition: all 0.2s;  -moz-transition: all 0.2s;  -ms-transition: all 0.2s;  -o-transition: all 0.2s; transition: all 0.2s;  
		color: #fff;
		z-index:2;
	}
	.language ul li ul {
		padding: 0; 
		position: absolute; 
		top: 45px; left: 0; 
		display: none; 
		opacity: 0;
		visibility: hidden;
		-webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s;  -ms-transition: opacity 0.2s;  -o-transition: opacity 0.2s;  -transition: opacity 0.2s;
		height:auto;
		border-radius: 25px 0 25px 0;
		overflow:hidden;
	}
	.language ul li ul li {
		background:#1a7c57;
		display: block; 
		padding:0;  
		color: #fff;  
		vertical-align:middle;  
		border:0;  
		border-radius:0; 
		z-index:1;
	}
	.language ul li ul li a:hover {
		text-decoration:underline;
	}
	.language ul li ul li a{
		color:#fff; 
		display:block; 
		width:100%; 
		padding:14px 0; 
		text-align:center;
	}
	.language ul li:hover ul {
		display: block; 
		opacity: 1; 
		visibility: visible;
	}


  .nav_container {
    margin-inline: auto;
	max-width:1500px;
	width:100%;
	padding:0 50px;
  }

  .nav {
    height: calc(var(--header-height) + 2rem);
    display: flex;
    justify-content: space-between;
	align-items: center;
  }
  .nav__toggle {
    display: none;
  }
  .nav__list {
    height: 100%;
    display: flex;
    column-gap: 5rem;
	align-items: center;
	font-size:1em;
  }
  .nav__link {
    height: 100%;
    padding: 0;
    justify-content: initial;
    column-gap: .25rem;
	padding:25px 0;
  }
 /*  .nav__link:hover {
    background-color: transparent;
  } */

  .dropdown__item, 
  .dropdown__subitem {
    position: relative;
	height:100%;
  }

  .dropdown__menu, 
  .dropdown__submenu {
    max-height: initial;
    overflow: initial;
    position: absolute;
    left: 50%;
	transform:translateX(-50%);
    top: 88px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s, top .3s;
	background: #1a7c57;
    border-radius: 30px 0 30px 0;
	text-align:center;
	z-index:9;
	padding:10px 0;
  }
 .dropdown__menu li, 
 .dropdown__submenu li{
	text-align:center;
  }
	.dropdown__link, .dropdown__sublink{
		color:#fff;
	}
  .dropdown__subitem .dropdown__link {
    padding-inline: 1rem;
  }

  .dropdown__submenu {
    position: absolute;
    left: 100%;
    top: .5rem;
  }
  .dropdown__item:nth-child(2) .dropdown__menu{
	width:160px;
  }
  .dropdown__item:nth-child(4) .dropdown__menu{
	width:130px;
  }

  /* Show dropdown menu */
  .dropdown__item:hover .dropdown__menu {
    opacity: 1;
    top:88px;
    pointer-events: initial;
    transition: top .3s;
  }

  /* Show dropdown submenu */
  .dropdown__subitem:hover > .dropdown__submenu {
    opacity: 1;
    top: 0;
    pointer-events: initial;
    transition: top .3s;
  }
}