#top-nav {
  height: 68px;
  background: #d8e9b8;
}

#top-logo {
  margin: auto;
  display: flex;
/*  height: 90px;*/
}

#top-logo img {width: 170px;}

#top-menu {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: xx-large;
}

#top-sub-menu {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#dep-logout {
  margin: 0px -30px 0px 0px;
  width: 196px;
  height: 40px;
  line-height: 70px;
  border-bottom: 68px solid #d9e588;
  border-left: 30px solid transparent;
  font-weight: bold;
}
/*
#top-group, #top-depart-client {
  margin-left: auto;
  margin-right: auto;
}
*/
#top-depart {
  margin-left: calc(((100vw - 100%) / 2) * -1);
  margin-right: calc(((100vw - 100%) / 2) * -1);
  padding: 0 calc((100vw - 100%) / 2);
  clear: both;
}

.top-group {
  position:absolute;
/*  margin-left: calc(((100vw - 100%) / 1) * 0);
    margin-right: calc(((100vw - 100%) / 1) * -1);
    padding: 0 calc((100vw - 100%) / 2);*/
    clear: both;
}

.top-client {
  position:relative;
/*  margin-left: calc(((100vw - 100%) / 1) * 0);
    margin-right: calc(((100vw - 100%) / 1) * -1);
    padding: 0 calc((100vw - 100%) / 2);*/
    clear: both;
}

.circle1{
  width: 16%;
  border-radius: 50%;
  background-color: #d8e9b8;
  height: 0;
  padding-top: 16%;
  margin: 4%;
  float:left;
  list-style: none;
  box-shadow: 0 1.9px 2.5px rgb(0 0 0 / 6%), -10px 9px 6.1px rgb(0 0 0 / 8%), 0 10.1px 11.4px rgb(0 0 0 / 9%), -7px 8px 15px 11px rgb(0 0 0 / 9%);
}

.circle2{
  width: 16%;
  border-radius: 50%;
  background-color: #d8e9b8;
  height: 0;
  padding-top: 16%;
  margin: 1.5%;
  float:left;
  list-style: none;
  box-shadow: 0 1.9px 2.5px rgb(0 0 0 / 6%), -10px 9px 6.1px rgb(0 0 0 / 8%), 0 10.1px 11.4px rgb(0 0 0 / 9%), -7px 8px 15px 11px rgb(0 0 0 / 9%);
}
.circle2-2{
  width: 16%;
  border-radius: 50%;
  background-color: #d8e9b8;
  height: 0;
  padding-top: 16%;
  margin: 1.5%;
  float:left;
  list-style: none;
  box-shadow: 0 1.9px 2.5px rgb(0 0 0 / 6%), -10px 9px 6.1px rgb(0 0 0 / 8%), 0 10.1px 11.4px rgb(0 0 0 / 9%), -7px 8px 15px 11px rgb(0 0 0 / 9%);
}

.circle3{
  position:relative;
  left: 15%;
  width: 16%;
  border-radius: 50%;
  background-color: #d8e9b8;
  height: 0;
  padding-top: 16%;
  margin: 3%;
  float:left;
  list-style: none;
  box-shadow: 0 1.9px 2.5px rgb(0 0 0 / 6%), -10px 9px 6.1px rgb(0 0 0 / 8%), 0 10.1px 11.4px rgb(0 0 0 / 9%), -7px 8px 15px 11px rgb(0 0 0 / 9%);
}

.circle4{
  position: relative;
  left: 22%;
  width: 16%;
  border-radius: 50%;
  background-color: #d8e9b8;
  height: 0;
  padding-top: 16%;
  margin: 5%;
  float:left;
  list-style: none;
  box-shadow: 0 1.9px 2.5px rgb(0 0 0 / 6%), -10px 9px 6.1px rgb(0 0 0 / 8%), 0 10.1px 11.4px rgb(0 0 0 / 9%), -7px 8px 15px 11px rgb(0 0 0 / 9%);
}

.circle1 a {
  display: flex;
  margin-top: 32px;
  padding-left: 74px;
  font-size: larger;
  text-decoration:none;
}

.circle2 a {
  display: flex;
  margin-top: 32px;
  padding-left: 64px;
  font-size: larger;
  text-decoration:none;
}
.circle2-2 a {
  display: flex;
  margin-top: 32px;
  padding-left: 48px;
  font-size: larger;
  text-decoration:none;
}

.circle3 a, .circle4 a {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  padding-left: 36px;
  font-size: larger;
  text-decoration:none;
}

.circle1:hover, .circle2:hover, .circle3:hover, .circle4:hover {
  background-color: #67b94c;
}
.circle1 a:hover, .circle2 a:hover, .circle3 a:hover, .circle4 a:hover {
  color: #67b94c;
}

.square1{
  position: relative;
  left: 18px;
  width: 22%;
  margin: 18px 6px 6px 18px;
  float:left;
  list-style: none;
}

.square2{
  position: relative;
  left: 2%;
  width: 16%;
  margin: 32px 25px 6px 6px;
  float:left;
  list-style: none;
}

.square3{
  position: relative;
  left: 18%;
  width: 18%;
  margin: 12px 37px 6px 6px;
  float:left;
  list-style: none;
}

.square4{
  position: relative;
  left: 27%;
  width: 18%;
  margin: 12px 83px 8px 10px;
  float:left;
  list-style: none;
}

.square1 p, .square2 p, .square3 p {
  display: flex;
  justify-content: center;
  padding-top: 20px;
  font-size: 10px;
}

.square4 p {
  display: flex;
  justify-content: center;
/*  padding: 20px;*/
  font-size: 10px;
}

.gicon{
  position: relative;
  right: 96%;
  float:left;
  list-style: none;
}

#gicon1 img, #gicon2 img, #gicon3 img, #gicon4 img, #vicon1 img, #vicon2 img, #cicon1 img, #cicon2 img, #cicon3 img {
  height: 210px;
}

#gicon1 img {
  position: absolute;
  margin: 30px 22px;
}
#gicon1:hover img:nth-of-type(2) {
	opacity: 0;
}

#gicon2 img {
  position: absolute;
  margin: 30px 280px;
}
#gicon2:hover img:nth-of-type(2) {
	opacity: 0;
}

#gicon3 img {
  position: absolute;
  margin: 30px 538px;
}
#gicon3:hover img:nth-of-type(2) {
	opacity: 0;
}

#gicon4 img {
  position: absolute;
  margin: 30px 794px;
}
#gicon4:hover img:nth-of-type(2) {
	opacity: 0;
}

.cicon{
  position: relative;
  right: 51%;
  float:left;
  list-style: none;
}

#cicon1 img {
  position: absolute;
  margin: 22px 10px;
}
#cicon1:hover img:nth-of-type(2) {
	opacity: 0;
}

#cicon2 img {
  position: absolute;
  margin: 22px 246px;
}
#cicon2:hover img:nth-of-type(2) {
	opacity: 0;
}

#cicon3 img {
  position: absolute;
  margin: 22px 482px;
}
#cicon3:hover img:nth-of-type(2) {
	opacity: 0;
}

.vicon{
  position: relative;
  right: 51%;
  float:left;
  list-style: none;
}

#vicon1 img {
  position: absolute;
  margin: 40px 260px;
}
#vicon1:hover img:nth-of-type(2) {
	opacity: 0;
}

#vicon2 img {
  position: absolute;
  margin: 40px 540px;
}
#vicon2:hover img:nth-of-type(2) {
	opacity: 0;
}

#top-dimg {
  clear: both;
}

#top-gcoment {clear:both;}
#top-dcoment {clear:both;}

.dicon{
  float:left;
  list-style: none;
}

#dicon1 img, #dicon2 img, #dicon3 img, #dicon4 img, #dicon5 img {
  height: 210px;
}

#dicon1 img {
  position: absolute;
  margin: 4px 8px;
}
#dicon1:hover img:nth-of-type(2) {
	opacity: 0;
}

#dicon2 img {
  position: absolute;
  margin: 4px 210px;
}
#dicon2:hover img:nth-of-type(2) {
	opacity: 0;
}

#dicon3 img {
  position: absolute;
  margin: 4px 412px;
}
#dicon3:hover img:nth-of-type(2) {
	opacity: 0;
}

#dicon4 img {
  position: absolute;
  margin: 4px 618px;
}
#dicon4:hover img:nth-of-type(2) {
	opacity: 0;
}

#dicon5 img {
  position: absolute;
  margin: 4px 822px;
}
#dicon5:hover img:nth-of-type(2) {
	opacity: 0;
}