/*인트로*/
#wrap {max-width:600px;margin:0 auto;overflow:hidden;position:relative;}
.intro{background:#000 url(/images/default/main/intro-bg.png)no-repeat center center;height:100vh;display:flex;justify-content:center;align-items:center;text-align:center;}
.intro .intro-txt{font-size:20px;color:#fff;margin:20px 0 80px }

.intro .start-btn {display:flex;width:100%;height:60px;background:#3182F6;color:#fff;border-radius:15px;justify-content:center;align-items:center;font-size:18px;}

.intro-con{padding:0 20px;width:100%;}
.intro-con .join{margin-top:90px;font-size:16px;font-weight:bold;color:#fff;display:inline-block;position:relative;display:flex;justify-content:center;align-items:center;}
.intro-con .join b{border-bottom:1px solid #fff;}

.intro-con .join:after{content:'';display:block;width:5px;height:10px;background:url(/images/default/wind/arrow-w.svg)no-repeat center center;background-size:cover;margin-left:6px;}

.intro-con .motion {position:relative;width:159px;margin:0 auto;}
.intro-con .motion span{width:9px;height:9px;background:#3182F6;border-radius:50%;display:inline-block;position:absolute;left:60.5px;top:0; animation: bounce 1s infinite;}


  @keyframes bounce {
    0% {
      top: 0;
    }
    50% {
      top: -8px;
    }

    100% {
      top: 0;
    }
  }

/*인트로 모션*/
.intro-wrap {    background: rgb(62, 104, 255) url(/images/default/main/intro-bg.png)no-repeat center center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;width:600px;left:50%;transform:translateX(-50%);
	overflow:hidden;
}


/* one 클래스의 기본 스타일과 애니메이션 설정 */
.intro-wrap .one {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000; /* 배경색 설정 (원하는 색으로 변경 가능) */
  clip-path: circle(0% at 50% 50%); /* 초기 상태: 원의 크기 0% */
  transition: clip-path 1s ease-out; /* 애니메이션 효과 */
  z-index: 2;
}

/* 애니메이션을 통해 원의 크기가 커지는 효과 */
.intro-wrap.expand .one {
  clip-path: circle(100% at 50% 50%); /* 최종 상태: 원이 전체 화면을 커버 */
}



@media (max-width:600px){
.intro-wrap {max-width:100%;padding:0 1rem;}
}



.join-btn{background:#267CF8;}
.join-btn .icon-bx {background:#1C6CE0}
.join-btn .left p{color:rgba(255,255,255,0.7)}


.index-btn {width:100%;padding:30px  28px;display:flex;border-radius:15px;    align-items: center;}

.index-btn .icon-bx {width:55px;height:55px;border-radius:8px;display:flex;justify-content:center;align-items:center;
}
.index-btn .left{width:calc(100% - 55px);font-size:18px;text-align:left;}
.index-btn .left b {display:block;font-size:22px;font-weight:700;color:#fff;margin-top:10px;}

.login-btn{background:#000;border:1px solid #434343;margin-top:25px;}
.login-btn .left p{color:#888888;}
.login-btn .icon-bx {background:#282828;}