.swiper-container {width: 100%;height: 100%;}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -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;
}

.modal{ width: 100%;  margin: 0 auto; }
.modal h1{ padding: 60px 0; }
.modal .container{ width: 1200px; margin: 0 auto; padding-bottom: 90px; }
/* 方案一 */
.solution1 .content>div{ display: inline-block; vertical-align: middle; }
.solution1 .content .left{
    width: 578px; height: 442px; border: 1px dashed #c9c9c9; 
    background-color: #f6f6f6; text-align: center;
}
.solution1 .content .left img{ margin-top: 44px; }
.solution1 .content .left div{ 
    width: 480px; line-height: 40px;background-color: #fff;
    text-align: center; margin:40px auto; white-space: pre;
}
.solution1 .content .middle{ width: 130px; height: 104px; position: relative; }
.solution1 .content .middle .text{ text-align: center; font-size: 18px; color:#44444c;  }
.solution1 .content .middle .line{ 
    width: 96px; height: 8px; 
    position: absolute; top: 40px; left: 18px;
    border-top: 1px solid #44444c; border-bottom: 1px solid #44444c;
}
.solution1 .content .right{ width: 480px; height: 450px; text-align: center; }
.solution1 .content .right div{  color: #0d7074; text-align: center; white-space: pre; }


/* 方案二 */
.solution2{ background-color: #0d7074; width: 100%; }
.solution2 h1{ color: #ffffff; }
.solution2 .content .middle .text{ color: #ffffff;  }
.solution2 .content .middle .line{  border-color: #ffffff; }
.solution2 .content .right div{  color: #ffffff; }


/* 方案三 */
.solution3 .content{ word-spacing: -8px; }
.solution3 .content>div{ display: inline-block; vertical-align: middle;  }
.solution3 .content .left{ width: 378px; height: 418px; border: 1px dashed #c9c9c9; }
.solution3 .content .left .head{ height: 180px; padding: 22px 26px; }
.solution3 .content .left .head .photo{ 
    width: 80px; height: 74px; background-color: #eeeeee; 
    text-align: center; display: inline-block; vertical-align: bottom; 
}
.solution3 .content .left .head .photo img{ padding-top: 12px; }
.solution3 .content .left .head .name{ font-size: 18px; color: #0d7074; display: inline-block; padding: 0 0 10px 8px; }
.solution3 .content .left .head ul{ padding-top: 24px;}
.solution3 .content .left .head ul li{ 
    width: 92px; line-height: 36px;border-radius: 18px; background-color: #44444c; text-align: center;
    color: #ffffff; display: inline-block; margin: 0 25px 10px 0; 
}
.solution3 .content .left .head ul li:nth-of-type(3n){ margin-right: 0; }
.solution3 .content .left .foot{ height: 193px; background-color: #eeeeee; border-top: 1px dashed #c9c9c9; }
.solution3 .content .left .foot .title{ text-align: center; line-height: 50px; }
.solution3 .content .left .foot ul{ margin: 0 auto; width: 346px; }
.solution3 .content .left .foot ul li{ display: inline-block; margin: 0 15px; width: 143px; }
.solution3 .content .left .foot ul li .txt{ text-align: center; color: #9fa0a0; padding-top: 5px; }
.solution3 .content .middle{ width: 84px; }
.solution3 .content .middle div{ 
    width: 48px; height: 8px; border-top: 1px solid #44444c; border-bottom: 1px solid #44444c; margin: 0 auto;
}
.solution3 .content .right .head{ 
    width: 654px; height: 302px; padding: 30px 40px; border: 1px dashed #c9c9c9;
    background: url("../image/solution/solution3_4.png") no-repeat 218px; position: relative;
} 
.solution3 .content .right .head>div{ position: absolute; }
.solution3 .content .right .head .title{ color: #8ac230; position: absolute; width: 110px; }
.solution3 .content .right .head .title::before{
    content: "";width: 4px; height: 4px; border-radius: 50%; background-color: #8ac230;
    position: absolute; top:8px; left: -10px;
}
.solution3 .content .right .head .name1{ left: 238px; }
.solution3 .content .right .head .name2{ left: 132px; top: 164px; }
.solution3 .content .right .head .name3{ left: 238px; top: 302px; }
.solution3 .content .right .head .name4{ left: 462px; top: 302px; }
.solution3 .content .right .head .name5{ left: 532px; top: 164px; }
.solution3 .content .right .head .name6{ left: 462px; } 
.solution3 .content .right .head .tip1{ right: 44px; bottom: 72px; }
.solution3 .content .right .head .tip2{ right: 44px; bottom: 42px; }
.solution3 .content .right .foot{ line-height: 34px; text-align:center; background-color: #eeeeee; margin-top: 22px; } 


/*方案四*/
.solution4{ background-color: #eeeeee; width: 100%; }
.solution4 .head{ height: 388px; word-spacing: -6px; }
.solution4 .head ul li{width: 381px; display: inline-block; margin-right: 28px; position: relative; }
.solution4 .head ul li:last-child{ margin-right: 0; }
.solution4 .head ul li .photo{ width: 381px; height: 191px; z-index: 100; }
/*箭头*/
.solution4 .head ul .arrowbox{
    display: inline-block; position: relative;
}
.solution4 .head ul .arrowbox .arrow{
    position: absolute; width: 126px; height: 90px; border-radius: 0 0 50% 50%; border-bottom: 1px dashed #0d7074;
}
.solution4 .head ul .arrowbox .arrow::before{
    content: ''; width: 18px; height: 16px; position: absolute; right: 5px; bottom: 12px;
    background: url("../image/solution/solution_arrow.png") no-repeat;
}
.solution4 .head ul .arrowbox .arrow::after{
    content: ''; width: 130px; height: 20px; background-color: #eeeeee; position: absolute; bottom: 28px;
}
.solution4 .head ul .arrowbox1 .arrow{ top: -200px; left: 330px; }
.solution4 .head ul .arrowbox2 .arrow{ top: -200px; left: 740px; }

.solution4 .head ul li .index{ 
    width: 55px; line-height: 55px; border-radius: 50%; border: 1px dashed #433e49;
    margin: 40px auto 10px; text-align: center; font-size: 24px;
}
.solution4 .head ul li .txt{ width: 340px; margin: 0 auto; }
.solution4 .foot1{ height: 320px; background-color: #fff; }
.solution4 .foot1 .title{ font-size: 18px; color: #137073; padding: 28px 0; text-align: center; }
.solution4 .foot1 .procedure{ height: 240px; }
.solution4 .foot1 .procedure .lst{ 
    width: 215px; display: inline-block; text-align: center; height: 40px;
    margin-right: 72.5px; position: relative; vertical-align: top; 
}
.solution4 .foot1 .procedure .lst::before{
    content: ''; width: 13px; height: 13px;border-radius: 50%; background-color: #0d7074; position: absolute;
}
.solution4 .foot1 .procedure .lst::after{
    content: ''; height: 28px; border-left: 1px solid #0d7074; position: absolute; 
}
.solution4 .foot1 .procedure .list1{ height: 85px; padding: 0 0 0 124px; }
.solution4 .foot1 .procedure .list1 .lst:first-child+.lst{ padding-top: 20px; }
.solution4 .foot1 .procedure .list1 .lst::before{ top: 46px; left: 105px; }
.solution4 .foot1 .procedure .list1 .lst::after{ top: 58px; left: 111px; }
.solution4 .foot1 .procedure .list2{ height: 85px; padding: 46px 0 0 270px; }
.solution4 .foot1 .procedure .list2 .lst::before{ bottom: 46px; left: 105px; }
.solution4 .foot1 .procedure .list2 .lst::after{ bottom: 58px; left: 111px; }
.solution4 .foot1 .procedure .line{ width: 1040px; height: 38px; margin: 0 auto; }
.solution4 .foot2{display: none;}


footer{ margin-top: 60px; }



/*945分辨率以上*/
@media (min-width: 945px){

}

/****** 1600分辨率以下 ******/
@media screen and (min-width: 1500px) {

}

/*945分辨率以下*/
@media (max-width: 945px){
    .modal .container{ width: 640px; }
    .solution1 .content{ width: 580px; margin: 0 auto;}
    .solution1 .content .middle{ width: 580px; height: 100px; }
    .solution1 .content .middle .text{ font-size: 24px; position: absolute; right: 160px; top: 32px; }
    .solution1 .content .middle .line{ 
        width: 8px; height:60px; top: 20px; left: 285px;
        border:0; border-left: 1px solid #44444c; border-right: 1px solid #44444c;
    }
    .solution1 .content .right{ width: 580px; height: 450px; text-align: center; }


    .solution2 .content .middle .line{ border-color: #ffffff; }
    

    .solution3 .content{ width: 580px; margin: 0 auto;}
    .solution3 .content .left{ width: 580px; height: 644px; border: 0; box-shadow: 1px 1px 18px rgba(0,0,0,.2) }
    .solution3 .content .left .head{ height: 282px; padding: 21px 24px; }
    .solution3 .content .left .head .photo{ width: 136px; height: 126px; }
    .solution3 .content .left .head .photo img{ width: 110px; height: 82px; padding-top: 23px; }
    .solution3 .content .left .head .name{ font-size: 28px; padding: 0 0 10px 20px; }
    .solution3 .content .left .head ul li{ 
        width: 160px; line-height: 46px;border-radius: 23px; margin: 0 24px 15px 0; 
    }
    .solution3 .content .left .foot{ height: 320px; border-top: 0; }
    .solution3 .content .left .foot .title{ line-height: 84px; }
    .solution3 .content .left .foot ul{ width: 548px; }
    .solution3 .content .left .foot ul li{ display: inline-block; margin: 0 20px; width: 234px; }
    .solution3 .content .left .foot ul li img{ width: 234px; height: 157px; }
    .solution3 .content .left .foot ul li  .txt{ padding-top: 16px; }
    .solution3 .content .middle{ width: 580px; height: 96px;}
    .solution3 .content .middle div{ 
        width: 10px; height: 50px; margin-top: 23px; border: 0;
        border-right: 1px solid #44444c; border-left: 1px solid #44444c;
    }
    .solution3 .content .right .head{ 
        width: 490px; height: 490px; padding: 25px 44px;
        background: url("../image/solution/solution3_5.png") no-repeat center 128px;
    } 
    .solution3 .content .right .head .title{ width: 100%; position: initial; text-align: center; }
    .solution3 .content .right .head .title::before{display: none;}
    .solution3 .content .right .head .name1{ left: 124px; top: 102px; }
    .solution3 .content .right .head .name2{ left: 48px; top: 232px; width: 80px; text-indent: 24px; }
    .solution3 .content .right .head .name3{ left: 124px; top: 388px; }
    .solution3 .content .right .head .name4{ left: 380px; top: 388px; }
    .solution3 .content .right .head .name5{ left: 452px; top: 240px; }
    .solution3 .content .right .head .name6{ left: 380px; top: 102px; } 
    .solution3 .content .right .head .tip1{ right: 215px; bottom: 72px; }
    .solution3 .content .right .head .tip2{ right: 215px; bottom: 42px; }
    .solution3 .content .right .head .imgtip{ width: 17px; height: 17px; border-radius: 50%; }
    .solution3 .content .right .head .imgtip::before{ 
        content: ""; width: 40px; height: 3px; position: absolute; top:7px; left: -11px;
     }
    .solution3 .content .right .head .imgtip1{ background-color: #0d7074; bottom: 78px; left: 216px; }
    .solution3 .content .right .head .imgtip1::before{ background-color: #0d7074; }
    .solution3 .content .right .head .imgtip2{ background-color: #e54e31; bottom: 48px; left: 216px;  }
    .solution3 .content .right .head .imgtip2::before{ background-color: #e54e31; }
    .solution3 .content .right .foot{ line-height: 46px; margin-top: 15px; }


    .solution4 .content{ width: 580px; margin: 0 auto;}
    .solution4 .head{ height: 520px; }
    .solution4 .head ul .arrowbox{ display: none; }
    .solution4 .head ul li{ margin: 0; }
    .solution4 .head ul li .photo{ width: 580px; height: 292px;} 
    .solution4 .head ul li .photo img{ width: 100%; height: 100%; }
    .solution4 .head ul li .index{  width: 38px; line-height: 38px; margin-top: 20px; }
    .solution4 .head ul li .txt{ width: 580px; font-size: 24px; text-align: left; }
    .solution4 .swiper-slide{ background-color: #eeeeee; }
    .solution4 .content{ position: relative; }
    .solution4 .swiper-pagination{ left: 50%; transform: translateX(-50%); top: 460px;}
	.solution4 .swiper-pagination-bullet {
	    width: 18px; height: 18px; background: #434d56; opacity: 1; vertical-align: middle;
	}
	.solution4 .swiper-pagination-bullet:not(:last-child) { margin-right: 18px; }
	.solution4 .swiper-pagination-bullet-active {
	    width: 22px; height: 22px; background: #0d7074;
	}
    .solution4 .foot1{ display: none; }
    .solution4 .foot2{ display: block; height: 756px; background-color: #fff; }
    .solution4 .foot2 .title{ font-size: 26px; color: #137073; padding: 32px 0; text-align: center; }
    .solution4 .foot2 .procedure ul{ padding: 0 8px; }
    .solution4 .foot2 .procedure ul li{ 
        display: inline-block;word-spacing: -6px; width: 144px; padding: 0 18px; vertical-align: top;
    }
    .solution4 .foot2 .procedure ul li .dot{
        width: 106px; line-height: 106px;border-radius: 50%; font-size: 30px; color: #ffffff; text-align:center;
        background-color: #0d7074; margin: 0 auto;
    }
    .solution4 .foot2 .procedure ul li:first-child+li .dot{ background-color: #8ac230; }
    .solution4 .foot2 .procedure ul li:first-child+li+li+li+li .dot{ background-color: #8ac230; }
    .solution4 .foot2 .procedure ul li .lst{ padding: 15px 0 40px; }
   

}