@charset "UTF-8";
.about1 {
  display: block;
  width: 100%;
  /* height: 43.75rem; */
  height: 43.75rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.about2 {
  margin-top: 7rem;
  display: grid;
  grid-template-columns: 38rem 1fr;
}
.about2 > * {
  overflow: hidden;
}
.about2 .img {
  position: relative;
}
.about2 .img img {
  position: relative;
  z-index: 1;
  bottom: 1.3rem;
}
.about2 .img::before {
  content: "";
  display: block;
  position: absolute;
  width: 37.125rem;
  left: -3.6rem;
  bottom: 0;
  height: 90%;
  background-color: #f5efef;
}
.about2 .img .absolute {
  width: 13.5rem;
  height: 14.5rem;
  line-height: 1.3;
  font-size: 1.875rem;
  left: 0;
  bottom: 0;
  z-index: 3;
  text-align: center;
  padding-top: 1rem;
}
.about2 .img .absolute .b500 {
  font-size: 5.633rem;
  line-height: 1.1;
}
.about2 .img .absolute .b500 span {
  font-size: 1.125rem;
}
.about2 .img .BGon.absolute {
  mix-blend-mode: multiply;
  z-index: 2;
}
.about2 .scroll {
  max-height: 27rem;
  padding-top: 3rem;
  line-height: 2.2;
}
.about2 .scroll .C333 {
  font-size: 1.375rem;
  margin-bottom: 2rem;
  line-height: 1.8;
}
.about2 .Con {
  font-size: 2.5rem;
  line-height: 2;
}
.about2 .C999 {
  font-size: 1.5rem;
}
.about2 .flex {
  font-size: 1.5rem;
  margin-top: 4rem;
}
.about2 .flex * {
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
  cursor: default;
}
.about2 .flex dd {
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.about2 .flex dd:hover {
  color: var(--color);
}
.about2 .flex .iconfont{
	font-size: 4.25rem;
  color: var(--color);
  margin-right: 0.813rem;
}
.about2 .flex img {
  margin-right: 0.813rem;
  border-radius: 50%;
}
.about2 .flex dd:hover img {
  background: rgba(180, 43, 44, 0.1333333333);
}
.about2 .flex dd ~ dd {
  margin-left: 5.75rem;
}

.about3 {
  margin-top: 7.3625rem;
}
.about3 img.absolute {
  margin: auto;
}
.about3 video {
  height: 29.375rem;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.about4 {
  margin-top: 9rem;
  display: grid;
  grid-template-columns: 48.813rem 1fr;
  margin-bottom: 9.125rem;
  font-size: 1.5rem;
  font-size: 1.5rem;
  line-height: 3rem;
}
.about4 > * {
  overflow: hidden;
}
.about4 img {
  width: 30.813rem;
  margin-left: 8rem;
}
.about4 .b400 {
  font-size: 2.25rem;
  margin-top: 5rem;
}
.about4 .Con {
  font-size: 2.5rem;
  margin-top: 4.2rem;
}
.about4 .content {
  margin-top: 3rem;
}
.about4 .BGon.absolute {
  top: 2rem;
  left: -5.4rem;
  width: 2.5rem;
  height: 0.25rem;
}

.about5::after {
  content: "";
  display: block;
  position: absolute;
  width: 13.063rem;
  right: 93rem;
  bottom: 0;
  height: 13.063rem;
  background-color: rgba(180, 43, 44, 0.0666666667);
}
.about5 .absolute {
  font-size: 18.688rem;
  bottom: 0;
  color: rgba(0, 0, 0, 0.0666666667);
  right: 0;
  line-height: 0.7;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.about6 {
  min-height: 58.125rem;
  -o-background-size: cover;
     background-size: cover !important;
  font-size: 1.5rem;
  overflow: hidden;
}
.about6 .b400 {
  font-size: 2.5rem;
  line-height: 1;
  margin-top: 6.72rem;
  margin-bottom: 1.4rem;
}
.about6 .swiper-container {
  text-align: center;
  color: #cccccc;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.about6 .swiper-container::after {
  content: "";
  display: block;
  position: absolute;
  left: 2rem;
  right: 2rem;
  bottom: 0.68rem;
  border-bottom: solid 1px rgba(219, 219, 219, 0.1333333333);
}
.about6 .swiper-slide {
  padding-bottom: 2rem;
  position: relative;
  cursor: pointer;
}
.about6 .swiper-slide:hover {
  color: var(--color);
}
.about6 .swiper-slide::after {
  position: absolute;
  bottom: 0;
  display: block;
  content: "";
  width: 1.375rem;
  height: 1.375rem;
  background-color: #e6e6e6;
  border-radius: 50%;
  left: 50%;
  box-shadow: inset 0 0 0 0.36rem #1e1e1e;
}
.about6 .on::after, .about6 .swiper-slide:hover:after {
  background-color: var(--color);
  border: dotted 1px var(--color);
}
.about6 .content {
  padding: 4.5rem 2rem;
}
.about6 #content dd {
  display: grid;
  grid-template-columns: 47.563rem 1fr;
}
.about6 #content dd > * {
  overflow: hidden;
}
.about6 #content dd img {
  width: 42.063rem;
  max-height: 28rem;
}
.about6 #content dd .b500 {
  font-size: 3rem;
}
.about6 #content dd .scroll {
  height: 19.5rem;
  padding-top: 4rem;
  font-size: 1rem;
  margin-top: 1rem;
}
.about6 #content dd .flex {
  margin-bottom: 2rem;
  -webkit-align-items: self-start;
    -moz-box-align: self-start;
      -ms-flex-align: self-start;
          align-items: self-start;
  line-height: 1.7;
}
.about6 #content dd .flex span {
  margin-right: 1.625rem;
}

.about7 {
  font-size: 1.5rem;
  line-height: 2;
  text-shadow: 1px 1px 1px rgba(215, 215, 217, 0.8666666667);
}
.about7 img {
  display: block;
  width: 100%;
  height: 58.625rem;
  -o-object-fit: cover;
    object-fit: cover;
}
.about7 .absolute {
  left: 12%;
  top: 10rem;
}
.about7 .b300 { 
  margin-top: 4.8rem; font-size: 120%; margin-bottom: 0.8rem;
}
.about7 .Con {
  font-size: 2.5rem;
}
.about7 p .Con{font-size: 1.5rem; margin-right:1px }
.pagination {
  text-align: center;
  padding: 1rem 0;
  -webkit-user-select: none;
    -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.pagination a, .pagination a:link, .pagination a:visited {
  width: 2.063rem;
  line-height: 2rem;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
  cursor: pointer;
  color: #999;
}
.pagination a + a {
  margin-left: 1rem;
}
.pagination .btn img { object-fit: contain; }
.pagination .btn {
  width: 1.563rem !important;
  height: 1.563rem !important;
  line-height: 1.563rem !important;
  border: solid 0.051rem #999;
  margin: 0 2.5rem;
  display: flex; justify-content: center; align-items: center;
}
.pagination .btn .iconfont{
  font-size: .6875rem;
}
.pagination .btn:last-child{margin-left:3.5rem}
.pagination .btn:hover {
  border-color: var(--color);
}
.pagination .btn:hover img {
  -webkit-filter: brightness(9);
          filter: brightness(9);
}
.pagination a:hover, .pagination .on {
  background-color: var(--color);
  color: white !important;
}

main.shop {
  background: #f5f5f5;
  overflow: hidden;
}

.shop1 {
  display: block;
  width: 100%;
  /* height: 28.125rem; */
      height: 43.75rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.shop2 {
  font-size: 1.25rem;
}
.shop2 .b500 {
  font-size: 3.25rem;
  margin-bottom: 1.1rem;
}

.shop3 {
  background: url(../img/shop7.png) center bottom no-repeat;
  -o-background-size: 100% 80%;
     background-size: 100% 80%;
  padding: 0 0 6.6rem;
}
.shop3 .grid4 {
  gap: 1.813rem;
  line-height: 1.6;
  margin-bottom: 3rem;
}
.shop3 .grid4 .flex {
  font-size: 1.25rem;
  line-height: 1.2;
  position: relative;
  padding-bottom: 2rem;
}
.shop3 .grid4 .flex::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.9rem;
  width: 1.563rem;
  height: 0.25rem;
  background: var(--color);
  margin: auto;
}
.shop3 .grid4 .flex img {
  -webkit-filter: brightness(0);
          filter: brightness(0);
  margin-right: 0.56rem;
}
.shop3 .grid4 .flex .iconfont{
  margin-right: 0.56rem;
  font-size: 1.375rem;
}
.shop3 .grid4 .b300 {
  font-size: 1.75rem;
}
.shop3 .grid4 a {
  overflow: hidden;
  padding: 1.5rem 2.6rem 0;
  min-height: 12.625rem;
  display: block;
  cursor: pointer;
  background: #fff url(../img/shop5.png) no-repeat right bottom;
  border: solid 0.063rem #cccccc;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
.shop3 .grid4 a:hover {
  background-color: var(--color);
  color: white;
  -webkit-transform: translateY(-4px);
     -moz-transform: translateY(-4px);
      -ms-transform: translateY(-4px);
       -o-transform: translateY(-4px);
          transform: translateY(-4px);
  border-color: var(--color);
}
.shop3 .grid4 a:hover .flex img {
  -webkit-filter: none;
          filter: none;
}

.shop4 {
  background: url(../img/shop3.png) center top no-repeat;
  overflow: hidden;
  margin-top: 9.5rem;
  padding-top: 2.18rem;
  padding-bottom: 6.25rem;
}
.shop4 img {
  position: relative;
  left: -2.25rem;
}
.shop4 .container {
  display: grid;
  grid-template-columns: 1fr 31.875rem;
}
.shop4 .tl {
  font-size: 1.75rem;
  color: #999;
  line-height: 1.4;
  margin-top: 1.3rem;
}
.shop4 .tl .Con {
  font-size: 2.506rem;
}
.shop4 .tl::after {
  display: block;
  content: "";
  width: 2.063rem;
  height: 0.5rem;
  background-color: var(--color);
}
.shop4 .tr {
  text-align: right;
  font-size: 1.125rem;
  line-height: 2.5;
}
.shop4 .tr .Con {
  line-height: 0.9;
  font-size: 1.75rem;
  letter-spacing: 0.525rem;
}
.shop4 .tr .b500 {
  font-size: 9.104rem;
  letter-spacing: -0.731rem;
}
.shop4 .tr b {
  font-size: 2rem;
}
.shop4 .tr a {
  position: relative;
  padding-left: 1rem;
  overflow: hidden;
}
.shop4 .tr a:before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 0.438rem;
  height: 0.438rem;
  border-radius: 50%;
  background: var(--color);
}
.shop4 .tr a:hover {
  color: var(--color);
  cursor: pointer;
}
.shop4 .tr a:hover:after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 1rem;
  right: 0;
  bottom: 0rem;
  border-top: solid 1px var(--color);
}

.shop5 {
  padding: 2.5rem;
  margin-bottom: 1.5rem;
  color: #333;
  line-height: 2.2;
  display: grid;
  grid-template-columns: 40.563rem 1fr;
  font-size: 1.125rem;
}
.shop5 img {
  width: 38.75rem;
  height: 24.188rem;
}
.shop5 .b400 {
  font-size: 2.25rem;
}
.shop5 .Con {
  font-size: 2rem;
  line-height: 1.2;
}
.shop5 hr {
  opacity: 0.3;
}
.shop5 .ellipsis {
  font-size: 1rem;
}
.shop5 .btn {
  width: 12.563rem;
  text-align: center;
  background: var(--color);
  color: white;
  margin-top: 0.5rem;
  line-height: 3.125rem;
  border-radius: 0.25rem;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
.shop5 .btn:hover {
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
}
.shop5 .btn + .btn {
  margin-left: 1.25rem;
}
.shop5 .btn1 {
  width: 8.625rem;
  left: 0.9rem;
  top: -1.2rem;
  line-height: 2.25rem;
  background-color: #f5f5f5;
  color: var(--color);
  text-align: center;
  border-radius: 2rem;
  font-size: 1.125rem;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
  border: solid 0.063rem var(--color);
}
.shop5 .btn1:hover {
  background: rgba(180, 43, 44, 0.2);
}

.shop6 {
  padding: 2.5rem; margin-bottom:4rem;
}
.shop6 .p1{
	font-size: 2.133rem; padding: 1rem 0 2rem
}
.shop6 .grid3 {
  gap: 1.25rem;
  font-size: 1.375rem;
  line-height: 1.8;
}
.shop6 .grid3 img {
  width: 100%;
  height: 17.188rem;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.shop6 .grid3 p {
  padding-bottom: 0.5rem;
}
.shop6 .grid3 a {
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  -o-transition: -o-transform 0.2s;
  -moz-transition: transform 0.2s, -moz-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s, -moz-transform 0.2s, -o-transform 0.2s;
  box-shadow: 0 0 0 1rem #fff;
  position: relative;
  box-shadow: inset 0 17.188rem var(--color);
}
.shop6 .grid3 a:hover {
  color: var(--color);
  -webkit-transform: translateY(-5px);
     -moz-transform: translateY(-5px);
      -ms-transform: translateY(-5px);
       -o-transform: translateY(-5px);
          transform: translateY(-5px);
}
.shop6 .grid3 a:hover img {
  opacity: 0.88;
}

.crumbs {
  font-size: 1rem;
  padding: 2rem 0;
  color: #999;
  font-family: "medium";
}
.crumbs a, .crumbs a:link, .crumbs a:visited {
  color: #999;
}
.crumbs span, .crumbs a:hover {
  color: #333;
}

.news1 {
  display: grid;
  margin: 1.938rem 0 4rem;
  gap: 1.313rem;
  -webkit-justify-content: flex-start;
     -moz-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-align-items: self-start;
     -moz-box-align: self-start;
      -ms-flex-align: self-start;
          align-items: self-start;
  grid-template-columns: 1fr 29.188rem;
}
.news1 > * {
  overflow: hidden;
}
.news1 .grid1 {
  gap: 1rem;
}
.news1 .Con + hr {
  opacity: 0.1;
}
.news1 .Con {
  font-size: 1.75rem;
  border-left: solid 0.313rem var(--color);
  padding-left: 1.563rem;
  margin: 1.56rem 0;
  line-height: 0.9;
}
.news1 .pagination {
  padding: 2.5rem 0 3rem;
}

.crumbs + .news1 {
  margin-top: 0;
}

.news2 {
  color: white;
}
.news2 .btn {
  width: 9.563rem;
  display: block;
  line-height: 3.75rem;
  text-align: center;
  background-color: #b42b2c;
  font-size: 1.5rem;
  color: white !important;
  border-radius: 0.375rem;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
.news2 .btn:hover {
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
}
.news2 .absolute {
  left: 2.5rem;
  right: 3rem;
  letter-spacing: 0.175rem;
  font-style: italic;
  font-size: 2.25rem;
  line-height: 3rem;
}
.news2 .absolute p {
  margin-bottom: 2.5rem;
}
.news2 .absolute p span {
  font-size: 3.5rem;
  margin-right: 0.2rem;
}
.news2 .absolute img {
  max-height: 7rem;
  position: relative;
  bottom: 1rem;
}
.news2 .absolute img + p {
  margin-bottom: 1.8rem;
  line-height: 1rem;
}
.news2 > img {
  width: 100%;
  color: white;
}

.news3 {
  font-size: 1rem;
  color: #999;
}
.news3 dl {
  padding: 3rem 2.5rem 0.8rem 2.8rem;
}
.news3 dl a {
  margin-bottom: 2.1rem;
  display: block;
  position: relative;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
  cursor: pointer;
}
.news3 dl a:hover, .news3 dl a:hover * {
  color: var(--color) !important;
}
.news3 dl a:before {
  content: "";
  display: block;
  position: absolute;
  left: -1.5rem;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--color);
  border-radius: 50%;
  top: 0.45rem;
}
.news3 .ellipsis {
  font-size: 1.125rem;
  color: #333;
  margin-bottom: 1.1rem;
  line-height: 1.4;
}

.news4 {
  gap: 2.438rem;
  color: #333;
}
.news4 a {
  display: grid;
  grid-template-columns: 24rem 1fr;
  margin: 0 1.75rem;
  border-bottom: solid 1px #ccc;
  line-height: 1.8;
  -webkit-transition: all 0.1s;
  -o-transition: all 0.1s;
  -moz-transition: all 0.1s;
  transition: all 0.1s;
}
.news4 a > * {
  overflow: hidden;
}
.news4 a:hover {
  border-color: var(--color);
  color: var(--color);
}
.news4 a:hover .C999, .news4 a:hover .C666 {
  color: var(--color);
  opacity: 0.75;
}
.news4 a img {
  width: 21.875rem;
  height: 12.375rem;
}
.news4 a .b300 {
  font-size: 1.5rem;
  margin-bottom: 0.8rem;
}
.news4 a .line2 {
  margin-top: 1.4rem;
}

.news5 {
  line-height: 3.25rem;
  gap: 1px;
  background: #f0f0f0;
  border-top: solid 1px #f0f0f0;
}
.news5 a {
  background: white;
  -webkit-transition: background 0.3s;
  -o-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
}
.news5 a:hover {
  background: var(--color);
  color: white;
}

.news6 {
  padding: 2.25rem 1.75rem;
}
.news6 .b300 {
  font-size: 2rem;
  margin-bottom: 1.4rem;
}
.news6 hr {
  opacity: 0.2;
  margin: 2rem 0;
}
.news6 > p > span {
  margin-left: 5rem;
}
.news6 .content {
  min-height: 35vh;
  line-height: 2;
  color: #666;
}
.news6 .content a{
  border-bottom: 1px dotted #333;
  color: #b42b2c;
}
.news6 .content img {
  display: block;
  margin: 1rem 0;
}

.quality1 {
  padding-top: 2rem;
}
.quality1 img {
  width: 100%;
  display: block;
}

.quality2 {
  margin-top: 5rem;
  margin-bottom: 5rem;
}
.quality2 .p4{
	font-size: 1.5rem; margin-top:1.18rem
}
.quality2 .p1 {
  font-size: 2.5rem;
  color: #333;
  padding-top: 2.9rem;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 0.9rem;
}
.quality2 .p1::after, .quality2 .p1::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 0.5rem;
  background-color: #999999;
  margin: 1.3rem;
}
.quality2 .p2 {
  font-size: 1.125rem;
  color: #999;
}
.quality2 .p3 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  font-size: 6.718rem;
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
  text-fill-color: transparent;
  -webkit-text-stroke: 1px #000;
  opacity: 0.1;
  font-style: italic;
  line-height: 0.84;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.quality2.Cfff .p1, .quality2.Cfff .p2 {
  color: white;
}
.quality2.Cfff .p3 {
  -webkit-text-stroke: 1px #fff;
}

.quality3 {
  margin-top: 1rem;
}
.quality3 .desc {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.6666666667));
  background: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.6666666667));
  background: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.6666666667));
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6666666667));
  padding: 2.7rem 1.2rem 0;
  color: white;
  min-height: 38%;
  border-radius: 0.7rem;
  line-height: 1.6;
  text-align: center;
}
.quality3 .p1 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.quality3 .img {
  border-radius: 0.7rem;
}
.quality3 .img, .quality3 img {
  height: 31.25rem;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.quality3 .swiper-pagination {
  position: static;
  margin-top: 4rem;
  margin-bottom: 3rem;
}
.quality3 .swiper-pagination-bullet {
  height: 2rem;
  width: 2rem;
  position: relative;
  border-radius: 50%;
  opacity: 1;
  background: white;
}
.quality3 .swiper-pagination-bullet:after, .quality3 .swiper-pagination-bullet::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  border-radius: 50%;
}
.quality3 .swiper-pagination-bullet:after {
  -webkit-transform: scale(0.8);
     -moz-transform: scale(0.8);
      -ms-transform: scale(0.8);
       -o-transform: scale(0.8);
          transform: scale(0.8);
  background: -webkit-radial-gradient(var(--color) 2px, white 3px);
  background: -moz-radial-gradient(var(--color) 2px, white 3px);
  background: -o-radial-gradient(var(--color) 2px, white 3px);
  background: radial-gradient(var(--color) 2px, white 3px);
  z-index: 1;
}
.quality3 .swiper-pagination-bullet::before {
  background: white;
}
.quality3 .swiper-pagination-bullet-active::before {
  -webkit-animation: paginationAnimate 2.9s;
     -moz-animation: paginationAnimate 2.9s;
       -o-animation: paginationAnimate 2.9s;
          animation: paginationAnimate 2.9s;
}

.myPagination {
  margin-bottom: 5rem;
  right: 21rem;
  mix-blend-mode: multiply;
  text-align: left !important;
  width: 40% !important;
  left: 69% !important;
}
.myPagination .swiper-pagination-bullet {
  height: 2rem;
  width: 2rem;
  position: relative;
  border-radius: 50%;
  opacity: 1;
  background: white;
}
.myPagination .swiper-pagination-bullet:after, .myPagination .swiper-pagination-bullet::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  border-radius: 50%;
}
.myPagination .swiper-pagination-bullet:after {
  -webkit-transform: scale(0.8);
     -moz-transform: scale(0.8);
      -ms-transform: scale(0.8);
       -o-transform: scale(0.8);
          transform: scale(0.8);
  background: -webkit-radial-gradient(var(--color) 2px, white 3px);
  background: -moz-radial-gradient(var(--color) 2px, white 3px);
  background: -o-radial-gradient(var(--color) 2px, white 3px);
  background: radial-gradient(var(--color) 2px, white 3px);
  z-index: 1;
}
.myPagination .swiper-pagination-bullet::before {
  background: white;
}
.myPagination .swiper-pagination-bullet-active::before {
  -webkit-animation: paginationAnimate 2.9s;
     -moz-animation: paginationAnimate 2.9s;
       -o-animation: paginationAnimate 2.9s;
          animation: paginationAnimate 2.9s;
}
.myPagination .swiper-pagination-bullet {
  background-color: #cecece;
}
.myPagination .swiper-pagination-bullet:after {
  -webkit-transform: scale(0.8);
     -moz-transform: scale(0.8);
      -ms-transform: scale(0.8);
       -o-transform: scale(0.8);
          transform: scale(0.8);
  background: -webkit-radial-gradient(var(--color) 2px, white 3px);
  background: -moz-radial-gradient(var(--color) 2px, white 3px);
  background: -o-radial-gradient(var(--color) 2px, white 3px);
  background: radial-gradient(var(--color) 2px, white 3px);
  z-index: 1;
}
.myPagination .swiper-pagination-bullet::before {
  background: #fff;
  opacity: 1;
}

@-webkit-keyframes paginationAnimate {
  0% {
    background: conic-gradient(#dbdbdb 0, var(--color) 0);
  }
  5% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.05turn, var(--color) 0.05turn);
  }
  10% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.1turn, var(--color) 0.1turn);
  }
  15% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.15turn, var(--color) 0.15turn);
  }
  20% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.2turn, var(--color) 0.2turn);
  }
  25% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.25turn, var(--color) 0.25turn);
  }
  30% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.3turn, var(--color) 0.3turn);
  }
  35% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.35turn, var(--color) 0.35turn);
  }
  40% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.4turn, var(--color) 0.4turn);
  }
  45% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.45turn, var(--color) 0.45turn);
  }
  50% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.5turn, var(--color) 0.5turn);
  }
  55% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.55turn, var(--color) 0.55turn);
  }
  60% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.6turn, var(--color) 0.6turn);
  }
  65% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.65turn, var(--color) 0.65turn);
  }
  70% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.7turn, var(--color) 0.7turn);
  }
  75% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.75turn, var(--color) 0.75turn);
  }
  80% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.8turn, var(--color) 0.8turn);
  }
  85% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.85turn, var(--color) 0.85turn);
  }
  90% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.9turn, var(--color) 0.9turn);
  }
  94% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.92turn, var(--color) 0.92turn);
  }
  96% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 1turn);
  }
  100% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 1turn);
  }
}

@-moz-keyframes paginationAnimate {
  0% {
    background: conic-gradient(#dbdbdb 0, var(--color) 0);
  }
  5% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.05turn, var(--color) 0.05turn);
  }
  10% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.1turn, var(--color) 0.1turn);
  }
  15% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.15turn, var(--color) 0.15turn);
  }
  20% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.2turn, var(--color) 0.2turn);
  }
  25% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.25turn, var(--color) 0.25turn);
  }
  30% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.3turn, var(--color) 0.3turn);
  }
  35% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.35turn, var(--color) 0.35turn);
  }
  40% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.4turn, var(--color) 0.4turn);
  }
  45% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.45turn, var(--color) 0.45turn);
  }
  50% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.5turn, var(--color) 0.5turn);
  }
  55% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.55turn, var(--color) 0.55turn);
  }
  60% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.6turn, var(--color) 0.6turn);
  }
  65% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.65turn, var(--color) 0.65turn);
  }
  70% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.7turn, var(--color) 0.7turn);
  }
  75% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.75turn, var(--color) 0.75turn);
  }
  80% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.8turn, var(--color) 0.8turn);
  }
  85% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.85turn, var(--color) 0.85turn);
  }
  90% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.9turn, var(--color) 0.9turn);
  }
  94% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.92turn, var(--color) 0.92turn);
  }
  96% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 1turn);
  }
  100% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 1turn);
  }
}

@-o-keyframes paginationAnimate {
  0% {
    background: conic-gradient(#dbdbdb 0, var(--color) 0);
  }
  5% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.05turn, var(--color) 0.05turn);
  }
  10% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.1turn, var(--color) 0.1turn);
  }
  15% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.15turn, var(--color) 0.15turn);
  }
  20% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.2turn, var(--color) 0.2turn);
  }
  25% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.25turn, var(--color) 0.25turn);
  }
  30% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.3turn, var(--color) 0.3turn);
  }
  35% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.35turn, var(--color) 0.35turn);
  }
  40% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.4turn, var(--color) 0.4turn);
  }
  45% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.45turn, var(--color) 0.45turn);
  }
  50% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.5turn, var(--color) 0.5turn);
  }
  55% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.55turn, var(--color) 0.55turn);
  }
  60% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.6turn, var(--color) 0.6turn);
  }
  65% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.65turn, var(--color) 0.65turn);
  }
  70% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.7turn, var(--color) 0.7turn);
  }
  75% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.75turn, var(--color) 0.75turn);
  }
  80% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.8turn, var(--color) 0.8turn);
  }
  85% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.85turn, var(--color) 0.85turn);
  }
  90% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.9turn, var(--color) 0.9turn);
  }
  94% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.92turn, var(--color) 0.92turn);
  }
  96% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 1turn);
  }
  100% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 1turn);
  }
}

@keyframes paginationAnimate {
  0% {
    background: conic-gradient(#dbdbdb 0, var(--color) 0);
  }
  5% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.05turn, var(--color) 0.05turn);
  }
  10% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.1turn, var(--color) 0.1turn);
  }
  15% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.15turn, var(--color) 0.15turn);
  }
  20% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.2turn, var(--color) 0.2turn);
  }
  25% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.25turn, var(--color) 0.25turn);
  }
  30% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.3turn, var(--color) 0.3turn);
  }
  35% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.35turn, var(--color) 0.35turn);
  }
  40% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.4turn, var(--color) 0.4turn);
  }
  45% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.45turn, var(--color) 0.45turn);
  }
  50% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.5turn, var(--color) 0.5turn);
  }
  55% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.55turn, var(--color) 0.55turn);
  }
  60% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.6turn, var(--color) 0.6turn);
  }
  65% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.65turn, var(--color) 0.65turn);
  }
  70% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.7turn, var(--color) 0.7turn);
  }
  75% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.75turn, var(--color) 0.75turn);
  }
  80% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.8turn, var(--color) 0.8turn);
  }
  85% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.85turn, var(--color) 0.85turn);
  }
  90% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.9turn, var(--color) 0.9turn);
  }
  94% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 0.92turn, var(--color) 0.92turn);
  }
  96% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 1turn);
  }
  100% {
    background: conic-gradient(#dbdbdb 0, #dbdbdb 1turn);
  }
}
.quality4 {
  background: url(../img/quality15.png);
  -o-background-size: auto 100%;
     background-size: auto 100%;
  min-height: 62.563rem;
  overflow: hidden;
}
.quality4 .quality2 {
  margin-top: 3.5rem;
}

.quality5 a {
  max-width: 12rem;
  -webkit-flex: 1;
     -moz-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 3.25rem;
  font-size: 1.5rem;
  padding: 0 1rem;
  border-radius: 1.625rem;
  border: solid 0.063rem #999999;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
  cursor: pointer;
}
.quality5 a + a {
  margin-left: 1.5rem;
}
.quality5 a:hover, .quality5 a.on {
  color: white;
  background: var(--color);
  border-color: var(--color);
}


.quality6 dt, .quality6 dd, .quality6 {
  height: 33.438rem;
  border-radius: 1.875rem;
  overflow: hidden;
}
.quality6 {
  position: relative;
  margin-top: 4rem;
  color: white;
  height: auto;
  border-radius: 0;
}
.quality6 .img-container{
  width: 100%;
  position: relative;
  padding-top: 37.15277777%;
}
.quality6 .img-container img{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
/* .quality6::after {
  content: "";
  display: block;
  position: absolute;
  width: 9.1rem;
  height: 9.1rem;
  top: 0;
  bottom: 0;
  left: 0;
  right: 10%;
  margin: auto;
  background: url(../img/quality16.png) center;
  -o-background-size: contain;
     background-size: contain;
} */
.quality6 dt, .quality6 dd {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  box-shadow: inset 0 0 7rem gray;
  mix-blend-mode: multiply;
}
.quality6 dt::after, .quality6 dd::after {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  content: "";
  display: block;
}
.quality6 dt img, .quality6 dd img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
  mix-blend-mode: multiply;
}
.quality6 dt {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
  box-shadow: inset 0 0 15rem 5rem rgba(0, 0, 0, 0.6);
}
.quality6 dt::after {
  background: -webkit-linear-gradient(164deg, white 56.1%, transparent 56.2%);
  background: -moz-linear-gradient(164deg, white 56.1%, transparent 56.2%);
  background: -o-linear-gradient(164deg, white 56.1%, transparent 56.2%);
  background: linear-gradient(286deg, white 56.1%, transparent 56.2%);
}
.quality6 dd::after {
  background: -webkit-linear-gradient(164deg, transparent 53.9%, white 54%);
  background: -moz-linear-gradient(164deg, transparent 53.9%, white 54%);
  background: -o-linear-gradient(164deg, transparent 53.9%, white 54%);
  background: linear-gradient(286deg, transparent 53.9%, white 54%);
}
.quality6 .tr {
  text-align: right;
}
.quality6 .tr .b400 {
  margin-right: 2rem;
}
.quality6 .tr .flex {
  margin-top: 2.87rem;
}
.quality6 .tr .flex .p1 {
  text-align: center;
}
.quality6 .tr .flex > * {
  -webkit-flex: 1;
     -moz-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-left: 1.375rem;
  background-color: rgba(0, 0, 0, 0.3333333333);
  border-radius: 0.75rem;
  border: solid 0.063rem #000000;
  height: 22.125rem;
  padding: 1.5rem 1rem 0;
}
.quality6 .tr img {
  width: 7.75rem;
  height: 7.75rem;
  border-radius: 50%;
  border: solid 0.4rem #ccc;
  display: block;
  margin: 0 auto 1.3rem;
}
.quality6 .grid2, .quality6 .grid2 > * {
  height: 100%;
  position: relative;
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}
.quality6 .grid2 {
  padding: 3.25rem 2.68rem;
}
.quality6 .grid2 .b400 {
  font-size: 2rem;
}
.quality6 .p1 {
  font-size: 1.25rem;
  margin-bottom: 0.8rem;
}
.quality6 .p2 {
  color: #ccc;
  line-height: 1.5;
  max-width: 80%;
  margin-bottom: 1.87rem;
}
.quality6 .p3 {
  font-size: 0.875rem;
  line-height: 1.5;
  font-family: "light";
  text-align: justify;
}

.quality7 {
  background: url(../img/quality15.png) 0 40%;
  min-height: 27.938rem;
  color: #333;
  line-height: 1.7;
}
.quality7 > div {
  padding: 3.6rem 3.6rem 0 3rem;
}
.quality7 video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.quality7 .b300 {
  font-size: 2rem;
  line-height: 1.5;
}
.quality7 .Con {
  font-size: 1.5rem;
}
.quality7 .Con::after {
  display: block;
  content: "";
  width: 2.625rem;
  height: 0.375rem;
  background-color: var(--color);
  margin-bottom: 3.1rem;
  margin-top: 1.5rem;
}
.quality7 .C666 {
  margin-top: 2.8rem;
  line-height: 1.9;
}

.quality8 {
  font-size: 1.125rem;
  line-height: 1.6;
  margin-top: 4.8rem;
  margin-bottom: 3.5rem;
}
.quality8 .b500 {
  font-size: 2rem;
}

.quality9 {
  margin-bottom: 5rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.quality9 > div {
  border-radius: 0.625rem;
  height: 19.938rem;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
  position: relative;
  -webkit-flex: 1;
     -moz-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: hidden;
  line-height: 1.3;
  font-size: 1.125rem;
}
.quality9 > div::after, .quality9 > div::before {
  content: "";
  display: block;
  position: absolute;
  top: 62%;
  bottom: 25%;
  left: 0;
  border-left: solid 1px rgba(0, 0, 0, 0.1254901961);
}
.quality9 > div:last-child::after {
  left: initial;
  right: 0;
}
.quality9 > div .b300 {
  font-size: 1.5rem;
  line-height: 1.1;
}
.quality9 > div .b300 span {
  font-size: 1.125rem;
}
.quality9 > div .b500 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 3.831rem;
  opacity: 0.1;
  text-fill-color: transparent;
  -webkit-text-stroke: 1px #fff;
  color: transparent;
  line-height: 0.98;
}
.quality9 > div p.flex.cen {
  min-height: 3.3rem;
  padding: 0 2rem;
}
.quality9 > div img {
  margin-top: 2.7rem;
  margin-bottom: 1.7rem;
}
.quality9 > div .iconfont {
  margin-top: 2.7rem;
  display: inline-block;
  margin-bottom: 1.7rem;
  font-size: 6rem;
  color: var(--color);
}
.quality9 > div:hover .opacity5{opacity:1}
.quality9 > div:hover {
  color: white;
  background: var(--color);
  box-shadow: 0rem 0.438rem 2.188rem 0rem rgba(140, 19, 11, 0.39);
}
.quality9 > div:hover img {
  -webkit-filter: brightness(9);
          filter: brightness(9);
}
.quality9 > div:hover .iconfont{
  color: #fff;
}

.quality10 {
  background: url(//zbmj.oss-cn-hangzhou.aliyuncs.com/upload/static/background.black.jpg);
  overflow: hidden;
}
.quality10 .quality3 {
  text-align: center;
}
.quality10 .quality3 .swiper-slide:hover {
  -webkit-transform: translateY(-3px);
     -moz-transform: translateY(-3px);
      -ms-transform: translateY(-3px);
       -o-transform: translateY(-3px);
          transform: translateY(-3px);
}
.quality10 .quality3 .swiper-slide {
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
  padding-top: 3rem;
}
.quality10 .quality3 .swiper-pagination {
  mix-blend-mode: overlay;
}
.quality10 .quality3 .swiper-pagination-bullet {
  background-color: #111;
}
.quality10 .quality3 .swiper-pagination-bullet:after {
  -webkit-transform: scale(0.8);
     -moz-transform: scale(0.8);
      -ms-transform: scale(0.8);
       -o-transform: scale(0.8);
          transform: scale(0.8);
  background: -webkit-radial-gradient(var(--color) 2px, #111 3px);
  background: -moz-radial-gradient(var(--color) 2px, #111 3px);
  background: -o-radial-gradient(var(--color) 2px, #111 3px);
  background: radial-gradient(var(--color) 2px, #111 3px);
  z-index: 1;
}
.quality10 .quality3 .swiper-pagination-bullet::before {
  background: #111;
  opacity: 1;
}
.quality10 .quality3 img {
  height: initial;
  width: initial;
}

.quality11Box {
  border: solid 0.063rem #fff;
  margin-top: 6.1rem;
}

.quality11 {
  color: white;
  line-height: 2;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 2.4rem;
}
.quality11 .scroll {
  max-height: 30rem;
  margin-right: 2rem;
}
.quality11 p {
  margin-top: 0.5rem;
}
.quality11 p.flex.nowrap span {
  white-space: nowrap;
}

.quality12 {
  padding-bottom: 8rem;
  background: url(../img/quality15.png);
}
.quality12 .container {
  border: solid 0.063rem #999999;
  padding: 1.3rem;
  font-size: 1.125rem;
  line-height: 1.8;
  padding-bottom: 2.4rem;
}
.quality12 .container .b500 {
  font-size: 1.5rem;
}
.quality12 .container .Con {
  font-size: 2rem;
}
.quality12 .container i.Con {
  font-size: 1.5rem;
}
.quality12 .container .absolute {
  font-size: 7.416rem;
  line-height: 1;
  margin-bottom: -1rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.6), transparent 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.quality12 .imgBox {
  margin-bottom: 2.2rem;
  overflow: hidden;
}
.quality12 .imgBox img {
  -webkit-flex: 1;
     -moz-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 17.625rem;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
.quality12 .imgBox img:hover {
  -webkit-transform: scale(1.2);
     -moz-transform: scale(1.2);
      -ms-transform: scale(1.2);
       -o-transform: scale(1.2);
          transform: scale(1.2);
}

.quality13.package-form {
  --color: #f10d0f;
  padding: 1.6rem;
  border-radius: 0.72rem;
}
.quality13.package-form .p1 {
  font-size: 1.5rem;
}
.quality13.package-form .Cfff {
  margin-bottom: 1rem;
}
.quality13.package-form .Con {
  font-size: 1.125rem;
}

.quality14 .select-list {
  margin-bottom: 2rem;
}

.quality15 {
  margin-bottom: 3.6rem;
}
.quality15 span {
  font-size: 2rem;
}
.quality15 a {
  -webkit-filter: brightness(0.9);
          filter: brightness(0.9);
}
.quality15 a:hover {
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
}
.quality15 a img {
  height: 1.25rem;
  margin-left: 0.5rem;
}

.quality15 a .iconfont{
  font-size: 1.25rem;
  margin-left: 0.5rem;
}

.quality15-1 {
  margin-bottom: 2.625rem;
}

.quality16 {
  padding: 0 0 5rem;
  margin-top: 3.43rem;
}
.quality16 .grid4 {
  gap: 3.5rem;
  margin-bottom: 3rem;
}
.quality16 .grid4 img {
  width: 12.188rem;
  height: 12.188rem;
  border-radius: 50%;
  display: block;
  margin: 1.4rem auto;
  box-shadow: 0rem 0.625rem 1.5rem 0rem rgba(21, 29, 62, 0.18);
}
.quality16 .grid4 .btn {
  display: block;
  line-height: 3.125rem;
  text-align: center;
  border-radius: 0.25rem;
  border: solid 0.063rem var(--color);
  margin-top: 1.5rem;
  color: var(--color);
  background: white;
  min-width: 100%;
  font-size: 1rem;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
  cursor: pointer;
}
.quality16 .grid4 .btn:hover {
  color: white;
  background: var(--color);
}
.quality16 p {
  line-height: 1.6;
}
.quality16 .p1 {
  font-size: 1.125rem;
}
.quality16 .p2 {
  font-size: 1.625rem;
  margin-bottom: 0.8rem;
}
.quality16 .p3 {
  color: #666;
}
.quality16 .p3 span {
  color: #333;
}
.quality16 dd {
  background: white;
  border-bottom: 0.375rem solid var(--color);
  padding: 1.5rem;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.quality16 dd:hover {
  -webkit-transform: translateY(-4px);
     -moz-transform: translateY(-4px);
      -ms-transform: translateY(-4px);
       -o-transform: translateY(-4px);
          transform: translateY(-4px);
  box-shadow: 0rem 0.625rem 1.5rem 0rem rgba(21, 29, 62, 0.18);
}

.quality17 {
  display: grid;
  padding: 2.5rem;
  margin-bottom: 1rem;
  grid-template-columns: 22.75rem 1fr;
}
.quality17 img {
  width: 19.813rem;
  height: 25.813rem;
}
.quality17 .p1 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  margin-top: 4.2rem;
}
.quality17 .p2 {
  color: #666;
  line-height: 2;
}
.quality17 .p3 {
  position: absolute;
  top: 3.8rem;
  left: 0;
  white-space: nowrap;
  font-size: 7.181rem;
  letter-spacing: 0.35rem;
  text-fill-color: transparent;
  -webkit-text-stroke: 1px #000;
  color: transparent;
  display: inline-block;
  border-bottom: solid 1px #000;
  line-height: 0.75;
  opacity: 0.1;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.quality17 .content {
  overflow: hidden;
  position: relative;
}
.quality17 .content .relative {
  margin-top: 2.06rem;
  font-size: 1.125rem;
}
.quality17 .content .relative .b400 {
  font-size: 2.25rem;
}
.quality17 .content .relative .Con {
  margin-left: 0.9rem;
}
.quality17 .content .relative p {
  color: #999;
  margin-top: 1.5rem;
}
.quality17 .content .relative p span {
  color: #333;
  margin-right: 4rem;
}
.quality17 .btn {
  position: absolute;
  right: 0;
  top: 0;
  background: var(--color);
  color: white;
  text-align: center;
  width: 12.563rem;
  line-height: 3.125rem;
  border-radius: 0.25rem;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
  z-index: 5;
}
.quality17 .btn:hover {
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
}

.quality18 {
  margin-bottom: 4.5rem;
  padding: 3.5rem 2.5rem 5rem;
}
.quality18 .p1 {
  font-size: 2rem;
  margin-bottom: 2.56rem;
}
.quality18 .grid3 {
  gap: 1.25rem;
  font-size: 1.375rem;
  margin-bottom: 3rem;
}
.quality18 .grid3 a {
  display: block;
  width: 100%;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
.quality18 .grid3 a:hover {
  color: var(--color);
  -webkit-transform: translateY(-4px);
     -moz-transform: translateY(-4px);
      -ms-transform: translateY(-4px);
       -o-transform: translateY(-4px);
          transform: translateY(-4px);
}
.quality18 .grid3 .img {
  width: 100%;
  height: 17.188rem;
  display: block;
  margin: 0.5rem 0 1.37rem;
}
.quality18 .grid3 p {
  padding: 0.5rem;
}

[class*=quality] .img {
  overflow: hidden;
}
[class*=quality] .img img {
  height: 100%;
  width: 100%;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
[class*=quality] .img:hover img {
  -webkit-transform: scale(1.1);
     -moz-transform: scale(1.1);
      -ms-transform: scale(1.1);
       -o-transform: scale(1.1);
          transform: scale(1.1);
}

[class*=quality] a:hover .img img {
  -webkit-transform: scale(1.1);
     -moz-transform: scale(1.1);
      -ms-transform: scale(1.1);
       -o-transform: scale(1.1);
          transform: scale(1.1);
}

.quality19 {
  display: block;
  /* height: 43.75rem; */
  height: 43.75rem;
  width: 100%;
}

.quality20 {
  margin-top: 1.8rem;
  margin-bottom: 1.8rem;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
.quality20 .item-container{
  width: 31.66666666666667%;
  position: relative;
}
.quality20 .item-container::before{
  position: absolute;
  content: '';
  height: 100%;
  border-right: 1px dashed #988776;
  top: 0;
  right: 1.25rem;
}
.quality20 .item{
  position: relative;
  margin-bottom: 2rem;
}
.quality20 .item::before{
  position: absolute;
  content: '';
  width: 1.25rem;
	height: 5.75rem;
	background-color: #999;
  right: 0;
  top: -2.25rem;
}
.quality20 .item:nth-child(1){
  margin-bottom: 4.6875rem;
}
.quality20 .item:nth-child(1) .item-img::after{
  position: absolute;
  content: '';
  width: 100%;
  bottom: -2.375rem;
  border-top: 1px dashed #988776;
  left: 0;
}
.quality20 .item:nth-child(2)::before{
  top: -4.5rem;
}/*
.quality20 .item:nth-child(2) .item-info{
  text-align: left;
  top: 1.4375rem;
  left: 0;
}
.quality20 .item:nth-child(2) .item-text{
  margin-left: 0;
  margin-bottom: 1.5625rem;
}
.quality20 .item:nth-child(2) .item-img::before{
  background-image: linear-gradient(336deg,rgba(0,0,0,0) 68%,rgba(255,255,255,1) 68%);
}*/
.quality20 .item .item-text{
  padding: 0 30px;
}
.quality20 .item-img{
  width: 25rem;
  height: 12.5rem;
  background: #cccccc; /* 回退 */
  background: conic-gradient(from -45deg at 50% 50%, #ffffff, #cccccc);
  box-shadow: 15px 15px 0px rgba(0, 0, 0, .05);
  border-radius: 30px;
  
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
}/*
.quality20 .item-img::before{
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(156deg,rgba(0,0,0,0) 68%,rgba(255,255,255,1) 68%);
}*/
.quality20 .item-img img{
  width: 100%;
  height: 100%;
}/*
.quality20 .item-info{
  position: absolute;
  bottom: 0;
  right: 0;
  text-align: right;
}*/
.quality20 .item-info{
  text-align: center;
}
.quality20 .item-num{
  color: #999;
  font-size: 6.25rem;
  font-family: 'black';
  margin-bottom: 0;
  line-height: 5rem;
  margin-bottom: 1.8125rem;
}
.quality20 .item-title{
  font-size: 1.5rem;
  line-height: 1;
  font-family: 'medium';
  margin-bottom: .75rem;
}
.quality20 .item-text{
  line-height: 1.5rem;
  color: #666666;
  font-family: 'regular';/*
  width: 75%;*/
  margin-left: auto;
}

.quality21 {
  background: url(../img/quality43.png) center top;
  overflow: hidden;
  color: white;
}
.quality21 .quality2 .p1, .quality21 .quality2 {
  color: white;
}
.quality21 .quality2 .p3 {
  -webkit-text-stroke: 1px #fff;
}

.quality22 a {
  width: 12rem;
  text-align: center;
  line-height: 3.25rem;
  font-size: 1.5rem;
  border-radius: 1.625rem;
  cursor: pointer;
  border: solid 0.063rem #ffffff;
}
.quality22 a + a {
  margin-left: 1.25rem;
}
.quality22 a:hover, .quality22 a.on {
  color: white;
  background: url(../img/quality50.png) center;
  -o-background-size: auto 3.25rem;
     background-size: auto 3.25rem;
  border-color: var(--color);
}

.quality23 {
  color: #333;
}
.quality23 .swiper-slide {
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  background: url(../img/quality15.png) center;
  margin-bottom: 3.8rem;
  -webkit-filter: brightness(0.5);
          filter: brightness(0.5);
  margin-top: 4.25rem;
}
.quality23 .swiper-slide-active {
  -webkit-filter: none;
          filter: none;
  box-shadow: 0 0 3rem 0.5rem rgba(0, 0, 0, 0.5176470588);
}
.quality23 img {
  height: 29.438rem;
  width: 68%;
}
.quality23 .content {
  padding: 5.18rem 3.68rem 0;
  font-size: 1.5rem;
  line-height: 1.35;
  position: relative;
  -webkit-flex: 1;
     -moz-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: hidden;
}
.quality23 .content .p3 {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 11.25rem;
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.2509803922);
  color: transparent;
}
.quality23 .content .b400 {
  font-size: 2.25rem;
}
.quality23 .content .b400::after {
  content: "";
  display: block;
  width: 2rem;
  margin-top: 1.56rem;
  height: 0.5rem;
  background-color: #333333;
  margin-bottom: 2.81rem;
}

.quality24 {
  font-size: 1.5rem;
  line-height: 1.6;
  margin-bottom: 3.25rem;
}
.quality24 dd + dd {
  margin-left: 6.55rem;
}
.quality24 dd > div {
  margin-left: 0.938rem;
}
.quality24 p {
  opacity: 0.6;
  font-size: 1.125rem;
}
.quality24 img {
  height: 5rem;
}
.quality24 .iconfont{
  font-size: 5rem;
}

.quality25 {
  min-height: 32.42rem;
  margin-top: 3.938rem;
}
.quality25 .grid3 {
  font-size: 1.05rem;
  -webkit-flex: 1;
     -moz-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  gap: 1.563rem;
  padding: 1.25rem;
}
.quality25 .grid3 dd {
  padding: 0 1rem;
}
.quality25 .grid3 .ellipsis {
  padding-left: 2rem;
  position: relative;
  min-height: 3rem;
  line-height: 1.8rem;
  padding-top: 1rem;
}
.quality25 .grid3 i {
  font-size: 2rem;
  position: absolute;
  left: -0.1rem;
  top: 0.8rem;
}
.quality25 .grid3 img {
  display: block;
  width: 100%;
}

.quality26 {
  background: url(../img/quality51.png) bottom;
  background-repeat: repeat-x;
}
.quality26 .form-group {
  background: none;
  margin-top: 1rem;
}
.quality26 .form-group .form-container * + * {
  margin-left: 0.625rem;
  font-size: 1rem;
}
.quality26.quality12 {
  padding-bottom: 3.1rem;
}
.quality26.quality12 .container p.b500 {
  position: relative;
  z-index: 1;
}
.quality26.quality12 .container .absolute {
  background-image: -webkit-linear-gradient(bottom, white 50%, rgba(255, 255, 255, 0.1333333333));
}

.service1 {
  min-height: 26.25rem;
  border-radius: 0.625rem;
  position: relative;
  bottom: 2rem;
  margin-bottom: 1.35rem;
}
.service1 .absolute {
  margin: auto;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  color: white;
  width: 10.625rem;
  height: 10.625rem;
  font-size: 1.875rem;
  background: url(../img/service16.png) center no-repeat;
  -o-background-size: 100% 100%;
     background-size: 100% 100%;
}
.service1 .absolute:hover {
  -webkit-filter: brightness(1.1);
          filter: brightness(1.1);
}
.service1 dd:last-child {
  border-left: solid 1px #ddd;
}
.service1 dd {
  width: 50%;
  padding: 3.313rem 9rem;
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}
.service1 .input {
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 50px;
  line-height: 3.125rem;
  padding-left: 1.18rem;
  background-color: #f2f2f2;
  margin-bottom: 0.625rem;
  white-space: nowrap;
  font-size: 16px;
}
.service1 .input.on {
  box-shadow: inset 0 0 0 1px var(--color);
  background-color: #fafafa;
}
.service1 .input input {
  margin-left: 0.8rem;
  -webkit-flex: 1;
     -moz-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 50px;
}
.service1 .p1 {
  font-size: 2rem;
  margin-bottom: 0.813rem;
}
.service1 .p2 {
  color: #999;
  margin-bottom: 1.93rem;
}
.service1 .p3 {
  font-size: 0.875rem;
  color: #999;
  margin-top: 1.9rem;
}
.service1 .p3:before{content:"*";color:var(--color)}
.service1 .p3-1 {
  margin: 1.9rem auto 0;
  text-align: left;
  max-width: 20rem;
  line-height: 1.8;
}
.service1 .p3-1 a {
  display: inline-block;
  border-bottom: solid 1px var(--color);
  color: var(--color);
  line-height: 1.1;
}
.service1 .p4 {
  width: 17rem;
  line-height: 2.75rem;
  color: #333;
  font-size: 1.5rem;
  background-color: #f5f5f5;
  border-radius: 2rem;
  margin: 0 auto 2.438rem;
  margin-top: 1.938rem;
  display: block;
}
.service1 .p4:hover {
  color: var(--color);
}
.service1 .p5 {
  font-size: 1.25rem;
  color: #999;
  margin-bottom: 1.938rem;
  font-family: "regular";
}
.service1 .p5 img,.service1 .p5 .iconfont {
  margin-right: 1rem;
}
.service1 .p5 .iconfont{
  font-size: 1.5625rem;
  color: var(--color);
}
.service1 .p5 a, .service1 .p5 span {
  color: var(--color);
}
.service1 .p5 a {
  display: inline-block;
  border-bottom: solid 1px var(--color);
}
.service1 .p6 {
  font-size: 1.5rem;
}
.service1 .p6 .Con {
  font-size: 2.625rem;
}
.service1 .border {
  border: solid 0.063rem #e6e6e6;
  padding: 2.24rem 1rem 2.24rem 2.1rem;
  font-size: 1.25rem;
  text-align: left;
  margin-top: 2.8rem;
}
.service1 .border .Con {
  font-size: 2.25rem;
}
.service1 .border .Con::before {
  content: "￥";
  font-size: 1.5rem;
}

.service2 {
  font-size: 1.125rem; padding-top:4rem;
  color: #999;
}
.service2 .b300 {
  font-size: 2.506rem;
  margin-bottom: 0.93rem;
  color: #333;
}
.service2 .Con {
  color: var(--color);
}
.service2::after {
  content: "";
  display: block;
  margin: 2rem auto 0;
  width: 2.063rem;
  height: 0.5rem;
  background-color: var(--color);
}

.service2.Cfff .b300 {
  color: white;
}

.service3 {
  background: url(../img/service19.png) bottom center no-repeat;
  font-size: 1.5rem;
  -o-background-size: 100% auto;
     background-size: 100% auto;
  padding: 3.3rem 0 12rem;
}
.service3 img {
  display: block;
  margin: 2.1rem auto 1.6rem;
  height: 6rem;
}
.service3 .iconfont{
  display: block;
  margin: 2.1rem auto 1.6rem;
  font-size: 6rem;
  color: var(--color);
}
.service3 dl {
  gap: 2.65rem;
}
.service3 dd {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  min-height: 13.75rem;
  border-radius: 0.625rem;
  border: solid 1px white;
  background: rgba(255, 255, 255, 0.6) url(../img/service13.png);
  -o-background-size: auto 100%;
     background-size: auto 100%;
}
.service3 dd:hover {
  background: var(--color);
  color: white;
  -webkit-transform: translateY(-0.7rem);
     -moz-transform: translateY(-0.7rem);
      -ms-transform: translateY(-0.7rem);
       -o-transform: translateY(-0.7rem);
          transform: translateY(-0.7rem);
  box-shadow: 0rem 0.438rem 2.188rem 0rem rgba(140, 19, 11, 0.39);
  border-color: var(--color);
}
.service3 dd:hover img {
  -webkit-filter: brightness(9);
          filter: brightness(9);
}

.service3 dd:hover .iconfont{
  color: #fff;
}

.service4 {
  padding: 5.438rem 0 4rem;
  text-align: center;
  background: url(../img/service20.png) top;
  -o-background-size: auto 101%;
     background-size: auto 101%;
  box-shadow: 0 2rem 4rem #efefef;
}
.service4 .service2 {
  margin-bottom: 2.75rem;
}
.service4 dl {
  margin-bottom: 2.875rem;
  color: white;
  font-size: 1.625rem;
}
.service4 dd {
  border: dashed 0.063rem #333;
  padding: 0.563rem;
  border-radius: 50%;
  position: relative;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  background: rgb(173, 78, 78);
  background-clip: content-box;
}
.service4 dd + dd {
  margin-left: 3.18rem;
}
.service4 dd + dd::after {
  position: absolute;
  content: "";
  display: block;
  width: 2.188rem;
  left: -2.7rem;
  top: 50%;
  border-top: dashed 1px #333;
}
.service4 dd p {
  position: absolute;
  left: 0.563rem;
  right: 0.563rem;
  bottom: 0.563rem;
  top: 0.563rem;
  padding-bottom: 2.2rem;
  line-height: 1.3;
  background: -webkit-linear-gradient(top, transparent 40%, #000);
  background: -moz-linear-gradient(top, transparent 40%, #000);
  background: -o-linear-gradient(top, transparent 40%, #000);
  background: linear-gradient(to bottom, transparent 40%, #000);
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-end;
     -moz-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50%;
}
.service4 img {
  width: 14.125rem;
  height: 14.125rem;
  border-radius: 50%;
  display: block;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
.service4 dd:hover img {
  -webkit-filter: brightness(1.5) grayscale(1);
          filter: brightness(1.5) grayscale(1);
  mix-blend-mode: multiply;
}

.service5 {
  margin: 3.5rem 0 3.81rem;
}

.design-section4, .case-section4 {
  padding: 0 !important;
  background-color: transparent !important;
}

.service6 {
  padding-top: 3rem;
  margin-bottom: 3.1rem;
  margin-top: 5.3rem;
}

.service7 {
  margin-top: 0.93rem;
  font-size: 1.125rem;
  color: #999;
  justify-content: space-around!important;
}
.service7 .icon {
  width: 8.625rem;
  height: 8.625rem;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--color);
  position: relative;
  border-radius: 50%;
  border: dashed 1px var(--color);
  box-shadow: inset 0 0 0 0.563rem white;
  background-clip: content-box;
  margin: 2rem auto 1.18rem;
  overflow: hidden;
}
.service7 .icon img{
	max-height:80%; filter:brightness(9);
}
.service7 .icon .iconfont{
  color: #fff;
  font-size: 3.375rem;
}
.service7 .p1 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.5rem;
  color: rgba(255, 255, 255, 0.3333333333);
  font-size: 2.593rem;
  font-family: "black";
}
.service7 .p2 {
  font-size: 1.75rem;
  color: #333;
  margin-bottom: 1.438rem;
  font-family: "bold";
}
.service7 .p3 {
  line-height: 1.6;
}
.service7 dd {
  /* margin: 0 2.8rem; */
  width: 12.5rem;
}

.service8 {
  background-color: pink;
  padding-bottom: 9.31rem;
  margin-bottom: 5rem;
  padding-top: 6.06rem;
  background: url(../img/service26.png) center;
  -o-background-size: cover;
     background-size: cover !important;
}
.service8 .service1 {
  bottom: 0;
  margin-top: 3rem;
}

.service9 {
  background: url(../img/service32.png) bottom center repeat-x;
  white-space: nowrap;
  text-align: center;
  font-size: 1.75rem;
  line-height: 1.6;
  overflow: hidden;
}
.service9 dl {
  margin-top: 1.7rem;
  margin-bottom: 5.4rem;
}
.service9 dl p {
  color: var(--color);
  font-family: "black";
  font-size: 1.5rem;
}
.service9 dl p::after, .service9 dl p::before {
  content: " - ";
  color: rgba(0, 0, 0, 0.1333333333);
}
.service9 dl img {
  display: block;
  margin: auto;
  position: absolute;
  top: 2.6rem;
  left: 0;
  right: 0;
  height: 3.375rem;
}
.service9 dl .iconfont {
  display: block;
  margin: auto;
  position: absolute;
  top: 2.6rem;
  left: 0;
  right: 0;
  font-size: 3.375rem;
  color: #333;
}
.service9 dd {
  position: relative; width: 15%;
  background: url(../img/service27.png) center top no-repeat;
  padding: 9rem 2rem 0;
  -o-background-size: 10.2rem auto;
     background-size: 10.2rem auto;
}
.service9 dd + dd {
  margin-left: 8rem;
  position: relative;
}
.service9 dd + dd:after {
  content: "";
  display: block;
  position: absolute;
  background: url(../img/service33.png);
  -o-background-size: contain;
     background-size: contain;
  height: 0.938rem;
  width: 7.125rem;
  left: -7.6rem;
  top: 4rem;
  opacity: 0.2;
}
.service9 dd:hover {
  color: var(--color);
  cursor: default;
}
.service9 .btn {
  background-color: var(--color);
  color: white;
  width: 18.75rem;
  line-height: 3.125rem;
  text-align: center;
  margin-top: 1.93rem;
  margin-bottom: 4.8rem;
  font-size: 1.125rem;
  border-radius: 0.375rem;
}
.service9 .btn:hover {
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
}

.service10 {
  margin-top: 4.5rem;
}
.service10 .img {
  width: 19.938rem;
  height: 26rem;
}
.service10 .img img {
  height: 100%;
  width: 100%;
}
.service10 .img, .service10 .BGwhite {
  border-radius: 0.625rem;
  overflow: hidden;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}
.service10 .BGwhite {
  line-height: 4.5rem;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  margin: 0 1.75rem 2rem;
}
.service10 .BGwhite:hover {
  color: white;
  background-color: var(--color);
  -webkit-transform: translateY(-0.6rem);
     -moz-transform: translateY(-0.6rem);
      -ms-transform: translateY(-0.6rem);
       -o-transform: translateY(-0.6rem);
          transform: translateY(-0.6rem);
}
.service10 .BGwhite:hover img {
  opacity: 0.9;
}

.service11 {
  padding-top: 5rem;
}
.service11 .service9 {
  background: none;
}
.service11 .grid3 {
  gap: 2.75rem;
  margin-bottom: 3rem;
  margin-top: 4.3rem;
}
.service11 .img {
  height: 17.563rem;
  position: relative;
  border-radius: 0.625rem;
  overflow: hidden;
}
.service11 .img:hover img {
  -webkit-transform: scale(1.15);
     -moz-transform: scale(1.15);
      -ms-transform: scale(1.15);
       -o-transform: scale(1.15);
          transform: scale(1.15);
}
.service11 .img:hover p {
  background: -webkit-linear-gradient(top, transparent, rgba(180, 43, 44, 0.6));
  background: -moz-linear-gradient(top, transparent, rgba(180, 43, 44, 0.6));
  background: -o-linear-gradient(top, transparent, rgba(180, 43, 44, 0.6));
  background: linear-gradient(to bottom, transparent, rgba(180, 43, 44, 0.6));
}
.service11 .img img {
  height: 100%;
  width: 100%;
  -webkit-transition: all 0.6s;
  -o-transition: all 0.6s;
  -moz-transition: all 0.6s;
  transition: all 0.6s;
}
.service11 .img p {
  position: absolute;
  color: white;
  padding: 1.75rem 1.8rem;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 1.5rem;
  background: -webkit-linear-gradient(top, transparent, rgba(34, 34, 34, 0.3333333333));
  background: -moz-linear-gradient(top, transparent, rgba(34, 34, 34, 0.3333333333));
  background: -o-linear-gradient(top, transparent, rgba(34, 34, 34, 0.3333333333));
  background: linear-gradient(to bottom, transparent, rgba(34, 34, 34, 0.3333333333));
}

.service12 {
  background: url(../img/quality51.png) top repeat-x;
  overflow: hidden;
  padding-bottom: 4rem;
}
.service12 dt, .service12 dd {
  position: relative;
  z-index: 1;
}
.service12 dt {
  padding-top: 2.5rem;
}
.service12 .p4 {
  font-size: 2.25rem;
  color: #333;
  line-height: 1.3;
  position: relative;
}
.service12 .p4::after, .service12 .p4::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -1.68rem;
  left: 0;
}
.service12 .p4::before {
  right: 0;
  border-bottom: solid 1px rgba(0, 0, 0, 0.4);
}
.service12 .p4::after {
  width: 3.125rem;
  height: 0.313rem;
  background: var(--color);
  bottom: -1.8rem;
}
.service12 .p5 {
  font-size: 1.5rem;
  margin-right: 3.75rem;
}
.service12 .p5 .b500 {
  font-size: 7.25rem;
}
.service12 .scroll {
  margin-right: 3rem;
  max-height: 14rem;
  color: #666;
  line-height: 2;
  margin-top: 2rem;
  padding-top: 1.4rem;
}
.service12 dd {
  background: pink;
  text-align: right;
  overflow: visible;
}
.service12 dd img {
  box-shadow: 2rem 1.6rem 0 #e3e5e4;
}
.service12 .p6 {
  background: #e3e5e4;
  line-height: 4.875rem;
  white-space: nowrap;
  padding-left: 2.25rem;
  letter-spacing: 0.088rem;
  box-shadow: 13rem 0 0 #e3e5e4;
  position: relative;
  bottom: 3rem;
  right: 11rem;
  font-size: 0.75rem;
}

.service13 {
  overflow: hidden;
  background: url(../img/service32.png) center bottom repeat-x;
}
.service13 .btn {
  width: 18.75rem;
  line-height: 3.125rem;
  text-align: center;
  color: white;
  background: var(--color);
  font-size: 1.125rem;
  border-radius: 0.375rem;
  display: block;
  margin: 0 auto 5.438rem;
}
.service13 .btn:hover {
  -webkit-filter: brightness(1.1);
          filter: brightness(1.1);
}
.service13 dl {
  margin-bottom: 3.1rem;
}
.service13 .flex > .img + .img {
  margin-left: 0.625rem;
}
.service13 .grid1 {
  gap: 0.625rem;
}
.service13 a {
  display: block;
}
.service13 .img {
  position: relative;
  line-height: 1.2;
  overflow: hidden;
}
.service13 .img img {
  width: 100%;
  height: 17.5rem;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.service13 .img:hover > img {
  -webkit-filter: contrast(1.2);
          filter: contrast(1.2);
}
.service13 .img .absolute {
  margin: auto; color: white;
  left: 2.31rem;
}
.service13 .img .absolute > div::after {
  content: "";
  display: block;
  background: white;
  width: 1.875rem;
  height: 0.375rem;
}
.service13 .img .absolute .p1 {
  font-size: 2.125rem;
  margin-bottom: -0.8rem;
}
.service13 .img .absolute .p2 {
  font-size: 1rem;
  line-height: 2;
  -webkit-transform: scale(0.5);
     -moz-transform: scale(0.5);
      -ms-transform: scale(0.5);
       -o-transform: scale(0.5);
          transform: scale(0.5);
  -webkit-transform-origin: left center;
     -moz-transform-origin: left center;
      -ms-transform-origin: left center;
       -o-transform-origin: left center;
          transform-origin: left center;
}
.service13 a.long > img {
  height: 36rem;
}
.service13 dd.img > img {
  height: 35.625rem;
}
.service13 .flex1, .service13 .flex2 {
  color: white;
  overflow: hidden;
}

.service13-1 {
  background: none;
}

.service14 {
  position: relative;
  bottom: 1.5rem;
  margin-bottom: 1.5rem;
}
.service14 a {
  min-width: 10rem;
  line-height: 3.125rem;
  color: #555;
  font-size: 1.125rem;
  border-radius: 1.563rem;
  border: solid 0.063rem #cccccc;
  cursor: pointer;
}
.service14 a + a {
  margin-left: 1rem;
}
.service14 a:hover {
  background-color: rgba(180, 43, 44, 0.031372549);
  border-color: rgba(180, 43, 44, 0.3333333333);
  color: var(--color);
}
.service14 a.on {
  color: var(--color);
  border-color: var(--color);
}

.service15 {
  margin-bottom: 3.125rem;
}
.service15 img {
  width: 100%;
  display: block;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}
.service15 dt img {
  height: 18.688rem;
}
.service15 dd img {
  height: 37.376rem;
}
.service15 [class*=flex] {
  overflow: hidden;
}
.service15 .img {
  position: relative;
  overflow: hidden;
  display: block;
}
.service15 .img:hover img {
  -webkit-transform: scale(1.05);
     -moz-transform: scale(1.05);
      -ms-transform: scale(1.05);
       -o-transform: scale(1.05);
          transform: scale(1.05);
}
.service15 .img:hover .p1 {
  background: -webkit-linear-gradient(top, transparent, #570101);
  background: -moz-linear-gradient(top, transparent, #570101);
  background: -o-linear-gradient(top, transparent, #570101);
  background: linear-gradient(to bottom, transparent, #570101);
}
.service15 .p1 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  color: white;
  background: -webkit-linear-gradient(top, transparent, #000000);
  background: -moz-linear-gradient(top, transparent, #000000);
  background: -o-linear-gradient(top, transparent, #000000);
  background: linear-gradient(to bottom, transparent, #000000);
  padding: 5rem 1.56rem 1.8rem;
  font-size: 1.25rem;
  display: block;
}

.service16 {
  background: url(../img/service39.png) bottom center repeat-x;
  min-height: 70vh;
  padding-bottom: 8.36rem;
}
.service16 .grid5 {
  gap: 1.25rem;
  font-size: 1.25rem;
  color: #333;
  line-height: 1.5;
}
.service16 .grid5 img {
  width: 100%;
  height: 10rem;
  border-radius: 0.625rem;
  margin-bottom: 0.5rem;
}
.service16 .grid5 .b400::after, .service16 .grid5 .b400::before {
  content: " - ";
}
.service16 dd {
  padding-bottom: 1rem;
  border-radius: 0.625rem;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.service16 dd:hover {
  background-color: var(--color);
  box-shadow: 0rem 0.563rem 0.813rem 0rem rgba(140, 19, 11, 0.18);
  color: white;
  -webkit-transform: translateY(-0.7rem);
     -moz-transform: translateY(-0.7rem);
      -ms-transform: translateY(-0.7rem);
       -o-transform: translateY(-0.7rem);
          transform: translateY(-0.7rem);
}

.service17 {
  background: url(../img/service37.png) center;
  overflow: hidden;
  -o-background-size: cover;
     background-size: cover !important;
}
.service17 .grid4 {
  margin-bottom: 3.68rem;
}
.service17 .grid4 dd {
  overflow: hidden;
  border-radius: 0.375rem;
  height: 11.875rem;
  position: relative;
  background: url(../img/soft_decoration9.png);
  font-size: 1.375rem;
  color: #333;
  line-height: 1.2;
  -webkit-transition: color 0.2s;
  -o-transition: color 0.2s;
  -moz-transition: color 0.2s;
  transition: color 0.2s;
}
.service17 .grid4 dd img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
.service17 .grid4 dd .Con {
  font-size: 1.375rem;
  margin-top: 2rem;
}
.service17 .grid4 dd .b400 {
  font-size: 3.75rem;
}
.service17 .grid4 dd .opacity6 {
  font-size: 1rem;
  -webkit-transform: scale(0.75);
     -moz-transform: scale(0.75);
      -ms-transform: scale(0.75);
       -o-transform: scale(0.75);
          transform: scale(0.75);
}
.service17 .grid4 dd:hover {
  background: gray;
}
.service17 .grid4 dd:hover *, .service17 .grid4 dd:hover {
  color: white;
  opacity: 1;
}
.service17 .grid4 dd:hover img {
  opacity: 0.6;
}

.service18 dd + dd {
  margin-left: 9rem;
}
.service18 .word {
  background: url(../img/service51.png) no-repeat top center;
  -o-background-size: 100% auto;
     background-size: 100% auto;
  min-width: 14rem;
  padding: 2.8rem 0;
  position: relative;
  top: -4rem;
}

.service18 .word p{margin:0 auto; max-width:80% }
.service18 .word .b400{ margin-bottom:.35rem }
.service18 img {
  display: block;
  margin: auto;
  width: 10.25rem;
}
.service18 p {
  color: #999;
  line-height: 1.2;
}
.service18 .b400 {
  font-size: 1.75rem;
  color: #333;
}

.service19 {
  /*background: url(../img/service52.png) center;*/
  -o-background-size: cover;
     background-size: cover !important;
  margin-bottom: 6rem;
  padding: 7rem 0 6rem;
}
.service19 dl {
  margin-top: 7rem;
}
.service19 dd {
  font-size: 1.75rem;
  line-height: 1.4;
  -webkit-flex: 1;
     -moz-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  position: relative;
  -webkit-transition: color 0.5s;
  -o-transition: color 0.5s;
  -moz-transition: color 0.5s;
  transition: color 0.5s;
}
.service19 dd:hover {
  color: var(--color);
}
.service19 dd + dd::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -4rem;
  left: 0;
  top: -20rem;
  width: 1px;
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.0666666667), rgba(255, 255, 255, 0.1333333333), rgba(255, 255, 255, 0.0666666667));
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.0666666667), rgba(255, 255, 255, 0.1333333333), rgba(255, 255, 255, 0.0666666667));
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0.0666666667), rgba(255, 255, 255, 0.1333333333), rgba(255, 255, 255, 0.0666666667));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.0666666667), rgba(255, 255, 255, 0.1333333333), rgba(255, 255, 255, 0.0666666667));
}
.service19 dd .icon{
  width: 3.5rem;
	height: 3.5rem;
	background-color: #b42b2c;
	border-radius: 1.25rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.service19 dd .icon .iconfont{
  color: #fff;
  font-size: 1.8125rem;
}
.service19 dd p {
  margin-top: 1.8rem;
}
.service19 dd .Con::before {
  content: "";
  display: block;
  width: 0px;
  height: 3.125rem;
  border-left: solid 1px var(--color);
  margin: 0 auto 2.375rem;
}

.service20 {
  font-size: 1.375rem;
  margin-bottom: 6.5rem;
  margin-top: 3.18rem;
}
.service20 img {
  width: 100%;
  height: 16.625rem;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}
.service20 dd + dd {
}
.service20 dd {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem; flex:1;
  min-width: 20.125rem; margin:1rem 0.9rem;
}
.service20 dd p {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.7333333333));
  background: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.7333333333));
  background: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.7333333333));
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7333333333));
  padding: 2rem;
  z-index: 1;
}
.service20 dd:hover img {
  -webkit-transform: scale(1.06);
     -moz-transform: scale(1.06);
      -ms-transform: scale(1.06);
       -o-transform: scale(1.06);
          transform: scale(1.06);
}
.service20 dd:hover p {
  background: -webkit-linear-gradient(top, transparent, var(--color));
  background: -moz-linear-gradient(top, transparent, var(--color));
  background: -o-linear-gradient(top, transparent, var(--color));
  background: linear-gradient(to bottom, transparent, var(--color));
}

.service21 {
  margin-bottom: 1.5rem;
}
.service21 img {
  width: 100%;
  height: 18.563rem;
  border-radius: 0.375rem;
}
.service21 + .news1 {
  margin-top: 1.5rem;
}
.service21 .absolute.cen hr {
  width: 30.5rem;
  margin: 1.4rem auto 1.4rem;
}
.service21 .absolute.cen p {
  font-size: 1.5rem;
}
.service21 .absolute.cen .p2 {
  font-size: 3rem;
}
.service21 .absolute.cen .p1 {
  letter-spacing: 0.3rem;
  font-size: 1.5rem;
  margin-bottom: 1.1rem;
}

.service22 dl {
  padding-top: 2.4rem;
}
.service22 .labels {
  gap: 1.18rem;
  padding: 1.6rem 1.56rem;
  line-height: 2.938rem;
}
.service22 .labels a {
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  display: block;
  border: solid 0.063rem #ccc;
  cursor: pointer;
  color: #666;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
.service22 .labels a:hover, .service22 .labels .on {
  color: var(--color);
  border-color: var(--color);
}
.service22 .labels a:hover {
  background: rgba(180, 43, 44, 0.1333333333);
}

.service23 a {
  display: block;
  position: relative;
  padding-left: 11rem;
  height: 6.063rem;
  margin: 1.85rem;
  overflow: hidden;
  box-shadow: inset 10.063rem 0 var(--color);
}
.service23 a .line2 {
  font-family: "regular";
  font-size: 1.25rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  margin-top: 0.4rem;
}
.service23 a img {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 10.063rem;
  height: 6.063rem;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
.service23 a:hover {
  color: var(--color);
}
.service23 a:hover .C999 {
  color: var(--color);
  opacity: 0.7;
}
.service23 a:hover img {
  opacity: 0.85;
}

.service24.calculator {
  background: white;
}
.service24.calculator .calculator-form {
  width: 75%;
}
.service24.calculator .section1 .style1 .content {
  height: initial;
}
.service24.calculator .section1 .style1 .content .right .title {
  margin-top: 2.5rem;
  margin-bottom: 1.8rem;
}
.service24.calculator .section1 .style1 .content .right ul {
  margin-bottom: 0.6rem;
}
.service24.calculator .section1 .style1 .content .left {
  padding-top: 3rem;
}
.service24.calculator .section1 {
  background: none;
  padding: 0;
}

.service25 {
  background: #f2f2f2;
  padding-left: 1rem;
  width: 50%;
}
.service25 input {
  max-width: 80%;
}

.service26 {
  width: 5.5rem !important;
  height: 5.5rem !important;
}
.service26 .center-container {
  width: 3.8rem !important;
  height: 3.8rem !important;
}
.service26 * {
  font-size: 0.9rem !important;
  font-family: "regular";
}
.service26 span {
  opacity: 0.8;
}
.service26 span:hover {
  opacity: 1;
}

.service27 {
  height: 8rem !important;
  width: 75% !important;
  padding: 1rem 0 2rem 1rem !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  line-height: 3rem;
  color: #666;
}
.service27 .b400 {
  color: var(--color);
  font-size: 1.5rem;
}
.service28::before{
  content:"*"; color: var(--color);
}
.service28 {
  font-size: 0.875rem;
  color: #999;
  margin-top: 0.93rem;
  margin-bottom: 1.62rem;
}

@media screen and (max-width: 1800px) {
  .service12 .p6 {
    right: 2rem;
    box-shadow: 4rem 0 0 #e3e5e4;
    letter-spacing: 0.01rem;
  }
}
.calculator1.calculator .section1{
	background-image: url(../img/service26.png);
}
.calculator1 .calculator-form .my-select{
	width:100%
}
.calculator.calculator1 .section1 .style1 .content .right ul{
	padding-left:2rem; flex-direction: inherit; overflow: hidden; flex-wrap: wrap;
	align-items: center; justify-content: left; height: 17.6rem; box-sizing: border-box;
    padding: 2rem 0.6rem 2rem 2rem;
}
.calculator.calculator1 .section1 .style1 .content .right ul li{
	min-width: 49%;
}


.map100{
font-size: 15px; margin-bottom: 8vh; padding:36px 50px; line-height: 1.9;
}
.map100 h1{font-size: 28px;}
.map100 hr{margin: 30px 0;}
.map100 p{display: inline-block;}
.map100 span{ margin: 0 20px; display: inline-block; font-weight: lighter; }
.map100 a{color: #666 !important;}
.map100 a:hover{color: var(--color) !important;}
.map100 h1,.map100 .h1{ margin: 20px 0 30px; font-size:200%; }
.map100 h3,.map100 .h3{ margin: 20px 0 10px; font-size:150%; }









/**********************/
/******自定义页面******/
/**********************/
.root_menu_content {
	width: 100%;
	height: 43.75rem;
	background-image: url(https://zbmj.oss-cn-hangzhou.aliyuncs.com/upload/static/root_menu_bg1.jpg);
    background-size: cover;
    background-position: center center;

	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	display: -webkit-flex;
	display: -moz-flex;
}
.root_menu_content.zhengzhuang {
	background-image: url(https://zbmj.oss-cn-hangzhou.aliyuncs.com/upload/static/zhengzhuang/main1.jpg);
}
.root_menu_content.service {
	background-image: url(https://zbmj.oss-cn-hangzhou.aliyuncs.com/upload/static/service/main1.jpg);
}
.root_menu_content.pinzhi {
	background-image: url(https://zbmj.oss-cn-hangzhou.aliyuncs.com/upload/static/pinzhi/main1.jpg);
}
.root_menu_content.zhongbo {
	background-image: url(https://zbmj.oss-cn-hangzhou.aliyuncs.com/upload/static/zhongbo/main1.jpg);
}
.root_menu_content .container {
    width: auto;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	display: -webkit-flex;
	display: -moz-flex;

	-moz-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-justify-content: center;
	-moz-justify-content: center;

	-moz-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-align-items: center;
	-moz-align-items: center;

	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap:wrap;
}
.root_menu_content .container > a:last-child {
    margin-right: 0;
}
.root_menu_content .container > a {
	margin-top: 0;
	margin-right: .5em;
	margin-bottom: 0;
	background: linear-gradient(135deg, #ffffff, #444);
	width: 12rem;
	height: 12rem;
	border-radius: 8rem;
	box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
	overflow: hidden;
	position: relative;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	display: -webkit-flex;
	display: -moz-flex;

	-moz-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-justify-content: center;
	-moz-justify-content: center;

	-moz-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-align-items: center;
	-moz-align-items: center;

	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap:wrap;

	-moz-box-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
}
.root_menu_content .container > a::after {
	content: '';
	width: 100vw;
	height: 100vw;
	background-color: #b42b2c;
    transition: all .2s;
    border-radius: 50%;
    position: absolute;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.root_menu_content .container > a:hover::after {
	-webkit-transform: scale(2);
    transform: scale(2);
}
.root_menu_content .container > a > i {
	font-size: 2.4em;
	color: rgba(180, 43, 44, .66);
	margin-bottom: .4em;
	z-index: 1;
}
.root_menu_content .container > a > span {
	color: #333;
	font-size: 1.2em;
	z-index: 1;
}
.root_menu_content .container > a:hover i {
	color: #fff;
}
.root_menu_content .container > a:hover span {
	color: #fff;
}

