body {width:expression(document.body.clientWidth <= 1200? "1200px": "auto");min-width:1200px; }

.main-box{ width:1200px; box-sizing:border-box;margin: 0 auto;  }

.header{ width: 100%; height: auto;  }
.header-cont{ width: 100%; height: 80px; background: #e5592c; }
.header-logo{ float: left; width: 180px; height: 80px;  position: relative;  }
.header-logo img{ width: auto;height: auto;max-height:100%;max-width:100%;left: 50%;top: 50%; position: absolute;transform: translate3d(-50%,-50%,0);-webkit-transform: translate3d(-50%,-50%,0); }
.header-dlzc{ float: right; text-align: right; height: 80px; line-height: 80px;   }
.header-dlzc a{ color:#fff; margin-left: 30px;  font-size: 16px; display: inline-block;    }
.header-name{ float: right; color:#fff; font-size: 16px;line-height: 80px;height: 80px;}

.nav{ width: 100%; height:50px; background: #fff;    }
.nav a{ font-size: 16px; color: #333; line-height: 50px; display: inline-block; margin-right:35px; font-weight: bold;  }
.nav a.on,.nav a:hover { color: #e5592c; }
.grey-bg{ background: #f5f5f5; }

.home-banner{ padding-top: 10px; box-sizing: border-box; width: 100%; height: auto; position: relative; }
.home-cont{ width: 100%; height: auto; padding-top: 30px; box-sizing: border-box; padding-bottom:30px;   }
.home-cont-txt{ width:1200px; margin:0 auto; line-height: 30px; font-size: 15px; color: #333;  }
.home-cont-txt img{ max-width: 100%; margin: 30px auto; display: block;   }

.dz-btn a{ width: 300px; height: 60px; background: #58bc00; margin:50px auto 20px; display: block; text-align: center; line-height: 60px; font-size: 22px; color: #fff; border-radius: 10px; position: relative;   }
.dz-btn a:before{ width: 298px; height: 58px; border:1px solid rgba(255, 255, 255, 0.5); border-radius: 10px; position: absolute; left: 1px; top: 1px; content: ""; box-sizing: border-box;  }

.page-banner{ padding-top: 10px; box-sizing: border-box; width: 100%; height: auto; position: relative; }
.page-banner .main-box{ width: 100%;  }
.page-banner img{ width: 100%; height: 500px; display: block; }

.cp-list{ width: 1200px; margin: 30px auto;  }
.cp-list a{ margin-bottom: 15px;width: 100%; height:180px; background: #fff; display: block; padding: 14px 15px; box-sizing: border-box; border: 1px solid #ccc; box-sizing: border-box;transition: all .3s; }
.cp-list a:hover{ transition: all .3s; border-color:#e5592c ; }
.cp-pic{ float: left; width: 190px; height: 150px;  overflow: hidden; }
.cp-pic img{ width: 100%; height: 100%; object-fit: cover;   }

.cp-nr{ width: 950px; float: right; height: 150px; position: relative; padding-top: 10px; box-sizing: border-box;    }
.cp-nr h5{ font-size: 20px; color: #333; line-height: 30px;   }
.cp-jt{ position: absolute; right:20px; bottom: 10px;  }
.cp-jt img{ transition: all .3s;  }
.cpjt-g{ display: block;  }
.cpjt-h{ display: none;  }

.cp-list a:hover .cp-nr h5{ color: #e5592c; transition: all .3s;}
.cp-list a:hover .cpjt-g{  display: none; transition: all .3s; }
.cp-list a:hover .cpjt-h{  display: block;  transition: all .3s;}

.zcdl-cont{ width:500px; height: auto; margin: 0 auto; display: block; }
.zcdl-title{ width: 100%; height: 80px; line-height: 80px; color: #e5592c; font-size: 24px; font-weight: bold; text-align: center; }
.zcdl-box{ width: 100%; height: auto; background: #fff; border:1px solid #ccc; box-sizing: border-box; padding: 50px 70px;  }
.zcdl-item{ width: 100%; margin-bottom: 30px; padding-left: 100px; height: 40px; box-sizing: border-box; position: relative;   }
.zcdl-item-txt{ width: 100px;   position: absolute; left: 0px; top:0px; height: 40px; line-height: 40px; font-size: 16px; color: #333; text-align: right; padding-right:30px; box-sizing: border-box; }
.zcdl-item-cont{ width: 100%; height: 40px; position: relative;   }
.zcdl-item-cont input{ width: 100%; height: 40px; background: #f5f5f5; border: 1px solid #ccc; padding:0 15px; box-sizing: border-box; display: block; font-size: 16px; color: #333;  }
.zcdl-yzm input{ width: 140px; float: left;  }
.zcdl-yzm img{  cursor: pointer; width: 100px; float:right; height: 40px;  }

.zcdl-btn a{ width: 230px; height: 60px; background: #e5592c; margin:50px auto 30px; display: block; text-align: center; line-height: 60px; font-size: 22px; color: #fff; border-radius: 10px; position: relative;   }
.zcdl-btn a:before{ width: 228px; height: 58px; border:1px solid rgba(255, 255, 255, 0.5); border-radius: 10px; position: absolute; left: 1px; top: 1px; content: ""; box-sizing: border-box;  }


.zcdl-zc-cont{ width: 100%; height: 40px; background: #f5f5f5; border: 1px solid #ccc;  position: relative;  padding:0 70px 0 15px; box-sizing: border-box;  }
.zcdl-zc-cont input{ width: 100%; height: 40px; box-sizing: border-box; display: block; background: none; line-height: 38px; font-size: 16px; color: #333;  }
.zcdl-zc-cont span{ position: absolute; right: 15px; top:0px; line-height: 40px; font-size: 14px; color: #999; }

.mb10{ margin-bottom: 10px!important;  }
.zcdl-xz{ text-align: center; width: 100%;  }
.zcdl-xz a{ display: inline-block; line-height: 40px; margin: 0 10px; font-size: 15px; color: #999;  }
.zcdl-xz a span{ display: inline-block; width: 18px; height: 18px; background: #f5f5f5; border: 1px solid #ccc; border-radius: 18px; margin:-5px 10px 0 0; vertical-align: middle; position: relative;  }
.zcdl-xz a span:before{ width: 12px; height: 12px; position: absolute; content: ""; background:#e5592c; border-radius:10px; left:50%; top:50%; margin-top:-6px; margin-left:-6px; display:none ; }
.zcdl-xz a.on span{ background: #fff; border-color:#e5592c ;  }
.zcdl-xz a.on span:before{ display: block; }

.zcdl-bz{ font-size: 16px; text-align: center; color: #999;  }


.fw-cont{  width: 1200px; margin: 30px auto; }
.fw-txt{ font-size: 16px; color: #333; line-height:30px; margin-bottom: 30px; }
.fw-step{ width: 100%; height: auto;  }
.fw-step a{ width: 100%; display: block; height: 110px; border: 1px solid #ccc; border-radius: 10px; background: #fff; position: relative; box-sizing: border-box; padding: 0 150px 0 110px;color: #ccc; margin-bottom: 20px;    }
.fw-step a span{ position: absolute; left: 25px; font-size: 42px; top: 0px; line-height: 110px;  }
.step_img{height:30px}
.fw-step a em{ position: absolute; right: 25px; font-size: 20px; top: 0px; line-height: 110px;  }
.fw-step a p{ width: 100%; height: 110px; line-height: 110px; font-size: 30px;  }
.fw-step a.on{ color: #58bc01;  }
.fw-step a.on em{ color: #666666; }


/*测量数据页面*/
.data-cont{ width: 1200px; margin: 0 auto; padding-top:50px;   }
.data-title{ text-align: center; font-size: 22px; color: #000; }
.data-add, .data-save{ width: 100%; text-align: center; height: auto; margin:30px 0;  }
.data-add a, .data-save a{ width: 190px; height: 60px; background: #4CAF50; display: inline-block; line-height: 60px; border-radius:8px; font-size: 20px; color: #fff; transition: all .3s;     }
.data-add a:hover,.data-save a:hover{ background: #45a049;transition: all .3s;  }

.data-foot{ width: 100%; height:80px; background: #fff; position: fixed; left: 0px; bottom: 0px; z-index: 88; padding-top: 10px; box-sizing: border-box;   }
.data-foot-cont{ margin: 0 auto;  width: 1200px; box-sizing: border-box; height: 60px;  text-align: center;  }
.data-foot-cont a{ width: 30%; height: 60px; background: #673bb7; display: inline-block; line-height: 60px; border-radius:8px; font-size: 20px; color: #fff; transition: all .3s; margin: 0 1.2%;    }
.data-foot-cont a:hover{ transition: all .3s;background: #5E35B1;  }
.data-foot-cont a.save-btn{ background:#4CAF50 ; }
.data-foot-cont a.save-btn:hover{ background: #45a049;transition: all .3s;  }

.data-zw{ height: 80px; width: 100% ; }

#windows-list{ width:100%; height: auto; box-sizing: border-box;  }
.window-container{ background: #fff; margin-bottom: 20px;  padding: 10px 20px 20px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); width: 100%; box-sizing: border-box;}

.window-header { width: 100%; height:60px;   margin-bottom: 20px; border-bottom: 1px solid #eee; position: relative;}
.window-header h3{ height: 60px; line-height: 60px;  font-weight: bold; color: #000; font-size: 18px;   }

.delete-btn { position: absolute; right: 0px; top: 12.5px;  padding: 8px 15px;background-color: #ff4444;color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; }
.delete-btn:hover { background-color: #cc0000; }

.window-type,.measurement-input{  margin-bottom: 20px; }
.window-type label{ width: 70px;  }
.window-type select { padding: 5px 10px; border-radius: 4px;  border: 1px solid #ddd;}

.measurement-input h4 {color: #666;margin-bottom: 10px; font-weight: bold; }

.input-group {margin-bottom: 10px;}
.x-item{ float: left; margin-right: 20px;height:42px}
.input-label {display: inline-block; width: 110px;text-align: right}
.measurement-input input {width: 115px;padding: 5px 10px;border: 1px solid #ddd;border-radius: 4px;}

.notes-input h4{ color: #000;font-weight: bold; margin-bottom: 10px; }


.select-group { float: left;  margin-bottom: 10px; margin-right: 20px; }
.select-group select {padding: 5px 10px;border: 1px solid #ddd;border-radius: 4px;width: 120px; transition: border-color 0.3s ease; box-sizing: inherit;}
.select-group select:hover { border-color: #999;}
.select-group select:focus {border-color: #4CAF50; outline: none;box-shadow: 0 0 5px rgba(76, 175, 80, 0.2);}
.select-group select:disabled {background-color: #f5f5f5;cursor: not-allowed;}
.select-group .input-label{ text-align: right; }

.n-qtbcsm{ margin-bottom: 10px; width: 100%;  }
.n-qtbcsm textarea{ width: 40%;  padding: 8px;  border: 1px solid #ddd;  border-radius: 4px;  resize: vertical; display: block; box-sizing: border-box; }
.n-qtbcsm textarea {transition: border-color 0.3s ease;}
.n-qtbcsm textarea:hover { border-color: #999; }
.n-qtbcsm textarea:focus { border-color: #4CAF50; outline: none; box-shadow: 0 0 5px rgba(76, 175, 80, 0.2);}


.preview-container { margin-top: 20px; width: 100%; box-sizing: border-box;   }
.photo-section, .drawing-section {float: left; box-sizing: border-box;background: #fafafa;padding: 15px;border-radius: 5px; width: 49%; height: 390px;  }
.photo-section{ float: right; }

.photo-section h4, .drawing-section h4 {color: #666; font-weight: bold; margin-bottom: 10px; }
canvas {border: 1px solid #ddd; border-radius: 4px;background-color: white;}


/* 报表样式 */
.report-container {position: fixed; top: 0;left: 0; background: rgba(0, 0, 0, 0.5);z-index: 1000; width: 100%; height: 100%; display: none;  }

.report-content {background: #fff; padding:0 20px 20px;box-sizing: border-box;border-radius: 10px;width:70%;height: 90%; position: absolute; top:50%;left:50%; transform:translate(-50%,-50%);overflow: auto;}

.report-header {height: 70px;  width: 100%; position: relative;   line-height: 70px; }
.report-header h2{ font-size: 22px; height: 70px; line-height: 70px;  color: #000; font-weight: bold;float: left; }
.report-header button{ float: right; margin-top: 20px; }

.close-report { padding: 5px 10px;background: #ff4444;color: white;border: none;border-radius: 4px;cursor: pointer;}
.close-report:hover { background: #cc0000;}

.print-report { padding: 5px 10px;background: #4CAF50;color: white;border: none;border-radius: 4px;cursor: pointer;margin-right: 10px;}
.print-report:hover {background: #45a049;}

.report-table {width: 100%;border-collapse: collapse;margin-bottom: 20px;}

.report-table th, .report-table td {border: 1px solid #ddd; padding: 8px;text-align: left;}
.report-table th {background-color: #f5f5f5;font-weight: bold;}


.sj-cont{ width: 1200px; margin: 0 auto; padding-top:50px;   }
.sj-title{ text-align: center; font-size: 22px; line-height: 30px; height: 30px; margin-bottom: 20px;  color: #000; }
.sj-tj-cont{ width: 100%; background: #fff; border: 1px solid #ccc; padding:0px 25px 10px; box-sizing: border-box; }

.sj-tj-item{ width: 100%; height: auto; margin-bottom: 15px;  }
.sj-tj-bt{ font-size: 16px; color: #000; font-weight: bold; height: 50px; line-height:50px;  }
.sj-tj-pic{  width: 100%; height: auto; margin-bottom: 20px;  }
.sj-tj-pic img{ width: 100%; display: block;  }
.sj-item{ margin-bottom:30px; width: 100%;  }
.sj-item h5{ font-size: 24px; color: #666; line-height: 35px;  }
.sj-item p{ font-size: 20px; color: #666; line-height: 35px;  }

.sj-btn{ text-align: center; width: 100%; padding: 30px 0 50px; box-sizing: border-box; }
.sj-btn a{  width: 46%; height: 60px; background: #673bb7; display: inline-block; line-height: 60px; border-radius:8px; font-size: 20px; color: #fff; transition: all .3s; margin: 0 1.2%;    }
.sj-btn a:hover{ transition: all .3s;background: #5E35B1;  }

.wzbt-title{ font-size: 18px; color: #000; margin-bottom: 15px;  font-weight: bold; text-align: center; line-height: 30px;  }

.flexslider .slides img{ height: 500px!important;  }
.footer{ width: 1200px; margin: 0 auto; }
.footer-cont{  width: 100%;  border-top: 1px solid #ccc; text-align: center; padding: 10px 0;  }
.footer-txt,.footer-dz{ line-height: 30px; font-size:16px;color: #000;   }
.footer-txt a{ margin-left: 20px; color: #333; }
.footer-txt a:hover{  color: #58bc00; }


.data-add{ transition: .3s all;  }
.data-add.fixed{ position: fixed; left: 0px; top: 0px; height: 80px;    z-index: 9; margin: 0px 0; background: #fff; padding-top: 10px; box-sizing: border-box;  transition: .3s all; border-bottom: 1px solid #f5f5f5;    }
.data-nzw{ width: 100%; height: 140px; display: none;    }
.data-nzw.fixed{ display: block; }




/* 添加工具提示的样式 */
[title] {
    position: relative;
    cursor: help;
}

[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
}








/*主色 e5592c*/
.pc-hide{ display: none;  }



/*1220*/
@media screen and (max-width: 1220px) {

    body{ min-width: 100%; overflow-x: hidden;  }
    .main-box{  width:100%;box-sizing: border-box; }

    .header-cont .main-box{ padding: 0 30px;  }
    .nav .main-box{ padding: 0 30px; }

    .home-cont-txt{ width: 100%; padding: 0 30px; box-sizing: border-box; }

    .fw-cont{  width:100%; padding: 0 30px; box-sizing: border-box; }

    .data-cont{ width: 100%; padding:50px 30px 0; box-sizing: border-box; }
    .data-foot-cont{ width: 100%;padding: 0 10px;  }

    .sj-cont{ width: 100%; padding:20px 30px 0; box-sizing: border-box; }
    .footer{ width: 100%;  padding: 0px 30px; box-sizing: border-box;}



    .cp-list{ width: 100%; padding: 0 30px; box-sizing: border-box; }
    .cp-pic{ width: 36%;   }
    .cp-nr{ width: 60%;   }

    .flexslider .slides img{ height: auto!important;  }
    .page-banner img{ height: auto; }
    .door-frame-width{width:auto}


}


/*1024*/
@media screen and (max-width: 1024px) {


    .drawing-section canvas,.photo-section canvas{ width: 100%!important;  }


}




/*手机端*/
@media screen and (max-width: 640px) {

    .sj-hide{ display: none; }
    body{ width: 100%; min-width: 100%; }
    .main-box{ width: 100%; }

    .header-cont .main-box{ padding: 0 0px;  }
    .nav .main-box{ padding: 0 0px; }

    .header-cont{ height: 60px; padding: 0 20px; box-sizing: border-box;   }
    .header-logo{ height: 60px; width: 120px;  }
    .header-name{ height: 60px; line-height: 60px; font-size: 14px;   }
    .header-dlzc{ height: 60px; line-height: 60px;  }
    .header-dlzc a{ font-size: 14px; margin-left: 20px;  }
    .nav{ height: 35px; padding: 0 20px; box-sizing: border-box; }
    .nav a{ font-size: 14px; line-height: 35px; margin-right: 8px;  }
    .nav a:last-child{ margin-right: 0px;  }
    .home-banner{ padding-top: 5px;  }

    .flex-control-nav{ bottom: 2px!important; }
    .flex-control-nav li{ margin: 0 5px!important;  }
    .flex-control-paging li a{width:10px!important; height:10px!important;border-radius:10px!important; }

    .home-cont{ padding: 20px 20px 20px;  }
    .home-cont-txt{ width: 100%; line-height: 22px;  padding: 0 0px; font-size: 14px;  }
    .home-cont-txt img{ max-width: 90%; margin: 20px auto; }

    .dz-btn a{ width:60%; height: 45px; margin: 30px auto 10px; line-height: 45px; font-size: 18px; border-radius: 5px;  }
    .dz-btn a:before{   width: 98.8%; height: 43px; border-radius: 5px;  }

    .page-banner{ padding-top: 5px;  }

    .cp-list{ width: 100%; margin: 15px auto 20px ; padding: 0 20px; box-sizing: border-box; }
    .cp-list a{ margin-bottom: 10px; height: 120px; padding: 8px 10px;  }
    .cp-pic{ width: 36%; height:100px;  }
    .cp-nr{ width: 60%; height: 100px; padding-top: 10px;  }
    .cp-nr h5{ font-size: 14px; line-height: 20px;  }
    .cp-jt{ right: 10px; bottom: 10px;  }
    .cp-jt img{ width: 15px;  }

    .zcdl-cont{ width: 100%; padding: 0 12px; box-sizing: border-box; }
    .zcdl-title{ height: 50px; line-height: 50px; font-size: 18px;  }
    .zcdl-box{ padding: 30px 30px ; }
    .zcdl-item{ margin-bottom: 15px;  padding-left:70px;  }
    .zcdl-item-txt{ padding-right: 1px; font-size: 14px;  width: 60px; }
    .zcdl-item-cont input{ font-size: 14px; padding: 0 10px;  }
    .zcdl-yzm input{ width: 100px;  }


    .zcdl-btn a{ width:45%; height: 45px; margin: 30px auto 30px; line-height: 45px; font-size: 18px; border-radius: 5px;  }
    .zcdl-btn a:before{   width: 98.8%; height: 43px; border-radius: 5px;  }
    .zcdl-zc-cont span{ font-size: 12px;  }
    .zcdl-xz a{ font-size: 13px; margin: 0 8px;  }
    .zcdl-xz a span{ margin: -2px 5px 0 0; width: 14px; height: 14px; border-radius: 14px;  }
    .zcdl-xz a span:before{ width: 8px; height: 8px; margin-top: -4px; margin-left: -4px;  }
    .zcdl-bz{ font-size: 13px;  }

    .fw-cont{  width:100%; margin:20px auto; padding: 0 20px; box-sizing: border-box; }
    .fw-txt{ font-size: 14px;line-height:25px; margin-bottom: 15px; }
    .fw-step a{  height:80px; border-radius: 5px ; padding: 0 110px 0 50px;  margin-bottom:15px;    }
    .fw-step a span{ left:15px; font-size: 30px; line-height:80px;  }
    .fw-step a em{  right: 15px; font-size: 14px; line-height:80px;  }
    .fw-step a p{  height:80px; line-height: 80px; font-size:20px;  }

    .step_img{height:20px}



    .data-cont{ width: 100%; padding:20px 15px 0; box-sizing: border-box; }
    .data-title{ font-size: 18px;  }
    .data-add, .data-save{ margin:20px 0;  }
    .data-add a, .data-save a{ width: 140px; height: 40px; line-height: 40px; font-size: 15px;  border-radius: 5px;  }
    .data-zw{ height: 60px;  }
    .data-foot{ height: 60px;  }
    .data-foot-cont{ width: 100%; height: 40px; padding: 0 5px; box-sizing: border-box;  }
    .data-foot-cont a{ height:40px; line-height: 40px; font-size: 15px; border-radius: 5px; margin: 0 1%;  }

    .window-header{ height: 40px; margin-bottom: 15px;  }
    .window-header h3{ height: 40px; line-height: 40px; font-size: 16px; }
    .delete-btn{ padding: 4px 10px;  top: 4px;  }

    .window-container{ padding: 10px 15px 15px;  }
    .window-type{ margin-bottom: 10px; }
    .measurement-input{ margin-bottom: 0px; }
    .x-item{ width: 100%; margin-right: 0px; margin-bottom: 10px;  }
    .notes-input .input-group{ margin-bottom: 0px;  }
    .n-qtbcsm textarea{ width: 100%; }
    .preview-container{ margin-top: 15px;  }
    .photo-section, .drawing-section{ width: 100%; height: auto; padding: 10px;  }
    .drawing-section canvas,.photo-section canvas{ width: 100%!important;  }
    .drawing-section{ margin-bottom: 10px;  }

    .report-content{ width: 90%;  }
    .report-header{ height: 50px; line-height: 50px;  }
    .report-header h2{ font-size: 14px;  height: 50px; line-height: 50px;  }
    .report-header button{ margin-top: 10px; }
    .report-table th,.report-table td{ font-size: 12px;  }
    .report-table td img{ max-width: 100px!important; }
    #report-data{ width: 100%; overflow-x: auto; }


    .sj-cont{ width: 100%; padding:20px 15px 0; box-sizing: border-box; }
    .sj-title{ font-size: 18px; margin-bottom: 10px;   }
    .sj-tj-cont{ padding: 0 15px 10px;  }
    .sj-tj-bt{ font-size: 15px;  }
    .sj-tj-pic{ margin-bottom: 15px;  }
    .sj-item{ margin-bottom: 20px;  }
    .sj-item h5{ font-size: 18px; line-height: 25px;  }
    .sj-item p{ font-size: 14px; line-height: 25px;  }
    .sj-btn a{ height: 40px; line-height: 40px; font-size: 16px; border-radius: 5px;  }

    .wzbt-title{ font-size: 16px; margin-bottom: 10px;  }
    .flexslider .slides img{ height: auto!important;  }

    .footer{ width: 100%;  padding: 0px 20px; box-sizing: border-box;}
    .footer-txt,.footer-dz{ line-height: 25px; font-size:13px;  }
    .footer-txt a{ margin-left: 10px; }

    .page-banner img{ height: auto; }

    .data-add.fixed{  height: 60px;   }
    
    .x-item{ height:auto}
    .door-frame-width{width:290px;text-align: left}


}