@charset "utf-8";

html,
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
fieldset,
p,
blockquote,
input,
form,
span,
img,
nav,
header,
a,
button {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0
}


/*清除浮动代码*/
.cl:after {
  display: block;
  clear: both;
  content: "";
  visibility: hidden;
  height: 0
}

.cl {
  zoom: 1
}



ul,
li,
ol {
  list-style: none
}

a {
  text-decoration: none;
  color: #000
}


.flex {
  display: flex;
  flex-wrap: nowrap;
}

.guide_ul {
  width: 100vw;
}

.guide_ul .guide_li {
  height: calc(100vh/3);
  display: block;
}

.guide_div1 {
  display: flex;
  width: 100%;
}


/* .wz_top {
  display: flex;
  width: 100%;
  height: 7.2vh;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: left 0.6vw top 1.2vh;
  background-size: 20%;
  position: absolute;
  right: 0;
  bottom: 0;
}


.wz_top1 {
  background-image: url(../images/wz_top1.svg);
}

.wz_top2 {
  background-image: url(../images/wz_top2.svg);
} */


.guide_padding_left {
  height: auto;
  padding-left: 8px;
  background-color: #fff;
}

.guide_div1_right .xdq {
  height: 100%;
  width: 3.6vh;
  background: url(../images/dq1.svg) no-repeat center #000;
  flex-shrink: 0;
}

.guide_ul .guide_li:hover .guide_div3_right {

  height: calc(100vh/3 - (7.2vh));
  background-color: #B4B4B4;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2) inset, -4px -4px 4px rgba(0, 0, 0, 0.2) inset
}



.guide_ul .guide_li:hover .guide_div4 {

  height: 4.5vw;
  width: 4.5vw;
  margin-top: calc(100vh/3 - (7.2vh) - (4.5vw));
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2) inset, -4px -4px 4px rgba(0, 0, 0, 0.2) inset
}

.guide_ul .guide_div1,
.guide_ul .guide_div2Box {
  height: 3.6vh;
  background-color: #fff;
  /* padding-left: 1vh; */
}

.guide_ul .guide_div1 {
  display: flex;
  align-items: center;
}

.guide_ul .guide_div2Box {
  padding-top: 0.5vh;
  padding-right: 0.5vh;
}

.guide_ul .guide_div2 {
  height: 100%;
  background-size: 0 contain;
  background-repeat: no-repeat;
  background-position: left;
}

.guide_ul .guide_div1 .guide_div1_left {

  flex-shrink: 0;
  height: 2.5vh;
  background-repeat: no-repeat;
  background-position: left;
  background-size: contain;
  margin-right: 2vh;
}

.guide_ul .guide_div1 .guide_div1_right {

  height: 100%;
  line-height: 100%;
  color: #fff;
  font-size: 2vh;
  font-weight: bold;
  text-align: right;
  display: flex;
  align-items: center;
  width: 100%;
}

.guide_div1_right span {
  margin-right: 1vw;
  width: 100%;
}


.guide_div3 {
  height: calc(100vh/3 - (7.2vh));
  display: flex
}

.guide_div3_left {
  width: calc(100vh/3 - (7.2vh));
  height: 100%;
  flex-shrink: 0;
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: center center;
}

.guide_div3_right {
  width: 100%;
  height: 100%;
  background-color: #B4B4B4;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  position: relative;
}


.guide_div4 {
  height: 4.5vw;
  width: 4.5vw;
  background-image: url(../images/jt.svg);
  background-repeat: no-repeat;
  background-position: left 0.6vw top 1.2vh;
  background-size: 20%;
  position: absolute;
  right: 0;
  bottom: 0;
}

.yanse1 {
  background-color: #D30000;
}

.yanse2 {
  background-color: #EABF0A;

}

.yanse3 {
  background-color: #004FFF;

}

.yanse4 {
  background-color: #648400;

}

.yanse5 {
  background-color: #DD4A00;

}

.yanse6 {
  background-color: #B700B7;

}

.dq21 {
  background-image: url(../images/dq2.svg);
}

.dq22 {
  background-image: url(../images/dq22.svg);
}

.dq23 {
  background-image: url(../images/dq23.svg);
}

.dq24 {
  background-image: url(../images/dq24.svg);
}

.dq25 {
  background-image: url(../images/dq25.svg);
}

.dq26 {
  background-image: url(../images/dq26.svg);

}

.wz21 {
  background-image: url(../images/wz2.svg);
}

.wz22 {
  background-image: url(../images/wz22.svg);
}


.wz23 {
  background-image: url(../images/wz32.svg);
}

.wz24 {
  background-image: url(../images/wz42.svg);
}

.wz25 {
  background-image: url(../images/wz52.svg);
}

.wz26 {
  background-image: url(../images/wz62.svg);
}


.left1 {
  background-image: url(../images/wz1.svg);
  width: 12vw;
}

.left2 {
  background-image: url(../images/wz21.svg);
  width: 28vw;
}

.left3 {
  background-image: url(../images/wz31.svg);
  width: 25vw;
}

.left4 {
  background-image: url(../images/wz41.svg);
  width: 10vw;
}

.left5 {
  background-image: url(../images/wz51.svg);
  width: 25vw;
}

.left6 {
  background-image: url(../images/wz61.svg);
  width: 26vw;
}



.right1 {
  background: #D30000;
}


.right2 {
  background: #EABF0A;
}

.right3 {
  background: #004FFF;
}

.right4 {
  background: #648400;
}

.right5 {
  background: #DD4A00;
}

.right6 {
  background: #B700B7;
}


.guide_li1,
.guide_li1_Mobile {
  background-color: #D30000;
}

.guide_li2 {
  background-color: #EABF0A;
}

.guide_li3 {
  background-color: #004FFF;
}


.guide_li4 {
  background-color: #648400;
}

.guide_li5 {
  background-color: #DD4A00;
}

.guide_li6 {
  background-color: #B700B7;
}

@media (max-width: 768px) {

  .wz21 {
    background-image: url(../images/wz2_model.svg);
  }


  .wz23 {
    background-image: url(../images/wz32_model.svg);
  }


  .wz25 {
    background-image: url(../images/wz52_model.svg);
  }


  .wz22 {
    background-image: url(../images/wz22_model.svg);
  }


  .wz24 {
    background-image: url(../images/wz42_model.svg);
  }

  .wz26 {
    background-image: url(../images/wz62_model.svg);
  }


  .guide_ul .guide_div1 .guide_div1_left {

    flex-shrink: 0;
    height: 2.5vh;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    margin-right: 1vh;
  }


  .flex {
    flex-direction: column
  }

  .guide_ul .guide_li {
    height: calc(100vh/6);
  }

  .guide_div3 {
    height: calc(100vh/6 - 4vh);
    display: flex
  }

  .guide_div3_left {
    width: calc(100vh/6 - 4vh);
    height: 100%;
    flex-shrink: 0;
  }

  .guide_ul .guide_div1,
  .guide_ul .guide_div2Box {
    height: 2vh;
    /* padding-left: 1vh; */
  }

  .guide_div1_right .xdq {
    width: 2vh;
  }

  .guide_ul .guide_div1 .guide_div1_right {
    font-size: 1vh;
  }

  .guide_ul .guide_div2Box {
    padding-top: 0.2vh;
  }



  .guide_div3_left {
    width: calc(100vh/6 - 4vh);
  }


  .guide_ul .guide_li:hover .guide_div3_right {

    width: 100%;
    height: 100%;
    background-color: #B4B4B4;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2) inset, -4px -4px 4px rgba(0, 0, 0, 0.2) inset
  }



  .guide_ul .guide_li:hover .guide_div4 {

    height: 4vh;
    width: 4vh;
    background-size: 25%;
    background-position: left 0.6vh top 0.6vh;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2) inset, -4px -4px 4px rgba(0, 0, 0, 0.2) inset
  }


  .guide_div4 {
    height: 4vh;
    width: 4vh;
    background-size: 25%;
    background-position: left 0.6vh top 0.6vh;
  }

  .left1 {
    width: 27vw;
  }

  .left2 {
    width: 58vw;
  }

  .left3 {
    width: 55vw;
  }

  .left4 {
    width: 22vw;
  }

  .left5 {
    width: 55vw;
  }

  .left6 {
    width: 58vw;
  }


}