header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 80px;
  padding: 0 50px;
  display: flex;
  align-items: flex-end;
}
h1 {
position: fixed;
right: 50%;
top: 50px;
z-index: 999;
transform: translateX(50%);
width: 350px;
height: 50px;
text-align: center;
overflow: hidden;
}
h1 > a {
display: block;
color: #434343;
font-size: 2.188rem;
}
/* ----------------------------------햄버거메뉴---------------------------------- */
.menu {
z-index: 999;
}
.menu.active {
border: 1px solid #222;
border-radius: 50%;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s;
}
.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all 0.2s;
  box-sizing: border-box;
}
.menu-trigger {
z-index: 999;
width: 37px;
height: 25px;
position: relative;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #222;
}
.menu-trigger.active-1 {
border-radius: 50%;
width: 40%;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 50%;
  transform: translateY(-50%);
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}
.menu-trigger.active-1 span:nth-of-type(1) {
  transform: translateY(12px) rotate(-45deg);
  height: 1px;
  width: 17px;
}
.menu-trigger.active-1 span:nth-of-type(2) {
  opacity: 0;
  width: 17px;
}
.menu-trigger.active-1 span:nth-of-type(3) {
  transform: translateY(-11.5px) rotate(45deg);
  height: 1px;
  width: 17px;
}
/* ----------------logo animation------------------ */
/* Animation Styling */
.text-container {
}

.text-container:hover .aa,
.text-container:hover .ab,
.text-container:hover .ac,
.text-container:hover .ad,
.text-container:hover .ba,
.text-container:hover .bb,
.text-container:hover .bc,
.text-container:hover .bd,
.text-container:hover .be {
  transform: translateY(-55px);
}
.text-container > span > span {
font-size: 3.375rem;
line-height: 54px;
letter-spacing: -0.7rem;
}
.text-container > span {
font-size: 3.375rem;
line-height: 54px;
letter-spacing: -0.7rem;
}
.textLeft {
  display: block;
  text-align: start;
}
/* ----------------------메뉴 팝업창------------------------- */
.menuPopup {
display: flex;
position: absolute;
left: 0;
top: 0;
background: linear-gradient(180deg,  rgba(239,249,255,1) 30%, rgba(255,255,255,1) 100%);
z-index: 998;
width: 100vw;
/* height: 100vh; */
height: 0;
overflow: hidden;
justify-content: space-between;
align-items: center;
transition: height 0.5s ease; /* 트랜지션 효과 추가 */
}
.menuPopup.active {
height: 100vh;
}
.menuLeft {
padding: 180px 0 90px 100px;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
align-items: flex-start;
height: 100%;
}
/* -----------------------hei */
.heiPopup {
}
.heiPopup:hover ul {
height: 100%;
}
.heiPopup:hover ul li a {
animation: slideUp 0.85s both;
}
.heiLink a {
display: block;
position: relative;
font-size: 7.5rem;
color: #434343;
}
.menuTitle {
display: block;
position: relative;
font-size: 7.5rem;
color: #434343;
}
.heiPopup:hover .menuTitle a,
.contactPopup:hover .menuTitle,
.menuTitle:hover, .menuover:hover {
color: #222;
}
.heiPopup ul {
margin: 20px 6px;
overflow: hidden;
height: 0;
}
.heiPopup ul li:last-child {
margin: 0;
}
.heiPopup ul li {
margin-bottom: 15px;
overflow: hidden;
}
.heiPopup ul li a {
font-size: 1.875rem;
display: block;
}
/* -----------------------contact */
.contactPopup {
display: flex;
align-items: flex-end;
}
.contactPopup:hover .popupAd {
height: 100%;
}
.contactPopup:hover .popupAd p span{
animation: slideRight 0.85s 0.3s both;
}
.popupAd {
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
margin-left: 50px;
overflow: hidden;
height: 0;
}
.popupAd > p {
overflow: hidden;
}
.popupAd p span {
font-size: 1.875rem;
display: block;
line-height: 1.2;
}
@keyframes slideUp{
0%
  {transform: translateY(100px)}
100%
  {transform: translateY(0)}
}
@keyframes slideRight{
0%
  {transform: translateX(-100%)}
100%
  {transform: translateX(0)}
}

.menuRight {
position: absolute;
right: 100px;
}
.menuLeft , .menuRight {
opacity: 1;
/* opacity: 0; */
transition: opacity 0.1s ease;
}
.menuLeft.active , .menuRight.active {
opacity: 1;
}
.menuTitle:after {
content: '';
display: block;
width: 0;
height: 2px;
position: absolute;
left: 0;
bottom: 0;
border-bottom: 0.188rem solid transparent;
background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #004CBD 0%, rgba(175 , 207 , 255, 0.6) 100%);
background-origin: border-box;
background-clip: content-box, border-box;
transition: width 0.5s ease; /* 마우스 hover 시 width 변화에 대한 transition 추가 */
}
.menuover:hover .menuTitle:after, .menuTitle:hover:after {
width: 100%; /* 마우스 hover 시 width를 100%로 설정 */
}

/* -----------------------로고 애니메이션----------------------- */
.aa {
display: inline-block;
transition: ease transform 0.4s;
}
.ab {
display: inline-block;
transition: ease transform 0.5s;
}
.ac {
display: inline-block;
transition: ease transform 0.6s;
}
.ad {
display: inline-block;
transition: ease transform .7s;
}
.ba {
display: inline-block;
transition: ease transform .8s;
}
.bb {
display: inline-block;
transition: ease transform .9s;
}
.bc {
display: inline-block;
transition: ease transform 1s;
}
.bd {
display: inline-block;
transition: ease transform 1.1s;
}
.be {
display: inline-block;
transition: ease transform 1.2s;
}
/* -------------------------------footer------------------------------- */
footer * {
font-size: 1.25rem;
color: #888888;
}
footer {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 0 50px 50px;
}
.left {}
.left a {}
.left a:nth-child(2) {
margin: 0 80px;
}
.right {
text-align: end;
position: relative;
}
.right span.active:first-child::after {
  width: 50%;
}
.right span.active:last-child::after {
  width: 100%;
}
.right span:first-child::after {
  content: '';
  display: block;
  width: 0;
  position: absolute;
  right: 0;
  top: 40%;
  border-bottom: 0.188rem solid transparent;
  background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #004CBD 0%, rgba(175, 207, 255, 0.6) 100%);
  background-origin: border-box;
  background-clip: content-box, border-box;
  transition: width 0.5s ease;
}
.right span:last-child::after {
  content: '';
  display: block;
  width:  0;
  position: absolute;
  right: 0;
  bottom: -10%;
  border-bottom: 0.188rem solid transparent;
  background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #004CBD 0%, rgba(175, 207, 255, 0.6) 100%);
  background-origin: border-box;
  background-clip: content-box, border-box;
  transition: width 0.5s ease;
}
/* ----------------------mobile--------------------------- */
.mobileMenu {
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(180deg,  rgba(239,249,255,1) 30%, rgba(255,255,255,1) 100%);
  z-index: 998;
  width: 100vw;
  /* height: 100vh; */
  height: 0;
  overflow: hidden;
  justify-content: space-between;
  align-items: center;
  transition: height 0.5s ease; /* 트랜지션 효과 추가 */
  }
.mobileMenu.active {
  height: 100vh;
}
.mobileLogo {
  position: fixed;
  right: 50%;
  top: 20px;
  z-index: 999;
  transform: translateX(50%);
  width: 100%;
  height: 50px;
  overflow: hidden;
  text-align: center;
  }
.mobileLogo > a {
  display: inline-block;
  color: #434343;
  font-size: 2.188rem;
}
/* ----------------logo animation------------------ */
/* Animation Styling */
.mobileTxt {
}
.mobileTxt .aa.active, .mobileTxt .ab.active, .mobileTxt .ac.active, .mobileTxt .ad.active, .mobileTxt .ba.active, .mobileTxt .bb.active, .mobileTxt .bc.active, .mobileTxt .bd.active, .mobileTxt .be.active {
transform: translateY(-55px);
}
.mobileTxt > span {
font-size: 3.375rem;
line-height: 54px;
letter-spacing: -0.7rem;
}
.mobileList {
  overflow: scroll;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  padding: 150px 10px 0;
}
.MmenuTitle {
  font-size: 4.5rem;
  color: #888888;
  display: inline-block;
  position: relative;
}
.MheiLink {}
.MheiPopup ul {
  margin: 10px;
  height: 0;
  overflow: hidden;
  transition: height .5s ease;
}
.MheiPopup ul.height, .MmobileAd.height {
  height: 100%;
}
.MheiPopup ul li {
  margin-bottom: 10px;
}
.MheiPopup ul li a {
  font-size: 2.5rem;
}
.MgameLink {
  margin-bottom: 20px;
  text-align: end;
}
.McontactPopup {}
.MmobileAd {
  margin: 10px;
  height: 0;
  overflow: hidden;
  transition: height .5s ease;
}
.MmobileAd p {
}
.MmobileAd p span {
  font-size: 2rem;
}
.MmenuTitle:after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  position: absolute;
  left: 0;
  border-bottom: 0.188rem solid transparent;
  background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #004CBD 0%, rgba(175 , 207 , 255, 0.6) 100%);
  background-origin: border-box;
  background-clip: content-box, border-box;
  transition: width 0.5s ease; /* 마우스 hover 시 width 변화에 대한 transition 추가 */
}
.MmenuTitle.height:after {
  width: 100%;
}