@charset "utf-8";
body {
  font-family: var(--primary-font-en);
  overflow: hidden;
  color: var(--color-w);
  position: relative;
}

/* 
z-index 모든 페이지에서 최상위에 오도록 
단위: 9000, 9990, 9991, 9999, 99999
*/

/*
  공통 적용
  transition: 0.2s ease-in-out;
*/


/***** header *****/
/*** frame effect ***/
.frame-effect {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  overflow: hidden;
  transition: opacity 0.4s ease-in-out;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-100%);

  z-index: 9000;
}
.frame-effect.visible {
  opacity: 1;
  transform: translateX(0);
}

/* The overlay background color and center cutout effect */
.frame-effect::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-b);
  z-index: 9990;
}

.frame-effect::after {
  content: '';
  position: absolute;
  top: 10%;
  left: 30%;
  width: 50%;
  height: 80%;
  
  border-radius: 10px;
  z-index: 9991;
}

/* 비디오 스타일링 */
.frame-effect video {
  position: absolute;
  top: 10%;
  left: 30%;
  width: 40%;
  height: 80%;
  object-fit: cover;
  border-radius: 10px;
  z-index: 9990;
}

.frame-effect.visible {
  opacity: 1;
  transform: translateX(0);
}

/*** nav ***/
.allPage-header {
  width: 100%;
  height: 50px;
  padding: 25px 70px 0 70px;
  font-size: 15px;
  position: fixed;

  z-index: 99990;
}

.allPage-header .pc-main-nav .menu-wrapper {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;

}

/*** menu ***/
.allPage-header .pc-main-nav .menu-wrapper .menu {
  width: 64px;
  height: 26px;

  background-color: var(--color-lg);
  border: rgba(128, 128, 128, 0.1) solid 1px;
  border-radius: 30px;
  text-transform: capitalize;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 999999;

  perspective: 1000px;

  transition: 0.2s ease-in-out;
}

.allPage-header .pc-main-nav .menu-wrapper .menu a {
  color: var(--color-w);
  position: relative;
  
  display: inline-block;
  text-decoration: none;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  transition: 0.6s ease-in-out;
}

.allPage-header .pc-main-nav .menu-wrapper .menu a.flipped {
  transform: rotateX(180deg);
}

.allPage-header .pc-main-nav .menu-wrapper .menu a .front,
.allPage-header .pc-main-nav .menu-wrapper .menu a .back {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
}

.allPage-header .pc-main-nav .menu-wrapper .menu a .back {
  transform: rotateX(180deg);
}

.allPage-header .pc-main-nav .menu-wrapper .menu a::before,
.allPage-header .pc-main-nav .menu-wrapper .menu a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.allPage-header .pc-main-nav .menu-wrapper .menu a::before {
  background-color: transparent;
  transition: background-color 0.3s ease-in-out;
  z-index: 9000;
}

.allPage-header .pc-main-nav .menu-wrapper .menu a::after {
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
}

/* hover */
.allPage-header .pc-main-nav .menu-wrapper .menu:hover {
  border: #fff 1px solid;
  background-color: transparent;
}

/***** logo *****/
.allPage-header .pc-main-nav .menu-wrapper .menu-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.allPage-header .pc-main-nav .menu-wrapper .menu-logo img {
  height: 22px;
}

/***** right-top *****/
.allPage-header .pc-main-nav .menu-wrapper .menu-item {
  display: flex;
  align-items: center;
}

/*** GitHub ***/
.allPage-header .pc-main-nav .menu-wrapper .menu-item1 {
  background-color: var(--color-lg);
  border: rgba(128, 128, 128, 0.1) solid 1px;
  border-radius: 50px;

  transition: 0.2s ease-in-out;
}

.allPage-header .pc-main-nav .menu-wrapper .menu-item1 a {
  width: 70px;
  height: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.allPage-header .pc-main-nav .menu-wrapper .menu-item1:hover {
  border: #fff 1px solid;
  background-color: transparent;
}

/*** Mail ***/
.allPage-header .pc-main-nav .menu-wrapper .menu-item2 {
  background-color: var(--color-lg);
  border: rgba(128, 128, 128, 0.1) solid 1px;
  border-radius: 50px;
  margin-left: 5px;

  transition: 0.2s ease-in-out;
}

.allPage-header .pc-main-nav .menu-wrapper .menu-item2:hover {
  border: #fff 1px solid;
  background-color: transparent;
}

.allPage-header .pc-main-nav .menu-wrapper .menu-item2 a {
  width: 26px;
  height: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.allPage-header .pc-main-nav .menu-wrapper .menu-item2 img {
  width: 16px;
}

/*** hidden-toggle ***/
/***** menu-main *****/
.menu-main {
  height: 100vh;
  padding: 0 70px;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
  opacity: 0;
  transform: translateX(-100%);
}
  
.menu-main.visible {
  opacity: 1;
  transform: translateX(0);
}

/*** mouse-hover-effect ***/
.hover-underline-menu li:nth-of-type(2) {
  font-family: var(--primary-font-ko);
}

.hover-underline-menu li a {
  color: var(--color-w);
  text-decoration: none;
  line-height: 2;
  position: relative;
}

.hover-underline-menu li a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  display: block;
  margin-top: -5px;
  right: 0;
  background: var(--color-w);
  transition: width 0.4s ease-in-out, background-color 0.4s ease-in-out;
}

.hover-underline-menu li:hover a::after {
  width: 100%;
  left: 0;
  background: var(--color-w);
}

.gray-text {
  color: var(--color-lg) !important;
}

.menu-main .menu-wrapper .menu-inner1 ul {
  font-size: 20px;
  font-weight: var(--weight-md);
  line-height: 1.8;
  letter-spacing: 0.5px;
  margin-bottom: 35px;
  display: inline-block;
  position: relative;
  z-index: 99999;
}

/*** Works ***/
.menu-main .menu-wrapper .menu-inner2 li {
  font-size: 15px;
  color: var(--color-w);
  display: flex;
  align-items: center;

  transition: 0.2s ease-in-out;
  position: relative;
  z-index: 99999;
}

.menu-main .menu-wrapper .menu-inner2 ul li:not(:first-child) {
  max-width: fit-content;
  align-self: flex-start;
  height: 35px;
  margin-top: 10px;
  padding: 5px 18px;
  text-align: left;
  letter-spacing: 0.5px;
  border: rgba(128, 128, 128, 0.1) solid 1px;
  background-color: var(--color-lg);
  border-radius: 30px;
}

.menu-main .menu-wrapper .menu-inner2 ul li:hover:not(:first-child) {
  border: #fff solid 1px;
  background-color: transparent;
}

/***** menu-side *****/
.menu-side {
  width: 230px;
  margin: 0 70px;
  position: fixed;
  z-index: 99999;

  top: 30%;
  right: 0%;
  display: flex;
  align-items: center;
  font-size: 14px;
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
  opacity: 0;
  transform: translateX(100%); /* 화면 밖에서 시작 */
}

.menu-side.visible {
  opacity: 1;
  transform: translateX(0); /* 화면 안으로 이동 */
}

/* 사이드 내부 스타일 */
.menu-side .side-wrapper .side-inner1 {
  padding: 15px 20px 20px;
  background-color: var(--color-lg);
  border-radius: 10px;
}

.menu-side .side-wrapper .side-inner1 img {
  width: 100%;
  height: 100%;
  margin-top: 10px;

  filter: blur(3px);
  transition: 0.3s ease-in-out; 
}
.menu-side .side-wrapper .side-inner1 img:hover {
  filter: blur(0);
}

.menu-side .side-wrapper .side-inner1 h1 {
  font-weight: 550;
}

.menu-side .side-wrapper .side-inner2 {
  margin-top: 10px;
  padding: 15px 20px 20px;
  background-color: var(--color-lg);
  border-radius: 10px;
}

.menu-side .side-wrapper .side-inner2 p {
  color: var(--color-g);
  margin-top: 5px;
}

/* 사이드 내 이미지 스타일 */
.menu-side img {
  height: 60vh;
  object-fit: contain;
}