@charset "utf-8";

/*navigation*/
.nav-bar {
    width: 100%;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 80px;
    z-index: 2000;
    transition: transform 0.3s ease;
    will-change: transform;
  
    position: fixed;
    top: 0;
    left: 0;
  }
  .nav-bar.active {
    background:#000;
    border-bottom:1px solid rgba(255,255,255,.3)
  }
  .nav-bar.scrolling-up {
    background:rgba(0,0,0,.8);
    border-bottom:1px solid rgba(255,255,255,.3);
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  }
  .nav-bar.scrolling-up {
    padding: 8px 80px;
  }
  .logo {
    padding: 20px 0;
  }
  
  .logo img {
    display: block;
  }
  
  .menu {
    display: flex;
    gap: 50px;
    align-items: center;
  }
  
  .menu-item {
    padding: 20px 0;
    cursor: pointer;
    white-space: nowrap;
    width: 100px;
    font-size: 20px;
    font-weight: 400;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.65);
    transition:all .4s;
    color:#fff;
  }
  a.menu-item {color:#fff;}
  .menu-item.hovered {
    color: #63d664;
  }
  .language-toggle {
    background: none;
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-left: 20px;
  }
  
  .language-toggle .icon {
    margin-right: 6px;
  }
  
  /* submenu-layer 포함 */
  .submenu-layer {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    width: 100%;
    background: rgba(0,0,0,.8);
    z-index: 999;
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
  }
  
  .submenu-layer.open {
    height: 240px;
    padding:20px 0;
  }
  
  .submenu-container {
    position: relative;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
  }
  
  .submenu {
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    display: flex;
    flex-direction: column;
    color: #fff;
  }
  
  .submenu a {
    padding: 5px 0;
    color: #aaa;
    text-decoration: none;
    font-size: 17px;
    font-weight: 300;
    transition:all .4s;
  }
  
  .submenu a:hover {
    color:#fff;
  }
  
  /*lang*/
  .lang-text {font-size:18px;font-weight:300;font-family: 'Pretendard', sans-serif;}
  .language-select {
    position: relative;
  }
  
  .language-toggle {
    background: none;
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
  }
  
  .language-toggle .icon {
    margin-right: 6px;
    color:#fff;
  }
  
  .language-options {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 20px;
    background: #111;
    border: 1px solid #333;
    z-index: 1001;
  }
  
  .language-options .lang-option a {
    padding: 8px 18px;
    cursor: pointer;
    color: #bbb;
    font-size: 18px;
    font-weight: 300;
    transition:all .4s;
  }
  
  .language-options .lang-option:hover {
    background: #333;
    color:#eee;
  }
  
/*================================================================================*/
/* header */
#header{position:fixed;left:0;top:0;width:100%;z-index:1200;transition:all 0.4s;border-bottom:1px solid rgba(255,255,255,.25);}
#header.nav-up {top:-90px;}
.head{
	position:relative;
	box-sizing:border-box;
	width:90px;height:90px;
	margin:0;padding:0 3%;
	text-align:center;
	transition:all 0.4s;
}
.head h1{z-index:900;}
.head h1 a{
	display:block;
	width:199px;height:34px;
	background:url(/img/main/logo.png) no-repeat center;
	text-indent:-9999px;
	transition:all 0.4s;
}
.head .btnWrap {
    background-color: #005699;
    background-image: linear-gradient(135deg, rgba(0,86,153,1) 30%, rgba(255,126,0,1) 95%);
	background-size:100%;
    width:90px;
    height:90px;
    display: flex;
    align-items: center;
    justify-content: center;
	cursor: pointer;
	transition:all .4s;
}
.head .btnWrap:hover {
	background-color: #ff7e00;
    background-image: linear-gradient(135deg, rgba(255,126,0,0) 0%, rgba(0,86,153,1) 75%);
	transition:background-color 0.4s ease;
}
.head .gnb{
	display:flex;align-items:center;justify-content:flex-end;
}
.head .gnb .language{position:relative;margin-right:70px;}
.head .gnb .language>a{
	display:block;
	width:29px;height:29px;
	background:url(/images/common/btn_lang.png) no-repeat center;
	transition:all 0.4s;
    display: flex;
    align-items: center;
    color: #fff;
    cursor:pointer;
}
.head .gnb .language>a>div {margin:0 10px;font-size:12px;}
.head .gnb .language>ul{display:none;position:absolute;left:0;top:100%;z-index:10;width:70px;/*margin:10px 0 0 -35px;*/}
.head .gnb .language>ul>li{margin-bottom:2px;}
.head .gnb .language>ul>li>a{
	display:flex;align-items:center;justify-content:center;
	width:100%;height:34px;
	font-family:"Lexend";font-size:16px;color:#000;
	background:#fff;
	border-radius:17px;
	transition:all 0.4s;
}
.head .gnb .language>ul>li.on>a{background:#0097dc;color:#fff;}
.head .gnb .btnMenu{
	position:relative;z-index:3000;
	width:30px;height:22px;
	cursor:pointer;
}
.head .gnb .btnMenu>div{
	width:100%;height:2px;
	margin-bottom:8px;
	background:#fff;
	transition:all 0.4s;
}
.head .gnb .btnMenu>div:last-child{margin-bottom:0;}

.head .gnb .btnWrap.openmenu .btnMenu>div{background:#fff;transition:all 0.4s 0.4s;}
.head .gnb .btnWrap.openmenu .btnMenu>div:nth-child(1){transform: translateY(10px) rotate(45deg);}
.head .gnb .btnWrap.openmenu .btnMenu>div:nth-child(2){transform:scale(0);}
.head .gnb .btnWrap.openmenu .btnMenu>div:nth-child(3){transform: translateY(-10px) rotate(-45deg);}


.head .pcNav{
    max-width:1400px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:0 auto;
}
.head .pcNav:before {
	content:'';display:block;
	width:100%;height:321px;background:url("/img/001/history-bg1.png");
	position:absolute;
	z-index: 0;
    transform: scaleY(0);
    transition: all 0.5s;
    transform-origin: top;
	left:0;top:90px;
	background-size:cover;
	background-repeat:no-repeat;
}
.head .pcNav:after{
	display:block;content:"";
	width:100%;height:412px;
	background:rgb(37 37 45);
	position:absolute;left:0;top:0;z-index:-1;
	transform:scaleY(0);transition:all 0.5s;
	transform-origin:top;
}
.head .pcNav>ul{display:flex;justify-content:center;}
.head .pcNav>ul>li{position:relative;z-index:10;padding:0 1.6vw;}
.head .pcNav>ul>li.active {border-bottom:1px solid #0083fe}
.head .pcNav>ul>li>a{
	font-size:18px;color:#fff;font-weight:400;line-height:90px;
	transition:all 0.4s;
}
.head .pcNav>ul>li:after{
	display:block;content:"";
	width:100%;height:2px;
	background:#0083fe;
	position:absolute;left:0;bottom:0;
	transform:scaleX(0);transition:all 0.4s;
}
.head .pcNav>ul>li.on:after{transform:scaleX(1);}
.head .pcNav>ul>li>ul{
	display:none;
	position:absolute;left:50%;top:100%;transform:translateX(-50%);
	width:200px;
	padding:35px 0 0;
}
.head .pcNav>ul>li>ul>li{margin-bottom:10px;}
.head .pcNav>ul>li>ul>li>a{font-size:16px;color:#bbb;font-weight:300;}
.head .pcNav>ul>li>ul>li>a:hover{color:#0083fe;}



.btnWrap {display:none;}
.head {display:none;}

@media(max-width:1400px){
    .head {display:block;}
    .head h1 a {margin-left:20px;}
    .head .pcNav ul{display:none;}
    #header {border-bottom:none;}
    .head {padding:0;}
    .nav-bar,.nav-bar.scrolling-up {padding:0 0 0 25px}
    .menu {position: absolute;right: 110px;}
    /*추가*/
    .btnWrap {
    display:block;
    background: red;
    width: 100px;
    height: 100px;
  }
  .menu > a {display:none;}
  .submenu-layer {display:none;}
  .nav-bar.active {background:transparent;border-bottom:none;}
}
@media(max-width:812px){
	/* .head{height:70px;}
	.head h1{top:20px;}
	.head .gnb{top:21px;gap:15px}
	.head .gnb .language{margin-right:25px;} */
}
@media screen and (max-width:768px) {
	.head h1 a {margin-left: 20px;width: 182px;background-size: contain;}
}
@media screen and (max-width:540px) {
	/* .head h1 a {width: 130px;margin-left:10px;}
	.head .btnWrap {width:50px;height:50px;}
	.head .gnb .language {margin-right:35px;} */
}


/**/
#header.move {background:rgba(0,0,0,.85)} 
#header.move .head {height:62px}
#header.move .head .btnWrap {transition:all .4s;width:62px;height:62px;}
#header.move .head .pcNav>ul>li>a {line-height:62px;}
#header.move .head h1 a {transition:all .4s;background-size:72%}
#header.move .head .pcNav>ul>li>a {font-size:15px;}

.on{}
.on .head{background:#000;border-bottom:1px solid #474747}
.on .head h1 a{background:url(/img/main/logo.png) no-repeat center;}
.on .head .gnb .language>a{background:url(/images/common/btn_lang2.png) no-repeat center;}
/* .on .head .gnb .btnMenu>div{background:#000;} */
.on .head .pcNav>ul>li>a{color:#fff;}
.on .head .pcNav:after,
.on .head .pcNav:before {transform:scaleY(1);transition:all 0.3s;}

.wh{box-shadow:0 1px 2px rgba(0,0,0,0.1);}
.wh .head{background:#fff;}
.wh .head h1 a{background:url(/images/common/logo2.png) no-repeat center;}
.wh .head .gnb .language>a{background:url(/images/common/btn_lang2.png) no-repeat center;}
.wh .head .gnb .btnMenu>div{background:#000;}
.wh .head .pcNav>ul>li>a{color:#000;}




/* allmenu */
.allmenu{
	position:fixed;left:0;top:0;z-index:1200;
	width:100%;height:100vh;
	overflow:hidden;overflow-y:auto;
	background:#272727;
	opacity:0;transform:translateX(-100%);
	transition:all 0.8s cubic-bezier(.38,.37,.12,.98);
}
.allmenu:after{
	display:block;content:"";
	width:100%;height:289px;
	background:url(/images/common/all_bg.png) no-repeat center bottom;
	position:absolute;left:0;bottom:0;
	opacity:0;transform:translateY(40px);
	transition:all 0.8s cubic-bezier(.38,.37,.12,.98) 0.6s;
}
.allmenu .allwrap{
	box-sizing:border-box;
	width:100%;height:100%;
	padding:0 3%;
}
.allmenu .allwrap>ul{
	display:flex;position:relative;z-index:10;
	width:100%;height:100%;	
	box-sizing:border-box;
}
.allmenu .allwrap>ul:before{ 
	display:block;content:"";
	width:1px;height:100%;
	background:#434343;
	position:absolute;left:0;top:0;
}
.allmenu .allwrap>ul>li{
	position:relative;box-sizing:border-box;width:20%;padding:80px 40px 20px;
}
.allmenu .allwrap>ul>li:after{
	display:block;content:"";
	width:1px;height:100%;
	background:#434343;
	position:absolute;right:0;top:0;	
}
.allmenu .allwrap>ul>li:nth-child(2){width:20%;}

.allmenu .allwrap>ul>li:last-child:after{display:none;}
.allmenu .allwrap>ul>li>a{
	position:relative;
	display:block;
	font-size:27px;color:#fff;font-weight:700;
	cursor:default;
	opacity:0;transform:translateX(-40px);
	transition:all 0.8s cubic-bezier(.38,.37,.12,.98) 0.6s;
}
.allmenu .allwrap>ul>li>a:before{
	display:block;content:"";
	width:2px;height:26px;
	background:#ccc;
	position:absolute;left:-40px;top:8px;
	transition:all 0.8s cubic-bezier(.38,.37,.12,.98) 0.6s;
}
.allmenu .allwrap>ul>li:hover>a{color: rgb(99, 214, 100);;transition:all 0.25s 0s}
.allmenu .allwrap>ul>li:hover>a:before{background:#0097dc;transition:all 0.25s 0s}

.allmenu .allwrap>ul>li>ul{
	margin-top:3vh;
	opacity:0;transform:translateX(-40px);
	transition:all 0.8s cubic-bezier(.38,.37,.12,.98) 0.6s;
}
.allmenu .allwrap>ul>li>ul>li{margin-top:1.8vh;padding-left:9px;}
.allmenu .allwrap>ul>li>ul>li>a{font-size:17px;color:#999;font-weight:400;}
.allmenu .allwrap>ul>li>ul>li>a:hover{color: rgb(99, 214, 100);}
.allmenu .allwrap>ul>li>ul>li>ul{margin-top:1.5vh;}
.allmenu .allwrap>ul>li>ul>li>ul>li{
	position:relative;
	padding-left:14px;
}
.allmenu .allwrap>ul>li>ul>li>ul>li:before{
	display:block;content:"";
	width:6px;height:1px;
	background:#555;
	position:absolute;left:0;top:11px;
}
.allmenu .allwrap>ul>li>ul>li>ul>li>a{
	font-size:15px;color:#555;font-weight:500;line-height:1.6em;
}


.allmenu.open{opacity:1;transform:translateX(0);}
.allmenu.open:after{opacity:1;transform:translateY(0);}
.allmenu.open .allwrap>ul>li>a{opacity:1;transform:translateX(0);}
.allmenu.open .allwrap>ul>li>ul{opacity:1;transform:translateX(0);}
.allmenu .allwrap img {position: absolute;bottom: 0;max-width: 94%;margin: 0 auto;text-align: center;}


/* 스크롤바 */
/* ::-webkit-scrollbar{width:0px;} */
::-webkit-scrollbar-thumb {
	background-color: #2f3542;
	background-clip: padding-box;
	border: 2px solid transparent;
}
::-webkit-scrollbar-track{background:rgba(0,0,0,0.6);}


@media(max-width:1399px){
	
	.open .head h1 a{
		background:url(/images/common/logo2.png) no-repeat center
	}
	.allmenu{
		position:fixed;left:0;top:0;z-index:1000;
		width:100%;height:100vh;
		overflow:hidden;overflow-y:auto;
		opacity:0;transform:translateX(-100%);
		transition:all 0.8s cubic-bezier(.38,.37,.12,.98);
	}
	.allmenu:after{
		display:block;content:"";
		width:100%;
		background-size:contain;
	}
	.allmenu .allwrap{
		box-sizing:border-box;
		width:100%;
		padding:10vh 3%;
	}
	.allmenu .allwrap>ul{display:block;border-top:1px solid #6b6b6b;}
	.allmenu .allwrap>ul:before{display:none;}
	.allmenu .allwrap>ul>li{
		position:relative;
		width:100%;padding:10px 5px;
		border-bottom:1px solid #434343;
		background: rgba(39,39,39,.9);
	}
	.allmenu .allwrap>ul>li:after{display:none}
	.allmenu .allwrap>ul>li:last-child{position:static;}
	.allmenu .allwrap>ul>li:last-child:after{display:none;}
	.allmenu .allwrap>ul>li:nth-child(2){width:100%;}
	.allmenu .allwrap>ul>li:nth-child(2):before{display:none;}
	.allmenu .allwrap>ul>li:nth-child(2)>ul>li:nth-child(4){position:static;}
	.allmenu .allwrap>ul>li:nth-child(2)>ul>li:nth-child(5){position:static;}
	.allmenu .allwrap>ul>li:nth-child(2)>ul>li:nth-child(6){position:static;}
	.allmenu .allwrap>ul>li:nth-child(2)>ul>li:nth-child(7){position:static;}
	.allmenu .allwrap>ul>li:nth-child(2)>ul>li:nth-child(8){position:static;}
	.allmenu .allwrap>ul>li:nth-child(2)>ul>li:nth-child(9){position:static;}
	.allmenu .allwrap>ul>li:nth-child(4){position:relative;left:0;top:0;}
	.allmenu .allwrap>ul>li>a{
		position:relative;
		display:block;
		font-size:21px;font-weight:500;
		cursor:default;
		opacity:0;transform:translateX(-40px);
		transition:all 0.8s cubic-bezier(.38,.37,.12,.98) 0.6s;
	}
	.allmenu .allwrap>ul>li>a:before{display:none;}
	.allmenu .allwrap>ul>li>a:after{
		display:block;content:"";
		width:10px;height:10px;
		border-right:2px solid #fff;border-bottom:2px solid #fff;
		transform:rotate(45deg);
		position:absolute;right:0;top:50%;
		margin:-9px 0 0 6px;
	}
	.allmenu .allwrap>ul>li.act>a:after{
		transform:rotate(225deg);
		position:absolute;right:0;top:50%;
		margin:-3px 0 0 6px;
	}

	.allmenu .allwrap>ul>li>ul{
		display:none;
		margin-top:1.2vh;
		opacity:0;transform:translateX(-40px);
		transition:all 0s cubic-bezier(.38,.37,.12,.98) 0s;
	}
	.allmenu .allwrap>ul>li>ul>li{margin:5px 0;}
	.allmenu .allwrap>ul>li>ul>li>a{font-size:17px;;font-weight:500;}
	.allmenu .allwrap>ul>li>ul>li>ul{margin-top:5px;}
	.allmenu .allwrap>ul>li>ul>li>ul>li{
		position:relative;
		padding-left:14px;
	}
	.allmenu .allwrap>ul>li>ul>li>ul>li:before{
		display:block;content:"";
		width:6px;height:1px;
		background:#555;
		position:absolute;left:0;top:11px;
	}
	.allmenu .allwrap>ul>li>ul>li>ul>li>a{
		font-size:15px;color:#555;font-weight:500;line-height:1.6em;
	}


	.allmenu.open{opacity:1;transform:translateX(0);}
	.allmenu.open .allwrap>ul>li>a{opacity:1;transform:translateX(0);}
	.allmenu.open .allwrap>ul>li>ul{opacity:1;transform:translateX(0);}
	.head .btnWrap,.head .btnWrap:hover {background:transparent;background-color:transparent;background-image:none;}
}
@media screen and (max-width:1024px) {
	.logo img {width:150px;}
	.lang-text {font-size:16px;}
}

@media screen and (max-width:768px) {
	.logo img {width:120px;}
	.menu {right:90px;}
}
@media screen and (max-width:540px) {
	.head .btnWrap,.head {height:60px;}
}