.web_main{position:relative; }
.page_main{background:#FFF; padding:60px 0 0; -moz-transform:translate3d(0, 0, 0); -webkit-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); -o-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); }
img.img{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    transition: allease-in-out .3s;
}
@media screen and (max-width: 950px){
    img.img{
        position: static;
    }
    .page_main{
        padding:40px 0 0 ;
    }
}
@media screen and (max-width: 414px){
    .page_main{
        padding:30px 0 0;
    }
}
/*sys_sub_head*/
.sys_sub_head {text-align: center;background-position: center;background-repeat: no-repeat;-webkit-background-size: cover;background-size: cover;position: relative;}
.sys_sub_head{
    .head_title{font-size:46px;line-height:1.2;font-weight:normal;color:#bb0001;}
    .path_bar {text-align: left;font-size: 16px;line-height: 35px;padding: 10px 0;}
    .path_bar .layout{}
    .path_bar li{display:inline;padding-right:10px;text-transform:capitalize;}
    .path_bar li:after{content:'>';padding-left:10px;}
    .path_bar li:last-child:after{display:none;}
    .mobile-head-items{display:none;}
    .path_bar li {color: #fff;}
    .path_bar li a{color: #fff;}
    .path_bar li a:hover{
        text-decoration: underline;
    }
    .path_bar li:last-child a{color: #fff;}
    .path_bar li:last-child{color: #fff;}
    .sub_head_cont {width: 100%;padding: 5% 0;text-align: center;background-position: center;background-repeat: no-repeat;-webkit-background-size: cover;background-size: cover;}
    .sub_head_cont .sub_head_title, .sub_head_cont .sub_head_title a {color: #fff;}
    .sub_head_cont .sub_head_title {font-family: Arial, Arial;font-weight: bold;font-size: 60px;color: #FFFFFF;line-height: 77px;text-align: center;text-transform: capitalize;}
    .path_bar {font-size: 18px;text-align: center;text-transform: uppercase;padding: 30px 0 0;letter-spacing: 0px;}

    .products_rer .pdf{ background: #22408F;color:#fff;width: 9%; margin-right: 3%;    cursor: pointer;}
    .products_rer .contact{  background: #fff;;  width: 9%;cursor: pointer;color:var(--dark-color)}
    .products_rer .pdf:hover{ background:#fff; color: #333;   width: 9%; margin-right: 3%;}
    .products_rer .contact:hover{  background: #22408F; color: #fff;  width: 9%;}
    .products_rer{  height: 37px;  display: flex;  text-align: center;  margin: 0 auto; width: 100%; justify-content: center;}
}
@media screen and (max-width: 950px) {
    .sys_sub_head{
        .sub_head_cont{
            padding: 25% 0 !important;
        }
        .path_bar {
            margin-top: 0;
            padding: 10px 0;
            line-height: 1.5;
            font-size: 16px;
        }
        .sub_head_cont .sub_head_title {
            font-size: 32px;
            line-height: 32px;
        }
        .path_bar{
            padding:10px 0;
        }
        .products_rer .pdf{ line-height: 2.2; width: 120px !important;}
        .products_rer .contact{line-height: 2.2; width: 120px !important;}
    }

}

/*--------------------about page------------------ */

.ab_whobox {
    position: relative;
    margin: 60px 0;
}
.ab_whobox .layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width:100%;
}
.ab_whobox_L {
    width: 50%;

    .img_box {
        width: 100%;
        height:0;
        position: relative;
        left: 0;
        top: 0;
        padding-top:77.5%;
        overflow: hidden;
    }
}
.ab_whobox_L img {
    height: 100%;
    width: 100%;
    position: absolute;
    left:0;
    top:0;
    object-fit: cover;
}
.ab_whobox_R {
    width: 50%;
    float: right;
    padding: 0px 120px 0 60px;
}
.ab_whobox_R1 {
    max-height: 350px;
    overflow: auto;
}
.ab_whobox_R1 p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #666666;
    line-height:1.7;
    text-align: left;
}
.ab_whobox_R2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 30px 0;
}
.ab_whobox_R2 li p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #666666;
    line-height: 1.5;
    text-align: left;
}
.ab_whobox_R3 {
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width: 1200px){
    .ab_whobox_R3 {
        flex-direction: column;
    }
}
@media screen and (max-width: 950px){
    .ab_whobox {
       margin:20px 0;
    }
}



.ab_whobox_R3 li {
    display: flex;
    width: 100%;
    align-items: center;
    margin-bottom: 4%;
}
.ab_whobox_R3li1 {
    background: #ECECEC;
    border: 8px solid #f6f6f6;
    border-radius: 50%;
    width: 71px;
    height: 71px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
}
.ab_whobox_R3li1 img {
}
.ab_whobox_R3li2 {
    width:calc(100% - 92px);
}
.ab_whobox_R3li2 p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: #666666;
    line-height: 36px;
    text-align: left;
}
.ab_whobox_R3li2 a:hover{
    color:var(--active-color);
}
@media screen and (max-width: 1600px){
    .ab_whobox_R{
        padding: 0px 60px 0 60px;
    }
}
@media screen and (max-width: 1024px){
    .ab_whobox .layout {
        flex-direction: column;
        padding:0 15px;
    }
    .ab_whobox_L{
        width:100%;
    }
    .ab_whobox_R{
        width:100%;
        margin-top:30px;
    }
    .ab_whobox_R1{
        height:auto;
    }
    .ab_whobox_L .img_box{
        height:auto;
        padding:0;
    }
    .ab_whobox_L img {
        position: static;
    }
}
@media screen and (max-width: 768px){
    .ab_whobox_R{
        padding:0;
    }
    .ab_whobox_R3{
        flex-direction: column;
    }
}

/**/
.ab_innbox {
    position: relative;
    margin: 60px 0;
}
.ab_innbox .layout {
    width:100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ab_innbox_L {
    width: 50%;
    float: left;
    padding: 0px 60px 0 120px;
}
.ab_innbox_R {
    width: 50%;
    .img_box {
        width: 100%;
        height:0;
        position: relative;
        left: 0;
        top: 0;
        padding-top:77.5%;
        overflow: hidden;
    }
}
.ab_innbox_R img {
    height: 100%;
    width: 100%;
    position: absolute;
    left:0;
    top:0;
    object-fit: cover;
}
.ab_innbox_R1 p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #666666;
    line-height: 1.7;
    text-align: left;
}
.ab_innbox_R2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    margin: 30px 0;
    position: relative;
}
.ab_innbox_R2 li {
    width: 30%;
    margin-right: 5px;
}
.ab_innbox_R2 li p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #666666;
    line-height: 1.7;
    text-align: left;
}
.ab_innbox_R2li2.active {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ab_innbox_content li{
    display:none;
}
.ab_innbox_content li.active{
    display:block;
}
.ab_innbox_R2li2{
    display: flex;
    align-items: center;

}
.ab_innbox_R2li1 {
    cursor: pointer;
    padding: 10px;
    border: 1px solid #22408F;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #333333;
    line-height: 28px;
    text-align: center;
    text-transform: uppercase;
}
.ab_innbox_R2li1:hover {
    background-color: #22408F;
    color: #fff;
}
.ab_innbox_R2li1.navactive {
    background-color: #22408F;
    color: #fff;
}
.ab_innbox_R2img {
    width: 35%;
    overflow: hidden;
    position: relative;
    height:0;
    padding-top: 32%;
}
.ab_innbox_R2img img {
}
.ab_innbox_R2p {
    width: 60%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #666666;
    height: 143px;
    overflow: auto;
    line-height: 24px;
    text-align: left;
}
.index_hd{margin-bottom:40px;text-align:center;}
.index_hd,.index_hd a{color:#000;}
.index_hd .title{
    font-size:20px;
    color:#22408F;
    margin-bottom:20px;
}
.index_hd .hd_title {
    font-weight: bold;
    line-height: 1.1;
    font-family: Arial ;
    font-size: 60px;
    color: #000000;
}
.index_hd .hd_desc{font-size:16px;padding-top:15px;}

@media screen and (max-width: 1600px){
    .ab_innbox_R1 {
        max-height:150px;
        overflow: auto;
    }
    .ab_innbox_L {
        padding: 0px 60px 0 60px;
    }
    .index_hd .hd_title{
        font-size:48px;
    }
    .ab_whobox_R1{
        max-height:250px;
    }
    .ab_whobox_R{
        .index_hd{
            margin-bottom:20px;
        }
    }
    .ab_innbox_L {
        .index_hd{
            margin-bottom:20px;
        }
    }
}
@media screen and (max-width: 1400px){
    .index_hd .hd_title{
        font-size:32px;
    }
}
@media screen and (max-width: 1200px){
    .ab_whobox_R3li2 p{
        font-size:16px;
    }
    .ab_whobox_R1{
        max-height: 160px;
    }
}
@media screen and (max-width: 1024px){
    .ab_innbox_R1{
        max-height:100%;
        overflow: hidden;
    }
    .ab_innbox{
        margin:20px 0;
    }
    .ab_innbox .layout {
        flex-direction: column-reverse;
        padding:0 15px;
    }
    .ab_innbox_L{
        width:100%;
        padding:0;
        margin-top:30px;
    }
    .ab_innbox_R{
        width:100%;
    }
    .ab_innbox_R2p{
        height:auto;
    }
    .ab_innbox_R .img_box{
        height:auto;
        padding: 0;
    }
    .ab_innbox_R img{
       position: static;
    }
    .ab_whobox_R1{
        max-height:100%;
        overflow: hidden;
    }
}


@media screen and (max-width: 768px){
    .ab_innbox_R2li2{
        flex-direction: column;
    }
    .ab_innbox_R2img{
        width:100%;
    }
    .ab_innbox_R2p{
        width:100%;
    }
}
@media screen and (max-width: 414px){
    .ab_innbox_R2{
        flex-direction: column;
    }
    .ab_innbox_R2 li{
        width:100%;
        margin-bottom:20px;
    }
    .index_hd{
        margin-bottom:20px;
    }
    .index_hd .title{
        margin-bottom:10px;
    }
}

/**/
.ab_groupbox {
    margin: 60px 0;
}
.ab_group {
    text-align: center;
}
.ab_groupli {
    position: relative;
    width: 20%;
    height: 390px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.ab_groupli .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #22408F;
    transition: background-color 0.5s ease;
    z-index: 1;
}
.ab_groupli:hover .overlay {
    background-color:#0052d963;
}
.ab_groupli img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 50%;
    z-index: 2;
}
@media screen and (max-width: 950px){
    .ab_groupli .overlay{
        display:none;
    }
}
@media screen and (max-width: 768px){
    .ab_groupli img{
        max-width: 25%;
    }
}
@media screen and (max-width: 414px){
    .ab_groupbox{
        margin: 30px 0;
    }
}

/**/
.ab_meetli {
    width: 24.5%;
    text-align: center;
    margin-bottom: 20px;
    .ab_meetli1 {
        position: relative;
        height:0;
        width:100%;
        padding-top:99%;
        overflow: hidden;
    }
    .ab_meetli1 img{
        position: absolute;
        width: 100%;
        height: 100%;
        left:0;
        top:0;
        transition: all ease-in-out .3s;
    }
    .ab_meetp1{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        color: #666666;
        line-height: 36px;
    }
    .ab_meetp2{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        color: #666666;
        line-height: 36px;
        font-weight: bold;
    }
    .ab_meetli:hover .ab_meetp1{
        color: #22408F;
    }
    .ab_meetli:hover .ab_meetp2{
        color: #22408F;
    }
    .title{
        color: var(--dark-color);
        margin-top:20px;
    }
    .ename{
        font-family:Arial-BoldMT;
        color: var(--dark-color);
        font-size:20px;
    }
}

/**/
.ditubox {
    background-repeat: no-repeat;
    padding: 200px 0 300px 0;
    background-size: cover;
}
.ditubig1{
    font-family: Arial, Arial;
    font-weight: bold;
    font-size: 60px;
    color: #333333;
    line-height: 1.4;
    text-align: left;
    width: 800px;
}
.ditubig2{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #666666;
    line-height: 30px;
    text-align: left;
    width: 40%;
    margin-top:30px;
}
.ditubig3 {
    margin: 30px 0 0px 0;
    display: flex;
}
.ditubig3 a {
    background: #22408F;
    color: #fff;
    padding: 15px 30px;
    text-transform: uppercase;
}
.ditubig4 {
    display: none;
}
@media only screen and (max-width:1280px){
    .ditubox {
        background-repeat: no-repeat;
        background-size: cover;
        padding: 120px 0;
    }
}
@media only screen and (max-width:1024px){
    .ditubig1{
        font-size: 46px;
    }
}
@media only screen and (max-width:950px){
    .ditubig1{
        font-size: 36px;
    }

}
@media only screen and (max-width:768px){
    .ditubig1{
        width: auto;
        font-size: 30px;
    }
    .ditubox{
        padding:29px 0 280px 0;
        background-position: center bottom;
        background-image:url(../images/map-web.png) !important;
        background-size: 100%;
    }
    .ditubig2{
        width: 100%;
        margin-top:10px;
    }
}
@media only screen and (max-width:500px){

}

/**/
.singupbox{
    padding: 60px 0;
    background-repeat: no-repeat;
    background-size: cover;
}
.singupbig {
    display: flex;
    align-items: center;
}
.singupbig_L {
    width: 40%;
}
.singupbig_L p{
    font-family: Arial, Arial;
    font-weight: bold;
    font-size: 60px;
    color: #FFFFFF;
    line-height: 1.5;
    text-align: left;
}
.singupbig_R{
    width: 60%;
}
.singupbig_R1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: #FFFFFF;
    line-height: 34px;
    text-align: left;
    margin-bottom: 30px;
}
.singupbig_R2 {
    display: flex;
    justify-content: space-between;
}
.singupbig_R21 {
    border-bottom: 1px solid #ffffff;
    color: #DBDBDB !important;
    width: 80%;
    display: inline-block;
}
.singupbig_R22 {
    padding: 10px 10px;
    color: #333;
    background-color: #fff;
    min-width:120px;
    text-align: center;
}
.singupbig_R22:hover {
    color: #fff;
    background-color: #000000;
}
@media screen and (max-width: 1300px) {
    .singupbig_L p{
        font-size:40px;
    }
}
@media screen and (max-width: 950px) {
    .singupbig{
        flex-direction: column
    }
    .singupbig_L{
        width:100%;
    }
    .singupbig_L p{
        text-align: center;
    }
    .singupbig_R{
        width:100%;
    }
    .singupbig_R1{
        text-align: center;
    }
    .singupbig_R2{
        flex-direction: column
    }
    .singupbig_R21{
        width:60%;
        margin:0 auto;
    }
    .singupbig_R22{
        width:60%;
        margin:30px auto;
        text-align: center;
    }
}
@media screen and (max-width: 414px) {
    .singupbig_L p{
        font-size:28px;
    }
}
/*--------------------application page------------------ */
.media{
    margin-top:var(--pc_margin);
    .flex-box{
        width:100%;
        display: flex;
        align-items: center;
    }
    .flex-box:nth-child(2n){
        flex-direction: row-reverse;
    }
    .media-left{
        width:50%;
    }
    .img_box{
        width:100%;
        position: relative;
        height:0;
        padding-top:64%;
        overflow: hidden;
    }
    .media-right{
        width:50%;
        padding-left:70px;
        padding-right:0px;
    }
    .flex-box:nth-child(2n) .media-right{
        padding-right:70px;
        padding-left:0;
    }
    .tou{
        font-size: 18px;
        color:var(--dark-color);
    }
    .title{
        font-size:50px;
        line-height:1.3;
        margin:10px 0 20px 0;
    }
    .title span{
        font-size: 40px;
        color: #182E59;
        font-weight: bold;
    }
    .content{
        color:var(--dark-color);
        line-height:1.6;
    }
    .more{
        display: inline-block;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        color: #fff;
        height: 51px;
        line-height: 51px;
        text-align: center;
        background-color: #22408F;
        padding: 0px 30px;
        margin-top: 60px;
    }
    .more a{
        color:#fff;
    }
    .more a:hover{
        text-decoration: underline;
    }
}
.contact.media{
    background-color:#f7f7f7;
}
.app_main .media{
    .flex-box{
        margin-bottom: 40px;
    }
}
@media screen and (max-width: 1300px){
    .media{
        .title{
            font-size:36px;
        }
        .more{
            margin-top: 30px;
        }
    }
}
@media screen and (max-width: 1150px){
    .media{
        .title{
            font-size:30px;
        }
        .more{
            margin-top: 20px;
        }
        .title span{
            font-size:30px;
        }
    }
}
@media screen and (max-width: 950px){
    .media{
        .title{
            font-size:36px;
        }
        .flex-box{
            flex-direction: column !important;
        }
        .media-left{
            width:100%;
        }
        .media-right{
            width:100%;
            padding:0;
            margin-top:40px;
        }
        .img_box{
            height:auto;
            padding:0;
        }
        .content{
            -webkit-line-clamp:none;
        }
        .flex-box:nth-child(2n) .media-right{
            padding-right:0;
        }

    }
    .media.contact{
        .media-right{
            padding:0 50px 30px 50px;
        }
    }
}
@media screen and (max-width: 768px){
     .media{
         .title{
             font-size:30px;
         }
         margin-top:var(--web_margin);
     }
    .media.contact{
        .media-right{
            padding:0 30px 30px 30px;
        }
    }
}
@media screen and (max-width: 414px){
    .media{
        margin-top:var(--mobile_margin);
        .media-right{
            margin-top:var(--mobile_margin);
        }

    }
    .app_main .media{
        .flex-box{
            margin-bottom: 20px;
        }
    }
}
/*products*/
.productBox{
    margin-top:var(--pc_margin);
     .prolist{
         display: flex;
         align-items: flex-start;
         justify-content: flex-start;
         flex-wrap: wrap
     }
    .option{
       width:30%;
       margin:0 1.66%;
       margin-bottom: 20px;
    }
    li{
        padding:30px;
    }
    li:hover{
       background-color:#F7F7F7;
    }
    .img_box{
        width:100%;
        position: relative;
        height:0;
        padding-top:80%;
    }
    .title{
        font-size:20px;
        text-align: center;
        margin-top: 40px;
        height:60px;
    }
    .desc{
        color:var(--light-color);
        text-align: center;
        line-height:1.4;
        margin-top:10px;
        height:90px;
    }
    li:hover .title{
        color:var(--active-color);
    }
}
.productBox.special{
    margin-top:0 !important;
}
@media screen and (max-width: 1100px){
    .productBox{
        .option{
            width:48%;
            margin:0 1%;
            padding: 0 2.5%;
        }
    }
}
@media screen and (max-width: 950px){
  .productBox{
      margin-top:var(--web_margin);
      .img_box{
         img.img{
             position: absolute;
         }
      }
      .product_sw{
          display: block;
      }
      /*.prolist{*/
      /*    display:none;*/
      /*}*/
  }
}
@media screen and (max-width: 768px){
    .productBox{
        margin-top:var(--mobile_margin);
        .option{
            width:100%;
        }
    }
}
/*news*/
.news_swiper{
    margin-top:var(--pc_margin);
    .item{
        border: 1px solid #ECECEC;
    }
    .item:hover{
        background-image:url(../images/banner1.png);
        background-position:center top;
        background-repeat: no-repeat;
        background-size:cover;
    }
    .item:hover .info{
        background-color:#22408fc4;
    }
    .info{
        width:100%;
        padding:30px;
    }
    .date{
        color: #A3A3A3;
        line-height:1.4;
    }
    .title{
        color:#333;
        font-size:20px;
        height: 65px;
        margin:10px 0 ;
    }
    .content{
        color: var(--dark-color);
        line-height: 28px;
        margin-bottom: 10px;
        height: 84px;
    }
    .item:hover .date{
        color:#fff;
    }
    .item:hover .title{
        color:#fff;
    }
    .item:hover .content{
        color:#fff;
    }
    .more{
        width:45px;
        height:45px;
        background:url(../images/more.png) no-repeat center top;
        background-size:100%;
    }
}
.cebianmain{
    .news_swiper{
        margin-top:0;
        .item{
            width:30%;
            margin-right:18px;
            margin-bottom:38px;
        }
        .nlist{
            display: flex;
            align-items: flex-start;
            flex-wrap: wrap;
        }
    }
}
@media screen and (max-width: 1300px){
    .cebianmain{
        .news_swiper{
            .item{
                width:48%;
                margin-right:2%;
                margin-bottom:38px;
            }

        }
    }
}
@media screen and (max-width: 768px){
    .news_swiper{
        margin-top:var(--web_margin);
        .swiper-slide-active.item{
            background-image:url(../images/banner1.png);
            background-position:center top;
            background-repeat: no-repeat;
            background-size:cover;

            .info{
                background-color:#22408fc4;
            }
            .date{
                color:#fff;
            }
            .title{
                color:#fff;
            }
            .content{
                color:#fff;
            }
        }
    }
    .cebianmain{
        .news_swiper{
            .item{
                width:100%;
                margin-bottom:38px;
                background-image: url(../images/banner1.png);
                background-position: center top;
                background-repeat: no-repeat;
                background-size: cover;
            }
            .info{
                background-color:#22408fc4;
            }
            .date{
                color:#fff;
            }
            .title{
                color:#fff;
            }
            .content{
                color:#fff;
            }

        }
    }
}
@media screen and (max-width: 414px){
    .news_swiper{
        margin-top:var(--mobile_margin);
    }
}
/*--------------------contact page------------------ */
.contact_us{
    .clist{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .item{
        width: 32%;
        background: #F6F6F6;
        border: 1px solid #F0F0F0;
        text-align: center;
        padding: 55px 60px;
    }
    .item:hover{
        background-color: #fff;
        box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, .1);
    }
    .img_box{
        border-radius: 50%;
        width: 83px;
        height: 83px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: #22408F;
        margin-bottom: 30px;
    }
    .img_box img{
        width:38px;
    }
    .title{
        font-weight: bold;
        font-size: 24px;
        color: #333333;
        line-height:1.4;
        text-align: center;
        margin-bottom: 30px;
    }
    .info a:hover{
        color: #094DA2;
        text-decoration: underline;
    }


}
@media screen and (max-width: 950px){
    .contact_us{
        .item{
            width:100%;
            background: #F6F6F6;
            border: 1px solid #F0F0F0;
            text-align: center;
            padding: 60px 60px;
            margin-bottom: 30px;
        }
    }
}
.cont_share{
    text-align: center;
    margin: 60px 0;
     p {
        font-family: Arial, Arial;
        font-weight: bold;
        font-size: 20px;
        color: #333333;
        line-height: 31px;
        text-align: center;
    }
    .cont_map {
        position: relative;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .cont_map iframe{
        position: absolute;
        top: 15%;
        right: 0;
        width: 50%;
        height: 90%;
    }
    .shareBox{
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
}
/*submit*/
.cont_map {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
}
.cont_map iframe{
    position: absolute;
    top: 15%;
    right: 0;
    width: 50%;
    height: 90%;
}
.lianxixun {
     .xun_boxrtit1 {
        font-family: Arial, Arial;
        font-weight: bold;
        font-size: 60px;
        color: #FFFFFF;
        line-height: 66px;
        text-align: left;
    }
     .index_from .asterisk {
        background-color: transparent;
        border-radius: 30px;
    }
     .form_ul li input {
        background-color: transparent;
        border: none !important;
        border-bottom: 1px solid #fff !important;
        width: 100%;
        padding-left: 3%;
        border-radius: 0px;
    }
     .Asterisk_Text textarea {
        border: none !important;
        border-bottom: 1px solid #fff !important;
        background-color: transparent;
        border-radius: 0;
    }
     .gtm_submit_btn {
        background-color: #ffffff !important;
        width: 151px !important;
        height:49px !important;
        color: #333;
        margin-top: 15px !important;
        background: #22408F;
        border-radius: 0px;
        border: none;
    }
}
.xun_boxr {
    width: 50%;
    padding: 60px 0px;
    padding-right: 5%;
    max-width: 600px;
    .content-wrap.form .ch_form_wrap ul input, .content-wrap.form .ch_form_wrap ul textarea, .content-wrap.form .ch_form_wrap ul select{
        background: transparent;
        border:none;
        border-bottom:1px solid #fff;
        color:#fff;
    }
    .content-wrap.form .ch_form_wrap ul li{
        margin-bottom:30px;
    }
    .content-wrap.form .ch_form_wrap ul li:nth-child(1){
        width:48%;
        float: left;
    }
    .content-wrap.form .ch_form_wrap ul li:nth-child(2){
        width:48%;
        float: right;
    }
    .content-wrap.form .ch_form_wrap .item_submit{
        padding:0;
    }
    .item_submit .submit_btn{
        margin:0;
        background: #fff;
        color: #333 !important;
        font-weight: bold;
        border:none !important;
    }
    .content-wrap.form .ch_form_wrap ul input::placeholder{
        color:#fff;
    }
    .content-wrap.form .ch_form_wrap ul textarea::placeholder{
        color:#fff;
    }
    .item_submit .submit_btn:hover{
        background:var(--active-color) !important;
        color:#fff !important;;
    }
}
@media screen and (max-width: 950px){
    .xun_boxr {
        width: 100%;
        padding: 120px 10px 30px 10px;
    }
    .cont_map iframe {
        position: relative;
        top: 15%;
        right: 0;
        width: 100%;
        height: 400px;
    }
}
@media screen and (max-width: 768px){
    .xun_boxr {
        padding: 60px 10px 0 10px;
    }
    .lianxixun{
        .xun_boxrtit1{
            font-size:38px;
        }
    }
    .content-wrap.form .ch_form_wrap ul{
        padding:20px 0;
    }

}
/*--------------------faq page------------------ */
.cebianmain {
    position: relative;
    float: left;
    width: 73%;
    .faq_list { position: relative; width: 100%; }
    .faq-item {
        position: relative;
        overflow: hidden;
        margin: 0 0 20px;
        /* padding: 0 25px; */
        width: 100%;
        border-bottom: 1px solid #DDDDDD;
    }
    .faq-item .faq-title {
        position: relative;
        padding: 0px 0 15px 0;
        font-size: 16px;
        cursor: pointer;
        display: flex;
    }
    .faq-item .faq-title:before { position: absolute; right: 0; content: "\f067"; font-size: 14px; color: #004562;display: none;}
    .faq-item .faq-title.show-title:before { content: '\f068'; color: #004562; display: none;}
    .faq-item .faq-title .faqh3 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        color: #333333;
        line-height: 31px;
        font-weight: bold;
    }
    .faq-item.active .faq-title .faqh3 {
        color: #22408F;
    }
    .faq-item .faq-cont { display: none; margin: 0; margin-left: 35px;padding-bottom: 15px;}
    .faq-item:first-child .faq-cont { display: block; }
    .faq-cont p {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        color: #666666;
        line-height: 30px;
    }
    .faq-item .faq-title .svg_icon {
        margin-right: 20px;
    }
    .faq-item .faq-title .svg_icon .icon {
        width: 25px;
        height: auto;
    }
    .faq_list .active {
    }
    .faq_lbg {
        padding: 150px 150px 150px 150px ;
        margin-bottom: 50px;
    }
    .faq_lbg:after {
        background-color: rgba(168,153,136, 0.2);
    }
    .faqheading {
        font-size: 34px;
        color: #ffffff;
        font-family: Raleway;
        font-weight: 200;
        margin: 10px 0;
    }
    .faqheading-text {
        font-size: 14px;
        color: #ffffff;
        font-family: Raleway;
        font-weight: 300;
        margin: 10px 0;
    }
    .faq_tks {
        background-color: rgba(89,89,89, 1);
        padding-top: 70px;
        padding-bottom: 60px;
    }
    .faq_tksw {
        font-size: 20px;
        color: #ffffff;
        font-family: Airal;
        font-weight: 300;
        margin: 10px 0;
    }
    .faq_listb {
        font-size: 14px;
        color: #ffffff;
        font-family: Airal;
        font-weight: 300;
        margin: 30px 0;
        text-align: center;
    }
    .faq_tksw {
        text-align: center;
    }
    .faq_btn {
        font-size: 15px;
        font-family: Raleway;
        font-weight: 300;
        color: #ffffff;
        border: 2px solid #ffffff;
        background-color: rgba(89,89,89, 1);
        border-radius: 30px;
        line-height: 17px;
        padding: 12px 24px;
    }
    .faq_listb a:hover {
        color: #333333;
        border: 2px solid #ffffff;
        background-color: #ffffff;
        border-radius: 10px;
    }
    .faq_list .svg_icon {
        position: relative;
        width: 16px;
        height: 27px;
    }
    .faq_list .svg_icon::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('img/pd_icons.png');
        background-size: cover;
        background-position: center;
    }
    .page_faq .faq-item .faq-title:before {
        position: absolute; right: 0;
        font-size: 14px;
        color: #004562;
        display: block;
        content: '';
        width: 29px;
        height: 30px;
        background:url(../images/add.png) no-repeat center top;
        background-size:14px;
    }
    .page_faq .faq-item .faq-title.show-title:before {
        content: '';
        color: #004562;
        display: block;
        width: 11px;
        height: 2px;
        background:url(../images/reduce.png) no-repeat center top;
        background-size:11px;
    }
    .faq_list .page_faq .active .faq-title:before{
        color:#fff !important;
        background:url(../images/reduce.png) no-repeat center top;
    }
    .page_faq .faq-item .faq-cont {
        display: block;
        margin: 0;
        margin-left: 0px;
        padding-bottom: 15px;
    }
    .page_faq .faq-item {
        position: relative;
        overflow: hidden;
        margin: 0 0 20px;
        padding: 30px 40px 15px 40px;
        width: 100%;
        border: none;
        border: 1px solid #EBEBEB;
    }
    .faq_list .page_faq .active {
        background-color:#22408F;
    }
    .page_faq .faq-titlep {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 22px;
        color: #333333;
        line-height: 31px;
        text-align: left;
    }
    .page_faq .faq-cont p {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 17px;
        color: #333333;
        line-height: 28px;
        text-align: left;
    }
    .page_faq .active .faq-titlep {
        color: #ffffff;
    }
    .page_faq .active .faq-cont p {
        color: #FFFFFF;
    }
    .page_faq .faq-item .faq-title:before {
        color: #22408F;
    }
    .page_faq .faq-item .faq-title.show-title:before {
        color: #ffffff;
    }
    .page_faq.page_download .faq-item {
        position: relative;
        overflow: hidden;
        margin: 0 0 20px;
        padding: 30px 40px 30px 40px;
        width: 100%;
        border: 1px solid #EBEBEB;
    }
    .page_faq.page_download .faq-item:hover {
        background-color: #22408F;
    }
    .page_faq.page_download .faq-item:hover .faq-titlep {
        color: #fff;
    }
    .page_faq.page_download .faq-item .faq-title {
        position: relative;
        padding: 0px;
        font-size: 16px;
        cursor: pointer;
        display: flex;
    }
    .page_faq.page_download .faq-item .faq-title:before {
        content: '';
        display: inline-block;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateX(-50%) translateY(-50%);
        width: 21px;
        height: 18px;
        background-image: url(../images/download-black.png);
        z-index: 20;
        background-repeat: no-repeat;
        background-size:21px;
    }
    .page_faq.page_download .faq-item:hover .faq-title:before {
        content: '';
        display: inline-block;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateX(-50%) translateY(-50%);
        width: 21px;
        height: 18px;
        background-image: url(../images/download-white.png);
        z-index: 21;
        background-repeat: no-repeat;
        background-size:21px;
    }
}
.cebian {
    position: sticky;
    float: right;
    width: 22%;
    top:140px;
    #ssbiao {
        width: 18px;
        height: 17px;
        background-color: #0c6ea6;
        border-radius: 50%;
        right: 4px;
        top: 4px;
        border: none;
        font-size: 0;
        background-repeat: no-repeat;
        background-position: center;
        margin: 0;
    }
    .aside{float:left;width:230px;}
    .side-tit-bar{position:relative;margin-bottom:15px;}
    .side-tit-bar .side-tit {
        position: relative;
        height: 36px;
        overflow: hidden;
        white-space: nowrap;
        /* padding: 0 0 0 15px; */
        text-transform: capitalize;
        font-family: Arial, Arial;
        font-weight: bold;
        font-size: 22px;
        color: var(--active-color);
        line-height: 43px;
    }
    .side-widget{position:relative;margin:0 0 30px;}
    .side-cate li {position:relative;line-height:30px;font-size: 16px;}
    .side-cate li a {
        position:relative;
        display:block;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        font-weight: normal;
        color: #333333;
        line-height: 43px;
        text-transform: capitalize;
    }
    .side-cate ul {display:none;overflow:visible !important; background-color: #fff;}
    .side-cate ul li a{
        font-size: 16px;
        color: #333;
    }
    .side-cate li a{-webkit-transition: color .3s ease-in-out;-o-transition: color .3s ease-in-out;transition: color .3s ease-in-out;}
    .side-cate li li {font-size: 16px;padding: 2px 0;}
    .side-cate li li a:hover:before,.side-cate li li.active>a:before{background-color:#22408F;}
    .side-cate li li li{font-size: 16px;}
    .side-cate li a:hover,.side-cate li.active>a{color: #22408F;}
    .side-cate li a:hover:before,.side-cate li.active>a:before{background-color: #22408F;}
    .side-cate li .icon-cate{position:absolute; right:0; top:6px;display:inline-block;width:20px;height:20px; line-height:20px;overflow:hidden;text-align:center; font-size:10px; cursor:pointer; color:#99abb7;-webkit-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease; }
    .side-cate li .icon-cate.icon-cate-down:before{content: '>';
        transform: rotate(269deg); }
    .side-cate li .icon-cate.icon-cate-up:before{    content: '>';
        transform: rotate(81deg); }
    .side-widget .cate-type-list>li{line-height: 30px;font-size: 16px;}
    .side-widget .cate-type-list>li>a{
        padding-left: 15px;
        margin-right: 0;
    }
    .side-cate li.has-child>a{line-height: 35px;margin-right: 30px;}
    .side-cate li.has-child>a:hover{
        color:var(--active-color);
    }
    .side-cate li.nav-current>.icon-cate{color:#22408F;}
    .side-cate>li.nav-current>a,.side-cate>li.nav-current>.icon-cate{color: #22408F;}
    .side-cate li li.nav-current>a{color: #22408F;}
    .side-cate li li.nav-current>a:before{background-color: #22408F;}
    .side-cate li.nav-current > .icon-cate, .side-cate li:hover > .icon-cate, li.show_li >.icon-cate{color:#99abb7; }
    .side-cate li .icon-cate:hover{background-color:#53636e;color:#fff;}
    .side-product-items{position:relative;}
    .side-product-items .items_content{position:relative;padding:35px 0;}
    .side_product_item{position:relative;display:block;width:100%;overflow:hidden;}
    .side_product_item figure{position:relative;display:table;width:100%;overflow:hidden;}
    .side_product_item .item-img,.side_product_item figcaption{display:table-cell;vertical-align:middle;}
    .side_product_item .item-img{width:70px;border:1px solid #dcdcdc;-webkit-box-sizing:content-box;box-sizing:content-box;position:relative;}
    .side_product_item .item-img:before{content:'';display:block;width:100%;height:100%;position:absolute;left:0;top:0;-webkit-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out;}
    .side_product_item .item-img img{display:block;width:100%;}
    .side_product_item:hover .item-img{border-color:#ccc;}
    .side_product_item:hover .item-img:before{background-color:rgba(0,150,234,.3);}
    .side_product_item figcaption{padding-left:15px;}
    .side_product_item figcaption h3{font-size:16px;font-weight:normal;}
    .side_product_item figcaption h3 a{display:block;max-height:4.2em;line-height:1.4em;/*-ms-word-break:break-all;word-break:break-all;word-wrap:break-word;*/overflow :hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;}
    .side_product_item figcaption h3 a:hover,.side_product_item .item-img:hover +  figcaption h3 a{color:#22408F;text-decoration:underline;}
    .side_product_item figcaption .h3{font-size:16px;font-weight:normal;}
    .side_product_item figcaption .h3 a {
        display: block;
        max-height: 4.2em;
        line-height: 1.4em;
        max-height: none;
        height: auto;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 10;
        -webkit-box-orient: vertical;
    }
    .side_product_item figcaption .h3 a:hover,.side_product_item .item-img:hover +  figcaption .h3 a{color:#22408F;text-decoration:underline;}
    .side-product-items .swiper-slide{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;
        display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;}
    .side-product-items .side_slider{max-height:450px;overflow:hidden;-webkit-box-sizing:content-box;box-sizing:content-box;position:relative;}
    .side-product-items .side_slider .swiper-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
    .side-product-items .side_product_item{
        height:90px ;
    }
    .side-product-items .btn-prev,.side-product-items .btn-next{position:absolute;left:0;width:100%;height:32px;line-height:32px;opacity:1;filter:alpha(opacity=100);font-size:28px;color:#ccd3d9;z-index:1;text-align:center;cursor:pointer;}
    .side-product-items .swiper-button-disabled{color:#eee;cursor:default;}
    .side-product-items .btn-prev:before,.side-product-items .btn-next:before{font-weight:bold;display:inline-block;-webkit-transform:scale(4,1);-ms-transform:scale(4,1);-o-transform:scale(4,1);transform:scale(4,1);}
    .side-product-items .btn-prev{top:0;}
    .side-product-items .btn-prev:before{content:'\f106';content:'∧';}
    .side-product-items .btn-next{bottom:0;}
    .side-product-items .btn-next:before{content:'\f107';content:'∨';}
    .side-product-items .btn-prev:not(.swiper-button-disabled):hover,.side-product-items .btn-next:not(.swiper-button-disabled):hover{color:#000;}
    .aside .side-bn{width:100%;margin:0 0 40px;}
    .aside .side-bn img{width:100% }
    .side-cate li .icon-cate.icon-cate-down:before {
        content: '';
        transform: rotate(0deg);
        font-size: 24px;
        background: url(../images/63.png);
        width: 20px;
        height: 18px;
    }
    .side-cate li .icon-cate.icon-cate-up:before {
        content: '';
        background: url(../images/63.png);
        width: 20px;
        height: 18px;
        transform: rotate(180deg);
        font-size: 24px;
    }

}
@media screen and (max-width: 950px){
    .cebianmain {
        position: relative;
        float: none !important;
        width: 100% !important;
    }
    .cebian {
        float: none !important;
        width: 100% !important;
        display: none;
    }
}
/*--------------------news-detail page------------------ */
.newsxq_fl {
    width: 100%;
    float: none;
    .artic_tit .p2 {
        color: #333;
    }
    .artic_tit .h3 {
        color: #666666;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .artic_tit .h3 .time {
        padding: 10px 17px;
        background-color: #22408F;
        color: #fff;
        font-weight: bold;
    }
    .h4 {
        font-size: 36px;
        font-weight: bold;
        margin: 20px 0;
    }
    .news_next.clearfix {
        display: flex;
    }
    .news_next .tit {
        font-size: 17px;
        font-weight: bold;
        width: auto;
        float: none;
        margin-right:20px;
    }
    .news_next .con {
        width: auto;
        float: none;
        padding-right: 0;
        position: relative;
        box-sizing: border-box;
    }
    .news_next .con .h3 {
        font-size: 16px;
        font-weight: bold;
    }
    .news_next:hover .tit{
        color: var(--active-color);
    }
    .news_next .con:hover a{
        color: var(--active-color);
    }
    .news_artic{
        padding: 0;
        img{
            margin:30px 0 30px 0;
        }
    }
    .video_box{
        margin:30px 0 30px 0;
    }
    .artic_content{
        font-size:18px;
        color:var(--dark-color);
    }
}
@media screen and (max-width: 950px){
    .newsxq_fl{
        .news_next.clearfix{
            flex-direction: column;
        }
    }
  }
@media screen and (max-width: 768px){
    .newsxq_fl{
        .artic_tit .h3{
            align-items: flex-start;
            flex-direction: column;
        }
        .artic_tit .h3 .time{
            margin-bottom: 10px;
        }
        .h4{
            font-size:24px;
        }
    }
}
/*--------------------video-list page------------------ */
.videoBox{
    margin-bottom: 60px;
    .videolist {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .videolist .item{
        width:49%;
        text-align: left;
        margin-bottom:30px;
    }
    .videolist .item .pictures{
        width:100%;
        position: relative;
        height:0;
        padding-top:73%;
    }
    .videolist .item .video-desc{
        margin-top: 20px;
        color:#666;
        font-size: 24px;
        padding:0 10px;
    }
    .videolist .item:hover .video-desc{
        color:#22408F;
    }
    .videolist .item .pictures .play{
        width:115px;
        height:115px;
        position: absolute;
        left:50%;
        top:50%;
        transform: translate(-50%, -50%);
    }
}
@media only screen and (max-width:1200px){
    .videoBox{
        .videolist .item .pictures .play{
            width: 80px;
            height: 80px;
        }
    }
}
@media only screen and (max-width:950px){
    .videoBox{
        .videolist .item .pictures .play{
            width: 63px;
            height: 63px;
        }
        .videolist .item{
            width:100%;
        }
        .videolist .item .pictures{
            height:auto;
            padding: 0;
        }
    }


}
/*-------------------products page------------------ */
.pro_main{
    padding-top:0 !important;
}
.web_main  .layout .cebianmain>p,.pro1-top .pro1-desc .catdesc>p{
    color: #666;
    font-size: 20px;
    line-height: 33px;
    margin: 30px 0;
}
.pro_main{
    .media{
        .flex-box.space{
            display: flex;
            margin-top: 50px;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-bottom: 46px;
            align-items: normal;
            .option{
                margin-bottom:0;
            }
        }
        .media-left{
            width:40%;
            background: #F7F7F7;
            padding: 50px;
        }
        .media-right{
            width:60%;
            padding-left:10px;
        }
        .flex-box:nth-child(2n) .media-right{
            padding-right:20px;
        }
        .p-title {
            width: auto;
            font-family: Arial, Arial;
            font-weight: normal;
            font-size: 39px;
            color: #333333;
            line-height: 56px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin:0;
        }
        .content {
            /*width: 470px;*/
            padding-bottom: 30px;
            font-family: ArialMT;
            font-size: 16px;
            color: #999999;
            line-height: 28px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
        .mores {
            width: 163px;
            height: 51px;
            background: #22408F;
            color: #fff;
            line-height: 51px;
            font-size: 16px;
            text-align: center;
            text-transform: uppercase;
            margin-bottom: 40px;
        }
        .mores a {
            color: #fff;
            line-height: 51px;
            font-size: 16px;
            text-align: center;
            text-transform: uppercase;
        }
        .mores a:hover {
            text-decoration: underline;
        }
        .picture{
            width: 64%;
            float: right;
        }
        .picture.special{
            width:41%;
        }
        .imgBox{
            position: relative;
            height: 0;
            padding-top: 102%;
            width: 100%;
        }
        .productBox{
            .option:nth-child(n+4){
                margin-bottom:0;
            }
        }
    }
    .media.contact{
        .media-left{
            padding:0;
        }
        .media-right{
            padding-left:70px;
        }
    }
    .media{
        .media-left.flex{
            width: 49.5%;
            display: flex;
            justify-content: space-between;
            background: #F7F7F7;
            padding:50px 45px 0px 50px;
            .lr{
                width:54%;
            }
            .rr{
                margin-top: 50px;
                width: 60%;
                .pics{
                    width:100%;
                    position: relative;
                    height:0;
                    padding-top: 53%;
                }
            }

        }
        .media-left.flex.special{
            width:40%;
            .rr{
                width: 60%;
                .pics{
                    padding-top:90%;
                }
            }
        }
        .media-right.flex{
            width: 49.5%;
            display: flex;
            justify-content: space-between;
            padding:50px 45px 30px 50px;
            background: #22408F;
            .p-title,.content{
                color:#fff;
            }
            .mores{
                background-color: #fff;;
            }
            .mores a{
                color:#333;
            }
            .lr{
                width:54%;
            }
            .rr{
                width: 42%;
                .pics{
                    width: 100%;
                    position: relative;
                    height: 0;
                    padding-top: 93%;
                }
            }

        }
    }
    .productBox.five{
        .option {
            width: 18%;
            margin: 0 1%;
        }
    }
}
@media screen and (max-width: 1100px){
    .pro_main{
         .productBox.five{
             .option {
                 width: 23%;
                 margin:0 1%;
             }
         }
    }
}
@media screen and (max-width: 950px){

    .pro_main{
        .productBox.five{
            .option {
                width:30%;
                margin:0 1.66%;
            }
        }
        .media{
            .media-left{
                width:100%;
                padding: 50px;
                .imgBox{
                    height:auto;
                    padding:0;
                }
            }
            .media-left.flex.special {
                width: 100%;
                flex-direction: column-reverse;
                padding:30px;
                .lr{
                   width:100%;
                    margin-top: 30px;
                }
                .rr{
                    width:100%;
                    margin-top:0;
                    .pics {
                        height:auto;
                        padding: 0;
                        img.img {
                             position: static;
                        }
                    }
                }
            }
            .media-right{
                width:100%;
            }
            .picture{
                width:100%;
            }
        }
        .media{
            .media-left.flex{
                width:100%;
                flex-direction: column-reverse;
                padding:30px;
                .lr{
                    width:100%;
                    margin-top: 30px;
                }
                .rr{
                    width:100%;
                    margin-top:0;
                    .pics {
                        height:auto;
                        padding: 0;
                        img.img {
                            position: static;
                        }
                    }
                }
            }
            .media-right.flex{
                width:100%;
                flex-direction: column-reverse;
                padding:30px;
                .lr{
                    width:100%;
                    margin-top: 30px;
                }
                .rr{
                    width:100%;
                    margin-top:0;
                    .pics {
                        height:auto;
                        padding: 0;
                        img.img {
                            position: static;
                        }
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 768px){
    .pro_main{
        .productBox.five{
            .option {
                width: 48%;
                margin:0 1%;
            }
        }
    }
}
@media screen and (max-width: 414px){
    .pro_main{
        .productBox.five{
            .option {
                width: 100%;
            }
        }
    }
}
/*-------------------product-detail page------------------ */
.product_main {
    .product-intro {
        overflow: hidden;
    }

    .product-view {
        float: left;
        width: 44.5%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .product-summary {
        width: 55.5%;
        padding-left: 4.7%;
        float: left;
    }

    .product-view .product-image {
        width: 72.7%;
        float: left;
        border: 1px solid #f4f4f4;
        background: #F8F8F8;
    }

    .product-view .image-additional-wrap {
        width: 22.8%;
        float: right;
        padding: 50px 0;
        position: relative;
    }

    .image-additional-wrap .image-additional {
        height: 460px;
        overflow: hidden;
    }

    .image-additional .swiper-pagination {
        display: none;
    }

    .image-additional-wrap .swiper-button-next, .image-additional-wrap .swiper-button-prev {
        opacity: 1;
        width: 27px;
        height: 15px;
    }

    .image-additional-wrap .swiper-button-prev {
        position: absolute;
        top: 0;
        margin-top: 0;
        left: 50%;
        transform: translateX(-50%);
        right: auto;
    }

    .image-additional-wrap .swiper-button-next {
        position: absolute;
        top: auto;
        margin-top: 0;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        right: auto;
    }

    .image-additional-wrap .swiper-button-prev::after {
        content: '';
        display: inline-block;
        width: 27px;
        height: 15px;
        background-image: url(../images/arrow-top.png);
        background-repeat: no-repeat;
    }

    .image-additional-wrap .swiper-button-next::after {
        content: '';
        display: inline-block;
        width: 27px;
        height: 20px;
        background-image: url(../images/arrow-bottom.png);
        background-repeat: no-repeat;
    }

    .image-additional-wrap .swiper-slide {
        border: 1px solid #f4f4f4;
    }

    .image-additional-wrap .swiper-slide.current {
        border: solid 1px #000;
    }

    .image-additional-wrap .swiper-slide img {
        width: 100%;
        height: auto;
    }

    .product-summary .page_title {
        font-size: 32px;
        color: #000;
        margin-bottom: 35px;
    }

    .product-summary .product-meta {
        font-size: 18px;
        color: #666666;
    }

    .product-btn-wrap .email, .product-btn-wrap .pdf {
        border: solid 2px #f4f4f4;
        display: inline-block;
        width: 235px;
        line-height: 60px;
        text-align: center;
        font-size: 18px;
        cursor: pointer;
    }

    .product-btn-wrap .pdf::before {
        content: '';
        display: inline-block;
        width: 22px;
        height: 17px;
        background-image: url(../images/down.png);
        margin-right: 9px;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .product-btn-wrap .email {
        margin-right: 15px;
        background-color: var(--active-color);
        color: #fff;
    }

    .product-btn-wrap .pdf {
        color: #000;
    }

    .product-btn-wrap {
        margin-top: 60px;
    }

    .share_btn {
        display: flex;
        align-items: center;
        margin-top: 40px;
    }

    .share_btn > span {
        font-size: 18px;
        color: #000;
        margin-right: 10px;
    }

    .product-btn-wrap .email:hover {
        background-color: #fff;
        color: #000;
    }

    .product-btn-wrap .pdf:hover {
        background-color: var(--active-color);
        color: #fff;
    }

    /* product detail */

    .product-detail .tab-panel-wrap {
        width: 100%;
    }

    .product-detail .tab-slide {
        width: auto;
    }

    .detail-tabs .title {
        position: relative;
        display: inline-block;
        vertical-align: top;
        padding: 1px 20px;
        cursor: pointer;
        margin: 0 5px 0 0;
        background-color: #fff;
        border: 1px solid #7C7C7C;
        font-weight: bold;
        font-size: 22px;
        color: #333333;
        line-height: 43px;
    }

    .detail-tabs .title.current {
        background: #22408F;
        border-color: #22408F;
        color: #fff;
    }
    .detail-tabs .title:hover{
        background: #22408F;
        border-color: #22408F;
        color: #fff;
    }

    .product-detail .share-this {
        position: absolute;
        right: 0;
        top: 2px;
    }

    .product-detail .tab-panel-content {
        padding: 10px 0;
        display: block;
        overflow: hidden
    }

    .product-detail .disabled {
        display: none;
    }

    .product-detail {
        position: relative;
        overflow: visible;
        margin: 30px 0 0;
    }

    .detail-tabs {
        position: relative;
        padding-right: 0;
        display: block;
        text-align: center;
    }

    .product-detail .share-this {
        position: absolute;
        right: 0;
        top: 2px;
    }

    .product-detail .tab-panel-content {
        padding: 10px 0;
        display: block;
        overflow: hidden
    }

    .product-detail .disabled {
        display: none;
    }

    .tab-panel-wrap {
        padding: 40px;
        background-color: #fff;
        margin-bottom: 60px;
    }

    .fl-rich-text {
        font-size: 18px;
        color: #666666;
        line-height: 2;
    }

    .fl-rich-text {
        .flex-detail-content {
            display: flex;
            justify-content: space-between;

            .lr {
                width: 48%;

                .d-title {
                    font-size: 30px;
                    color: #333;
                }
            }

            .rr {
                width: 48%;
            }
        }
    }

    .table_wrap {
        position: relative;
        display: block;
        margin-top: 20px
    }

    .table_wrap table {
        position: relative;
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        margin-bottom: 0 !important;
    }

    .table_wrap table th, .table_wrap table td {
        height: 30px;
        border: 1px solid #ccc;
        text-align: left;
        line-height: 1.5;
        font-size: 16px;
        color: #666;
        background: #fbfbfb;
        padding: 0 15px;
    }

    .table_wrap table th {
        font-size: 16px;
        background: #eee;
        font-weight: normal;
    }

    .table_wrap table td p, .table_wrap table th p, .table_wrap table td p, .table_wrap table th p {
        margin: 0;
        padding: 5px;
        color: #666;
        font-size: 16px;
        line-height: 1.3;
    }

    .table_wrap table td.amts {
        color: #cb2027;
    }

    .table_wrap table th#cartDelete {
        text-align: center;
    }

    .news_next {
        display: flex;

    }
    .news_next .con{
        width:auto;
        padding-right:0;
    }
    .news_next .tit {
        font-size: 17px;
        font-weight: bold;
        width: auto;
        float: none;
        margin-right: 20px;
    }

    .news_next .con .h3 {
        font-size: 16px;
        font-weight: bold;
    }

    .news_next:hover .tit {
        color: #22408F;
    }

    .news_next:hover .con {
        color: #22408F;
    }
}
@media screen and (max-width: 950px){
  .product_main{
      .product-view{width: 100%;float: none;}
      .product-summary{width: 100%;padding-left: 0;float: none;margin-top: 30px;}
      .product-view .product-image{display: none;}
      .product-view .image-additional-wrap{width: 100%;float: none;padding: 0;}
      .image-additional-wrap .image-additional{height: auto;}
      .image-additional-wrap .swiper-button-next{top: 50%;left: auto;right: 10px;transform: translateX(0) translateY(0px) rotate(-90deg);bottom: auto;}
      .image-additional-wrap .swiper-button-prev{top: 50%;left:10px;right: auto;transform: translateX(0) translateY(0px) rotate(269deg);bottom: auto;}

      .product-summary .page_title{font-size: 24px;margin-bottom: 16px;}
      .product-btn-wrap{margin-bottom: 30px;}
      .product-btn-wrap .email, .product-btn-wrap .pdf{line-height: 40px;font-size: 16px;width: auto;padding: 0 26px;}
      .share_btn{margin-top: 26px;}
      .tab-content-wrap{margin-top: 50px;}
      .tab-title-bar .tab-title{margin: 16px 0;font-size: 16px;}
       .product-detail .tab-panel-wrap {padding:30px 0;}
      .fl-rich-text{
          .flex-detail-content{
              display: flex;
              justify-content: space-between;
              flex-direction: column-reverse;
              .lr{
                  width:100%;
              }
              .rr{
                  width:100%;
                  margin-bottom:30px;
              }
          }
      }
      .news_next{
          flex-direction: column;
      }
  }
}