body{

margin:0;
font-family:EsaManru;
color:white;

min-height:100vh;
overflow-x:hidden;
overflow-y:auto;

display:flex;
justify-content:center;
background:black;


}

/* 배경 */

.background{

position:fixed;
width:110%;
height:110%;

background:url(../images/background.jpg) center no-repeat;
background-size:cover;

animation:ringMove 40s linear infinite;

}

@keyframes ringMove{

0%{transform:scale(1) rotate(0deg);}
50%{transform:scale(1.06) rotate(3deg);}
100%{transform:scale(1) rotate(0deg);}

}

/* 파티클 캔버스 */

#particles{

position:fixed;
width:100%;
height:100%;
z-index:1;

}

/* 컨텐츠 */

.container{

margin:50px 0 100px 0;
position:relative;
z-index:2;

text-align:center;
max-width:900px;
width:90%;

}



/* 로고 */

.logo{

width:420px;

animation:logoFloat 5s ease-in-out infinite;

filter:drop-shadow(0 0 20px #00f0ff);

}

@keyframes logoFloat{

0%{transform:translateY(0)}
50%{transform:translateY(-15px)}
100%{transform:translateY(0)}

}


/* 타이틀 */

.title{

font-size:70px; margin:20px 0 20px 0;

animation:titleGlow 2s infinite alternate;

}

@keyframes titleGlow{

from{

text-shadow:
0 0 10px #00f0ff,
0 0 20px #00f0ff;

}

to{

text-shadow:
0 0 20px #00f0ff,
0 0 60px #00f0ff;

}

}


.subtitle {font-size:20px; margin:0px 0 10px 0;}




@media screen and (max-width:800px) {
    .logo{width:300px;}  
	.title{font-size:30px;}  	
	.subtitle {font-size:14px; margin:0px 0 20px 0;}	
}

/* 도메인 */

.domain-bg{

background:url(../images/bg_domain.png) center no-repeat;
background-size:contain;

width:400px;
height:130px;

display:flex;
align-items:center;
justify-content:center;

margin:auto;

}

.domain-text{

font-size:50px;

text-shadow:
0 0 10px #00f0ff,
0 0 40px #00f0ff;

}


@media screen and (max-width:800px) {
    .domain-bg{width:300px;}  
	.domain-text{font-size:35px;}  	
}


/* 버튼 */

.domain-links{

margin:-10px 0 40px 0;

display:flex;
gap:4px;
justify-content:center;
flex-wrap:wrap;

}

.btn-domain{

position:relative;

padding:0;

width:280px;
height:74px;
line-height:74px;

font-size:26px;
font-weight:bold;

background:linear-gradient(to right, #0d2144 0%, #224582 25%, #05c1fd 50%, #224582 75%, #0d2144 100%);

border-radius:10px;

text-decoration:none;
color:white;

overflow:hidden;

transition:0.3s;

}

.btn-domain:hover{

transform:scale(1.12);

box-shadow:
0 0 20px #00f0ff,
0 0 60px #00f0ff,
0 0 120px #00f0ff;

}

@media screen and (max-width:800px) {
    .btn-domain{width:300px; height:60px; line-height:60px; font-size:24px;}   	
}


/* 네온 테두리 */

.btn-domain::after{

content:'';

position:absolute;

inset:-2px;

border-radius:12px;

background:linear-gradient(to right, #020b1a 0%, #0d2144 25%, #87e2ff 50%, #0d2144 75%, #020b1a 100%);

z-index:-1;

animation:borderMove 3s linear infinite;



}

@keyframes borderMove{

0%{background-position:0%}
100%{background-position:200%}

}

/* 레이저 */

.btn-domain::before{

content:'';

position:absolute;

top:0;
left:-120%;

width:120%;
height:100%;



background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.9),
transparent
);

transition:0.7s;

}

.btn-domain:hover::before{

left:120%;

}

.btn-domain:hover{
color:#ffea00;
transform:scale(1.12);

box-shadow:

0 0 10px #00f0ff,
0 0 40px #00f0ff,
0 0 80px #00f0ff,
0 0 140px #00f0ff;

}

/* SNS */

.sns-links{

margin-top:20px;

display:flex;
gap:20px;
justify-content:center;
flex-wrap:wrap;

}

.sns-btn{
justify-content:center;
display:flex;
align-items:center;
gap:10px;


width:340px;
height:70px;
line-height:70px;
font-size:18px;


background:rgba(255,255,255,0.08);


border-radius:10px;

text-decoration:none;
color:white;

backdrop-filter:blur(6px);

transition:all .3s;

}

@media screen and (max-width:800px) {
    .sns-btn{width:300px; height:50px; line-height:50px; font-size:16px;}   	
}

.sns-btn:hover{

background:rgba(255,255,255,0.2);

transform:translateY(-4px);

box-shadow:0 10px 20px rgba(0,0,0,0.4);

}