header { position: relative; text-align: center; padding: 2rem 0;}
header:before { content: ''; position: absolute; height: 20vh; width: 100%; top: 0; left: 0; background: #C0DDDD; z-index: 1;} 
header a { position: relative; z-index: 2;}
header a img { width: 12rem;}

nav { position: fixed; bottom: 0; left: 0; z-index: 9999; width: 100%; padding: 1rem 0; background:#F5F7F7;}
nav ul { display: flex; justify-content: space-around;}
nav ul li { width: 22%; text-align: center;}
nav ul li a { font-size: 1.4rem; border-radius: .5rem; padding: .5rem; padding-top: 3.6rem; width: 100%; display: block;}
nav ul li:nth-child(1) a { background: url(../img/More.png) no-repeat center 5%/ 3.2rem;}
nav ul li:nth-child(2) a { background: url(../img/More-1.png) no-repeat center 5%/ 3.2rem;}
nav ul li:nth-child(3) a { background: url(../img/More-3.png) no-repeat center 5%/ 3.2rem;}
nav ul li:nth-child(4) a { background: url(../img/More-2.png) no-repeat center 5%/ 3.2rem;}
nav ul li.on a {color: #077D7D; font-weight: 600;}
nav ul li.on:nth-child(1) a { background: url(../img/More-4.png) #fff no-repeat center 5%/ 3.2rem;}
nav ul li.on:nth-child(2) a { background: url(../img/More-5.png) #fff no-repeat center 5%/ 3.2rem;}
nav ul li.on:nth-child(3) a { background: url(../img/More-7.png) #fff no-repeat center 5%/ 3.2rem;}
nav ul li.on:nth-child(4) a { background: url(../img/More-6.png) #fff no-repeat center 5%/ 3.2rem;}