﻿.wrap {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}
.product {
    margin-top: 50px;
}
.cf:before {
    content: '';
    display: table;
}
.cf:after {
    content: '';
    display: table;
    clear: both;
}
.product{ margin-top: 50px;}
.product .right{ padding: 30px 0 0 30px;}
.product .right h2{ font-size:28px; color:#024199; font-weight:normal}
.product .right h3{}
.product .right .p1{ margin-top: 50px; display: inline-block; padding: 10px; border: 3px solid #024199;}
.product .right .p2{ margin: 30px 0;}
.product .left{ float: left; width: 55%;  background: #fff; padding: 0px 0;}
.product .left .sw1{ width: 100%; margin: 0 auto;}
.product .left .sw2{ position: relative; width: 35%; margin: -50px auto 0; z-index: 2;}
.product .left .sw2 .bon{ position: absolute; width: 20px; height: 20px; top: 50%; margin-top: -10px; z-index: 100; background-size: 100%; background-repeat: no-repeat; cursor: pointer !important; opacity: 1 !important;}
.product .left .sw2 .bon.next{ background-image: url(../images/l1.png); left: -30px;}
.product .left .sw2 .bon.prev{ background-image: url(../images/l2.png); right: -30px;}
.product .left .sw2 .bon.next.dis,
.product .left .sw2 .bon.prev.dis{ opacity: 0.3 !important; cursor:default;}
.product .left .sw2 .bg{ display: block; padding: 2px; opacity: 0.5;}
.product .left .sw2 .cur .bg{ padding: 0; border: 2px solid #2b43a7; opacity: 1;}

.product .right{ overflow: hidden;}

.prodcut-2{ margin: 50px 0;}

.prodcut-3 .tit{ border-bottom:1px solid #ddd; color: #6e7276; margin-bottom: 40px;}

.prodcut-3 .bon{ position: absolute; width: 62px; height: 62px; top: 50%;  z-index: 100; background-size: 100%; background-repeat: no-repeat; cursor: pointer; }
.prodcut-3 .bon.next1{ background-image: url(../images/l1.png); left: -72px;}
.prodcut-3 .bon.prev1{ background-image: url(../images/l2.png); right: -72px;}
.prodcut-3 .swiper3{ margin: 0 -5px;}
.prodcut-3 .bg{ display: block; margin: 0 5px; padding: 30px 5%; background: #f2f7fa; text-align: center;}

.pro-top{ padding-top: 50px;}
.pro-top .left{ width: 50%; float: left; padding: ;}
.pro-top .left .w{ padding: 20px 20px;}
.pro-top .right{ overflow: hidden;}
.pro-top .right ul{ padding-left: 10px;}
.pro-top .right li:first-child{ margin-bottom: 10px;}
.pro-top .right dl{ overflow: hidden; padding: 5% 0;}
.pro-top .right dt{ float: left; width: 40%; padding:0 2%;}
.pro-top img{ width: 100%; }
.pro-top .right dd{ overflow: hidden; padding-right: 20px; padding-top: 20px;}
.pro-top .right dd h2{ line-height: 1.1;}
.pro-top .right dd h3{ line-height: 1.1;}
.pro-top .right dd p{ border-top: 1px solid #2b42a7; margin-top: 20px; padding-top: 10px;}

.pro-list{ margin-top:50px;}
.pro-list ul{ margin: 0 -5px;}
.pro-list li{ width: 33.33%; float: left;}
.pro-list li img{ width: 100%;}
.pro-list li .box{ display: block; background: #f2f7fa; padding:0 0 20px 0; margin: 0 5px 10px; position: relative; overflow: hidden;}
.pro-list li .bg{ text-align: center; padding: 20px;}
.pro-list li .bg p{ color: #8f949a;}
.pro-list li .child{ position: absolute; padding:20% 10% 0; text-align: center; left: 0; top: 0; bottom: 0; right: 0; background: rgba(1,64,153,0.95); color: #fff; opacity: 0; transform: translateY(20%); transition: 0.4s all ease;}
.pro-list li .child .p2{ text-align: justify; margin: 20px 0;}
.pro-list li .child .p3{ margin-top: 20px;}
.pro-list li .child .p3 span{ display: inline-block; border: 2px solid #fff; color: #fff; border-radius: 100px; padding: 3px 10px;}
.pro-list li:hover .child{ opacity: 1; transform: translateY(0);}
.f-24 {
    font-size: 16px;
	line-height:32px;
	color:#024199
}
.edit_con_original {
    line-height: 1.8;
    padding: 0 0;
    color: #333;
    text-align: justify;
	font-size:18px;
}
.edit_con_original img {
    max-width: 100%;
    height: auto;
}
.layui-btn, .layui-edge, .layui-inline, img {
    vertical-align: middle;
}
.layui-inline, img {
    display: inline-block;
    vertical-align: middle;
}



.prodcut-3 .tit{ border-bottom:1px solid #ddd; color: #6e7276; margin-bottom: 40px;}

.prodcut-3 .bon{ position: absolute; width: 62px; height: 62px; top: 50%;  z-index: 100; background-size: 100%; background-repeat: no-repeat; cursor: pointer; }
.prodcut-3 .bon.next1{ background-image: url(../images/l1.png); left: -72px;}
.prodcut-3 .bon.prev1{ background-image: url(../images/l2.png); right: -72px;}
.prodcut-3 .swiper3{ margin: 0 -5px;}
.prodcut-3 .bg{ display: block; margin: 0 5px; padding: 30px 5%; background: #f2f7fa; text-align: center;}
@media only screen and (max-width: 1000px) {
.prodcut-3 .bon{ display: none;}
}
@media only screen and (max-width: 750px) {
.prodcut-3 .tit{ margin-bottom: 20px;}
}