@font-face {

  font-family: "hy";

  src: url("../images/img8/HYGuoQiangW.ttf");

}

.index1 {

  background: url(../images/img8/bg1.jpg) no-repeat center;

}

.f1main {

  height: 100vh;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

}

.f1_top {

  position: relative;

}

.f1_top_img {

  position: absolute;

  right: -100px;

  top: -30px;

}



.f1_top h3 {

  font-family: "hy";

  font-size: 60px;

  color: #d2b3ac;

}

.f1main h4 {

  font-family: "hy";

  font-size: 22px;

  color: #d2b3ac;

}

.f1_line {

  width: 710px;

  height: 1px;

  background-color: #d2b3ac;

  margin: 30px 0;

}



.f2_imgbox {

  display: flex;

}

.f1_up {

  position: absolute;

  bottom: 120px;

}

.index_up {

  animation: chand 3s linear 0s infinite;

}

@-webkit-keyframes chand {

  0% {

    -webkit-transform: translate(0, 0);

  }

  10% {

    -webkit-transform: translate(0, 6px);

  }

  20% {

    -webkit-transform: translate(0, 0);

  }

  30% {

    -webkit-transform: translate(0, 6px);

  }

  40% {

    -webkit-transform: translate(0, 0);

  }

  100% {

    -webkit-transform: translate(0, 0);

  }

}

/* index2 */

.index2 {

  background: url(../images/img8/bg2.jpg) no-repeat center;

}

.gg_title {

  display: flex;

  justify-content: center;

  align-items: center;

  margin: 50px 0;

  opacity: 0;

  transform: translateY(150px);

  transition: all 1s ease;

  transition-delay: 0.4s;

}

.gg_title h3 {

  font-size: 36px;

  color: #d2b3ac;

  margin: 0 4px;

}

.active .gg_title {

  opacity: 1;

  transform: translateY(0);

}

.f2_top {

  display: flex;

}

.f2_item {

  width: 200px;

  height: 250px;

  position: relative;

  overflow: hidden;

  margin: 0 20px;

  margin-top: 20px;

}

.f2_bg {

  position: absolute;

}

.f2_bg2 {

  position: absolute;

  left: -100%;

  transition: all 0.6s ease;

}

.f2_cont {

  position: absolute;

  z-index: 99;

  left: 50%;

  top: 45%;

  transform: translate(-50%, -50%);

  display: flex;

    flex-direction: column;

    align-items: center;

}

.f2_cont h3 {

  width: 140px;

  font-size: 26px;

  color: #ffffff;

  text-align: center;

}

.f2_item:hover .f2_bg2 {

  left: 0;

}

.f2_top_img {

  margin-bottom: 10px;

  width: 98px;

  height: 98px;

}

.f2_item1 {

  margin-top: -100px;

}

.f2_item2 {

  margin-top: -40px;

}



.f2_btm {

  display: flex;

  justify-content: center;

  position: relative;

}

.f2_btm_line1,

.f2_btm_line2,

.f2_btm_line3 {

  position: absolute;

}

.f2_btm_line1 {

  left: 150px;

  top: 25px;

  opacity: 0;

  transition: all 0.6s ease;

  transform: translateY(50px);

  transition-delay: 1.6s;

}

.f2_btm_line2 {

  right: 150px;

  top: 25px;

  opacity: 0;

  transition: all 0.6s ease;

  transform: translateY(50px);

  transition-delay: 1.6s;

}

.f2_btm_line3 {

  bottom: -60px;

  opacity: 0;

  transition: all 0.6s ease;

  transform: translateY(50px);

  transition-delay: 2.4s;

}



.f2_line3 {

  opacity: 0;

  transform: translateY(50px);

  transition: all 0.8s ease;

  transition-delay: 1s;

}

.active .f2_line3 {

  opacity: 1;

  transform: translateY(0);

}

.f2_top .f2_item {

  opacity: 0;

  transform: translateY(50px);

  transition: all 0.6s ease;

  transition-delay: 1.2s;

}

.active .f2_top .f2_item {

  opacity: 1;

  transform: translateY(0);

}

.f2_top .f2_item:nth-child(2) {

  transition-delay: 1.4s;

}

.f2_top .f2_item:nth-child(3) {

  transition-delay: 1.6s;

}

.f2_top .f2_item:nth-child(4) {

  transition-delay: 1.8s;

}



.f2_top .f2_item:nth-child(5) {

  transition-delay: 2s;

}



.f2_btm .f2_item {

  opacity: 0;

  transform: translateY(50px);

  transition: all 0.6s ease;

  transition-delay: 1.4s;

}



.active .f2_btm .f2_item {

  opacity: 1;

  transform: translateY(0);

}

.f2_btm .f2_btm_item2 {

  transition-delay: 1.6s;

}

.f2_btm .f2_btm_item3 {

  transition-delay: 1.8s;

}

.active .f2_btm_line1 {

  opacity: 1;

  transform: translateY(0);

}

.active .f2_btm_line2 {

  opacity: 1;

  transform: translateY(0);

}

.active .f2_btm_line3 {

  opacity: 1;

  transform: translateY(0);

}

/* index3 */

.index3 {

  background: url(../images/img8/bg1.png) no-repeat center;

}

.f3_content {

  display: flex;

  justify-content: center;

  position: relative;

}

.f3c_bg {

  position: absolute;

}

.f3_box {

  width: 100%;

  display: flex;

  position: relative;

}

.f3_item {

  display: flex;

  align-items: center;

}

.f3_item h3 {

  color: #ffffff;

  font-size: 26px;

  margin-bottom: 16px;

  transition: all 0.4s ease;

}

.f3_item p {

  width: 334px;

  color: #ffffff;

  font-size: 14px;

  line-height: 20px;

  transition: all 0.4s ease;

}

.f3_item {

  position: absolute;

  opacity: 0;

  transform: translateX(100px);

  transition: all 0.6s ease;

}

.f3_item2 {

  top: 215px;

  left: 75px;

}

.f3_item3 {

  top: 390px;

  left: 305px;

}

.f3_item4 {

  top: 260px;

  left: 695px;

}

.f3_item5 {

  top: 540px;

  left: 675px;

}

.f3_item_img {

  margin-right: 10px;

}

.f3c_bg {

  opacity: 0;

  transition: all 1s ease;

}

.active .f3c_bg {

  opacity: 1;

  transition-delay: 1s;

}

.active .f3_item {

  opacity: 1;

  transform: translateX(0);

  transition-delay: 1s;

}

.active .f3_item2 {

  transition-delay: 1.2s;

}

.active .f3_item3 {

  transition-delay: 1.5s;

}

.active .f3_item4 {

  transition-delay: 1.8s;

}

.active .f3_item5 {

  transition-delay: 2.1s;

}



.f3_item:hover .f3_item_text h3 {

  color: #f8b06b;

}

.f3_item:hover .f3_item_text p {

  color: #f8b06b;

}

/* index4 */

.index4 {

  background: url(../images/img8/bg3.jpg) no-repeat center;

}

.f4_content {

  display: flex;

}



.f4_l {

  opacity: 0;

  transform: translateX(-100px);

  transition: all 0.8s ease;

}

.f4_r {

  opacity: 0;

  transform: translateX(100px);

  transition: all 0.8s ease;

}

.active .f4_l {

  opacity: 1;

  transform: translateX(0);

  transition-delay: 1s;

}

.active .f4_r {

  opacity: 1;



  transform: translateX(0);

  transition-delay: 1s;

}

.f4_l,

.f4_r {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

}

.f4_text {

  position: absolute;

  text-align: center;

  transition: all 0.6s ease;

}

.f4_text h3 {

  font-size: 26px;

  color: #ffffff;

  margin-bottom: 30px;

}

.f4_text p {

  width: 334px;

  color: #ffffff;

  font-size: 14px;

  line-height: 20px;

}

.f4_r .f4_text {

  margin-left: -30px;

}

.f4_l .f4_text {

  margin-left: 30px;

}

.f4_item:hover .f4_text {

  transform: translateY(-50px);

}

/* inidex5 */

.index5 {

  background: url(../images/img8/bg3.png) no-repeat center;

}

.f5_content {

  position: relative;

  display: flex;

  justify-content: center;

}

.f5_bg {

  position: absolute;

  left: 50%;

  top: -4px;

  transform: translate(-50%, 0);

  width: 700px;

}

.f5_bg img {

  width: 100%;

}

.f5_box {

  width: 100%;

}

.f5_item {

  width: 144px;

  height: 144px;

  position: absolute;

}

.f5_item img {

  width: 100%;

  height: 100%;

}

.f5_item h3 {

  width: 100%;

  text-align: center;

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  font-size: 24px;

  color: #ffffff;

  opacity: 0.8;

}

.f5_item {

  transition: all 0.8s ease;

  transition-delay: 0.3s;

}

.f5_item1 {

  left: 50%;

  margin-left: -72px;

  top: 50px;

  opacity: 0;

  transform: translateY(100px);

}

.f5_item2 {

  left: 280px;

  top: 110px;

  opacity: 0;

  transform: translateX(-100px);

  transition-delay: 0.5s;

}

.f5_item3 {

  right: 280px;

  top: 110px;

  opacity: 0;

  transform: translateX(100px);

  transition-delay: 0.5s;

}

.f5_item4 {

  top: 263px;

  left: 115px;

  opacity: 0;

  transform: translateX(-100px);

  transition-delay: 0.7s;

}

.f5_item5 {

  top: 263px;

  right: 115px;

  opacity: 0;

  transform: translateX(100px);

  transition-delay: 0.7s;

}

.f5_item6 {

  top: 430px;

  left: 280px;

  opacity: 0;

  transform: translateX(-100px);

  transition-delay: 0.9s;

}

.f5_item7 {

  top: 430px;

  right: 280px;

  opacity: 0;

  transform: translateX(100px);

  transition-delay: 0.9s;

}

.f5_item8 {

  left: 50%;

  margin-left: -72px;

  top: 485px;

  opacity: 0;

  transform: translateY(100px);

  transition-delay: 0.9s;

}

.active .f5_item {

  opacity: 1;

  transform: translateY(0);

}

.f5_item:hover img {

  transform: rotateY(-360deg);

  transition: all 0.5s ease-out 0s;

}

.f5_ch3 {

  width: 500px;

  color: #ffffff;

  font-size: 24px;

  line-height: 40px;

  text-align: center;

  position: absolute;

  top: 300px;

  opacity: 0;

  transition: all 0.8s ease;

  transform: translateY(100px);

}

.active .f5_ch3 {

  opacity: 1;

  transition-delay: 0.6s;

  transform: translateY(0);

}

/* index6 */

.index6 {

  background: url(../images/img8/bg3.png) no-repeat center;

}

.f6_content {

  display: flex;

  flex-direction: column;

  align-items: center;

}

.f6_content h3 {

  width: 980px;

  font-size: 20px;

  color: #ffffff;

  line-height: 40px;

  text-align: center;

  margin-top: 20px;

  margin-bottom: 40px;

  opacity: 0;

  transform: translateY(150px);

  transition: all .8s ease;

  transition-delay: .8s;

}

.f6_box {

  position: relative;

}

.f6_l,

.f6_r {

  width: 190px;

  height: 225px;

  position: absolute;

  top: -26px;

}

.f6_l {

  left: 178px;

  opacity: 0;

  transform: translateX(-150px);

  transition: all .8s ease;

  transition-delay: 1.2s;

}

.f6_r {

  right: 178px;

  opacity: 0;

  transform: translateX(150px);

  transition: all .8s ease;

  transition-delay: 1.2s;

}

.f6_l .f6_img {

  position: absolute;

  top: 12px;

  left: 14px;

}

.f6_r .f6_img {

  position: absolute;

  top: 7px;

  left: 47px;

}

.active .f6_content h3 {

  opacity: 1;

  transform: translateY(0);

}

.f6_c{

  opacity: 0;

  transform: translateY(150px);

  transition: all .8s ease;

  transition-delay: 1.2s;

}

.active .f6_c{

  opacity: 1;

  transform: translateY(0);

}

.active .f6_l {

  opacity: 1;

  transform: translateX(0);

}

.active .f6_r {

  opacity: 1;

  transform: translateX(0);

}

/* index6 */

.index7 {

  background: url(../images/img8/bg3.png) no-repeat center;

}



footer {

  width: 100%;

  height: 80px;

  background-color: #000000;

  position: absolute;

  bottom: 0;

  left: 0;

  display: flex;

  align-items: center;

  justify-content: space-around;

}



.footer_info1 {

  font-size: 12px;

  color: #c6c6c6;

  opacity: 0.36;

}

.footer_info2 {

  display: flex;

  align-items: center;

}

.footer_num {

  display: flex;

  margin-right: 50px;

}

.footer_info2 span {

  font-size: 12px;

  color: #c6c6c6;

  margin-right: 5px;

  opacity: 0.36;

}

.footer_info2 a {

  font-size: 12px;

  color: #c6c6c6;

  opacity: 0.36;

  margin: 0 10px;

}

.footer_a1 {

  display: flex;

  align-items: center;

}

.footer_a1 img {

  margin-right: 4px;

}