@charset "UTF-8";
#box {
  width: 100%;
}

header {
  background: url("../img/images/bg_01.png") top center no-repeat;
  background-size: cover;
}

header .swiper-container img {
  width: 100%;
}

header .swiper-container .swiper-pagination-bullet {
  opacity: 1;
  background-color: #fff;
}

header .swiper-container .swiper-pagination-bullet-active {
  background-color: #f60;
}

#introduce {
  background: url("../img/images/bg_02.png") top center no-repeat;
  background-size: 100% 100%;
  font-size: 0;
}

#introduce .introduce_info {
  background: url("../img/images/nav_info_bg_03.png") center no-repeat;
  background-size: 80% auto;
}

#introduce .introduce_info .introduce_info_cont p {
  color: #fff;
}

h6 {
  color: #f90 !important;
  text-align: center !important;
}

h6 b::before,
h6 b::after {
  content: '';
  width: 200px !important;
  height: 60px !important;
  display: inline-block !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  background-size: 100% !important;
}

h6 b::before {
  transform: translate(45px, 20px) !important;
  background-image: url("../img/images/nav_before_03.png") !important;
}

h6 b::after {
  transform: translate(-45px, 20px) !important;
  background-image: url("../img/images/nav_aftr_03.png") !important;
}

h6 span {
  color: #0ff !important;
}

#policy {
  background: url("../img/images/bg_03.png") top center no-repeat;
  background-size: 100% 100%;
}

#policy .policy_info div {
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
}

#policy .policy_info .policy_info_a {
  background-image: url("../img/images/policy_bg_03.png");
}

#policy .policy_info .policy_info_b {
  background-image: url("../img/images/policy_bg_08.png");
}

#policy .policy_info .policy_info_c {
  background-image: url("../img/images/policy_bg_05.png");
}

#policy .policy_info .policy_info_d {
  background-image: url("../img/images/policy_bg_11.png");
}

#event {
  background: url("../img/images/bg_04.png") top center no-repeat;
  background-size: 100% 100%;
}

#event .event_info ul li {
  color: #fff;
}

#event .event_info ul li::before {
  content: '● ';
}

#event .event_info ol li {
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
  position: relative;
}

#event .event_info ol li p {
  position: absolute;
  text-align: center;
  bottom: 0;
  left: 0;
  text-align: center;
  width: 100%;
  color: #fff;
}

#event .event_info ol li:nth-child(1) {
  background-image: url("../img/images/1_03.png");
}

#event .event_info ol li:nth-child(2) {
  background-image: url("../img/images/1_05.png");
}

#event .event_info ol li:nth-child(3) {
  background-image: url("../img/images/1_07.png");
}

#event .event_info ol li:nth-child(4) {
  background-image: url("../img/images/1_12.png");
}

#event .event_info ol li:nth-child(5) {
  background-image: url("../img/images/1_13.png");
}

#event .event_info ol li:nth-child(6) {
  background-image: url("../img/images/1_14.png");
}


#marketing {
  background: url("../img/images/bg_05.png") top center no-repeat;
  background-size: 100% 100%;
}

#marketing .marketing_info p {
  color: #fff;
  text-align: center;
}

#advantage {
  background: url("../img/images/bg_06.png") top center no-repeat;
  background-size:  100% 100%;
}

#advantage .advantage_info {
  overflow: hidden;
}

#advantage .advantage_info li {
  float: left;
  position: relative;
}

#advantage .advantage_info li::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(to top, #0ff, rgba(0, 255, 255, 0));
}

#advantage .advantage_info li:nth-child(4n)::after {
  width: 0;
  background: transparent;
}

#advantage .advantage_info li:nth-child(n+4)::after {
  transform: rotate(180deg);
}

#advantage .advantage_info li.left_top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to left, #0ff, rgba(0, 255, 255, 0));
}

#advantage .advantage_info li.line_top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #0ff;
}

#advantage .advantage_info li.right_top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #0ff, rgba(0, 255, 255, 0));
}

#core {
  background: url("../img/images/bg_07.png") top center no-repeat;
  background-size: 100% 100%;
}

#core .core_info ul {
  overflow: hidden;
}

#core .core_info ul li {
  float: left;
  color: #fff;
  font-weight: bold;
  text-align: center;
  background: url("../img/images/core_bg_03.png") center no-repeat;
  background-size: contain;
}

#support {
  background: url("../img/images/bg_09.png") top center no-repeat;
  background-size: 100% 100%;
}

#support .support_info {
  color: #fff;
}

#support .support_info h5 {
  color: #0ff;
  background: url("../img/images/title_bg_03.png") bottom right no-repeat;
}

#talk {
  background: url("../img/images/bg_10.png") top center no-repeat;
  background-size: 100% 100%;
}

#talk .talk_info h5 {
  color: #0ff;
  background: url("../img/images/title_bg_03.png") 350px bottom no-repeat;
  background-size: 1000px auto;
}

#talk .talk_info p {
  color: #fff;
}

#map {
  background: url("../img/images/bg_12_02.png") top center no-repeat;
  background-size: cover;
}

#map .map_info {
  text-align: center;
}

#link {
  background: url("../img/images/bg_13.png") top center no-repeat;
  background-size: cover;
}

#link .swiper-button-prev {
  background-image: url("../img/left.png");
}

#link .swiper-button-next {
  background-image: url("../img/right.png");
}

footer {
  background: url("../img/images/bg16_02.png") top center no-repeat;
  background-size: 100% 100%;
  position: relative;
}

footer button {
  border: 0;
  outline: none;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  font-weight: bold;
  background: url("../img/images/btn_bg_05.png") center no-repeat;
  background-size: contain;
}

#mask {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 77;
  display: none;
  background-color: rgba(0, 0, 0, 0.8);
}

#mask div {
  width: 100%;
  height: 100%;
}

#mask div iframe {
  width: 80%;
  height: 80%;
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid #fff;
  transform: translate(-50%, -50%);
}

#mask div i.close {
  position: absolute;
  right: 10%;
  top: 10%;
  z-index: 88;
  border-radius: 50%;
  transform: translate(50%, -50%);
  background: #000 url("../img/col.png") center no-repeat;
  background-size: contain;
}