﻿body {
 background: url(/Content/Areas/Common/images/bootBG.jpg) center top no-repeat;
 height: 100vh;
 background-size: cover;
 width: 100%;
 box-sizing: border-box;
 padding-bottom: 2.5vw;
}

.logo img {
 height: 3.85vw;
}

.btn_icon img {
 width: 3.33vw;
}

.bootLinks {
 padding: 4.17vw;
}

.btn_icon ul {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.btn_icon {
 margin-top: 1.67vw;
 width: 15.63vw;
}

.btn_icon ul li {
 /* margin-right: 48px; */
 position: relative;
}

.btn_model {
 padding: 0.260vw;
 background: #fff;
 border-radius: 0.260vw;
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 top: 3.74vw;
 width: 6.77vw;
 z-index: 1;
 box-shadow: 0 0 0.521vw #eee;
 display: none;
}

.btn_model img {
 width: 100%;
}

.btn_model::after {
 content: "";
 position: absolute;
 border-style: solid;
 border-width: 0.521vw;
 border-color: transparent transparent #fff transparent;
 left: 50%;
 transform: translateX(-50%);
 top: -0.89vw;
}

ul.center {
 margin-top: 4.06vw;
}

ul.center li {
 float: left;
 position: relative;
 transition: all 0.3s;
}

ul.center li:nth-child(1) {
 width: 22.08vw;
 height: 16.3vw;
 background: rgb(53 111 202 / 90%);
 border-radius: 2.08vw;
 margin-top: 4.53vw;
}

ul.center li:nth-child(1):before {
 border: rgb(53 111 202 / 90%) solid 0.21vw;
}

ul.center li:nth-child(2) {
 width: 15vw;
 height: 15vw;
 background: rgb(255 255 255 / 95%);
 border-radius: 2.08vw;
 margin-left: -6.458vw;
}

ul.center li:nth-child(2):before {
 border: rgb(255 255 255 / 95%) solid 0.21vw;
}

ul.center li:nth-child(3) {
 width: 16.3vw;
 height: 16.3vw;
 background: rgb(0 168 177 / 90%);
 border-radius: 2.08vw;
 margin: 9.01vw 0 0 -3.91vw;
}

ul.center li:nth-child(3):before {
 border: rgb(0 168 177 / 90%) solid 0.21vw;
}

ul.center li:nth-child(2) a {
 color: #00a8b1;
}

ul.center li:nth-child(3) a {
 color: #fff;
}

ul.center li a {
 width: 100%;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 font-size: 1.25vw;
 font-weight: 500;
 color: #ffffff;
 line-height: 1.71vw;
 position: relative;
}

ul.center li a img {
 margin-bottom: 0.52vw;
 height: 5.73vw;
}

.nav {
 display: none;
}

.header {
 display: none;
}

.linkmap {
 display: none;
}

.link {
 display: none;
}

.footer {
 /* display: none; */
 text-align: center;
 color: #fff;
 font-size: 0.83vw;
}

.footer a {
 color: #fff;
 font-size: 0.83vw;
 font-weight: 400;
 color: #ffffff;
 line-height: 1.67vw;
}

.main .footer {
 display: block;
}

div.main {
 width: auto;
}


/* ul.center li::before{
  content: '';
  position: absolute;
  border: #e1e1e1 solid 0.21vw;
  top: -0.625vw;
  right: -0.625vw;
  bottom: -0.625vw;
  left: -0.625vw;
  opacity: 0;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  border-radius: 2.08vw;
} */

ul.center li:hover {
 transform: scale(1.08);
 z-index: 10;
}


/* ul.center li:hover:before, ul.center li:focus:before, ul.center li:active:before {
  -webkit-animation-name: hvr-ripple-in;
  animation-name: hvr-ripple-in;
}
@keyframes hvr-ripple-in{
  100% {
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 opacity: 1;
}
} */

@media only screen and (max-width: 768px) {
  body {
 background-position: -196vw !important;
}

.logo img {
 height: 13vw;
}

.btn_icon {
 width: 40vw;
 margin: 2vw auto;
}

.btn_icon img {
 width: 10vw;
}

ul.center {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
}

.footer {
 position: absolute;
 bottom: 0;
 width: 100%;
 font-size: 3vw;
 padding: 20px 0;
}
.footer a{
 font-size:3vw;
 display: block;
 margin-bottom: 10px;
line-height: initial;
}

.logo {
 text-align: center;
}

ul.center li {
 width: 75vw !important;
 margin: 3vw !important;
 height: 27vw !important;
}

ul.center li a {
 font-size: 4vw;
 line-height: 8vw;
}

ul.center li a img {
 margin-bottom: 2vw;
 height: 10vw;
}
  .btn_model {
 width: 20vw;
 top: 12vw;
}

.btn_model img {
 width: 100% !important;
}
} 