@charset "utf-8";
/* CSS Document */






#top-box{
width: 75%;
height: 550px;
box-sizing: border-box;
background-image: url(../img/index/main.jpg);
position: relative;
background-size: cover;
background-position: bottom;
margin-left: 3%;
}

#top-main{
position: absolute;
top: 12%;
right: -25%;
background-color: rgba(50,50,50,1);
color: #EEEEEE;
padding: 65px 8%;
box-sizing: border-box;
animation: mainFadeIn 2s ease 0s 1 normal;
-webkit-animation: mainFadeIn 2s ease 0s 1 normal;
}

@keyframes mainFadeIn {
0% {
opacity: 0;
right: 0;
}
100% {
opacity: 1;
}
}

@-webkit-keyframes mainFadeIn {
0% {
opacity: 0;
right: 0;
}
100% {
opacity: 1;
}
}

#top-main p{
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 50px;
letter-spacing: 10px;
line-height: 1.6;
margin-bottom: 15px;
}

#top-text{
font-size: 16px;
font-weight: bold;
}




#intro-box{
box-sizing: border-box;
padding: 80px 0;
}

#intro-block{
padding: 0 8%;
box-sizing: border-box;
line-height: 1.8;
}

h1{
font-size: 16px;
margin-bottom: 10px;
line-height: 2;
}









#service-nav-box{
padding: 80px 3% 30px;
}

.service-nav{
float: left;
width: 29.3%;
text-align: center;
margin: 0 2% 40px;
border: 2px solid #888888;
box-sizing: border-box;
padding: 15px 3%;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 20px;
letter-spacing: 5px;
line-height: 1.6;
}






/*tablet*/
@media(min-width: 768px) and (max-width: 991px){










}

@media(max-width: 767px){



#top-box{
width: 80%;
height: 500px;
}

#top-main{
top: 20%;
right: -20%;
padding: 60px 8%;
box-sizing: border-box;
}

#top-main p{
font-size: 28px;
}

#top-text{
font-size: 12px;
}




h1{
font-size: 15px;
}





.service-nav{
width: 46%;
margin: 0 2% 20px;
font-size: 15px;
letter-spacing: 3px;
padding: 20px 3%;
}


}