@charset "utf-8";
/* CSS Document */
.top-search{width:100%; height: 50vh; top:0; left:0; overflow: hidden; position:fixed; opacity: 1; text-align: center; z-index: 11; display:none;}
.top-search .inner-wrap{position:relative; z-index: 1; width:calc(100% - var(--layout-flax-margin)); height: inherit; margin:0 auto; display:none;}
.top-search #searchCloseBtn{margin:var(--gap-40) auto;}
.top-search .search-wrap{position:absolute; bottom:0; left:50%; transform: translate(-50%,0); background-color:transparent;}
.top-search .search-wrap > p{color:#fff; font-size:var(--font-size-xxlarge);}
.top-search .search-wrap .search-inner-wrap{display:flex; background-color:#D14646; border-radius: 30px; height: 60px; max-width:700px; width:100%; align-items: center; margin:var(--gap-40) auto 0 auto;}
.top-search .search-wrap .top-search-input{width:calc(100% - 60px); font-size:var(--font-size-large); color:#fff; text-align:left; background-color:transparent;}
.top-search .search-wrap .top-search-input::placeholder{color:#FE7F7F;}
.top-search .search-wrap .topSearchBtn{width:20px; margin-right:var(--gap-40);}
.top-search .background-wrap{width:100%; height: inherit; top:0; position:absolute; z-index: 0; display:flex;}
.top-search .background-wrap > .background-square{width:15%; background: #F85050; height: 0; transition:all .5s;}



.background-lines {
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1; /* 다른 요소 뒤로 배치 */
}

.line-svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.line {
  fill: none;
  stroke: #F85050; /* 선 색상 */
  stroke-width: 0.1; /* 선 두께 */
  opacity: 0.5;
}

#line1 {
   animation: moveLine1 10s infinite linear;
	 animation-delay: 2s; 
}

#line2 {
  stroke: #7230D5; 
  animation: moveLine1 12s infinite linear;
  animation-delay: 2s; 
  opacity: 0.5;	
}


#line3 {
  stroke: #3083D5; 
  animation: moveLine1 8s infinite linear;
	animation-delay: 2s;
  opacity:0.5;	
}

#line4 {
  stroke: #83E9BD; 
  animation: moveLine1 11s infinite linear;
	animation-delay: 2s;
  opacity: 0.5;	
}


/*d: path("M 90,0 Q 55,00 68,40 T 50,80 T 10,100");*/
@keyframes moveLine1 {
  0% {
    d: path("M 100,0 Q 55,00 58,40 T 50,80 T 0,100");
  }

  50% {
    d: path("M 100,0 Q 45,10 57,35 T 45,70 T 0,100");
  }
 
  100% {
    d: path("M 100,0 Q 55,00 58,40 T 50,80 T 0,100");
  }
}



/*-------------------------------------------------------------------------------------------------
1. header & gnb
-------------------------------------------------------------------------------------------------*/



.header {
    width: 100%;
    position:fixed;
	top:0px;
	left:0px;
	overflow: hidden;
	z-index: 10;
	transition: all .5s;
}

.header.on{
	overflow: visible;
}

.header > .inner-wrap{
	display: flex;
    justify-content: space-between;
    align-items:center;
    padding: 0px var(--layout-side-margin);
	position:relative;
}

.logo2{display:none;}

.gnb-logo{padding:20px 0; max-width: 150px; display:flex; align-items: center;}
.gnb-logo > img{width:100%;}


.pc-gnb-menu .menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 80px; /* 텍스트 간격 */
}

.pc-gnb-menu .menu li {
  perspective: 1000px; /* 3D 원근감 */
}

.pc-gnb-menu a {
  text-decoration: none;
  display: inline-block;
  width: 120px;
  height: 30px;
  position: relative;
  color: inherit; /* 기본 텍스트 색상 유지 */
}

.pc-gnb-menu .cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d; /* 3D 변환 유지 */
  transition: transform 0.3s ease; /* 부드러운 회전 애니메이션 */
}

.pc-gnb-menu .cube:hover {
  transform: rotateX(90deg); /* 마우스 오버 시 위로 회전 */
}

.pc-gnb-menu .face {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-size-normal); /* 사용자 정의 변수 사용 */
  font-weight: bold;
  color: #fff;/* 부모의 텍스트 색상 유지 */
  backface-visibility: hidden; /* 뒷면 숨김 */
}

.pc-gnb-menu .front {
  transform: rotateX(0deg) translateZ(20px); /* 앞면 */
}

.pc-gnb-menu .top {
  transform: rotateX(-90deg) translateZ(20px); /* 윗면 */
	color:var(--color-point);
}




/*
.pc-gnb-menu > ul > li{
	text-align: center;
	padding:0 40px;
	transition:all 0.3s;
	color:#fff;
	font-size: var(--font-size-medium);
	height: var(--logo-height);
	font-weight: 500;
	position:relative;
	transition:all .3s;
	display:flex;
	align-items: center;
}


.pc-gnb-menu > ul > li:before{
	content:"";
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:0%;
	background-color:#605E69;
	transition: all .3s;
}

.pc-gnb-menu > ul > li > a{
	position:relative;
}

.pc-gnb-menu > ul > li > a:hover{
	color:var(--color-dark);
}
*/


.pc-gnb-menu .sub-menu {
	position:absolute;
	top:140px;
    left:50%;
	transform: translate(-50%,0);
    text-align: center;
	font-size:var(--font-size-normal);
	font-weight: 400;
	opacity:0;
}

.pc-gnb-menu .sub-menu li {
    margin-top: 20px;
	transition: all .3s;
}
.pc-gnb-menu .sub-menu .underline{
	width:0%;
	height: 1px;
	background-color:#fff;
	margin-top:5px;
	transition:all .3s;
}

.pc-gnb-menu .sub-menu li:hover .underline{
	width:100%;
	transition:all .3s;
}

.pc-gnb-menu .sub-menu li > a{
	 position:relative;
}

.pc-gnb-menu .sub-menu li > a:hover{
	 position:relative;
	 color:#fff;
}

.pc-gnb-menu .sub-menu li:first-child {
    margin-top: 0;
}


.gnb-right button{
    display: flex;
	align-items: center;
	overflow: hidden;
	width:20px;
	position:relative;
}

.gnb-right button:hover{width:105px;}
.gnb-right button > svg{width:20px; transition: fill .3s; position:absolute; left:0; z-index: 1;}
.gnb-right button > p{color:#fff; width:75px; display: block; height: 20px; text-transform: uppercase; margin-left:30px; transition: all .3s; opacity: 0; overflow: hidden;}
.gnb-right button:hover svg{fill:var(--color-point);}
.gnb-right button:hover p{color:var(--color-point); opacity: 1; }



.header-bg{
	position: absolute;
    left: 0%;
    top: 0px;
    width: 100%;
    height: 0px;
    background-color: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(25px);
    z-index: -1;
    opacity: 0;
	transition: all .3s;
}

.menuBtn {width:27px; cursor: pointer; display:flex; flex-direction: column; align-items: flex-end; display:none;}
.menuBtn > .stick{width:70%; height: 1px; background-color:var(--color-bright); margin-bottom:7px;}


.menuBtn > .stick:nth-child(2){width:100%;}
.menuBtn > .stick:last-child{margin-bottom:0;}

.header.on .menuBtn > .stick{background-color:var(--color-bright);}

.header.on .sub-menu{
	opacity:1;
}
.header.on .gnb-right li{
	color:var(--color-bright);
}

.header.on .header-bg{
	 height: var(--subTop-height);
	 opacity: 1;
	 transition: all .3s;
}

.header.on .pc-gnb-menu > ul > li{
	color:var(--color-bright);
	padding:0 60px;
}

.header.on .pc-gnb-menu > ul > li > a:hover{
	color:var(--color-bright);
}

/*
.pc-gnb-menu > ul > li:hover::before {
    height: var(--subTop-height);
}
*/


#div-dot{
	fill:var(--color-dark);
}


.header.on #div-dot{
	fill:var(--color-bright);
}

.header.on .logo1{display:none;}
.header.on .logo2{display:block;}

.header.white .pc-gnb-menu > ul > li{color:var(--color-bright);}
.header.white .pc-gnb-menu > ul > li > a:hover{color:var(--color-bright);}
.header.white .menuBtn > .stick{background-color:var(--color-bright);}
.header.white #div-dot{fill:var(--color-bright);}
.header.white .gnb-right a{color:var(--color-bright);}
.header.white .logo1{display:none;}
.header.white .logo2{display:block;}

.mobile-gnb{width:100%; height: 100vh; flex-direction: column; justify-content: space-between; position:fixed; z-index: 10; top:0; left:0; background-color:#fff; opacity:0; display:none;}

.mobile-gnb .mobile-gnb-top-wrap{
	padding:0 var(--layout-side-margin);
	display:flex;
	align-items: center;
	justify-content: flex-end;
	height: 50px;
}

.mobile-gnb .mobile-gnb-menu{width:100%; padding:var(--gap-40) 0; height: calc(100vh - 50px); background-color:#fff; overflow-y: scroll; align-content: center;}
.mobile-gnb .mobile-gnb-menu > ul{width:100%; height: auto;}
.mobile-gnb .mobile-gnb-menu > ul > li > a{display:flex; justify-content:center; align-items: center; font-size:var(--font-size-xxxxlarge); color:var(--color-dark); font-weight: 600; padding:0 var(--layout-side-margin); text-align: center; font-weight: 900;}
.mobile-gnb .menuToggleBtn > img{width:20px; transition: all .3s;}
.mobile-gnb .mobile-gnb-menu > ul > li.on .menuToggleBtn > img{transform:rotate(-45deg);}
.mobile-gnb .mobile-gnb-menu > ul > li{margin-bottom:var(--gap-80); text-align: center;}
.mobile-gnb .mobile-gnb-menu:last-child{margin-bottom:0;}
.mobile-gnb .mobile-gnb-menu ul > li.selected{color:var(--color-primary);}
.mobile-gnb .mobile-gnb-menu ul > li.selected > svg{opacity:1;}
.mobile-gnb .mobile-gnb-menu .sub-menu{width:100%; height: 0; background-color:var(--color-light-gray); margin-top:var(--gap-20); overflow: hidden;}
.mobile-gnb .mobile-gnb-menu .sub-menu > li{padding:15px; box-sizing: border-box; font-size:var(--font-size-medium); border-bottom:1px solid var(--color-border); color:var(--color-font)}
.mobile-gnb .mobile-gnb-menu .sub-menu > li:last-child{border-botton:none;}

.mobile-gnb-bottom-wrap .membership-wrap{display:flex; align-items: center;}
.mobile-gnb-bottom-wrap .membership-wrap > li {font-size:var(--font-size-normal); display:flex; align-items: center;}
.mobile-gnb-bottom-wrap .membership-wrap > .dotli{margin:0 var(--gap-10);}



.mobile-gnb-bottom-wrap{
	padding:var(--gap-20) var(--layout-side-margin);
	display:flex;
	align-items: center;
	justify-content:space-between;
	min-height: 50px;
}


@media only screen and (max-width:950px){
	.menuBtn{display:flex;}
	.pc-gnb-menu{display:none;}
	.gnb-right{display:none;}
	.gnb-logo > img{width:100px;}
}


/*-------------------------------------------------------------------------------------------------
2. subtop
-------------------------------------------------------------------------------------------------*/
.subtop-wrap{width:100%; height: 100vh; display:flex; align-items: center; justify-content: center; box-sizing: border-box; padding:var(--gap-140) 0;}
.subtop-wrap > .inner-wrap{display:inline-block; width:auto; padding:0 var(--layout-flax-margin); height: auto; position:relative; box-sizing: border-box; text-align: center; perspective: 1000px; transform: translateY(-30%);}
.subtop-wrap .txt-ani-wrap{margin:0 auto; display:inline-block;}
.subtop-wrap h1{font-size:var(--font-size-huge); color:#fff; font-weight: 900; text-align: center;}
.subtop-wrap > .inner-wrap > img{position:absolute; left:50%; top:0; transform: translate3d(50%,0,0); width:100%;}