:root {
  --main-color: #666;
}

img {
  max-width: 100%;
}

@media (max-width: 768px) {
  .wrap {
    width: 100%;
  }
}

.bg-main {
  background: var(--main-color);
}

body.wapmenu::before {
  content: "";
  width: 100%;
  height: 100%;
  z-index: 9;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.1);
}

header .btn > div:not(.active) {
  display: none;
}
header .btn > div.active {
  display: block;
}
header .menu .arrow {
  transform: rotate(-90deg);
}
header .menu .arrow.active {
  transform: rotate(0deg);
}

@media (max-width: 768px) {
  .submenu {
    display: none !important;
  }
}

.banner {
  height: 600px;
  z-index: -1;
}
.banner .text {
  font-weight: bold;
  font-family: Arial, Microsoft yahei;
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
}

.iconnav a.active .pic, .iconnav a:hover .pic {
  background: #003F85;
}
.iconnav a.active .pic img, .iconnav a:hover .pic img {
  filter: grayscale(1) brightness(1000%);
}
.iconnav a .pic {
  transition: all 0.3s;
}
.divider {
  z-index: 1;
}
.divider::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  display: inline-block;
  width: 100%;
  border-top: 1px solid rgba(220, 38, 38, var(--tw-border-opacity));
  z-index: -1;
}

.html-content * {
  color: #666;
  text-align: justify;
  font-size: 16px !important;
  line-height: 2em !important;
}
.html-content * img {
  margin: 10px 0;
}

.footer {
  max-width: 1280px;
  margin: 0 auto;
}

footer i {
  display: block;
  background: url(../image/telico.png) no-repeat center left;
  padding-left: 20px;
}

.swiper .swiper-pagination-bullet {
  opacity: 1;
  background: #fff;
}
.swiper .swiper-pagination-bullet-active {
  background: #0088cc;
}

/*# sourceMappingURL=common.css.map */