/* 引入公共变量 css  */
@import './variable.css';
.XG-index {
  width: 100%;
}
a {
  text-decoration: none;
  color: inherit;
}
/* public style start */
.XG-index .XG-index-button {
  color: var(--color-black);
  font-size: var(--font-size-20);
  line-height: var(--font-size-27);
  border: 1px solid var(--color-black);
  cursor: pointer;
  margin: 0 auto;
  transition: all 0.3s ease-in-out;
  padding: 12px 51px 12px 32px;
  margin-top: 40px;
}
.XG-index .XG-index-button span {
  position: relative;
}
.XG-index .XG-index-button span::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--color-yellow);
  right: -25px;
  margin-top: -5px;
}
.XG-index .XG-index-button:hover,
.XG-index .XG-index-button.active {
  background-color: var(--color-yellow) !important;
  border-color: var(--color-yellow) !important;
}
.XG-index .XG-index-button:hover span::after,
.XG-index .XG-index-button.active span::after {
  border-left-color: var(--color-black-title);
}
.XG-index .XG-img {
  cursor: pointer;
}
.XG-index .XG-img img {
  transition: all 0.3s ease-out 0s;
}
.XG-index .XG-img:hover img {
  transform: scale(1.1);
}
.XG-index .XG-pagination {
  width: 100%;
  text-align: center;
  margin-top: 80px;
}
.XG-index .XG-pagination span {
  color: var(--color-black-title);
  font-size: var(--font-size-20);
  font-weight: 305;
  border: 1px solid var(--color-black-title);
  cursor: pointer;
  padding: 12px 22px;
  margin-right: 16px;
}
.XG-index .XG-pagination span.active,
.XG-index .XG-pagination span:hover {
  background: var(--color-black-title);
  color: var(--color-white);
}
.XG-index .XG-article {
  padding-top: 40px;
  color: var(--color-black-title);
  font-size: var(--font-size-24);
  font-weight: 250;
  line-height: var(--font-size-40);
}
.XG-index .XG-article img {
  width: 100%;
  display: block;
  margin-bottom: 24px;
}
.XG-index .bk-color {
  background-color: rgb(247, 247, 247);
  margin-top: 120px;
  padding-bottom: 60px;
  overflow: hidden;
}
/* public style end */

/* assessment start */
.XG-index .XG-assessment {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--color-black1);
  z-index: 9999;
  transition: all 0.3s ease-in-out;
  height: 80px;
}
.XG-index .XG-assessment .text {
  text-align: center;
  color: var(--color-white);
  font-size: var(--font-size-24);
  font-weight: 330;
  line-height: 80px;
  cursor: pointer;
}
.XG-index .XG-assessment .arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: url('../images/icon/icon_arrow.svg') no-repeat;
  background-size: 100%;
  cursor: pointer;
  width: 92px;
  height: 46px;
  top: -46px;
}
.XG-index .XG-assessment .arrow .icon {
  width: 35%;
  margin-top: 10px;
}
.XG-index .XG-assessment .form {
  background-color: var(--color-white);
  margin: 0 auto;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  padding: 40px 60px;
  width: 660px;
}
.XG-index .XG-assessment .assessment-form {
  width: 100%;
}
.XG-index .XG-assessment .assessment-form .form-item {
  background-color: transparent;
  border: none;
  margin-bottom: 16px;
  padding: 0;
}
.XG-index .XG-assessment .assessment-form .form-item span {
  color: #f00;
  margin-right: 5px;
}
.XG-index .XG-assessment .assessment-form .form-item .label {
  text-align: right;
  color: var(--color-black-title);
  width: 130px;
}
.XG-index .XG-assessment .assessment-form .input-container {
  margin-left: 12px;
  border-bottom: 1px solid var(--color-grey-light6);
  background-color: var(--color-grey-light5);
  transition: all 0.5s ease-in-out;
  padding: 16px 24px;
}
.XG-index .XG-assessment .assessment-form .agreement span {
  text-decoration: none;
}
/* assessment end */
/* popupMessage start */
.XG-popup-message {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease-in-out;
  z-index: 2000000;
  display: none;
}
.XG-popup-message .XG-popup-message-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.XG-popup-message .XG-popup-message-container {
  position: relative;
  background-color: var(--color-white);
  width: 1214px;
  padding: 40px 24px 24px;
  border-radius: 15px;
}
.XG-popup-message .XG-popup-message-container .close {
  position: absolute;
  cursor: pointer;
  top: 12px;
  right: 12px;
}
.XG-popup-message .XG-popup-message-container .XG-container-head {
  margin-top: 0;
}
.XG-popup-message .XG-popup-message-container .XG-container-head .title {
  font-size: var(--font-size-36);
  line-height: var(--font-size-48);
}
.XG-popup-message .XG-popup-message-container .XG-container-head .sub {
  font-size: var(--font-size-16);
  line-height: var(--font-size-20);
}
.XG-popup-message .XG-popup-message-container .XG-container-contact .img {
  width: 622px;
  height: 506px;
  border-radius: 15px;
}
.XG-popup-message .XG-popup-message-container .XG-form.form {
  margin: 0;
  margin-left: 24px;
}
.XG-popup-message .XG-popup-message-container .XG-form .form-item {
  padding: 7px 24px;
}
/* popupMessage end */
/* navigation start */
.XG-index .XG-navigation {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 40px;
  line-height: var(--font-size-48);
  transition: all 0.3s ease-in-out;
}
.XG-index .XG-navigation.active {
  background-color: var(--color-black1);
  padding: 4px 40px;
}
.XG-index .XG-navigation.active .btn,
.XG-index .XG-navigation .btn:hover {
  background-color: var(--color-yellow);
  border-color: var(--color-yellow) !important;
  color: var(--color-black-title);
}
/* .XG-index .XG-navigation.active .logo .default {
  display: none;
}
.XG-index .XG-navigation.active .logo .text {
  display: block;
} */
.XG-index .XG-navigation .logo {
  width: 145px;
}
.XG-index .XG-navigation .logo .text {
  display: none;
}
.XG-index .XG-navigation .logo.english {
  width: 200px;
  display: none;
}
.XG-index .XG-navigation .logo.english img {
  width: 100%;
}
.XG-index .XG-navigation .text a {
  color: var(--color-white);
  text-decoration: none;
  margin-right: 32px;
  padding-bottom: 5px;
}
.XG-index .XG-navigation .text a:hover {
  border-bottom: 1px solid var(--color-yellow);
}
.XG-index .XG-navigation .text a.active {
  border-bottom: 1px solid var(--color-yellow);
}
.XG-index .XG-navigation .language {
  display: flex;
  align-items: center;
}
.XG-index .XG-navigation .language .btn {
  border: 1px solid var(--color-white);
  font-size: var(--font-size-16);
  line-height: var(--font-size-16);
  padding: 12px 16px;
  letter-spacing: -0.16px;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.XG-index .XG-navigation .language .area {
  display: flex;
  padding-right: 12px;
}
.XG-index .XG-navigation .language .area span {
  cursor: pointer;
}
.XG-index .XG-navigation .language .area img {
  margin: 0 19px 0 38px;
  cursor: pointer;
}
.XG-index .XG-navigation .language .select-country {
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  background-color: var(--color-black1);
  transition: width 0.3s ease-in-out;
  width: 0;
  padding-top: 20px;
  z-index: 9999;
}
.XG-index .XG-navigation .language .select-country .close {
  text-align: right;
  margin-bottom: 12px;
}
.XG-index .XG-navigation .language .select-country .close img {
  cursor: pointer;
  width: 40px;
  height: 40px;
}
.XG-index .XG-navigation .language .select-country p {
  color: var(--color-white);
  font-size: var(--font-size-24);
  line-height: var(--font-size-28);
  cursor: pointer;
  font-weight: 450;
  margin-bottom: 60px;
  padding-left: 100px;
}
/* navigation end */

/* new banner start  */
.XG-new-banner {
  width: 100%;
  height: 40.201vw;
  position: relative;
}
.XG-new-banner .XG-new-banner-swiper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.XG-new-banner .XG-new-banner-swiper .banner-img {
  width: 100%;
  height: 100%;
}
.XG-new-banner .XG-new-banner-swiper .banner-text {
  position: absolute;
  top: 9.2965vw;
  left: 14.6734vw;
}
.XG-new-banner .XG-new-banner-swiper .banner-text .title {
  color: white;
  font-size: 3.7688vw;
  line-height: 3.7688vw;
  font-weight: 500;
  letter-spacing: .1005vw;
  position: relative;
}
.XG-new-banner .XG-new-banner-swiper .banner-text .title.banner-03-title{
  line-height: 4.6734vw;
}
.XG-new-banner .XG-new-banner-swiper .banner-text .title.banner-03-title .yellow{
  color: #ffdb35;
}
.XG-new-banner .XG-new-banner-swiper .banner-text .title .icon{
  position: absolute;
  left: -0.6533vw;
  bottom: 0;
  width: 1.5075vw;
  height: 4.9749vw;
  background-color: #ffc438;
  display: inline-block;
}
.XG-new-banner .XG-new-banner-swiper .banner-text .title .shade{
  position: relative;
  z-index: 2
}
.XG-new-banner .XG-new-banner-swiper .banner-text .english {
  font-size: 1.1558vw;
  line-height: 1.1558vw;
  color: #aec5ed;
  margin-top: 1.2563vw;
  margin-left: -0.7538vw;
  opacity: 0.45;
}
.XG-new-banner .XG-new-banner-swiper .banner-text .english.opacity{
  opacity: 0.25;
}
.XG-new-banner .XG-new-banner-swiper .banner-text .english.banner-03-english{
  font-size: .804vw;
  line-height: 1.3065vw;
  margin-left: 0;
}
.XG-new-banner .XG-new-banner-swiper .banner-text .sub {
  color: white;
  font-size: 1.2563vw;
  line-height: 1.2563vw;
  margin-top: 1.8593vw;
}
.XG-new-banner .XG-new-banner-swiper .banner-text .sub.banner-03-sub {
  margin-top: 3.1658vw;
}
.XG-new-banner .XG-new-banner-swiper .banner-text .btn {
  font-size: 1.407vw;
  line-height: 1.407vw;
  color: #1f3a86;
  padding: 0.7035vw 3.5176vw 0.7035vw 1.2563vw;
  background-color: #ffdb35;
  margin-top: 3.6181vw;
  position: relative;
}
.XG-new-banner .XG-new-banner-swiper .banner-text .btn.banner-03-btn {
  margin-top: 2.8643vw;
}
.XG-new-banner .XG-new-banner-swiper .banner-text .btn::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 0.4523vw solid transparent;
  border-bottom: 0.4523vw solid transparent;
  border-left: 0.804vw solid #2d3f72;
  right: 1.3065vw;
  margin-top: -0.402vw;
}
.XG-new-banner .XG-new-banner-swiper .banner-text .tab {
  width: 24.1206vw;
  margin-top: 4.8744vw;
  display: flex;
  justify-content: space-between;
}
.XG-new-banner .XG-new-banner-swiper .banner-text .tab .tab-item {
  width: 5.7789vw;
  text-align: center;
}
.XG-new-banner .XG-new-banner-swiper .banner-text .tab .tab-item img {
  width: 2.8141vw;
  height: 3.3166vw;
}
.XG-new-banner .XG-new-banner-swiper .banner-text .tab .tab-item .text {
  font-size: 1.1055vw;
  line-height: 1.1055vw;
  margin-top: 0.804vw;
  color: white;
}
.XG-new-banner .XG-new-banner-swiper .swiper-pagination {
  bottom: 5.3769vw;
  right: 3.6683vw;
  text-align: right;
  width: auto;
  font-size: 1.2563vw;
  color: rgb(112, 115, 117, .3);
}
.XG-new-banner .XG-new-banner-swiper .swiper-pagination .swiper-pagination-current{
  font-size: 2.1608vw;
  color: white;
}

/* new banner end  */

/* banner start */
.XG-index .XG-banner {
  width: 100%;
  position: relative;
}
.XG-index .XG-banner .XG-banner-swiper,
.XG-index .XG-banner .XG-banner-text {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.XG-index .XG-banner .banner-image {
  width: 100%;
  min-height: 100%;
  transition: 1s linear 2s;
  transform: scale(1, 1);
}
.XG-index .XG-banner .swiper-slide-active .banner-image,
.XG-index .XG-banner .swiper-slide-duplicate-active .banner-image {
  transition: 6s linear;
  transform: scale(1.1, 1.1);
}
.XG-index .XG-banner .swiper-pagination {
  bottom: 6%;
}
.XG-index .XG-banner .swiper-pagination .swiper-pagination-bullet {
  opacity: 1;
  border-radius: 0;
  background-color: var(--color-white-shade);
  transform: skewX(-40deg);
  width: 42px;
  height: 4px;
  margin-right: 5px;
}
.XG-index
  .XG-banner
  .swiper-pagination
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--color-yellow);
}
.XG-index .XG-banner .XG-banner-text {
  background-color: var(--color-black-shade);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.XG-index .XG-banner .XG-banner-text .title {
  font-size: var(--font-size-64);
  font-weight: 380;
  line-height: 85px;
  margin-top: 281px;
}
.XG-index .XG-banner .XG-banner-text .sub {
  font-size: var(--font-size-24);
  font-weight: 250;
  line-height: 32px;
  margin-top: 20px;
}
.XG-index .XG-banner .XG-banner-text .btn {
  border-color: var(--color-white);
  color: var(--color-white);
}
/* banner end */

/* container start*/
.XG-container {
  margin: 0 auto;
  max-width: 1440px;
}
.XG-index .XG-container-head {
  width: 100%;
  margin-top: 120px;
  margin-bottom: 40px;
}
.XG-index .XG-container-head.onePage {
  margin-top: 80px;
}
.XG-index .XG-container-head.twoPage {
  margin-top: 60px;
}
.XG-index .XG-container-head.first {
  margin-top: 80px;
}
.XG-index .XG-container-head .title {
  font-size: var(--font-size-48);
  line-height: var(--font-size-64);
  font-weight: 380;
  color: var(--color-black-title);
}
.XG-index .XG-container-head .sub {
  font-size: var(--font-size-20);
  line-height: var(--font-size-27);
  color: var(--color-grey);
  font-weight: 250;
  margin: 8px auto 40px auto;
}
.XG-index .XG-container-head .sub.width1 {
  width: 674px;
}
.XG-index .XG-container-head .sub.width2 {
  width: 1228px;
}
.XG-index .XG-container-button {
  margin-top: 52px;
}

/* expo start*/
.XG-container .XG-container-expo {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 12px;
  grid-row-gap: 40px;
}
.XG-container .XG-container-expo .XG-expo-item {
  width: 100%;
  cursor: pointer;
}
.XG-container .XG-container-expo .XG-expo-item .img {
  width: 100%;
  height: 212px;
  overflow: hidden;
}
.XG-container .XG-container-expo .XG-expo-item .img img {
  width: 100%;
  min-height: 100%;
}
.XG-container .XG-container-expo .XG-expo-item .name {
  font-size: var(--font-size-24);
  line-height: var(--font-size-32);
  color: var(--color-black-title);
  font-weight: 380;
  margin-top: 16px;
}
.XG-container .XG-container-expo .XG-expo-item .addr {
  font-size: var(--font-size-20);
  line-height: var(--font-size-27);
  color: var(--color-grey);
  font-weight: 250;
  margin-top: 8px;
}
.XG-container .XG-container-expo .XG-expo-item .popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-black2);
  z-index: 999;
}
.XG-container .XG-container-expo .XG-expo-item .popup .popup-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 1320px;
  height: 580px;
  background-color: var(--color-white);
  border-radius: 20px;
  padding: 24px;
  display: flex;
}
.XG-container
  .XG-container-expo
  .XG-expo-item
  .popup
  .popup-container
  .popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  cursor: pointer;
}
.XG-container
  .XG-container-expo
  .XG-expo-item
  .popup
  .popup-container
  .popup-img {
  width: 880px;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.XG-container
  .XG-container-expo
  .XG-expo-item
  .popup
  .popup-container
  .popup-img
  img {
  width: 100%;
  height: 100%;
}
.XG-container
  .XG-container-expo
  .XG-expo-item
  .popup
  .popup-container
  .popup-img
  .popup-swiper-button {
  width: 48px;
  height: 48px;
  border-radius: 100%;
  background-color: rgba(255, 255, 255, 0.6);
}
.XG-container
  .XG-container-expo
  .XG-expo-item
  .popup
  .popup-container
  .popup-img
  .popup-swiper-button::after {
  font-size: var(--font-size-20);
  color: var(--color-black);
}
.XG-container
  .XG-container-expo
  .XG-expo-item
  .popup
  .popup-container
  .popup-text {
  flex: 1;
  margin-left: 48px;
}
.XG-container
  .XG-container-expo
  .XG-expo-item
  .popup
  .popup-container
  .popup-text
  .popup-text-title {
  color: var(--color-grey);
  font-size: var(--font-size-20);
  line-height: var(--font-size-27);
  margin-top: 60px;
}
.XG-container
  .XG-container-expo
  .XG-expo-item
  .popup
  .popup-container
  .popup-text
  .popup-text-title:nth-child(1) {
  margin-top: 48px;
}
.XG-container
  .XG-container-expo
  .XG-expo-item
  .popup
  .popup-container
  .popup-text
  .popup-text-title
  p {
  color: var(--color-black-title);
  font-size: var(--font-size-24);
  line-height: var(--font-size-32);
  margin: 0;
  margin-bottom: 8px;
}
/* expo end*/

/* distribute start */
.XG-container .XG-container-distribute {
  display: flex;
  padding: 9px 30px 23px 40px;
}
.XG-container .XG-container-distribute .map {
  position: relative;
  width: 880px;
  height: 465px;
}
.XG-container .XG-container-distribute .map img {
  width: 100%;
  min-height: 100%;
}
.XG-container .XG-container-distribute .map .area {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-black);
  font-size: var(--font-size-16);
  font-weight: 330;
  cursor: pointer;
  width: 80px;
  height: 80px;
}
.XG-container .XG-container-distribute .map .area.active {
  background-color: var(--color-yellow);
  border-radius: 50%;
  box-shadow: 0 0 3px 20px rgba(254, 186, 1, 0.2);
}
.XG-container .XG-container-distribute .map .area.active .point {
  display: none;
}
.XG-container .XG-container-distribute .map .area.active .text {
  display: block;
}
.XG-container .XG-container-distribute .map .area .point {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
}
.XG-container .XG-container-distribute .map .area .point::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: solid 1px var(--color-yellow);
  border-radius: 50%;
  animation: ripple 3s infinite linear;
}
.XG-container .XG-container-distribute .map .area .point::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: solid 1px var(--color-yellow);
  border-radius: 50%;
  animation: ripple 3s 1.5s infinite linear;
}
.XG-container .XG-container-distribute .map .area .point p {
  background-color: var(--color-yellow);
  border-radius: 50%;
  width: 12px;
  height: 12px;
}
.XG-container .XG-container-distribute .map .area .text {
  display: none;
}
.XG-container .XG-container-distribute .percent {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-left: 23px;
}
.XG-container .XG-container-distribute .percent .percent-item {
  width: 50%;
  margin-bottom: 60px;
  cursor: pointer;
}
.XG-container .XG-container-distribute .percent .name {
  font-size: var(--font-size-40);
  line-height: var(--font-size-53);
  color: var(--color-yellow);
  font-weight: 300;
}
.XG-container .XG-container-distribute .percent .addr {
  font-size: var(--font-size-20);
  line-height: var(--font-size-28);
  color: var(--color-grey);
  font-weight: 250;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
}
.XG-container .XG-container-distribute .percent .active .name {
  font-weight: 700;
}
.XG-container .XG-container-distribute .percent .active .addr {
  font-weight: 600;
}
.XG-container-country {
  position: relative;
  margin-top: 23px;
  padding: 0 40px 0px 45px;
}
.XG-container-country::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-image: linear-gradient(
    90deg,
    rgba(247, 247, 247) 0%,
    rgba(247, 247, 247, 0) 20%,
    rgba(247, 247, 247, 0) 50%,
    rgba(247, 247, 247, 0) 80%,
    rgba(247, 247, 247) 100%
  );
}
.XG-container .XG-container-country-swiper {
  width: 100%;
  overflow: hidden;
}
.XG-container .XG-container-country-swiper .country-item {
  width: 100%;
  margin-bottom: 20px;
}
.XG-container .XG-container-country-swiper .country-item .img {
  max-width: 100%;
  min-height: 32px;
}
.XG-container .XG-container-country-swiper .country-item .name {
  font-size: var(--font-size-20);
  line-height: var(--font-size-28);
  color: var(--color-grey);
  font-weight: lighter;
  margin-top: 8px;
}

.XG-container .XG-container-country-swiper .swiper-wrapper {
  -webkit-transition-timing-function: linear; /*之前是ease-out*/
  -moz-transition-timing-function: linear;
  -ms-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
}

.XG-container .XG-container-country .swiper-button {
  color: rgba(0, 0, 0, 0.2);
}
.XG-container .XG-container-country .swiper-button::after {
  font-size: var(--font-size-26);
}
.XG-container .XG-container-country .swiper-button-prev {
  left: 0px;
}
.XG-container .XG-container-country .swiper-button-next {
  right: 0px;
}
.XG-container .XG-container-country .swiper-button:hover {
  color: var(--color-yellow);
}
/* distribute end */

/* serve start */
.XG-container .XG-container-serve {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 12px;
  grid-row-gap: 12px;
}
.XG-container .XG-container-serve .XG-container-serve-item {
  width: 100%;
  display: flex;
  background-color: var(--color-grey-light);
}
.XG-container .XG-container-serve-item .img {
  overflow: hidden;
  width: 165px;
  height: 165px;
  margin-right: 24px;
}
.XG-container .XG-container-serve-item .img img {
  width: 100%;
  min-height: 100%;
}
.XG-container .XG-container-serve-item .text {
  flex: 1;
}
.XG-container .XG-container-serve-item .name {
  font-size: var(--font-size-24);
  line-height: var(--font-size-32);
  color: var(--color-black);
  font-weight: 380;
  margin-top: 20px;
}
.XG-container .XG-container-serve-item .info {
  font-size: var(--font-size-20);
  line-height: var(--font-size-28);
  color: var(--color-grey);
  font-weight: 250;
  padding-right: 24px;
  margin-top: 12px;
}
/* serve end */

/* select start */
.XG-container .XG-container-select {
  width: 100%;
  display: flex;
  justify-content: center;
}
.XG-container .XG-container-select-item {
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  width: 239px;
  height: 400px;
  margin-right: 13px;
}
.XG-container .XG-container-select-item:last-child {
  margin-right: 0;
}
.XG-container .XG-container-select-item.activeHover {
  width: 432px;
}
.XG-container .XG-container-select-item.activeHover .default {
  display: none;
}
.XG-container .XG-container-select-item.activeHover .active {
  display: block;
}
.XG-container .XG-container-select-item .default {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--color-grey-light);
  background-repeat: no-repeat;
  padding-left: 24px;
  width: 100%;
  height: 100%;
}
.XG-container .XG-container-select-item .default.bk1 {
  background-image: url(../images/bkImages/bk_01.svg);
  background-position: 119px 213px;
  background-size: 171px 171px;
}
.XG-container .XG-container-select-item .default.bk2 {
  background-image: url(../images/bkImages/bk_02.svg);
  background-position: 120px 248px;
  background-size: 132px 123px;
}
.XG-container .XG-container-select-item .default.bk3 {
  background-image: url(../images/bkImages/bk_03.svg);
  background-position: 111px 230px;
  background-size: 140px 147px;
}
.XG-container .XG-container-select-item .default.bk4 {
  background-image: url(../images/bkImages/bk_04.svg);
  background-position: 126px 240px;
  background-size: 142px 131px;
}
.XG-container .XG-container-select-item .default.bk5 {
  background-image: url(../images/bkImages/bk_05.svg);
  background-position: 125px 241px;
  background-size: 128px 129px;
}
.XG-container .XG-container-select-item .default .line {
  background-color: var(--color-black);
  width: 18px;
  height: 2px;
}
.XG-container .XG-container-select-item .default .name {
  color: var(--color-black);
  font-size: var(--font-size-28);
  line-height: var(--font-size-37);
  font-weight: 450;
  margin: 12px 0 3px 0;
}
.XG-container .XG-container-select-item .default .sub {
  color: var(--color-grey-light2);
  font-size: var(--font-size-16);
  line-height: var(--font-size-21);
  font-weight: 250;
  max-width: 120px;
}
.XG-container .XG-container-select-item .active {
  display: none;
  background-color: var(--color-yellow);
  width: 100%;
  height: 100%;
  padding: 64px 40px 0 40px;
}
.XG-container .XG-container-select-item .active .icon {
  width: 47px;
  height: 44px;
}
.XG-container .XG-container-select-item .active .name {
  color: var(--color-black);
  font-size: var(--font-size-28);
  line-height: var(--font-size-37);
  font-weight: 450;
  margin: 14px 0 6px 0;
}
.XG-container .XG-container-select-item .active .sub {
  color: var(--color-black);
  font-size: var(--font-size-20);
  line-height: var(--font-size-34);
  font-weight: 250;
}
/* select end */

/* client end */
.XG-container .XG-container-client {
  display: grid;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}
.XG-container .XG-container-client-item {
  border: 1px solid var(--color-grey-light3);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 140px;
}
.XG-container .XG-container-client-item .logo {
  max-width: 100%;
  max-height: 100%;
}
/* container end*/

/* exhibition start */
.XG-container .XG-container-exhibition {
  width: 100%;
}
.XG-container .XG-container-exhibition .swiper-exhibition-big {
  width: 100%;
  height: 810px;
  overflow: hidden;
}
.XG-container .XG-container-exhibition .swiper-exhibition-big .video,
.XG-container .XG-container-exhibition .swiper-exhibition-big .video video {
  width: 100%;
  height: 100%;
  object-fit: fill;
  cursor: pointer;
}
.XG-container .XG-container-exhibition .swiper-exhibition-big .video {
  position: relative;
}
.XG-container .XG-container-exhibition .swiper-exhibition-big .video .video-bk {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.XG-container
  .XG-container-exhibition
  .swiper-exhibition-big
  .video
  .video-bk
  .video-btn {
  cursor: pointer;
  transition: all 0.2s linear;
  transform: scale(0.8);
}
.XG-container
  .XG-container-exhibition
  .swiper-exhibition-big
  .video
  .video-bk
  .video-btn:hover {
  transform: scale(1);
}
.XG-container .XG-container-exhibition .swiper-exhibition-small {
  width: 100%;
  margin-top: 9px;
  height: 154px;
  overflow: hidden;
}
.XG-container
  .XG-container-exhibition
  .swiper-exhibition-small
  .swiper-exhibition-small-active {
  border: 4px solid var(--color-yellow);
  box-sizing: border-box;
}
.XG-container .XG-container-exhibition .img {
  width: 100%;
  height: 100%;
}
/* exhibition end */

/* question start */
.XG-container .XG-container-question {
  width: 100%;
}
.XG-container .XG-container-question .XG-container-question-item {
  width: 100%;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s linear;
  margin-bottom: 8px;
}
.XG-container
  .XG-container-question
  .XG-container-question-item.active
  .container {
  height: auto;
}
.XG-container .XG-container-question .XG-container-question-item .title {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: var(--color-grey-light);
  color: var(--color-black);
  font-size: var(--font-size-24);
  font-weight: 380;
  line-height: 72px;
  padding: 0 40px;
}
.XG-container
  .XG-container-question
  .XG-container-question-item
  .title
  .icon_symbol {
  position: relative;
  width: 19px;
  height: 19px;
  margin-right: 24px;
}
.XG-container
  .XG-container-question
  .XG-container-question-item
  .title
  .icon_symbol::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  width: 3px;
  height: 100%;
  background-color: #444;
}
.XG-container
  .XG-container-question
  .XG-container-question-item
  .title
  .icon_symbol::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #444;
}
.XG-container .XG-container-question .XG-container-question-item .container {
  background-color: white;
  color: var(--color-black);
  font-size: var(--font-size-20);
  line-height: var(--font-size-30);
  font-weight: 305;
  height: 0;
}
.XG-container
  .XG-container-question
  .XG-container-question-item
  .container
  .text {
  padding: 20px 40px;
  font-weight: lighter;
}
/* question end */

/* news start */
.XG-news {
  width: 100%;
  background-color: var(--color-grey-light);
  margin-top: 120px;
  padding: 60px 0;
}
.XG-news .XG-container-head {
  margin-top: 0px;
}
.XG-news .XG-news-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 12px;
}
.XG-news .XG-news-container .XG-news-item .line {
  background-color: var(--color-yellow);
  width: 32px;
  height: 2px;
  margin-bottom: 12px;
}
.XG-news .XG-news-container .XG-news-item .date {
  color: var(--color-grey-light4);
  font-size: var(--font-size-32);
  line-height: var(--font-size-37);
  font-weight: 700;
}
.XG-news .XG-news-container .XG-news-item .year {
  margin: 4px 0 12px 0;
}
.XG-news .XG-news-container .XG-news-item .img {
  width: 100%;
  overflow: hidden;
  height: 212px;
}
.XG-news .XG-news-container .XG-news-item .img img {
  width: 100%;
  min-height: 100%;
}
.XG-news .XG-news-container .XG-news-item .title {
  color: var(--color-black-title);
  font-size: var(--font-size-24);
  line-height: var(--font-size-34);
  font-weight: 305;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  margin: 24px 0 12px 0;
  height: 64px;
}
.XG-news .XG-news-container .XG-news-item .sub {
  color: var(--color-grey);
  font-size: var(--font-size-20);
  font-weight: 250;
  line-height: var(--font-size-30);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: 40px;
  height: 90px;
}
/* news end */

/* contact start */
.XG-index .XG-container-contact {
  width: 100%;
  display: flex;
}
.XG-index .XG-container-contact .img {
  width: 720px;
  height: 586px;
  overflow: hidden;
}
.XG-index .XG-container-contact .img img {
  width: 100%;
  min-height: 100%;
}
.XG-index .XG-container-contact .form {
  flex: 1;
  margin: 0 0px 104px 40px;
}
.XG-index .XG-form .two-column {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 24px;
}
.XG-index .XG-form .form-item {
  display: flex;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid var(--color-grey-light6);
  background-color: var(--color-grey-light5);
  transition: all 0.5s ease-in-out;
  padding: 15px 24px;
  margin-bottom: 24px;
}
.XG-index .XG-form .form-item:focus-within,
.XG-index .XG-form .input:focus-within {
  border-color: var(--color-black-title);
}
.XG-index .XG-form .form-item .label {
  color: var(--color-grey);
  font-size: var(--font-size-20);
  line-height: var(--font-size-20);
  font-weight: 305;
}
.XG-index .XG-form .form-item .input {
  flex: 1;
}
.XG-index .XG-form .form-item .input input,
.XG-index .XG-form .form-item .input textarea {
  width: 100%;
  height: 100%;
  color: var(--color-black-title);
  font-size: var(--font-size-20);
  line-height: var(--font-size-20);
  font-weight: 380;
  border: none;
  background-color: transparent;
  outline: none;
  resize: none;
}
.XG-index .XG-form .form-item.textarea {
  align-items: flex-start;
}
.XG-index .XG-form .form-item.textarea .label {
  margin-top: 4px;
}
.XG-index .XG-form .form-item.textarea .input {
  height: 89px;
}
.XG-index .XG-form .form-item.textarea textarea {
  line-height: var(--font-size-26);
}
.XG-index .XG-form .agreement {
  color: var(--color-grey);
  font-size: var(--font-size-20);
  line-height: var(--font-size-27);
  display: flex;
  align-items: center;
  margin: 24px 0;
  cursor: pointer;
}
.XG-index .XG-form .agreement .radio {
  display: none;
}

input[type='radio'] + label::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--color-grey-light6);
  margin-right: 10px;
  box-sizing: border-box;
  margin-top: -5px;
}

input[type='radio']:checked + label::before {
  background-color: var(--color-yellow);
  border: 1px solid var(--color-yellow);
  background-clip: content-box;
  padding: 3px;
  box-sizing: border-box;
}
input[type='radio'] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

.XG-index .XG-form .agreement span {
  color: var(--color-yellow);
  text-decoration: underline;
}
.XG-index .XG-form .button {
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: var(--color-black);
  color: var(--color-white);
  text-align: center;
  font-size: var(--font-size-20);
  font-weight: 305;
  line-height: 57px;
}
.XG-index .XG-form .button span i {
  display: inline-block;
  width: 32px;
}
.XG-index .XG-form .button span::after {
  border-left-color: var(--color-white);
}
/* contact end */

/* footer start */
.XG-footer {
  width: 100%;
  background: var(--color-black-title);
}
.XG-footer.mt {
  margin-top: 80px;
}
.XG-footer .XG-footer-link {
  width: 100%;
  display: flex;
  padding-top: 40px;
}
.XG-footer .XG-footer-link .menu {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.XG-footer .XG-footer-link .menu .title {
  color: var(--color-white2);
  font-size: var(--font-size-14);
  font-weight: 520;
  line-height: var(--font-size-16);
  margin-bottom: var(--font-size-16);
  letter-spacing: -0.14px;
}
.XG-footer .XG-footer-link .menu .sub {
  color: var(--color-white1);
  font-size: var(--font-size-14);
  font-weight: 380;
  line-height: var(--font-size-16);
  margin-bottom: var(--font-size-12);
  letter-spacing: -0.14px;
}
.XG-footer .XG-footer-link .sub:not(.no-hover):hover {
  cursor: pointer;
  color: var(--color-white);
}
.XG-footer .XG-footer-link .menu .sub.qq {
  color: var(--color-white);
  background: url(../images/icon/icon_qq.svg) no-repeat;
  background-size: 20px 24px;
  text-indent: 32px;
  padding: 4px 0;
}
.XG-footer .XG-footer-link .menu .sub.weChat {
  color: var(--color-white);
  background: url(../images/icon/icon_weChat.svg) no-repeat;
  background-size: 20px 16px;
  text-indent: 32px;
}
.XG-footer .XG-footer-link .contact {
  text-align: right;
}
.XG-footer .XG-footer-link .contact .qr {
  width: 100px;
  height: 100px;
}
.XG-footer .XG-footer-link .contact .title {
  color: var(--color-white);
  font-size: var(--font-size-14);
  line-height: var(--font-size-20);
  font-weight: 250;
  letter-spacing: -0.14px;
  margin: 12px 0 6px 0;
}
.XG-footer .XG-footer-link .contact .phone {
  color: var(--color-white);
  font-size: var(--font-size-20);
  line-height: var(--font-size-27);
  font-weight: 380;
  letter-spacing: -0.2px;
}
.XG-footer .XG-footer-copyright {
  margin-top: 40px;
  padding: 25px 0 88px 0;
}
.XG-footer .XG-footer-copyright .logo {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(135, 135, 135, 0.1);
  padding-bottom: 10px;
}
.XG-footer .XG-footer-copyright .logo span {
  display: flex;
  align-items: center;
  color: var(--color-white1);
  font-size: var(--font-size-14);
  line-height: var(--font-size-16);
  font-weight: 380;
  letter-spacing: -0.14px;
  margin-right: 12px;
  cursor: pointer;
}
.XG-footer .XG-footer-copyright .logo span img {
  width: 31px;
  height: 20px;
  margin-right: 8px;
}
.XG-footer .XG-footer-copyright .text {
  color: #444;
  font-size: var(--font-size-12);
  font-weight: 380;
  line-height: var(--font-size-16);
  letter-spacing: -0.12px;
  padding-top: 11px;
}
.XG-footer .XG-footer-copyright .text span {
  display: inline-block;
  width: 25px;
}
/* footer end */

/* case start*/
.XG-breadcrumb {
  width: 100%;
  margin-top: 56px;
  background-color: var(--color-grey-light);
}
.XG-breadcrumb a {
  color: var(--color-black-title);
  font-size: var(--font-size-20);
  font-weight: 305;
  line-height: 107px;
}
.XG-case-details {
  background-color: var(--color-grey-light);
}
.XG-case-details .XG-case-details-container {
  background-color: var(--color-white);
  padding: 60px;
}
.XG-case-details .XG-case-details-container .XG-case-details-title {
  margin-top: 0;
}
.XG-case-details .XG-case-details-container .XG-case-details-category {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--color-grey-light6);
  border-bottom: 1px solid var(--color-grey-light6);
  padding: 40px 0 28px 0;
}
.XG-case-details .XG-case-details-category .item {
  width: 33.333%;
  color: var(--color-grey);
  font-size: var(--font-size-20);
  font-weight: 250;
  line-height: var(--font-size-30);
  margin-bottom: 12px;
}
.XG-case-details .XG-case-details-relevant {
  margin-bottom: 80px;
}
/* case end */
/* news start*/
.XG-news-page {
  padding: 0;
  margin: 0;
  background-color: transparent;
}
.XG-news-page .XG-news-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 12px;
}
.XG-news-page .XG-news-container .XG-news-item {
  margin-bottom: 80px;
}
.XG-news-page .XG-news-container .XG-news-item .img {
  height: 285px;
}
.XG-news-page .XG-news-container .XG-news-item .sub {
  margin-bottom: 12px;
}
.XG-news-page .XG-news-container .XG-news-item .time,
.XG-news-details-container .XG-news-details-title .time {
  color: var(--color-grey-light2);
  font-size: var(--font-size-20);
  line-height: var(--font-size-30);
  font-style: normal;
  font-weight: 250;
}
.XG-news-details-container .XG-news-page-pagination {
  margin-bottom: 80px;
}
.XG-news-details-container .XG-news-details-title {
  margin-bottom: 0;
}
.XG-news-details-container .XG-news-details-title .time {
  margin-top: 12px;
}
.XG-news-details-container .XG-news-details-title .time span {
  width: 20px;
}
.XG-index .XG-article-pagination {
  margin-top: 20px;
}
.XG-index .XG-article-pagination .XG-container {
  display: grid;
  grid-template-columns: 3fr 3fr 1fr;
  grid-column-gap: 20px;
}
.XG-index .XG-article-pagination .item {
  background-color: var(--color-white);
  padding: 24px 28px;
}
.XG-index .XG-article-pagination .item .title {
  color: var(--color-grey);
  font-size: var(--font-size-20);
  line-height: var(--font-size-27);
  font-weight: 250;
  margin-bottom: 10px;
}
.XG-index .XG-article-pagination .item .text {
  color: var(--color-black-title);
  font-size: var(--font-size-24);
  line-height: var(--font-size-32);
  font-weight: 305;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height: 64px;
}
.XG-index .XG-article-pagination .return {
  background-color: var(--color-white);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-black-title);
  font-size: var(--font-size-20);
  line-height: var(--font-size-20);
  font-weight: 305;
  cursor: pointer;
}
.XG-index .XG-article-pagination .return i {
  background: url('../images/icon/icon_return.svg') no-repeat center;
  background-size: 50%;
  width: 44px;
  height: 44px;
  margin-right: 10px;
}
/* news end*/
/* contacet us start */
.XG-contact-us .XG-container-distribute {
  padding: 0 40px;
}
.XG-contact-us .contact-way {
  margin-left: 42px;
}
.XG-contact-us .contact-way .title {
  color: var(--color-grey);
  font-size: var(--font-size-20);
  line-height: var(--font-size-28);
  font-weight: 250;
  margin-top: 32px;
}
.XG-contact-us .contact-way .title.first {
  margin-bottom: 4px;
  margin-top: 0;
}
.XG-contact-us .contact-way .tel {
  color: var(--color-yellow);
  font-size: var(--font-size-40);
  line-height: var(--font-size-53);
  font-weight: 380;
}
.XG-contact-us .contact-way .way {
  display: flex;
  color: var(--color-black-title);
  font-size: var(--font-size-24);
  line-height: var(--font-size-32);
  font-weight: 380;
  letter-spacing: -0.24px;
  margin-top: 12px;
}
.XG-contact-us .contact-way .way .icon {
  max-width: 32px;
  margin-right: 12px;
}
.XG-contact-us .contact-way .qr {
  background-color: var(--color-white);
  width: 160px;
  height: 160px;
  margin-top: 4px;
}
.XG-contact-us .contact-way .qr img {
  max-width: 100%;
}
.XG-contact-us .contact-branch .contact-branch-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 40px;
  grid-row-gap: 40px;
}
.XG-contact-us .contact-branch .contact-branch-container .item {
  background-color: var(--color-grey-light);
  padding: 20px;
}
.XG-contact-us .contact-branch-container .item .country {
  display: flex;
  color: var(--color-black-title);
  font-size: var(--font-size-24);
  line-height: var(--font-size-32);
  font-weight: 450;
  margin-bottom: 20px;
}
.XG-contact-us .contact-branch-container .item .country img {
  width: 40px;
  height: 31px;
  margin-right: 20px;
}
.XG-contact-us .contact-branch-container .item .way {
  color: var(--color-grey);
  font-size: var(--font-size-20);
  line-height: var(--font-size-32);
  font-weight: 250;
}
.XG-contact-us .contact-branch-container .item .way:last-child {
  margin-bottom: 0;
}
/* contacet us end */
/* about us start */
.XG-about-us-grey {
  width: 100%;
  background-color: var(--color-grey-light);
  padding: 80px 0 120px 0;
}
.XG-about-us-grey .XG-container-head {
  margin-top: 0;
}
.XG-about-us-intro img {
  width: 100%;
}
.XG-about-us-intro .line {
  background-color: var(--color-yellow);
  width: 60px;
  height: 4px;
  margin: 40px 0;
}
.XG-about-us-intro .text {
  color: var(--color-black-title);
  font-size: var(--font-size-24);
  line-height: var(--font-size-40);
  font-weight: 250;
  margin-bottom: 40px;
}
.XG-about-us-intro .text:last-child {
  margin-bottom: 0;
}
.XG-about-us-brand {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 12px;
  padding-bottom: 120px;
}
.XG-about-us-brand .item {
  background-color: var(--color-grey-light);
}
.XG-about-us-brand .item .img {
  width: 351px;
  height: 200px;
}
.XG-about-us-brand .item .img img {
  width: 100%;
  min-height: 100%;
}
.XG-about-us-brand .item .content {
  padding: 40px 0 80px 40px;
}
.XG-about-us-brand .item .title {
  color: var(--color-black-title);
  font-size: var(--font-size-24);
  line-height: var(--font-size-32);
  font-weight: 450;
  margin-bottom: 20px;
}
.XG-about-us-brand .item .sub {
  color: var(--color-black-title);
  font-size: var(--font-size-20);
  line-height: var(--font-size-30);
  font-weight: 250;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
}
.XG-about-us-flow {
  display: flex;
  padding: 40px 0 160px 0;
}
.XG-about-us-flow .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 40px;
}
.XG-about-us-flow .item:hover .icon {
  background-color: var(--color-yellow);
}
.XG-about-us-flow .item:hover .icon .default {
  display: none;
}
.XG-about-us-flow .item:hover .icon .active {
  display: block;
}
.XG-about-us-flow .item .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-yellow);
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
  width: 120px;
  height: 120px;
  margin-bottom: 39px;
}
.XG-about-us-flow .item .icon .active {
  display: none;
}
.XG-about-us-flow .item .text {
  color: var(--color-black-title);
  font-size: var(--font-size-24);
  line-height: var(--font-size-30);
  font-weight: 380;
}
.XG-about-us-flow .arrow {
  background: url('../images/icon/flow_arrow.svg') no-repeat 100%;
  background-position: 0 40px;
  width: 49px;
}
.XG-about-us-qualifications {
  width: 100%;
  height: 100%;
  position: relative;
  padding-bottom: 50px;
}
.XG-about-us-qualifications .XG-about-us-qualifications-container {
  padding-bottom: 30px;
  overflow: hidden;
}
.XG-about-us-qualifications .swiper-button:after {
  font-size: var(--font-size-26);
  color: #898989;
}
.XG-about-us-qualifications .swiper-button-prev {
  left: 42%;
  right: initial;
  top: initial;
  bottom: -20px;
  z-index: 2;
}
.XG-about-us-qualifications .swiper-button-next {
  right: 42%;
  left: initial;
  top: initial;
  bottom: -20px;
  z-index: 2;
}
.XG-about-us-qualifications .swiper-pagination {
  color: var(--color-black-title);
  font-size: var(--font-size-24);
  font-weight: 350;
  bottom: -6px;
  z-index: 0;
}
.XG-about-us-qualifications .swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  width: 444px;
  box-sizing: border-box;
  padding: 32px 32px 0 32px;
}
.XG-about-us-qualifications .swiper-slide .img {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 350px;
}
.XG-about-us-qualifications .swiper-slide .img img {
  width: 100%;
  max-height: 100%;
}
.XG-about-us-qualifications .swiper-slide .title {
  color: var(--color-black-title);
  text-align: center;
  font-size: var(--font-size-24);
  line-height: var(--font-size-32);
  font-weight: 330;
  padding-bottom: 40px;
}
.XG-about-us-promise {
  display: flex;
  margin-bottom: 120px;
}
.XG-about-us-promise .img {
  width: 766px;
  height: 581px;
}
.XG-about-us-promise .img img {
  width: 100%;
  min-height: 100%;
}
.XG-about-us-promise .XG-about-us-intro {
  flex: 1;
  background-color: var(--color-grey-light);
  padding: 60px;
}
/* about us end */
/* animate */
@keyframes ripple {
  0% {
    width: 20%;
    height: 20%;
    opacity: 0.7;
  }
  50% {
    width: 50%;
    height: 50%;
    opacity: 0.5;
  }
  80% {
    width: 80%;
    height: 80%;
    opacity: 0.3;
  }
  100% {
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}