html, body {  margin: 0;  padding: 0; height: 100%; }
body{  color: #6F85AC;  font-family: "Microsoft YaHei","PingFangSC",sans-serif, Tahoma, Arial, Helvetica;  font-size: 14px;  text-align: left;  }
h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, form, img, p, hr, samp, em {  margin: 0;  padding: 0;  border: none;  list-style-type: none; }
a {  color: #0088cc;  text-decoration: none; }
a:hover {  text-decoration: none;  }
a:focus, input:focus, button:focus, select:focus, textarea:focus {  outline: none; }
.clearfix:before, .clearfix:after {  content: " "; /* 1 */  display: table; /* 2 */  }
.clearfix:after {  clear: both;  }
.clearfix {  *zoom: 1; }

.fl{ float: left;}
.fr{ float: right;}
.tl{ text-align: left;}
.tr{ text-align: right;}
.tc{ text-align: center;}
.inline_block{ display: inline-block;}
input[type=checkbox] {
    cursor: pointer;
    position: relative;
    margin-right: 6px;
}

input[type=checkbox]::after {
    position: absolute;
    top: 0;
    background-color: #F5F5F5;
    color: #fff;
    width: 14px;
    height: 14px;
    display: inline-block;
    visibility: visible;
    padding-left: 0px;
    text-align: center;
    content: ' ';
    border-radius: 2px;
    box-sizing: border-box;
    border: 1px solid #8F99A3;
}

input[type=checkbox]:checked::after {
    content: "";
    background-color: #4477FF;
    border-color: #4477FF;
    background-color: #4477FF;
}

input[type=checkbox]:checked::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 5px;
    width: 3px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    z-index: 1;
}
input[type="radio"] {position: absolute;display: none; }
input[type="radio"] + label { position: relative; padding-left: 22px;cursor: pointer;vertical-align: middle; color:#5C6269;margin-right: 25px; }
input[type="radio"] + label:hover:before { animation-duration: 0.4s;animation-fill-mode: both;animation-name: hover-color; }
input[type="radio"] + label:before {position: absolute; top: 1px; left: 0;  display: inline-block;width: 14px; height: 14px; content: '';border: 1px solid #8F99A3;background: #F5F5F5; }
input[type="radio"] + label:after {position: absolute;display: none;content: ''; }
input[type="radio"]:checked + label:before { animation-name: none; }
input[type="radio"]:checked + label:after { display: block; }
input[type="radio"] + label:before {border-radius: 50%; }
input[type="radio"] + label:after {top: 5px;left: 4px;width: 8px;height: 8px; border-radius: 50%; background: #4477FF; }

body{ background: #F4F8FC;}
.plan_head{ background: url("../image/banners.png") no-repeat center 0; background-size: cover; height: 380px;  }
.contain{ width: 1200px; margin: 0 auto;}
.logos{ padding-top:35px;}
.banner_tit{font-size: 38px;color: #333333; margin: 60px 0 15px 0;}
.banner_tit span{ color:#327DF1; }
.banner_subtit{ font-size: 16px; color: #333; max-width: 590px;line-height: 1.6;}
.choose_h{ margin: 65px 0 35px 0; font-size: 28px; color: #333333;}
.scene_lay{ float:left; width: 18%; margin: 0 1% 20px 1%; position: relative; cursor: pointer;}
.scene_lay a{ display: block;background: #fff; padding:45px 0 47px 0;box-shadow: 0px 6px 20px 0px #C1DAEA;  border-radius: 5px;}
.scene_lay a:hover{ background: #3862EC;  transition: padding .3s; padding: 25px 0 82px 0; }
.scene_img{ width:68px; height: 68px; border-radius: 50%;background: rgba(214, 229, 252, 1); margin: 0 auto 0 auto; }
.scene_img img{ vertical-align: middle; text-align: center; margin-top: 20px;}
.scene_name{ margin-top:35px; color: #333; font-size: 18px;}
.scene_lay a:hover .scene_name{ color: #fff;  transition: margin-top .3s;  margin-top: 20px;}
.go_page{ margin: 25px auto 0 auto; display: block; position: absolute; width: 100%;}
.scene_lay a:hover .go_page{  display: block;}
.scene_lay a:hover .scene_img{background: #fff; }

.scene_require_head{color: #5C6269; font-size: 18px; margin: 35px 0 25px 15px; }
.scene_divs{ background: #fff; margin-bottom: 20px; padding-bottom: 25px;}
.scene_line{ padding-top: 25px ;}
.scene_line >label{ width: 180px; text-align: right; color: #5C6269; font-size: 14px; display:inline-block; margin-right: 55px;}
.scene_line label em{ font-style: normal; color: #C84948; margin-right: 4px;}
.scene_line input[type="text"],.scene_line input[type="number"]{ border: 1px solid #DDDFE0;background: #FBFBFB; border-radius: 2px;height: 32px; line-height: 32px; width: 280px; margin-right: 10px;padding: 0 10px;}
.scene_type {padding: 30px 0 10px 25px;color: #5C6269; }
.error_tip{ font-size: 13px; color: #C84948; margin-left: 10px; display: none;}
.error_line .error_tip{ display: inline-block;}
.error_line input{ border: 1px solid #C84948;}
.checkbox_group label{ color: #5C6269; margin-right: 20px;}
.scene_btn{ padding: 30px 70px;}
.scene_btn button{  border: 1px solid #3862EC;background: #3862EC; width: 120px; height: 36px; border-radius: 18px; color: #fff; cursor: pointer;}
.scene_btn a{margin-left: 30px; text-align:center; vertical-align: middle; display: inline-block; border: 1px solid #DDDFE0; width: 118px; line-height: 36px; height: 36px; border-radius: 18px; color: #5D636A; background: #FBFBFB}

.project_report{background-size: cover; height: 100%; }
.scene1{ background: url("../image/banner/scene1.png") no-repeat center 0 #F4F8FC; }
.scene2{background: url("../image/banner/scene2.png") no-repeat center 0 #F4F8FC; }
.scene3{ background: url("../image/banner/scene3.png") no-repeat center 0 #F4F8FC;}
.scene4{ background: url("../image/banner/scene4.png") no-repeat center 0 #F4F8FC; }
.scene5{ background: url("../image/banner/scene5.png") no-repeat center 0 #F4F8FC; }
.scene6{ background: url("../image/banner/scene6.png") no-repeat center 0 #F4F8FC;}
.scene7{ background: url("../image/banner/scene7.png") no-repeat center 0 #F4F8FC; }
.scene8{ background: url("../image/banner/scene8.png") no-repeat center 0 #F4F8FC; }
.scene9{ background: url("../image/banner/scene9.png") no-repeat center 0 #F4F8FC; }
.scene10{  background: url("../image/banner/scene10.png") no-repeat center 0 #F4F8FC; }

.project_report_name{ padding: 150px 0 40px 0; font-size: 36px; color: #FFFFFF;}
.project_tab_li{ display: inline-block;width: 290px;position: relative;}
.project_tab_li img{ display: inline-block; vertical-align: middle; width: 58px; height: 58px; cursor: pointer;}
.project_tab_li span{ font-size: 18px; color: #FFFFFF; margin-left: 5px; display: inline-block; vertical-align: middle;cursor: pointer;}
.project_lay_li{ display: none; margin: 0 20px;}
.project_lay_active{ display: block; }
.project_tab_active img{  transform:scale(1.2,1.2); }
.project_tab_active span{ font-size: 22px; color: #F7E5C8; }
.project_lay{ background:#fff; margin-top: 20px; padding-bottom: 5px;}
.project_lay_name{ text-align: center; color: #5D636A; font-size: 20px; padding: 30px 0 20px 0;}
.project_arrow{display: none; width:0;height:0;border-width:0 15px 14px;border-color: transparent transparent #FBFBFB;border-style: solid; position: absolute; bottom: -22px; left:115px;}
.project_tab_active .project_arrow{ display: block;}
.tab_list_div{ display:none; }
.tab_list_active{ display: block;}
.tab_list_li{ color: #5C6269; font-size: 14px; padding: 5px; display: inline-block; cursor: pointer; margin-right: 30px;}
.tab_li_active{ border-bottom: 2px solid #4477FF;}
.product_table{ margin: 20px 0 10px 0; font-size: 14px; color: #5C6269; border-left: 1px solid #EEEEEE; }
.product_table th{ font-weight: normal; background: #E0E8F1; padding: 10px;}
.product_table td{ padding:15px 10px; border-right: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE; }
.product_num{ border: 1px solid #DDDFE0; border-radius: 6px; padding: 9px; width: 58px; text-align: center; color: #3862EC;}
.del_product{ background: url("../image/dels.png") no-repeat; width: 14px; height: 15px; display: inline-block;}
.add_equip,.add_equip:hover{ font-size: 12px; color: #3862EC; text-decoration: underline; margin-top: 3px; display: inline-block;}
.program_feature,.program_topology,.contact_info{ margin: 20px auto; background: #fff;}
.name_feature{ font-size: 20px; color: #5D636A;  text-align: center; padding-top: 30px;}
.name_feature img{ display: inline-block; margin-left: 7px; cursor: pointer;}
.program_lay{ margin: 0 20px;}
.program_div{ padding:20px 25px; border-bottom: 1px solid #EEEEEE;}
.program_div img{ vertical-align: middle; margin-right: 20px;}
.program_div:last-child{ border-bottom: none; padding-bottom: 30px;}
.program_txt{ display:inline-block; vertical-align: middle;}
.program_name{ color: #5D636A;}
.program_line{ color:#84898F;margin-top: 3px; }
.program_div:nth-child(1) .program_img{ background: #03B691;}
.program_div:nth-child(2) .program_img{ background: #4E8CEE;}
.program_div:nth-child(3) .program_img{ background: #1C92FF;}
.program_div:nth-child(4) .program_img{ background: #505FB4;}
.program_div:nth-child(5) .program_img{ background: #3FB4FF;}
.topology_lay{ margin: 20px; height: 380px;}
.contact_infos{ margin: 40px 60px 90px 60px; }
.contact_infos input{ background: #FBFBFB;border-radius: 3px;border: 1px solid #DDDFE0; font-size: 16px; padding: 12px 20px; width: 480px;}
.contact_infos input:first-child{ margin-right:24px; }
.contact_btn button,.contact_btn a{ display:inline-block;width: 150px; height: 36px; line-height: 36px; border-radius: 18px; font-size: 14px; cursor: pointer;}
.contact_sale{ background: #3862EC; border: 1px solid #3862EC; color: #fff;  }
.down_report{ background: #FBFBFB; border: 1px solid #DDDFE0; color: #5D636A;margin-left: 40px; }
.choose_tip{ font-size: 13px; color: #C84948; margin:0 0 20px 10px;}
.contact_btn{ padding-bottom: 50px;}
.dialog_div{ position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 1040;}
.foot_line{ height: 100px;}
.modal-open {
    overflow: hidden;
}
.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}
.modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition:      -o-transform .3s ease-out;
    transition:         transform .3s ease-out;
    -webkit-transform: translate(0, -25%);
    -ms-transform: translate(0, -25%);
    -o-transform: translate(0, -25%);
    transform: translate(0, -25%);
}
.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}
.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}
.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}
.modal-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
}
.modal-backdrop.fade {
    filter: alpha(opacity=0);
    opacity: 0;
}
.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .5;
}
.modal-header {
    min-height: 16.42857143px;
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}
.modal-header .close {
    margin-top: -2px;
}
.modal-title {
    margin: 0;
    line-height: 1.42857143;
    color:#5D636A ;
    font-weight: normal;;
}
.modal-body {
    position: relative;
    padding: 15px;
}
.close {
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}
.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    filter: alpha(opacity=50);
    opacity: .5;
}
button.close {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
}
.modal-dialog {
    width: 700px;
    margin: 30px auto;
}
#editFeature .modal-dialog{ width: 800px;}
.save_btn button{ width: 100px;height: 36px; line-height:36px;border-radius: 18px; cursor: pointer; margin-bottom: 20px;}
.btn_save{ border: 1px solid #3862EC; color: #fff;background: #3862EC; margin-right: 20px;}
.btn_close{ border: 1px solid #DDDFE0;background: #FBFBFB; color:#5D636A; }
.scene_switch{ position: relative; display:inline-block; width: 43px; height: 20px;background-color: #B9BCC8;border: 1px solid #E6E9EA;border-radius: 10px;cursor: pointer;transition: background-color 0.3s; vertical-align: middle;}
.scene_switch_node{position: absolute;top:1px;left: 0;width: 17px;height: 17px;
    background-color: #F8F8F8;
    border-radius: 100%;
    box-shadow: 0 3px 1px 0 rgb(0 0 0 / 5%), 0 2px 2px 0 rgb(0 0 0 / 10%), 0 3px 3px 0 rgb(0 0 0 / 5%);
    transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
}
.scene_switch_on{ background-color: #4477FF;}
.scene_switch_on .scene_switch_node{ transform: translateX(25px);}
.type_select{ position: relative; cursor: pointer;}
.product_list{ background: #F5F5F5; width: 100px; position: absolute; left: 10px; top:19px; display: none;}
.type_select img{ margin-left: 3px; display: inline-block;}
.product_list li{ padding: 10px; text-align: left;}
.product_list li:hover{ background: #E0E8F1;}
.type_select:hover .product_list{ display: block;}
.product_lists .product_list_name .fr{ background: url("../image/select.png") no-repeat; width: 10px; height: 6px;; display: inline-block;}
.product_lists{ margin: 0 20px 10px 20px; color: #5C6269; }
.product_list_name{ background: #E0E8F1;border: 1px solid #E0E8F1; padding: 10px 10px 10px 15px; cursor: pointer;}
.product_list_name .fr{ margin: 5px 10px 0 0; vertical-align: middle;}
.product_list_detail{ border: 1px solid #E0E8F1;max-height: 260px; overflow-y: auto;}
.product_list_div{ margin: 10px 20px;}
.product_list_open .product_list_name  .fr{transform:rotate(0deg); }
.product_list_close .product_list_name  .fr{transform:rotate(-90deg); }
.product_list_close .product_list_detail{ display: none;}
.product_table_type{ margin-bottom: 30px;}

.scheme_table {width: 100%; border-collapse: separate; border-spacing: 0;}
.scheme_table img {width: 60px; height: 60px;}

.contact_infos .error_input{border:1px solid #C84948; }
.contact_infos input.error_input::-webkit-input-placeholder { color: #C84948;}.topology_lay{ margin:0 20px 20px 20px; height: 100%; text-align: center}
.topology_lay img{width: 900px; margin: 0 auto;}

.loads{
    width: 50px;
    height: 50px;
    position: relative;
    margin: 20% auto 0 auto;
}
.loads span{
    width: 8px;
    height: 8px;
    background-color: #fff;
    position: absolute;
    border-radius: 50%;
    -webkit-animation: load 1.04s ease infinite;
}
@-webkit-keyframes load {
    0% {
        -webkit-transform: scale(1.2);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(.3);
        opacity: 0.5;
    }
}
.loads span:nth-child(1){
    left: 0;
    top: 50%;
    margin-top: -4px;
    -webkit-animation-delay: 0.13s;
}
.loads span:nth-child(2){
    left: 5px;
    top:5px;
    -webkit-animation-delay: 0.26s;
}
.loads span:nth-child(3){
    left: 50%;
    top:0;
    margin-left: -4px;
    -webkit-animation-delay: 0.39s;
}

.loads span:nth-child(4){
    right: 5px;
    top:5px;
    -webkit-animation-delay: 0.52s;
}
.loads span:nth-child(5){
    right: 0;
    top: 50%;
    margin-top: -4px;
    -webkit-animation-delay: 0.65s;
}
.loads span:nth-child(6){
    right: 5px;
    bottom:5px;
    -webkit-animation-delay: 0.78s;
}
.loads span:nth-child(7){
    left: 50%;
    bottom:0;
    margin-left: -4px;
    -webkit-animation-delay: 0.91s;
}
.loads span:nth-child(8){
    left: 5px;
    bottom:5px;
    -webkit-animation-delay: 1.04s;
}

.error_toast{ position: fixed; top: 40%;left: 50%;   font-size: 14px; color: #fff;background-color: rgba(0, 0, 0, 0.7);border-radius: 8px;transform: translate3d(-50%, -50%, 0);padding: 15px;z-index: 2006;}
.van-fade-enter-active{animation:.3s van-fade-in both ease-out}
.van-fade-leave-active{animation:.3s van-fade-out both ease-in}