*, html{margin: 0; padding: 0; box-sizing: border-box;}
a{text-decoration: none;}
/* ********************************************** */
body{overflow: hidden;}

.hero{
width: 100vw;
height: 100vh;
background-image: linear-gradient(65deg, rgba(0,0,0,1) 35%, rgb(11, 56, 129) 65%, rgb(89, 12, 117) 100%);
padding: 0 0 40px;
}

.container{
width: 1600px;
max-width: 90%;
margin: 0 auto;
color: #fff;
}

.hero header{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
/* border: 1px solid red; */
padding: 20px 0;
}

.hero header .logo{
width: 80px;
height: auto;
/* border: 1px solid red; */
line-height: 120px;
}

.logo img{width: 100%; object-fit: cover;}

.nav_box{}
.nav_box ul{list-style: none;}
.nav_box ul li{display: inline-block;}

/* 접속하기는 버튼이라서 빼고 주기 */
.nav_box ul li:not(:last-child) a{
font-size: 18px;
font-weight: 600;
color: #fff;
padding: 0 20px;
transition: 0.3s color;
position: relative;
}

.nav_box ul li:not(:last-child) a:hover{
color: #dca1ff;
text-shadow: 0 0 10px #ebd2ff;
}

.nav_box ul li a.active{color: #ac47ff;}

.nav_box ul li a.active::after{
position: absolute;
content: '';
top: -4px;
right: 8px;

width: 10px;
height: 10px;
background: #51ff00;
border-radius: 50%;
}

.nav_box ul li:last-child a{
margin-left: 50px;
color: #3c0074;
font-weight: 500;
}

.nav_box ul li a.btn{
padding: 10px 20px;
background: #dca1ff;
border-radius: 30px;
transition: 0.3s box-shadow;
}

.nav_box ul li a.btn:hover{
background: #ac47ff;
box-shadow: 0 0 10px #ebd2ff;
}

/* ********************************************** */
.mid{width: 100%; display: flex; margin-top: 5vh;}
.details{width: 40%; height: 600px;}
.bg{width: 60%; padding-top: 56.25%;
background: url(../images/character.png) no-repeat;
background-position: top right; background-size: 100%;}

.title{
width: 80%;
height: 250px;
/* border: 1px solid red; */
margin-bottom: 6vh;
line-height: 70px;
}

.title h2{font-size: 60px;}
.title span{color: #ac47ff; font-style: italic;}

.detail_desc{}
.detail_desc h3{color: #7b8fff; padding: 2px 0;}
.detail_desc h4{padding: 2px 0;}
.detail_desc h5{padding: 2px 0;}

.action{margin-top: 6vh;}

.action a.btn{
padding: 12px 20px;
background: #4b66ff;
border-radius: 30px;
color: #fff;
margin-right: 10px;
font-weight: 500;
transition: 0.3s background;
}

.action a.btn:hover{
background: #bcc6ff;
box-shadow: 0 0 10px #bcc6ff;
color: #4b66ff;
font-weight: 600;
}

.action a.btn_borderd{
padding: 12px 20px;
border: 2px solid #4b66ff;
border-radius: 30px;
color: #7b8fff;
font-weight: 500;
}

.action a.btn_borderd:hover{
border: 2px solid #bcc6ff;
color: #bcc6ff;
box-shadow: 0 0 10px #bcc6ff;
}
/* ********************************************** */
.hero .connect{
width: 444px;
height: 40px;
/* border: 1px solid red; */
display: flex;
justify-content: space-between;
align-items: center;

position: absolute;
bottom: 50px;
margin-top: 60px;
}

.hero .connect p{
font-size: 17px;
margin-bottom: 1vh;
position: relative;
}

.hero .connect p::after{
position: absolute;
content: '';
top: 12px;
left: 218px;

width: 40px;
height: 4px;
background: #7b8fff;
}

.links{}
.links a{color: #fff;}
.links a i{font-size: 17px; padding: 0 8px;}
.links a:hover{
color: #ac47ff;
text-shadow: 0 0 10px #ebd2ff;
}