.tj_pro{padding-top:100px}
.ink .container {
      position: relative;
      width: 100%;
      height: 550px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

.ink .background-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('https://www.hanglorygroup.com/template/pc/skin/images/ink_01.jpg');
      background-size: cover;
      background-position: center;
    }

.ink .text-container {
      position: relative;
      z-index: 1;
      text-align: center;
    }

.ink .text-container h2 {
      color: white;
      font-size: 36px;
      margin: 0;
    }

.ink .text-container hr {
      border: none;
      border-top: 3px solid white;
      width: 50%;
      margin: 10px auto;
    }

/*pro*/
  .product-container {
/*      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(3, 1fr);
      grid-gap: 1.3em;*/
      text-align: center;
      padding-top: 20px;
      max-width:850px;
      margin:0 auto;
    }


.product-container .product-item{
      display: inline-block;
      width:180px;
      margin:10px 5px;
      justify-content: center;
      align-items: center;
      font-size: 1.2em;
      color: white;
      cursor: pointer;
      transition: background-color 0.3s ease;
      line-height: 3em;
      height: 3em;
      text-decoration: none;
      border-radius:0 20px;
      box-shadow:2px 2px 5px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }
.product-container .product-item a{color: white;}
/*.product-container .yellow a, .fluorescent-y a{color: black !important;}*/
    /* 定义颜色类 */
 .black {
      background-color: black;
 
    }
  .magenta {
      background-color: Magenta;
/*      background-color: #D5287F;*/
    }
  .cyan {
      background-color: cyan;
/*      background-color: #67C9D4;*/
    }

  .yellow {
      background-color: yellow;

    }

  .blue {
      background-color: blue;
/*      background-color: #2656A6;*/
    }

  .light-m {
      background-color: lightgray;
/*      background-color: #AF4DAD;*/
    }

  .light-c {
/*      background-color: lightcyan;*/
      background-color: #67C9D4;
    }

  .orange {
      background-color: orange;
/*      background-color: #F5B34E;*/
    }


  .fluorescent-r {
      background-color: red;
/*      background-color: #D5287F;*/
      
    }

  .fluorescent-y {
      background-color: yellow;
/*      background-color: #ECE94E;*/
  
/*      color: black !important;*/
    }

  .light-black {
/*      background-color:light-black;*/
      background-color: #808485;
    }

  .spot-color {
/*      background-color:spot-color;*/
      background-color: #741F21;
    }
  .black-mct {
      background-color:#030303;
    }
  .black-vs {
      background-color:#030303;
    }
  .cyan-g{
      background-color:#64C9D4;
    }
  .cyan-gr{
      background-color:#64C9D4;
    }
  .red{
      background-color:red;
    }
  .grey{
      background-color:grey;
    }
      .fluorescent-y a, .yellow a{color:#000 !important;}
.reactive-cyan,.reactive-magenta,.reactive-yellow,.reactive-black,.reactivelight-black,.reactive-orange,.reactive-red,.reactive-blue{
      background-color:red;
      border-radius:5px !important;
/*      width:150px !important;*/
}

    /* 鼠标悬停效果 */
.product-container  .conten-red:hover{color:red;font-size:1.1em;overflow:hidden;}
.product-container  .product-item:hover{
      filter: brightness(0.8);
    
}
.product-container  .product-item:hover a{
      font-weight: bold;
      font-size:1.5em;
      
    }

.p_b_r_b_le p::before{width:0;height:0;}
.pro_b_top {height:700px;}
h2.xgtit{font-size: 2em}
.sbcanshu{
      width: 100%;
      max-width:900px;
      max-height: 100%;
      margin:0 auto;
      margin-top:15%;
      color:#fff;   
}
 
.p_b_r_b_le { width:50%;}
.p_b_r_b_ri{ width:45%;}
 
 /* 平板端样式 */
    @media screen and (min-width: 768px) and (max-width: 1024px) {
     .product-item {
      width:30% !important;
      margin-top:15px !important;
      line-height:2em !important;
      }
      .pro_box_zong{background:none}
      .p_b_r_b_le { width:100%;}
      .p_b_r_b_ri{ width:100%;}
      .pro_b_ri_bot{position:fixed;}
     .product-container {
        flex-wrap: nowrap;
        justify-content: space-around;
      }
      .ink .container{
         height: 250px;   
      }
    }

    /* 手机端样式 */
    @media screen and (max-width: 767px) {
      .p_b_r_b_le { width:100%;}
      .p_b_r_b_ri{ width:100%;}
      .pro_b_top{height: 0}
     .product-item {
      width:43% !important;
      margin-top:15px !important;
      }
      .padding-top{ margin-top:15px !important;}
      .ink .container{
         height: 150px;   
      }
      .xgtuijiancp{background-color:#fff;margin-top:850px;}
      .pro_b_top_le{height:0}
      .xglitit{padding:15px}
      .pro_b_ri_bot{padding:30px 5px;}
      .tj_pro{padding:5px}
          .p_b_r_b_ri, .p_b_r_b_le {background:#fff}
     .product-container {
        flex-wrap: nowrap;
        justify-content: space-around;
      }
      .reactive-cyan,.reactive-magenta,.reactive-yellow,.reactive-black,.reactivelight-black,.reactive-orange,.reactive-red,.reactive-blue{
      width:45% !important;
}

    }

@media screen and (max-width: 374px) {
.anniu a{margin:5px 0 ;width:165px;height:45px;}
.anniu{margin:15px 0;}
.xgcpli{margin-top:40px}

}