.index-hkc {background: url(/images/index-hkc.jpg) no-repeat center bottom;}
.index-hkc .col{ float: left; width: 221px; height: 305px; margin: 0 23px 27px 0; border-top-right-radius: 18px;border-bottom-left-radius: 18px; box-sizing: border-box; padding-top: 138px; text-align: center; position: relative;}
.index-hkc .col:before{ bottom: 78px; position: absolute; content: ""; left: 98px; width: 25px; height: 1px; background: #9d9d9e;}
.index-hkc .col:nth-of-type(5n){ margin-right: 0;}
.index-hkc .col:nth-of-type(1){ background:url(/images/hkc1.jpg) no-repeat center 39px #fff;}
.index-hkc .col:nth-of-type(2){ background:url(/images/hkc2.jpg) no-repeat center 39px #fff;}
.index-hkc .col:nth-of-type(3){ background:url(/images/hkc3.jpg) no-repeat center 39px #fff;}
.index-hkc .col:nth-of-type(4){ background:url(/images/hkc4.jpg) no-repeat center 39px #fff;}
.index-hkc .col:nth-of-type(5){ background:url(/images/hkc5.jpg) no-repeat center 39px #fff;}
.index-hkc .col:nth-of-type(6){ background:url(/images/hkc6.jpg) no-repeat center 39px #fff;}
.index-hkc .col:nth-of-type(7){ background:url(/images/hkc7.jpg) no-repeat center 39px #fff;}
.index-hkc .col:nth-of-type(8){ background:url(/images/hkc8.jpg) no-repeat center 39px #fff;}
.index-hkc .col:nth-of-type(9){ background:url(/images/hkc9.jpg) no-repeat center 39px #fff;}
.index-hkc .col:nth-of-type(10){ background:url(/images/hkc10.jpg) no-repeat center 39px #fff;}
.index-hkc .col span:nth-of-type(1){ display: block; line-height: 100%; color: #333333; font-size: 26px; padding-bottom: 36px;}
.index-hkc .col span em{ display: block; padding-bottom: 14px;font-size: 26px;font-style: normal;}
.index-hkc .col span:nth-of-type(2){ display: block; font-size: 12px; font-family: Arial; color: #858586; line-height: 16px;}
.index-hkc .col:hover:before{ background: #fff;}
.index-hkc .col:hover em{ color: #fff;}
.index-hkc .col:hover span{ color: #fff;}
.index-hkc .col:nth-of-type(1):hover{ background:url(/images/hkc11.png) no-repeat center 39px #fac069;}
.index-hkc .col:nth-of-type(2):hover{ background:url(/images/hkc21.png) no-repeat center 39px #fac069;}
.index-hkc .col:nth-of-type(3):hover{ background:url(/images/hkc31.png) no-repeat center 39px #fac069;}
.index-hkc .col:nth-of-type(4):hover{ background:url(/images/hkc41.png) no-repeat center 39px #fac069;}
.index-hkc .col:nth-of-type(5):hover{ background:url(/images/hkc51.png) no-repeat center 39px #fac069;}
.index-hkc .col:nth-of-type(6):hover{ background:url(/images/hkc61.png) no-repeat center 39px #fac069;}
.index-hkc .col:nth-of-type(7):hover{ background:url(/images/hkc71.png) no-repeat center 39px #fac069;}
.index-hkc .col:nth-of-type(8):hover{ background:url(/images/hkc81.png) no-repeat center 39px #fac069;}
.index-hkc .col:nth-of-type(9):hover{ background:url(/images/hkc91.png) no-repeat center 39px #fac069;}
.index-hkc .col:nth-of-type(10):hover{ background:url(/images/hkc10.png) no-repeat center 39px #fac069;}section.index-bannerbox{padding:40px 0;}
.index-bannerbox {
    
background: linear-gradient( 135deg, rgba(245, 108, 108, .1) 25%,transparent 0,transparent 50%,rgba(245, 108, 108, .1) 0,rgba(245, 108, 108, .1) 75%,transparent 0 );
background-size: 8px 8px;
background: rgba(250, 250, 250, .3) url(/images/travel_logobg.png) no-repeat center center / cover;
}
.index-bannerbox li .box {
  position: relative;
  display: flex;
  padding: 36px;
  background-color: #fff;
  box-shadow: inset 0px 0px 0px 1px #ffffff;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 4px 10px rgb(0 0 0 / 0%);
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
}
.index-bannerbox li .box:hover {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
    box-shadow: 0 4px 10px rgb(0 0 0 / 5%);
    background: rgb(250, 250, 250) url(/images/fangrenbag1.png) no-repeat center center
}
.index-bannerbox li .box .title{
  position: relative;
  padding-right: 10px;
  width: calc(100% - 60px);
}
.index-bannerbox li .box .tit {
  margin-bottom: 4px;
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
  font-size: 20px;
}
.index-bannerbox li .box .text {
  width: 100%;
  font-size: 16px;
  line-height: 30px;
  color: #505050;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-transition: all 0.4s 0.2s linear;
  transition: all 0.4s 0.1s linear;
}
.index-bannerbox li .box .img {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius:50%;
  background-image: radial-gradient(circle, rgba(245, 108, 108, 0.1),rgba(196, 0, 0, 0.1));
  overflow: hidden;
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
}
.index-bannerbox li .box:hover .img {
    opacity: 0;
}
.index-bannerbox li .box .img i {
  font-size: 36px;
  line-height: 36px;
  display: block;
  padding: 14px 14px;
  color: var(--main-orange-color);
}
.index-bannerbox li .box .img i.us::before {
  content: "\e82d";
}
.index-bannerbox li .box .img i.ca::before {
  content: "\e84f";
}
.index-bannerbox li .box .img i.rs::before {
  content: "\e859";
}
.index-bannerbox li .box .img .icon {
  width: 4em;
  height: 4em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.about-content {
  display: flex;
  justify-content: space-between;
  background: #f7f7f7;
}
.about-content > img {
  width: 26.6667%;
  object-fit: cover;
}
.about-content .about-main {
  width: 65%;
  margin-right: 50px;
}
.about-main .main-title {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e7e7e7;
  padding: 35px 0 15px;
}
.about-main .main-title img {
  margin-right: 20px;
  width:60px;
}
.about-main .main-title .title h3 {
  color: #333;
  font-size: 24px;
}
.about-main .main-title .title p {
  color: #333;
  font-size: 12px;
  margin-top: 5px;
}
.about-main h4 {
  display: flex;
  align-items: center;
  color: #333;
  font-size: 18px;
  margin-top: 30px;
  margin-bottom: 15px;
}
.about-main h4 img {
  margin-right: 10px;
}
.about-main > p {
  color: #333;
  font-size: 14px;
  line-height: 24px;
}