.pro-head{ position:absolute; left:0px; top:0px; width:100%; text-align:center;}
.pro-head span{ display:inline-block; width:150px; height:46px; line-height:46px; border:solid 1px #808080; background-color:#ffffff; color:#218dbe; font-size:22px;}

.pro-1{ width:1200px; margin:0px auto auto auto; text-align: center; color: #222; border-bottom: 1px dashed #218dbe;}
.pro-1 h1{ font-size: 48px;  color: #222; line-height: 1; padding-bottom: 36px; background: url(../img/h_bb.png) center bottom no-repeat; }
.pro-1 p{ font-size: 20px; line-height: 64px;}

.pro-2{ width:1200px; margin:0px auto auto auto; text-align:center;}
.pro-2 h1{font-size:42px; color: #208CBF; line-height: 1; padding:46px 0 20px;}
.pro-2 span{font-size: 28px; color: #333; padding-top:15px; padding-bottom:24px; line-height: 1; display: inline-block; position: relative;}
.pro-2 span:before{ content: '';position:absolute;left:-105px;top:30px;width:85px;height:1px; background:#ddd;}
.pro-2 span:after{ content: ''; position:absolute; right:-105px; top:30px; width:85px; height:1px; background:#ddd;}

.pro-3{ position:relative; width:1200px; height:400px; margin:80px auto auto auto; background-color:#f4f4f4;}
.pro-3 .pro-3-wrap{ position:absolute; top:-28px; right:0px; width:1006px; height:340px; padding:30px 55px 0px; background-color:#e8e6e7;}
.pro-3 .pro-3-wrap .left-pro{ float:left; display:inline; width:505px;}
.pro-3 .pro-3-wrap .left-pro .pro-title{ font-size: 18px; font-weight: 600; color: #218dbe;}
.pro-3 .pro-3-wrap .left-pro .pro-con{line-height:26px; padding-top:10px; font-size:14px; color:#818181;}
.pro-3 .pro-3-wrap .right-pro{ position:relative; float:right; display:inline; width:454px; text-align:right;}
.pro-3 .pro-3-wrap .right-pro .bg{ position:absolute; left:0px; top:0px;}

.pro-4{ width:1040px; margin:60px auto auto auto; padding:0px 80px;}
.pro-4 .pro-l{ float:left; display:inline; width:476px;}
.pro-4 .pro-l .pro-top{ width:400px; height:332px; padding:40px 40px 0px; border:solid 1px #218dbe; border-radius:70px;}
.pro-4 .pro-l .pro-top .pro-title{ position:relative; padding-bottom:10px; font-size:16px; font-weight:600; color:#218dbe;}
.pro-4 .pro-l .pro-top .pro-title i{ position:absolute; left:0px; bottom:0px; width:130px; height:1px; background-color:#218dbe;}
.pro-4 .pro-l .pro-top .pro-con{ line-height:26px; padding-top:10px; font-size:14px; color:#818181;}
.pro-4 .pro-l .pro-img{ padding:10px 0px; text-align:center;}
.pro-4 .pro-r{ float:right; display:inline; width:400px; height:802px; padding:40px 40px 0px; border:solid 1px #218dbe; border-radius:70px;}
.pro-4 .pro-r .pro-title{ position:relative; padding-bottom:10px; font-size:16px; font-weight:600; color:#218dbe;}
.pro-4 .pro-r .pro-title i{ position:absolute; left:0px; bottom:0px; width:130px; height:1px; background-color:#218dbe;}
.pro-4 .pro-r .pro-con{ line-height:26px; padding-top:10px; font-size:14px; color:#818181;}


.pro-5{ position:relative; width:1040px; height:422px; margin:95px auto auto auto; padding:48px 80px 0px 80px; background-color:#f4f4f4;}
.pro-5 .pro-head{ top:-35px;}
.pro-5 .pro-head span{ background-color:transparent;}
.pro-5 .pro-l{ float:left; display:inline; width:400px; height:330px; padding:40px 36px 0px; border:solid 1px #218dbe; border-radius:70px;}
.pro-5 .pro-l .pro-title{ position:relative; padding-bottom:10px; font-size:16px; font-weight:600; color:#218dbe;}
.pro-5 .pro-l .pro-title i{ position:absolute; left:0px; bottom:0px; width:130px; height:1px; background-color:#218dbe;}
.pro-5 .pro-l .pro-con{ line-height:26px; padding-top:10px; font-size:14px; color:#818181;}
.pro-5 .pro-r{ float:right; display:inline; width:470px;}
.pro-5 .pro-r li{ float:left; display:inline; width:470px; margin-bottom:12px;}
.pro-5 .pro-r li .left-img{ float:left; display:inline; width:145px; height:115px;}
.pro-5 .pro-r li .left-img img{ width:145px; height:115px; border-radius:10px;}
.pro-5 .pro-r li .right-con{ position:relative; float:right; display:inline;  width:268px; padding-top:15px; padding-left:30px;}
.pro-5 .pro-r li .right-con i{ position:absolute; left:0px; top:16px; width:2px; height:85px; background-color:#218cc0;}
.pro-5 .pro-r li .right-con p{ line-height:30px; font-size:17px; color:#218cc0; }

.pro-6{ position:relative; width:1060px; height:418px; margin:70px auto auto auto; padding:52px 65px 0px 75px; background-color:#f4f4f4;}
.pro-6:after{content: ''; position:absolute; left:565px; bottom:-50px; width:70px; height:70px; background:#218dbe; border-radius:50%;}
.pro-6 .pro-head{ top:-35px;}
.pro-6 .pro-head span{ background-color:transparent;}
.pro-6 .pro-left{ float:left; display:inline; width:526px; height:342px; padding-top:20px;}
.pro-6 .pro-right{ float:right; display:inline; width:406px; height:330px; padding:40px 36px 0px; border:solid 1px #218dbe; border-radius:70px;}
.pro-6 .pro-right .pro-title{ position:relative; padding-bottom:10px; font-size:16px; font-weight:600; color:#218dbe;}
.pro-6 .pro-right .pro-title i{ position:absolute; left:0px; bottom:0px; width:130px; height:1px; background-color:#218dbe;}
.pro-6 .pro-right .pro-con{ line-height:26px; padding-top:10px; font-size:14px; color:#818181;}

.pro-7{ margin:85px auto auto auto;}
.pro-7 ul{ width:698px; margin:0px auto auto auto;}
.pro-7 li{ float:left; display:inline; width:313px; margin:0px 26px 40px 10px;}
.pro-7 li .pro-img{ float:left; display:inline; width:145px; height:145px;}
.pro-7 li .pro-img img{ width:145px; height:145px; border-radius:10px;}
.pro-7 li .pro-right{ float:right; display:inline; width:146px; padding-top:10px;}
.pro-7 li .pro-right .pro-title{ padding:8px 2px; border-top:solid 2px #8ec6df; border-bottom:solid 2px #8ec6df; font-size:20px; font-weight:600; color:#218dbe;}
.pro-7 li .pro-right .pro-con{ padding-top:8px; line-height:24px; font-size:14px; color:#808080;}

.pro-8{ position:relative; width:960px; margin:25px auto auto auto; padding:30px 45px; border:solid 1px #218dbe; border-radius:70px;}
.pro-8 .pro-title{ position:relative; padding-bottom:10px; font-size:16px; font-weight:600; color:#218dbe;}
.pro-8 .pro-title i{ position:absolute; left:0px; bottom:0px; width:130px; height:1px; background-color:#218dbe;}
.pro-8 .pro-con{ line-height:26px; padding-top:10px; font-size:14px; color:#818181;}

.pro-9{ position:relative; width:960px; margin:45px auto auto auto; padding:30px 45px; border:solid 1px #218dbe; border-radius:70px;}
.pro-9 .pro-title{ position:relative; padding-bottom:10px; font-size:16px; font-weight:600; color:#218dbe;}
.pro-9 .pro-title i{ position:absolute; left:0px; bottom:0px; width:130px; height:1px; background-color:#218dbe;}
.pro-9 .pro-con{ line-height:26px; padding-top:10px; font-size:14px; color:#818181;}
.pro-9 .pro-logo{ position:absolute; right:80px; bottom:30px;}

.pro-10{ position:relative; margin:66px auto auto auto; padding-top:90px; }
.pro-10 ul{ width:820px; margin:0px auto auto auto; }
.pro-10 ul li{ float:left; display:inline; width:374px; height:526px; margin:0px 18px 36px 0px;}
.pro-10 .line{ width:1200px; height:1px; margin:0px auto auto auto; padding-top:70px; border-bottom:dashed 1px #218dbe; }

@media screen and (max-width:1024px) 
{
.pro-head span{ display:inline-block; width:40%; height:42px; line-height:42px; font-size:1.1rem;}

.pro-1{ width:90%;}
.pro-1 h1{ font-size:2rem;}
.pro-1 p{ font-size:1rem;}

.pro-2{ width:90%;}
.pro-2 h1{font-size:1.8rem; padding:8% 0;}
.pro-2 span{ font-size:1.1rem; padding:2%;}
.pro-2 span:before{ display:none;}
.pro-2 span:after{  display:none;}

.pro-3{ width:100%; height:auto; margin:20px auto auto auto;}
.pro-3 .pro-3-wrap{ position:relative; top:0px; right:0px; width:90%; height:auto; padding:6% 5%;}
.pro-3 .pro-3-wrap .left-pro{ float:none; display:block; width:100%; padding-bottom:5%; }
.pro-3 .pro-3-wrap .left-pro .pro-title{ font-size:1.1rem; font-weight:600;}
.pro-3 .pro-3-wrap .left-pro .pro-con{line-height:26px; padding-top:5%; font-size:.8rem;}
.pro-3 .pro-3-wrap .right-pro{ position:relative; float:none; display:block; width:100%;}
.pro-3 .pro-3-wrap .right-pro img{ width:80%;}
.pro-3 .pro-3-wrap .right-pro .bg img{ width:75%;}

.pro-4{ width:90%; margin:8% auto auto auto; padding:0px;}
.pro-4 .pro-l{ float:none; display:inline; width:100%;}
.pro-4 .pro-l .pro-top{ width:92%; height:auto; padding:5% 4%;  border-radius:20px;}
.pro-4 .pro-l .pro-top .pro-title{ position:relative; padding-bottom:2%; font-size:1.1rem;}
.pro-4 .pro-l .pro-top .pro-title i{ width:35%;}
.pro-4 .pro-l .pro-top .pro-con{ padding-top:3%; font-size:.8rem;}
.pro-4 .pro-l .pro-img{ padding:5% 0; text-align:center;}
.pro-4 .pro-l .pro-img img{ width:100%;}

.pro-4 .pro-r{ float:none; display:block; width:92%; height:auto; padding:5% 4%;  border-radius:20px;}
.pro-4 .pro-r .pro-title{ padding-bottom:2%; font-size:1.1rem;}
.pro-4 .pro-r .pro-title i{ width:35%;}
.pro-4 .pro-r .pro-con{ padding-top:3%; font-size:.8rem;}

.pro-5{ position:relative; width:92%; height:auto; margin:18% auto auto auto; padding:5% 4%; background-color:#f4f4f4;}
.pro-5 .pro-head{ top:-32px;}
.pro-5 .pro-head span{ background-color:transparent;}
.pro-5 .pro-l{ float:none; display:block; width:92%; height:auto; padding:5% 4%;  border-radius:20px;}
.pro-5 .pro-l .pro-title{ padding-bottom:2%; font-size:1.1rem;}
.pro-5 .pro-l .pro-title i{ width:35%;}
.pro-5 .pro-l .pro-con{ padding-top:3%; font-size:.8rem;}
.pro-5 .pro-r{ float:none; display:block; width:100%; padding:5% 0 0;}
.pro-5 .pro-r li{ float:none; display:block; width:100%; margin-bottom:5%;}
.pro-5 .pro-r li .left-img{ float:none; display:inline-block; width:30%; height:auto; vertical-align:middle;}
.pro-5 .pro-r li .left-img img{ width:100%; height:auto; border-radius:8px;}
.pro-5 .pro-r li .right-con{ position:relative; float:none; display:inline-block;  width:56%; padding-top:0px; padding-left:12%;vertical-align:middle;}
.pro-5 .pro-r li .right-con i{ position:absolute; left:10%; top:0px; width:2px; height:85px;}
.pro-5 .pro-r li .right-con p{ line-height:30px; font-size:1.1rem; }

.pro-6{ position:relative; width:92%; height:auto; margin:18% auto auto auto; padding:5% 4%; background-color:#f4f4f4;}
.pro-6:after{content: ''; position:absolute; left:48%; bottom:-20px; width:30px; height:30px; background:#218dbe; border-radius:50%;}
.pro-6 .pro-head{ top:-32px;}
.pro-6 .pro-head span{ background-color:transparent;}
.pro-6 .pro-left{ float:none; display:block; width:100%; height:auto; padding-top:5%;}
.pro-6 .pro-left img{ width:100%;}
.pro-6 .pro-right{ float:none; display:block; width:92%; height:auto; margin-top:5%; padding:5% 4%;  border-radius:20px;}
.pro-6 .pro-right .pro-title{ padding-bottom:2%; font-size:1.1rem;}
.pro-6 .pro-right .pro-title i{  width:35%;}
.pro-6 .pro-right .pro-con{ padding-top:3%; font-size:.8rem;}

.pro-7{ width:90%; margin:8% auto auto auto;}
.pro-7 ul{ width:100%;}
.pro-7 li{ float:left; display:inline; width:100%; margin:2% 0;}
.pro-7 li .pro-img{ float:left; display:inline; width:40%; height:auto;}
.pro-7 li .pro-img img{ width:100%; height:auto; border-radius:10px;}
.pro-7 li .pro-right{ float:right; display:inline; width:52%; padding-top:10px;}
.pro-7 li .pro-right .pro-title{ padding:8px 2px; border-top:solid 2px #8ec6df; border-bottom:solid 2px #8ec6df; font-size:20px; font-weight:600; color:#218dbe;}
.pro-7 li .pro-right .pro-con{ padding-top:8px; line-height:24px; font-size:13px; color:#808080;}

.pro-8{ float:none; display:block; width:82%; height:auto; margin:5% auto auto auto; padding:5% 4%;  border-radius:20px;}
.pro-8 .pro-title{ padding-bottom:2%; font-size:1.1rem;}
.pro-8 .pro-title i{ width:35%;}
.pro-8 .pro-con{ padding-top:3%; font-size:.8rem;}

.pro-9{ float:none; display:block; width:82%; height:auto; margin:5% auto auto auto; padding:5% 4%;  border-radius:20px;}
.pro-9 .pro-title{ padding-bottom:2%; font-size:1.1rem;}
.pro-9 .pro-title i{ width:35%;}
.pro-9 .pro-con{ padding-top:3%; font-size:.8rem;}
.pro-9 .pro-logo{ position:absolute; right:5%; bottom:5%; width:30%; text-align:right;}
.pro-9 .pro-logo img{ width:80%;}

.pro-10{ position:relative; width:90%; margin:8% auto auto auto; padding-top:12%; }
.pro-10 ul{ width:100%; margin:0px auto auto auto; }
.pro-10 ul li{ float:left; display:inline; width:100%; height:auto; margin:5% 0; text-align:center;}
.pro-10 ul li img{ width:100%;}
.pro-10 .line{ width:100%; height:1px; margin:0px auto auto auto; padding-top:5%; }
}