*{
margin:0;
padding:0;
line-height:170%;
}
html{
font-size: 18px;
font-family: 'Source Sans Pro', sans-serif;
}
@media(max-width: 767px){
html{
font-size: 12px;
}
}
html,body{
width: 100%;
-ms-overflow-x: hidden;
overflow-x: hidden;
}
#main{
background: #fff;
color: #222;   
}
#section01{
position: relative;
z-index: 2;
padding: 45vh 0;
}
#section01 .content-inner{
max-width: 600px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.bg-section{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
z-index: 1;
background-repeat: no-repeat;
background-position: center center; 
background-image: url('img/404.svg');
background-size: 70%;   
}
.main-illustration{
position: absolute;
z-index: 10;
width: 400px;
background-repeat: no-repeat;
}
#main-illustration-1{
left: 0;
top: 5%;
height:400px;
background-position: top left -150px; 
background-image: url('img/monochrome_illustration_1.png'); 
}
#main-illustration-2{
right: 0;
top: 0;
height:400px;
background-position: top right -20px; 
background-image: url('img/monochrome_illustration_2.png'); 
}
#main-illustration-3{
left: 0;
bottom: 5%;
height:450px;
background-position: top left -50px; 
background-image: url('img/monochrome_illustration_3.png'); 
}
#main-illustration-4{
right: 0;
bottom: 5%;
height:500px;
background-position: top right -220px; 
background-image: url('img/monochrome_illustration_4.png'); 
}
.main-title{
width: 80%;
margin:10px auto;
text-align:center;
display: -webkit-flex;
display: flex;
justify-content: space-between;
}
.main-title>p{
font-size:40px;
font-weight:bold;
}
.main-ctach>p{
width: 100%;
margin:10px auto;
text-align:center;
font-size:22px;
font-weight:bold;
}

#section02{
background: #fff;
position: relative;
z-index: 4;
padding:20vh 0;
}
#section02 .content-inner{
width:1010px;
margin: 0 auto;
z-index: 2;
}
#section02 .col-wrap{
position: relative;
height:700px;
}
#section02 .col-1{
position: relative;
width:600px;
top:10%;
left:0;
z-index:500;
}
#section02 .col-2{
position: absolute;
width:700px;
height:600px;
top:0;
right:0;
z-index:100;
}
#section02 .col-img-1{
position: absolute;
width:250px;
top:0;
left:35%;
z-index:100;
}
#section02 .col-img-2{
position: absolute;
width:250px;
top:65%;
left:25%;
z-index:150;
}
#section02 .col-img-3{
position: absolute;
width:180px;
top:45%;
right:0%;
z-index:200;
}
#section02 .col-inner{
text-align:left;
}
#section02 .col-inner>h2{
font-size:50px;
margin-bottom:20px;
}
#section02 .col-inner>p{
font-size:22px;
margin-bottom:20px;
}

#section03{
position: relative;
z-index: 4;
}
.bg-section03{
padding:20vh 0;
background-color: #000;
background-repeat: no-repeat;
background-position: center center; 
background-image: url('img/contact.svg');
background-size:cover;   
}
#section03 .content-inner{
width:800px;
margin: 0 auto;
}
#section03 .col-inner{
text-align:left;
color:#fff;
}
#section03 .col-inner>h2{
font-size:50px;
margin-bottom:20px;
}
#section03 .col-inner>p{
font-size:22px;
margin-bottom:20px;
}

#footer{
padding:20vh 0;
}
#footer .footer-inner{
width:100%;
margin: 0 auto;
text-align:center;
}
#foota .footer-inner>p{
color:#222;
font-size:14px;
}


@media(max-width: 767px){
#section01 .content-inner{
max-width: 100%;
}
.bg-section{
background-size: 90%;   
}
.main-illustration{
width: 100%;
}
#main-illustration-1{
display:none;
}
#main-illustration-2{
display:none; 
}
#main-illustration-3{
display:none;
}
#main-illustration-4{
display:none;
}
.main-title>p{
font-size:30px;
}
.main-ctach>p{
font-size:22px;
}        
#section02{
padding: 40px 0;
}
#section02 .content-inner{
width:100%;
margin:0 auto;
text-align:center;
}
#section02 .col-wrap{
height:auto;
width:100%;
margin:0 auto;
text-align:center;
}
#section02 .col-1{
position: relative;
width:100%;
top:0%;
left:0;
}
#section02 .col-2{
position: relative;
width:90%;
height:auto;
padding-bottom:300px;
}
#section02 .col-img-1{
position: absolute;
width:100px;
top:0;
left:-10%;
}
#section02 .col-img-2{
position: absolute;
top:60%;
}
#section02 .col-img-3{
right:-10%;
}

#section02 .col-img-1 img{
width:200px;
height:auto;
}
#section02 .col-img-3 img{
width:150px;
height:auto;
}
#section02 .col-inner{
width:94%;
margin:0 auto;
text-align:left;
}
#section02 .col-inner>h2{
font-size:24px;
}
#section02 .col-inner>p{
font-size:18px;
}
.bg-section03{
background-size:cover;   
}
#section03 .content-inner{
width:70%;
}
#section03 .col-inner>h2{
font-size:24px;
}
#section03 .col-inner>p{
font-size:18px;
}
#foota .footer-inner>p{
font-size:12px;
}
}