:root{
  --blue: #2f80ed;
  --green: #72dd72;
  --bg: #eee;
  --white: #ffffff;
  --white-30: #ffffff4d; /* rgba(255,255,255,.3) */
  --white-18: #ffffff2e; /* rgba(255,255,255,.18) */
  --white-16: #ffffff29; /* rgba(255,255,255,.16) */
  --white-28: #ffffff47; /* rgba(255,255,255,.28) */
  --dark-40: #4d4d4d66; /* rgba(77,77,77,.4) */
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  overflow:hidden;
  font-family:"Pretendard",sans-serif;
  background:var(--bg);
}

.intro_wrap{
  position:relative;
  width:100vw;
  height:100vh;
  overflow:hidden;
  background:#fff;
}

/* 패널 */
.panel{
  position:absolute;
  top:0;
  width:62%;
  height:100%;
  overflow:hidden;
}

.left_panel{
  left:0;
  background:var(--blue);
  opacity:.92;
  border-radius:0 100% 0 0;
  clip-path:inset(0 round 0 100% 0 0);
  z-index:2;
}

.right_panel{
  right:0;
  background:var(--green);
  opacity:.92;
  border-radius:0 0 0 100%;
  clip-path:inset(0 round 0 0 0 100%);
  z-index:2;
}

/* 로고 영역 */
.logo_box{
  position:absolute;
  top:50%;
  z-index:10;
  width:320px;

  display:flex;
  flex-direction:column;
  align-items:center;

  text-align:center;
}

.logo_box_left{
  left:50%;
}

.logo_box_right{
  right:50%;
}

.logo_box img{
  width:312px;
  object-fit:contain;
}

/* 텍스트 */
.intro_text{
  margin-top:28px;
}

.intro_text p{
  color:var(--white);
  font-size:28px;
  line-height:1.4;
}

/* 바로가기 버튼 */
.shortcut_btn{
  display:flex;
  justify-content:center;
  align-items:center;

  width:333px;
  height:60px;
  margin-top:48px;

  border-radius:8px;
  border:1px solid var(--white-30);
  background:var(--white-18);

  color:var(--white);
  text-decoration:none;
  font-size:22px;
  font-weight:600;

  backdrop-filter:blur(12px);
  transition: transform .3s ease;
}

.shortcut_btn:hover {
  transform: translateY(-6px);
}

.shortcut_btn:focus{
  outline:2px solid #8d8d8d;
}

/* ==========================
   Intro Motion
========================== */

.left_panel{
  animation:leftIntro 1.1s cubic-bezier(.22,.61,.36,1) forwards;
}

.right_panel{
  animation:rightIntro 1.1s cubic-bezier(.22,.61,.36,1) forwards;
}

.logo_box_left{
  animation:leftLogoIntro 1.3s ease forwards;
}

.logo_box_right{
  animation:rightLogoIntro 1.3s ease forwards;
}

@keyframes leftIntro{
  from{
    transform:translateX(-100%);
  }
  to{
    transform:translateX(0);
  }
}

@keyframes rightIntro{
  from{
    transform:translateX(100%);
  }
  to{
    transform:translateX(0);
  }
}

@keyframes leftLogoIntro{
  0%{
    opacity:0;
    transform:translate(-60%, -50%) translateX(-80px);
  }

  100%{
    opacity:1;
    transform:translate(-60%, -50%);
  }
}

@keyframes rightLogoIntro{
  0%{
    opacity:0;
    transform:translate(60%, -50%) translateX(80px);
  }

  100%{
    opacity:1;
    transform:translate(60%, -50%);
  }
}

.logo_box_left,
.logo_box_right{
  opacity:0;
  animation-delay:.5s;
}

/* ==========================
   Tablet
========================== */
@media (max-width:1024px){

  .logo_box{
    width:280px;
  }

  .logo_box img{
    width:150px;
  }

  .intro_text{
    margin-top:22px;
  }

  .intro_text p{
    font-size:16px;
  }

  .shortcut_btn{
    width:170px;
    height:48px;
    font-size:16px;
    margin-top:24px;
  }
}


/* ==========================
   Mobile
========================== */
@media (max-width:768px){

  /* 패널 세로 구조 */
  .panel{
    width:100%;
    height:62%;
  }

  .left_panel{
    top:0;
    left:0;

    border-radius:0 0 100% 0;
    clip-path:inset(0 round 0 0 100% 0);
  }

  .right_panel{
    top:auto;
    bottom:0;
    right:0;

    border-radius:100% 0 0 0;
    clip-path:inset(0 round 100% 0 0 0);
  }

  /* 로고 영역 */
  .logo_box{
    width:260px;
  }

  .logo_box img{
    width:130px;
  }

  .intro_text{
    margin-top:18px;
  }

  .intro_text p{
    font-size:15px;
    line-height:1.5;
  }

  .shortcut_btn{
    width:160px;
    height:46px;
    margin-top:22px;
    font-size:15px;
  }

    @keyframes leftLogoIntro{
    0%{
      opacity:0;
      transform:translate(-60%, -50%) translateY(-80px);
    }

    100%{
      opacity:1;
      transform:translate(-60%, -75%);
    }
  }

  @keyframes rightLogoIntro{
    0%{
      opacity:0;
      transform:translate(60%, -50%) translateY(80px);
    }

    100%{
      opacity:1;
      transform:translate(60%, -25%);
    }
  }
}


/* ==========================
   Small Mobile
========================== */
@media (max-width:480px){

  .logo_box{
    width:230px;
  }

  .logo_box img{
    width:110px;
  }

  .intro_text p{
    font-size:14px;
  }

  .shortcut_btn{
    width:145px;
    height:42px;
    font-size:14px;
  }
}